288 lines
8.7 KiB
Vue
288 lines
8.7 KiB
Vue
<!--角色管理树组件-->
|
|
<template>
|
|
<!-- <el-col :span="span">-->
|
|
<span>
|
|
<el-form-item
|
|
:label="config.attrName"
|
|
:prop="config.attrField"
|
|
class="search-item"
|
|
:class="{'form-item-disabled': disabled}"
|
|
>
|
|
<el-input
|
|
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
|
|
destroy-on-close
|
|
>
|
|
<div class="demo-drawer-content">
|
|
<div class="search-area">
|
|
<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
|
|
v-if="visible"
|
|
:ref="config.attrField"
|
|
:zNodes="zNodes"
|
|
:treeDivId="config.attrField + 'Tree'"
|
|
:editable="false"
|
|
:chkboxType="{ 'Y': '', 'N': '' }"
|
|
:check-enable="checkEnable"
|
|
:onlyChecked="checkEnable"
|
|
deptSelect
|
|
@treeOnCheck="handleTreeOnCheck"
|
|
@treeDblClick="handleTreeDblClick"
|
|
></laws-tree>
|
|
</div>
|
|
<div class="demo-drawer-footer" v-if="checkEnable">
|
|
<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>
|
|
</span>
|
|
<!-- </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
|
|
},
|
|
isSearch: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 多选和单选参数
|
|
checkEnable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
treeCheckNode: [],
|
|
checkedName: '',
|
|
roleList: [],
|
|
loading: false,
|
|
zNodes: [],
|
|
roleHierarchy: '',
|
|
roleHierarchyOption: []
|
|
}
|
|
},
|
|
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.isSearch) {
|
|
// if (!this.dataModel.orgId || this.dataModel.orgId === '') {
|
|
// this.$message.warning('请先选择部门')
|
|
// } else {
|
|
this.visible = true
|
|
this.getUserByRole(this.dataModel.orgId)
|
|
// }
|
|
} else {
|
|
// if (!this.ZRBM || this.ZRBM === '') {
|
|
// this.$message.warning('请先选择责任部门')
|
|
// } else {
|
|
this.visible = true
|
|
this.getUserByRole(this.ZRBM)
|
|
// }
|
|
}
|
|
} else {
|
|
this.visible = true
|
|
this.getUserByRole(this.ZRBM)
|
|
}
|
|
},
|
|
// 查询指定角色树
|
|
getUserByRole (orgId, roleHierarchy) {
|
|
return new Promise((resolve, reject) => {
|
|
this.loading = true
|
|
this.$http.get('sys/role/getRoleByOrgId', {
|
|
roleHierarchy,
|
|
type: 0
|
|
}, {
|
|
_this: this
|
|
}, res => {
|
|
this.loading = false
|
|
if (res.ok) {
|
|
const treeNodeList = []
|
|
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 = {}
|
|
zObj.id = treeNodeList[i].id
|
|
zObj.pId = treeNodeList[i].pId
|
|
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
|
|
if (zObj.pId === null && !zObj.isParent) {
|
|
zObj.pId = ''
|
|
zObj.orgName = '未分配人员'
|
|
}
|
|
zNodes[i] = zObj
|
|
}
|
|
this.zNodes = zNodes
|
|
}
|
|
resolve()
|
|
}, e => {
|
|
this.loading = false
|
|
reject(e)
|
|
})
|
|
})
|
|
},
|
|
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
|
|
},
|
|
handleTreeDblClick (treeId, treeNode) {
|
|
this.$emit('input', treeNode.id)
|
|
this.checkedName = treeNode.oldname || treeNode.name
|
|
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.getUserByRole(this.ZRBM, val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.search-area{
|
|
padding: 10px 0 0 10px;
|
|
.search-item{
|
|
margin: 0;
|
|
}
|
|
/deep/.el-input__inner{
|
|
width: 270px !important;
|
|
}
|
|
}
|
|
</style>
|