code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,314 @@
|
||||
<!--根据角色和部门选人抽屉-->
|
||||
<template>
|
||||
<el-drawer
|
||||
append-to-body
|
||||
:title="title"
|
||||
size="400px"
|
||||
:visible.sync="isVisible"
|
||||
:wrapper-closable="false"
|
||||
@close="handleTreeDrawerCancel"
|
||||
>
|
||||
<div class="demo-drawer-content">
|
||||
<laws-tree
|
||||
v-if="isVisible"
|
||||
expandAll
|
||||
ref="roleUserTree"
|
||||
:zNodes="zNodes"
|
||||
:check-enable="checkEnable"
|
||||
treeDivId="roleUserTree"
|
||||
:editable="false"
|
||||
:onlyChecked="checkEnable"
|
||||
:checkIdList="checkIdList"
|
||||
:chkboxType="{ 'Y': '', 'N': '' }"
|
||||
:loading="loading.loadData"
|
||||
:initNotCheck="initNotCheck"
|
||||
@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"
|
||||
:loading="submitLoading"
|
||||
@click="handleTreeDrawerConfirm">确定
|
||||
</el-button>
|
||||
<el-button
|
||||
round
|
||||
class="common-button-default"
|
||||
icon="el-icon-close"
|
||||
@click="handleTreeDrawerCancel">取消</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import Bus from '@/common/eventHub'
|
||||
export default {
|
||||
name: 'RoleUserTree',
|
||||
props: {
|
||||
// 抽屉显示状态
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 部门id
|
||||
BM: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 角色层级名称
|
||||
roleName: {
|
||||
type: String
|
||||
},
|
||||
// 角色ID
|
||||
roleId: {
|
||||
type: String
|
||||
},
|
||||
// 是否启用checkbox（多选）
|
||||
checkEnable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 节点回显数组
|
||||
checkIdList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 最多可选择数量
|
||||
max: {
|
||||
type: Number
|
||||
},
|
||||
// 数量多于最多数量时的提示
|
||||
maxTips: {
|
||||
type: String
|
||||
},
|
||||
// 最少选择数量
|
||||
min: {
|
||||
type: Number
|
||||
},
|
||||
// 数量少于最小数量时的提示
|
||||
minTips: {
|
||||
type: String
|
||||
},
|
||||
initNotCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
submitLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '人员结构'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isVisible: false, // 组件内抽屉重新赋值
|
||||
zNodes: [], // 人员树
|
||||
checkedList: [], // 人员多选选中数组
|
||||
loading: {
|
||||
loadData: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 人员双击事件
|
||||
handleTreeDblClick (treeId, treeNode) {
|
||||
this.$emit('dblClick', treeNode)
|
||||
this.isVisible = false
|
||||
},
|
||||
// 人员多选事件
|
||||
handleTreeOnCheck (checkedList) {
|
||||
this.checkedList = checkedList
|
||||
},
|
||||
// 人员多选确定事件
|
||||
handleTreeDrawerConfirm() {
|
||||
if (this.min && this.checkedList.length < this.min) {
|
||||
const tips = this.minTips || '请至少选择' + this.min + '人'
|
||||
this.$message.warning(tips)
|
||||
} else if (this.max && this.checkedList.length > this.max) {
|
||||
const tips = this.maxTips || '最多可选' + this.max + '人'
|
||||
this.$message.warning(tips)
|
||||
} else {
|
||||
this.$emit('confirm', this.checkedList)
|
||||
this.isVisible = false
|
||||
}
|
||||
},
|
||||
// 抽屉关闭事件
|
||||
handleTreeDrawerCancel () {
|
||||
this.isVisible = false
|
||||
this.checkedList = []
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 获取选中的部门下子子部门
|
||||
getDeptChild (pOrgId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading.loadData = true
|
||||
this.$http.get('sys/org/getChildDept', {
|
||||
orgId: this.BM || pOrgId
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading.loadData = false
|
||||
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 (treeNodeList2, pOrgId, roleIdTwo, roleHierarchyName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading.loadData = true
|
||||
this.$http.get('sys/role/getRoleAndUserByOrgId', {
|
||||
orgId: this.BM || pOrgId,
|
||||
roleHierarchyName: this.roleName || roleHierarchyName,
|
||||
roleId: this.roleId || roleIdTwo
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading.loadData = false
|
||||
let treeNodeList = []
|
||||
if (res.ok) {
|
||||
for (let pId in treeNodeList2) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
if (treeNodeList2[pId].id === res.data[i].orgId) {
|
||||
treeNodeList.push(treeNodeList2[pId])
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let obj = {}
|
||||
for (let key in res.data[i]) {
|
||||
if (key === 'userId') {
|
||||
obj.id = res.data[i][key]
|
||||
} else if (key === 'orgId') {
|
||||
obj.pId = res.data[i][key]
|
||||
} else {
|
||||
obj[key] = res.data[i][key]
|
||||
}
|
||||
}
|
||||
obj.userId = res.data[i].userId || null
|
||||
obj.roleId = res.data[i].roleId || null
|
||||
treeNodeList.push(obj)
|
||||
}
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {}
|
||||
// 该节点为人员
|
||||
if (treeNodeList[i].userName) {
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
if (treeNodeList[i].email) {
|
||||
if (treeNodeList[i].roleName) {
|
||||
zObj.name = `${treeNodeList[i].userName}(${treeNodeList[i].email})(${treeNodeList[i].roleName})`
|
||||
} else {
|
||||
zObj.name = `${treeNodeList[i].userName}(${treeNodeList[i].email})`
|
||||
}
|
||||
} else {
|
||||
if (treeNodeList[i].roleName) {
|
||||
zObj.name = `${treeNodeList[i].userName}(${treeNodeList[i].roleName})`
|
||||
} else {
|
||||
zObj.name = `${treeNodeList[i].userName}`
|
||||
}
|
||||
}
|
||||
if (treeNodeList[i].roleName) {
|
||||
zObj.showName = treeNodeList[i].userName + '(' + treeNodeList[i].roleName + ')'
|
||||
} else {
|
||||
zObj.showName = treeNodeList[i].userName
|
||||
}
|
||||
zObj.icon = 'static/images/user.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.isParent = false
|
||||
zObj.orgName = treeNodeList[i].orgName
|
||||
// zObj.oldname = treeNodeList[i].userName
|
||||
zObj.roleId = treeNodeList[i].roleId
|
||||
zObj.roleName = treeNodeList[i].roleName
|
||||
zObj.userId = treeNodeList[i].userId
|
||||
zObj.userName = treeNodeList[i].userName
|
||||
zObj.pOrgId = treeNodeList[i].pOrgId
|
||||
zObj.userIdAndRoleId = treeNodeList[i].userIdAndRoleId
|
||||
} else {
|
||||
zObj.id = treeNodeList[i].id
|
||||
zObj.pId = treeNodeList[i].pId
|
||||
// 该节点为机构
|
||||
zObj.name = treeNodeList[i].orgName
|
||||
zObj.oldname = treeNodeList[i].orgName
|
||||
zObj.showName = treeNodeList[i].orgName
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.iconSkin = 'org-dept'
|
||||
zObj.isParent = true
|
||||
zObj.isChecked = true
|
||||
}
|
||||
// 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(this.zNodes)
|
||||
}
|
||||
}, e => {
|
||||
this.loading.loadData = false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 请求部门和人员数据
|
||||
getRoleUserData(pOrgId, roleIdTwo, roleHierarchyName) {
|
||||
this.getDeptChild(pOrgId).then(treeNodeList => {
|
||||
this.getUserByRole(treeNodeList, pOrgId, roleIdTwo, roleHierarchyName)
|
||||
.then(roleUserData => {
|
||||
Bus.$emit('resRoleUserData', roleUserData)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
this.isVisible = val
|
||||
if (val) {
|
||||
// 请求部门和人员数据
|
||||
this.getDeptChild().then(treeNodeList => {
|
||||
this.getUserByRole(treeNodeList)
|
||||
})
|
||||
}
|
||||
},
|
||||
isVisible (val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
Bus.$on('getRoleUserData', (pOrgId, roleIdTwo, roleHierarchyName) => this.getRoleUserData(pOrgId, roleIdTwo, roleHierarchyName))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user