code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,337 @@
|
||||
<!--角色管理树组件-->
|
||||
<template>
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
:label-width="labelWidth"
|
||||
class="add-form-item expand-form-item"
|
||||
:class="{'form-item-disabled': disabled}"
|
||||
>
|
||||
<el-input
|
||||
:title="checkedName"
|
||||
v-model="checkedName"
|
||||
:placeholder="'请选择' + config.attrName"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:id="config.attrField"
|
||||
@click.native="handleClick"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-drawer
|
||||
:title="config.attrName"
|
||||
:visible.sync="visible"
|
||||
:wrapper-closable="false"
|
||||
size="350px"
|
||||
append-to-body
|
||||
@opened="drawerOpen"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<div class="search-area" v-if="isRoleHierarchy">
|
||||
<div class="left">
|
||||
<el-form inline class="label-input-form">
|
||||
<el-form-item label="角色组" class="search-item">
|
||||
<el-select
|
||||
v-model="roleHierarchy"
|
||||
filterable
|
||||
@change="roleHierarchyChange"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleHierarchyOption"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:label="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<laws-tree
|
||||
:ref="config.attrField"
|
||||
:zNodes="zNodes"
|
||||
:treeDivId="config.attrField + 'Tree'"
|
||||
:editable="false"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:check-enable="true"
|
||||
:onlyChecked="true"
|
||||
deptSelect
|
||||
expandFirst
|
||||
initNotCheck
|
||||
:checkIdList="checkIdList"
|
||||
@treeOnCheck="handleTreeOnCheck"
|
||||
></laws-tree>
|
||||
</div>
|
||||
<div class="demo-drawer-footer">
|
||||
<el-button
|
||||
round
|
||||
class="common-button-primary"
|
||||
icon="el-icon-check"
|
||||
type="primary"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 栅格比例
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
// 原数据对象
|
||||
dataModel: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
// 是否显示全部的角色树
|
||||
allRole: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示角色组下拉框
|
||||
isRoleHierarchy: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 角色组名称
|
||||
roleHierarchyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
treeCheckNode: [],
|
||||
checkedName: '',
|
||||
roleList: [],
|
||||
loading: false,
|
||||
zNodes: [],
|
||||
roleHierarchy: '',
|
||||
roleHierarchyOption: [],
|
||||
checkIdList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return `请选择${this.config.attrName}`
|
||||
},
|
||||
showMessage () {
|
||||
return `${this.config.attrName}不能为空`
|
||||
},
|
||||
isRequired () {
|
||||
return !!this.config.isMust
|
||||
},
|
||||
isString (str) {
|
||||
return (typeof str === 'string') && str.constructor === String
|
||||
},
|
||||
ZRBM () {
|
||||
return this.dataModel['ZRBM'] || ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
this.getRoleGroup()
|
||||
if (!this.allRole) {
|
||||
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
||||
this.$message.warning('请先选择责任部门')
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
// this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName)
|
||||
}
|
||||
} else {
|
||||
this.visible = true
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, '', this.roleHierarchyName, treeNodeList)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取选中的部门下子子部门
|
||||
getDeptChild () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId: this.dataModel.ZRBM
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
let treeNodeList = res.data
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.isParent = true
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
resolve(res.data)
|
||||
}
|
||||
}, e => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 查询指定角色树
|
||||
getUserByRole (orgId, roleHierarchy, roleHierarchyName, treeNodeList) {
|
||||
this.loading = true
|
||||
this.$http.get('sys/role/getRoleByOrgId', {
|
||||
orgId,
|
||||
roleHierarchy,
|
||||
roleHierarchyName,
|
||||
// type: 0
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
if (key === 'usid') {
|
||||
obj.id = res.data[i][key]
|
||||
} else if (key === 'orgId') {
|
||||
obj.pId = res.data[i][key]
|
||||
} else {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
}
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
// 该节点为角色
|
||||
if (!treeNodeList[i].orgName) {
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].dyOrgId
|
||||
zObj.name = treeNodeList[i].name
|
||||
zObj.icon = 'static/images/user.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
} else {
|
||||
// 该节点为机构
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.oldname = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zObj.isParent = true
|
||||
zObj.isChecked = true
|
||||
}
|
||||
if (zObj.pId === null && !zObj.isParent) {
|
||||
zObj.pId = ''
|
||||
zObj.orgName = '未分配人员'
|
||||
}
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
this.zNodes = zNodes
|
||||
}
|
||||
}, e => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleTreeOnCheck (treeCheckNode) {
|
||||
this.treeCheckNode = treeCheckNode
|
||||
},
|
||||
handleTreeDrawerConfirm () {
|
||||
const checkedList = []
|
||||
const checkedNameList = []
|
||||
this.treeCheckNode.map(item => {
|
||||
checkedList.push(item.id)
|
||||
checkedNameList.push(item.oldname || item.name)
|
||||
})
|
||||
this.checkedName = checkedNameList.join(',')
|
||||
this.$emit('input', checkedList.join(','))
|
||||
this.$emit('on-checked', this.checkedName)
|
||||
this.visible = false
|
||||
},
|
||||
handleTreeDrawerCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
// 查询角色组
|
||||
getRoleGroup () {
|
||||
this.$http.get('sys/role/getRoleGroup', {}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
if (res.ok) {
|
||||
this.roleHierarchyOption = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 角色组change查询角色树
|
||||
roleHierarchyChange (val) {
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(this.dataModel.ZRBM, val, '', treeNodeList)
|
||||
})
|
||||
},
|
||||
// 赋值回显
|
||||
drawerOpen () {
|
||||
this.checkIdList = this.value ? this.value.split(',') : []
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.checkedName = newVal !== '' ? this.checkedName : ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.checkedName = this.config.valueName || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.search-area{
|
||||
padding: 10px 0 0 10px;
|
||||
.search-item{
|
||||
margin: 0;
|
||||
}
|
||||
/deep/.el-input__inner{
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user