338 lines
9.1 KiB
Vue
338 lines
9.1 KiB
Vue
<!--角色管理树组件-->
|
|
<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>
|