code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,562 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user