406 lines
11 KiB
Vue
406 lines
11 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
|
|
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
|
|
class="org-tree"
|
|
@opened="drawerOpen"
|
|
@close="handleTreeDrawerCancel"
|
|
>
|
|
<div :class="{'demo-drawer-content': config.attrType === 'SEL_OPTS'}">
|
|
<template v-if="!isFO">
|
|
<dept-tree
|
|
:key="config.attrField"
|
|
:ref="config.attrField"
|
|
:all-dept="config.selVal !== 'ORGLIST'"
|
|
expandAll
|
|
:show-user="config.selVal === 'USERLIST' || config.selVal === 'ROLELIST'"
|
|
:check-enable="config.attrType === 'SEL_OPTS'"
|
|
:deptSelect="config.selVal === 'ORGLIST'"
|
|
:treeDivId="config.attrField + 'Tree'"
|
|
:editable="false"
|
|
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
|
:chkboxType="{ 'Y': '', 'N': '' }"
|
|
@treeOnCheck="handleTreeOnCheck"
|
|
@treeDblClick="handleTreeDblClick">
|
|
</dept-tree>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<laws-tree
|
|
v-if="visible"
|
|
:key="config.attrField"
|
|
:ref="config.attrField"
|
|
:zNodes="zNodesRole"
|
|
expandAll
|
|
:check-enable="config.attrType === 'SEL_OPTS' || checkEnable"
|
|
:deptSelect="config.selVal === 'ORGLIST'"
|
|
:treeDivId="config.attrField + 'Tree'"
|
|
:editable="false"
|
|
:onlyChecked="config.attrType === 'SEL_OPTS'"
|
|
:chkboxType="{ 'Y': '', 'N': '' }"
|
|
:initNotCheck="initNotCheck"
|
|
@treeOnCheck="handleTreeOnCheck"
|
|
@treeDblClick="handleTreeDblClick"></laws-tree>
|
|
</template>
|
|
</div>
|
|
<div class="demo-drawer-footer" v-if="config.attrType === 'SEL_OPTS' || 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>
|
|
</el-col>
|
|
</template>
|
|
|
|
<script>
|
|
import eventHub from '@/common/eventHub'
|
|
|
|
export default {
|
|
name: 'OrgTree',
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 栅格比例
|
|
span: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
// 是否显示全部部门
|
|
allDept: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
zNodes: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
// 原数据对象
|
|
dataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: '150px'
|
|
},
|
|
// 是否为多选
|
|
checkEnable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 加载时不执行默认选中
|
|
initNotCheck: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
treeCheckNode: [],
|
|
checkedName: '',
|
|
zNodesRole: [],
|
|
roleList: [],
|
|
loading: false
|
|
}
|
|
},
|
|
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
|
|
},
|
|
isFO () {
|
|
return this.config.attrField === 'FO'
|
|
},
|
|
ZRBM () {
|
|
return this.dataModel['ZRBM'] || ''
|
|
}
|
|
},
|
|
methods: {
|
|
handleTreeDblClick (treeId, treeNode) {
|
|
this.checkedName = treeNode.userName || treeNode.oldname || treeNode.name
|
|
this.$emit('input', treeNode.id)
|
|
this.$emit('on-checked', this.checkedName)
|
|
this.$emit('on-dept', treeNode.pOrgId, treeNode.pOrgName)
|
|
this.visible = false
|
|
},
|
|
handleTreeOnCheck (treeCheckNode) {
|
|
this.treeCheckNode = treeCheckNode
|
|
},
|
|
getShowName (id) {
|
|
let name = ''
|
|
this.zNodes.map(item => {
|
|
if (item.id === id) {
|
|
name = item.oldname || item.name
|
|
}
|
|
})
|
|
return name
|
|
},
|
|
handleTreeDrawerConfirm () {
|
|
if (this.config.selVal === 'USERLIST' || this.config.selVal === 'ROLELIST') {
|
|
let checkedList = []
|
|
let checkedNameList = []
|
|
let deptIdList = []
|
|
let deptNameList = []
|
|
this.treeCheckNode.map(item => {
|
|
if (!item.isParent) {
|
|
checkedList.push(item.id)
|
|
checkedNameList.push(item.userName || item.oldname || item.name)
|
|
deptIdList.push(item.pOrgId)
|
|
deptNameList.push(item.pOrgName)
|
|
}
|
|
})
|
|
this.checkedName = checkedNameList.join(',')
|
|
this.$emit('input', checkedList.join(','))
|
|
this.$emit('on-checked', this.checkedName)
|
|
this.$emit('on-dept', [...new Set(deptIdList)].join(','), [...new Set(deptNameList)].join(','))
|
|
} else {
|
|
const checkedList = []
|
|
const checkedNameList = []
|
|
this.treeCheckNode.map(item => {
|
|
checkedList.push(item.id)
|
|
if (item.oldname) {
|
|
checkedNameList.push(item.oldname)
|
|
} else {
|
|
checkedNameList.push(item.name)
|
|
}
|
|
})
|
|
this.checkedName = checkedNameList.join(',')
|
|
this.$emit('input', checkedList.join(','))
|
|
this.$emit('on-checked', this.checkedName)
|
|
}
|
|
this.visible = false
|
|
},
|
|
handleTreeDrawerCancel () {
|
|
this.visible = false
|
|
this.zNodesRole = []
|
|
},
|
|
// 赋值回显人员和部门
|
|
drawerOpen () {
|
|
let checkedArr = this.value ? this.value.split(',') : []
|
|
if (checkedArr.length > 0) {
|
|
setTimeout(() => {
|
|
this.$nextTick(() => {
|
|
this.$refs[this.config.attrField].checkedNode(checkedArr)
|
|
})
|
|
}, 500)
|
|
}
|
|
},
|
|
handleClick () {
|
|
if (this.disabled) {
|
|
return false
|
|
}
|
|
if (this.isFO) {
|
|
if (!this.dataModel.ZRBM || this.dataModel.ZRBM === '') {
|
|
this.$message.warning('请先选择责任部门')
|
|
} else {
|
|
this.visible = true
|
|
this.getUserByRole(this.dataModel.ZRBM)
|
|
}
|
|
} else {
|
|
this.visible = true
|
|
}
|
|
},
|
|
|
|
// 获取角色列表
|
|
selectRoleList () {
|
|
this.$http.get('sys/role/findAll', {}, {_this: this}, res => {
|
|
let roleList = res.data
|
|
let roleOpList = []
|
|
for (let index = 0; index < roleList.length; index++) {
|
|
let role = roleList[index]
|
|
let roleOption = {}
|
|
roleOption.label = role.name
|
|
roleOption.value = role.id
|
|
roleOpList.push(roleOption)
|
|
}
|
|
this.roleList = roleOpList
|
|
}, e => {})
|
|
},
|
|
|
|
// 根据角色名称获取角色id
|
|
// queryRoleIdByRoleName (roleName) {
|
|
// let roleId = ''
|
|
// this.roleList.map(item => {
|
|
// if (item.label === roleName) {
|
|
// roleId = item.value
|
|
// }
|
|
// })
|
|
// return roleId
|
|
// },
|
|
/**
|
|
* @author liruohao
|
|
* @date 2019/4/24
|
|
* @Description: 获取选中的部门下子子部门
|
|
*/
|
|
getDeptChild (orgId) {
|
|
return new Promise((resolve, reject) => {
|
|
this.$http.get('sys/org/getChildDept', {
|
|
orgId
|
|
}, {
|
|
_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
|
|
zNodes[i] = zObj
|
|
}
|
|
resolve(res.data)
|
|
}
|
|
}, e => {
|
|
reject(e)
|
|
})
|
|
})
|
|
},
|
|
// 查询指定角色的人员组成树结构
|
|
getUserByRole (orgId) {
|
|
// this.getDeptChild(orgId).then(treeNodeList => {
|
|
return new Promise((resolve, reject) => {
|
|
this.loading = true
|
|
this.$http.get('sys/org/getTreeByRoleAndOrgId2', {
|
|
orgId,
|
|
roleHierarchyName: 'FO'
|
|
}, {
|
|
_this: this
|
|
}, res => {
|
|
this.loading = false
|
|
if (res.ok) {
|
|
// 获取组织与人员完毕，开始组装树结构
|
|
let treeNodeList = []
|
|
for (let i in res.data) {
|
|
let obj = {}
|
|
for (let key in res.data[i]) {
|
|
obj[key] = res.data[i][key]
|
|
}
|
|
if (!res.data[i].roleName) {
|
|
obj.icon = 'static/images/dept.png'
|
|
obj.name = obj.orgName
|
|
obj.isChecked = true
|
|
} else {
|
|
obj.icon = 'static/images/user.png'
|
|
obj.name = obj.roleName
|
|
obj.pId = obj.id
|
|
obj.id = obj.roleId
|
|
obj.isParent = false
|
|
}
|
|
treeNodeList.push(obj)
|
|
}
|
|
this.zNodesRole = treeNodeList
|
|
}
|
|
resolve()
|
|
}, e => {
|
|
this.loading = false
|
|
reject(e)
|
|
})
|
|
})
|
|
// })
|
|
}
|
|
},
|
|
watch: {
|
|
isFO (val) {
|
|
if (val) {
|
|
this.selectRoleList()
|
|
}
|
|
},
|
|
config: {
|
|
deep: true,
|
|
handler () {
|
|
// this.checkedName = this.config.valueName || this.checkedName
|
|
// if (this.config.valueName!==""){
|
|
this.checkedName = this.config.valueName || ''
|
|
// }
|
|
}
|
|
},
|
|
value (newVal, oldVal) {
|
|
this.checkedName = newVal !== '' ? this.checkedName : ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.checkedName = this.config.valueName || ''
|
|
if (this.isFO) {
|
|
this.selectRoleList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.el-drawer__body{
|
|
& > div:first-child{
|
|
display: flex;
|
|
flex: auto;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
::v-deep .el-drawer__header{
|
|
&>span:first-child{
|
|
outline: none!important;
|
|
}
|
|
}
|
|
::v-deep .el-drawer{
|
|
outline: none!important;
|
|
}
|
|
</style>
|