563 lines
16 KiB
Vue
563 lines
16 KiB
Vue
<!-- 2021-03-03 树组件 -->
|
|
<template>
|
|
<div class="shang-qi-tree">
|
|
<template v-if="drawer">
|
|
<el-drawer
|
|
:title="title"
|
|
:visible.sync="drawerVisible"
|
|
:wrapper-closable="false"
|
|
:before-close="beforeClose"
|
|
@closed="handleClosed">
|
|
<div class="demo-drawer-content">
|
|
<laws-tree
|
|
:zNodes="zNodes"
|
|
:treeDivId="treeDivId"
|
|
:loading="loading.loadZNodes"
|
|
:loading-tips="loadingTips"
|
|
:checkIdList="checkIdList"
|
|
:check-enable="checkEnable"
|
|
:editable="false"
|
|
:expand-first="expandFirst"
|
|
:only-checked="checkEnable"
|
|
:dept-select="!checkEnable"
|
|
@treeOnCheck="treeOnCheck"
|
|
@treeDblClick="handleDblClick"
|
|
v-if="visible"
|
|
></laws-tree>
|
|
</div>
|
|
<div class="demo-drawer-footer" v-if="showFooter && checkEnable">
|
|
<el-button
|
|
round
|
|
class="common-button-primary"
|
|
type="primary"
|
|
icon="el-icon-check"
|
|
@click="handleConfirm"
|
|
>确定</el-button
|
|
>
|
|
<el-button
|
|
round
|
|
class="common-button-default"
|
|
icon="el-icon-close"
|
|
@click="handleCancel"
|
|
>取消</el-button
|
|
>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
<template v-else>
|
|
<laws-tree
|
|
:zNodes="zNodes"
|
|
:treeDivId="treeDivId"
|
|
:loading="loading.loadZNodes"
|
|
:loading-tips="loadingTips"
|
|
:checkIdList="checkIdList"
|
|
:check-enable="checkEnable"
|
|
:editable="false"
|
|
:expand-first="expandFirst"
|
|
@treeOnCheck="treeOnCheck"
|
|
></laws-tree>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getDept,
|
|
getUserOrgDept
|
|
} from 'api'
|
|
import {
|
|
getRoleAndUserByOrgId,
|
|
getRoleByOrgIdOrGroupName as queryRoleListByOrgGroup
|
|
} from 'api/process'
|
|
export default {
|
|
name: 'ShangQiTree',
|
|
mixins: [],
|
|
components: {},
|
|
props: {
|
|
// 树结构dom唯一id
|
|
treeDivId: {
|
|
type: String,
|
|
default: () => {
|
|
return `${new Date().getTime()}-SQTree`
|
|
}
|
|
},
|
|
// 是否展示全部部门+科室+人员
|
|
showAll: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
// 是否与Drawer组件一起使用
|
|
drawer: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 机构节点是否禁用checkbox
|
|
deptNodeDisabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否启用checkBox
|
|
checkEnable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 当前选中的节点(checkbox回显)
|
|
checkIdList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '组织机构'
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showFooter: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否选择人员节点
|
|
onlyCheckPerson: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否只选择机构节点
|
|
onlyCheckOrg: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 指定机构类型
|
|
orgType: {
|
|
type: String
|
|
},
|
|
beforeClose: {
|
|
type: Function,
|
|
default: (done) => {
|
|
done()
|
|
}
|
|
},
|
|
// 最多支持选择数(传-1忽略此参数)
|
|
maxSelected: {
|
|
type: Number
|
|
},
|
|
maxSelectedTips: {
|
|
type: String
|
|
},
|
|
// 指定角色组名称(查找指定角色,可选参数部门id)
|
|
roleHierarchyName: {
|
|
type: String
|
|
},
|
|
// 指定角色Id查询用户
|
|
roleId: {
|
|
type: String
|
|
},
|
|
// 指定部门
|
|
orgId: {
|
|
type: String
|
|
},
|
|
// 是否默认展开第一个节点
|
|
expandFirst: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 传roleHierarchyName,orgId时传此参数判断最终要的节点是人还是角色(传USER: 获取人,不传则获取角色)
|
|
needType: {
|
|
type: String
|
|
},
|
|
showRole: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 名字后展示邮箱地址
|
|
showEmail: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 不展示的人员(例如主起草为汪法规,其他起草人不再展示汪法规),格式为逗号拼接id
|
|
excludesUser: {
|
|
type: [String, Array]
|
|
},
|
|
// 根据指定条件查询角色分组/人员
|
|
queryType: {
|
|
type: String,
|
|
validator: function (t) {
|
|
return t === 'GROUP' || t === 'USER'
|
|
},
|
|
default: 'USER'
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
drawerVisible: false,
|
|
zNodes: [],
|
|
loading: {
|
|
loadZNodes: false
|
|
},
|
|
checkedIdList: []
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: zNodes初始化
|
|
* @date: 2021-03-03 14:38:21
|
|
* @auth: chenxiaoxi
|
|
*/
|
|
zNodesInit() {
|
|
if (this.showAll) {
|
|
this.loading.loadZNodes = true
|
|
this.getAllDept()
|
|
.then(deptZNodes => {
|
|
this.getAllUser()
|
|
.then(userZNodes => {
|
|
this.zNodes = [...deptZNodes, ...userZNodes]
|
|
setTimeout(() => {
|
|
this.loading.loadZNodes = false
|
|
}, 100)
|
|
})
|
|
})
|
|
} else {
|
|
if (this.onlyCheckOrg) {
|
|
this.loading.loadZNodes = true
|
|
this.getAllDept({
|
|
orgType: this.orgType
|
|
}).then(deptZNodes => {
|
|
this.zNodes = [...deptZNodes]
|
|
setTimeout(() => {
|
|
this.loading.loadZNodes = false
|
|
}, 100)
|
|
})
|
|
} else if (this.roleId) {
|
|
this.loading.loadZNodes = true
|
|
this.getAllDept()
|
|
.then(deptNode => {
|
|
const zNodes = []
|
|
if (this.orgId) {
|
|
const orgId = this.orgId.split(',')
|
|
deptNode.map(deptItem => {
|
|
if (orgId.includes(deptItem.id)) {
|
|
zNodes.push(deptItem)
|
|
}
|
|
})
|
|
} else {
|
|
zNodes.push(...deptNode)
|
|
}
|
|
this.getUserByRoleId(zNodes)
|
|
})
|
|
} else if (this.roleHierarchyName) {
|
|
this.getRoleGroupByRoleName()
|
|
} else {
|
|
this.$message.warning('这种情况前端还没处理,请联系前端开发人员关注SQTree组件')
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @description: 获取全部机构
|
|
* @date: 2021-03-03 13:44:26
|
|
* @auth: chenxiaoxi
|
|
*/
|
|
getAllDept(params) {
|
|
return new Promise((resolve, reject) => {
|
|
getDept(params)
|
|
.then(res => {
|
|
const { data } = res
|
|
// debugger
|
|
// 如果指定了部门,则只返回当前部门及下属科室
|
|
if (this.orgId) {
|
|
const zNodes = []
|
|
data.map(item => {
|
|
if (item.pId === this.orgId) {
|
|
item.name = item.orgName
|
|
item.icon = 'static/images/dept.png'
|
|
item.chkDisabled = this.deptNodeDisabled
|
|
zNodes.push(item)
|
|
}
|
|
})
|
|
resolve(zNodes)
|
|
} else {
|
|
data.map(item => {
|
|
item.name = item.orgName
|
|
item.icon = 'static/images/dept.png'
|
|
item.chkDisabled = this.deptNodeDisabled
|
|
})
|
|
resolve(data)
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @description: 获取全部人员,人员数据中包含pOrgId,且相同角色只出现一次
|
|
* @date: 2021-03-03 13:51:01
|
|
* @auth: chenxiaoxi
|
|
*/
|
|
getAllUser() {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.showRole) {
|
|
getRoleAndUserByOrgId()
|
|
.then(res => {
|
|
const { data } = res
|
|
// 如果指定了部门,则只返回当前部门下或部门科室下的人员
|
|
if (this.orgId) {
|
|
const zNodes = []
|
|
data.map(item => {
|
|
if (item.orgId === this.orgId || item.pOrgId === this.orgId) {
|
|
const email = item.email && `(${item.email})`
|
|
if (this.showRole && item.roleName) {
|
|
item.name = item.userName + email + '(' + item.roleName + ')'
|
|
} else {
|
|
item.name = `${item.userName}${email}`
|
|
}
|
|
item.icon = 'static/images/user.png'
|
|
item.iconSkin = 'org-user'
|
|
item.pId = item.orgId
|
|
item.id = item.userId
|
|
zNodes.push(item)
|
|
}
|
|
})
|
|
resolve(zNodes)
|
|
} else {
|
|
data.map(item => {
|
|
const email = item.email && `(${item.email})`
|
|
if (this.showRole && item.roleName) {
|
|
item.name = item.userName + email + '(' + item.roleName + ')'
|
|
} else {
|
|
item.name = `${item.userName}${email}`
|
|
}
|
|
item.icon = 'static/images/user.png'
|
|
item.iconSkin = 'org-user'
|
|
item.pId = item.orgId
|
|
item.id = item.userId
|
|
})
|
|
resolve(data)
|
|
}
|
|
})
|
|
} else {
|
|
getUserOrgDept()
|
|
.then(res => {
|
|
const { data } = res
|
|
const EXCLUDES_USER = (this.excludesUser && (this.excludesUser instanceof Array ? this.excludesUser : this.excludesUser.split(','))) || []
|
|
// 如果指定了部门,则只返回当前部门下或部门科室下的人员
|
|
if (this.orgId) {
|
|
const zNodes = []
|
|
data.map((item, index) => {
|
|
if ((item.orgId === this.orgId || item.pOrgId === this.orgId) && (!EXCLUDES_USER.includes(item.id)) || !EXCLUDES_USER.includes(item.userId)) {
|
|
item.name = item.userName
|
|
item.icon = 'static/images/user.png'
|
|
item.iconSkin = 'org-user'
|
|
item.pId = item.orgId
|
|
item.id = item.userId
|
|
const email = item.email && `(${item.email})`
|
|
if (this.showEmail && item.email) {
|
|
item.name = `${item.userName}${email}`
|
|
}
|
|
zNodes.push(item)
|
|
}
|
|
})
|
|
resolve(zNodes)
|
|
} else {
|
|
const zNodes = []
|
|
data.map((item, index) => {
|
|
item.name = item.userName
|
|
item.icon = 'static/images/user.png'
|
|
item.iconSkin = 'org-user'
|
|
item.pId = item.orgId
|
|
item.id = item.userId
|
|
if (this.showEmail && item.email) {
|
|
item.name = `${item.userName}(${item.email})`
|
|
}
|
|
if (!EXCLUDES_USER.includes(item.id)) {
|
|
zNodes.push(item)
|
|
}
|
|
})
|
|
resolve(zNodes)
|
|
}
|
|
})
|
|
}
|
|
|
|
})
|
|
},
|
|
|
|
handleClosed() {
|
|
this.zNodes = []
|
|
this.handleCancel()
|
|
},
|
|
|
|
handleConfirm() {
|
|
const idList = []
|
|
const checkedList = []
|
|
let flag = true
|
|
const errPersonNode = []
|
|
this.checkedList.map(item => {
|
|
if (this.onlyCheckPerson) {
|
|
if (item.userId) {
|
|
if (item.orgId) {
|
|
idList.push(item.id)
|
|
checkedList.push(item)
|
|
} else {
|
|
errPersonNode.push(item.userName)
|
|
flag = false
|
|
}
|
|
}
|
|
} else {
|
|
idList.push(item.id)
|
|
checkedList.push(item)
|
|
}
|
|
})
|
|
if (!flag && this.onlyCheckPerson) {
|
|
this.$message.warning(`${errPersonNode.join(',')} 没有上级机构,请重新选择`)
|
|
return false
|
|
}
|
|
if (this.maxSelected && this.maxSelected > -1 && (checkedList.length > this.maxSelected)) {
|
|
this.$message.warning(this.maxSelectedTips || `最多支持选择数量: ${this.maxSelected}`)
|
|
return false
|
|
}
|
|
this.$emit('confirm', checkedList, idList)
|
|
setTimeout(() => {
|
|
this.$emit('update:visible', false)
|
|
this.$emit('closed')
|
|
}, 100)
|
|
},
|
|
|
|
/**
|
|
* 人员单选
|
|
**/
|
|
handleDblClick(elId, checkNode) {
|
|
const checkedList = [checkNode]
|
|
const id = checkNode.userId || checkNode.id
|
|
const idList = [id]
|
|
this.$emit('confirm', checkedList, idList)
|
|
setTimeout(() => {
|
|
this.$emit('update:visible', false)
|
|
this.$emit('closed')
|
|
}, 100)
|
|
},
|
|
|
|
handleCancel() {
|
|
this.checkedList = []
|
|
this.$emit('update:visible', false)
|
|
setTimeout(() => {
|
|
this.$emit('closed')
|
|
}, 100)
|
|
},
|
|
|
|
treeOnCheck(checkedList) {
|
|
this.checkedList = checkedList
|
|
},
|
|
|
|
/**
|
|
* @description: 根据角色Id获取人员列表(可选参数部门)
|
|
* @date: 2021-03-04 10:18:59
|
|
* @auth: chenxiaoxi
|
|
*/
|
|
getUserByRoleId(zNodes) {
|
|
this.loading.loadZNodes = true
|
|
getRoleAndUserByOrgId({
|
|
orgId: this.orgId,
|
|
roleId: this.roleId,
|
|
roleHierarchyName: this.roleHierarchyName
|
|
}).then(res => {
|
|
this.loading.loadZNodes = false
|
|
const personList = res.data.map(person => {
|
|
if (person.orgType === 'DEPART') {
|
|
person.pId = person.orgId
|
|
} else {
|
|
person.pId = person.pOrgId
|
|
}
|
|
const email = person.email && `(${person.email})`
|
|
if (this.showRole) {
|
|
const roleName = person.roleName || ''
|
|
person.name = person.userName + email + '(' + roleName + ')'
|
|
} else {
|
|
person.name = `${person.userName}${email}`
|
|
}
|
|
person.id = person.userId
|
|
person.icon = 'static/images/user.png'
|
|
person.iconSkin = 'org-user'
|
|
return person
|
|
})
|
|
this.zNodes = [...zNodes, ...personList]
|
|
}).catch(e => {
|
|
this.loading.loadZNodes = false
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @description: 根据角色名称查询角色组
|
|
* @date: 2021-03-04 11:16:31
|
|
* @auth: chenxiaoxi
|
|
*/
|
|
async getRoleGroupByRoleName() {
|
|
this.loading.loadZNodes = true
|
|
const params = {
|
|
orgId: this.orgId,
|
|
roleHierarchyName: this.roleHierarchyName
|
|
}
|
|
let res, data
|
|
if (this.queryType === 'GROUP') {
|
|
const fixedRoles = ['法规联络人', '企标备案专家', '标准法规采购员']
|
|
if (!fixedRoles.includes(this.roleHierarchyName)) {
|
|
params.type = 0
|
|
}
|
|
res = await queryRoleListByOrgGroup(params)
|
|
data = res.data
|
|
data.map(role => {
|
|
role.icon = 'static/images/user.png'
|
|
role.iconSkin = 'org-user'
|
|
})
|
|
} else {
|
|
res = await getRoleAndUserByOrgId(params)
|
|
data = res.data
|
|
if (this.needType && this.needType === 'USER') {
|
|
data.map(role => {
|
|
role.name = role.userName
|
|
role.id = role.userId
|
|
role.icon = 'static/images/user.png'
|
|
role.iconSkin = 'org-user'
|
|
})
|
|
} else {
|
|
data.map(role => {
|
|
role.name = role.roleName
|
|
role.id = role.roleId
|
|
role.icon = 'static/images/user.png'
|
|
role.iconSkin = 'org-user'
|
|
})
|
|
}
|
|
}
|
|
this.zNodes = data
|
|
this.loading.loadZNodes = false
|
|
}
|
|
},
|
|
computed: {
|
|
loadingTips() {
|
|
return `正在加载${this.title}`
|
|
}
|
|
},
|
|
watch: {
|
|
visible: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.zNodesInit()
|
|
}
|
|
this.drawerVisible = val
|
|
}
|
|
},
|
|
drawerVisible: {
|
|
handler(val) {
|
|
this.$emit('update:visible', val)
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.drawerVisible = this.visible
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.shang-qi-tree {
|
|
}
|
|
</style>
|