code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,318 @@
|
||||
<!-- 流程组织机构树 -->
|
||||
<template>
|
||||
<div class="dept-tree">
|
||||
<laws-tree
|
||||
ref="roleTree"
|
||||
:treeDivId="treeDivId"
|
||||
:zNodes="zNodes"
|
||||
:expandAll="expandAll"
|
||||
:editable="editable"
|
||||
:deptSelect="deptSelect"
|
||||
:pIdCheck="pIdCheck"
|
||||
:checkEnable="checkEnable"
|
||||
:loading="loading.treeLoading"
|
||||
:onlyChecked="onlyChecked"
|
||||
:chkboxType="chkboxType"
|
||||
:checkIdList="checkIdList"
|
||||
role
|
||||
@treeClick="(treeId, treeNode) => treeClick(treeId, treeNode)"
|
||||
@treeOnExpand="(treeId, treeNode) => treeOnExpand(treeId, treeNode)"
|
||||
@treeDblClick="(treeId, treeNode) => treeDblClick(treeId, treeNode)"
|
||||
@treeReady="treeReady"
|
||||
@treeOnCheck="(checkedList) => treeOnCheck(checkedList)"
|
||||
></laws-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventHub from '@/common/eventHub'
|
||||
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
data () {
|
||||
return {
|
||||
dept: [], // 部门节点
|
||||
deptUser: [], // 部门人员节点
|
||||
projectManagerzNodes: [],
|
||||
loading: {
|
||||
treeLoading: false
|
||||
},
|
||||
zNodes: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 节点点击
|
||||
treeClick (treeId, treeNode) {
|
||||
this.$emit('treeClick', treeId, treeNode)
|
||||
},
|
||||
// 节点双击
|
||||
treeDblClick (treeId, treeNode) {
|
||||
this.$emit('treeDblClick', treeId, treeNode)
|
||||
},
|
||||
// 节点展开
|
||||
treeOnExpand (treeId, treeNode) {
|
||||
// this.$emit('treeOnExpand', treeId, treeNode)
|
||||
},
|
||||
// 首次加载完成
|
||||
treeReady () {
|
||||
this.$emit('treeReady')
|
||||
},
|
||||
// 节点重新加载
|
||||
treeReload () {
|
||||
this.$refs.deptTree.lawsTreeInit()
|
||||
},
|
||||
// 选择节点复选框事件
|
||||
treeOnCheck (checkedList) {
|
||||
const personCheckedNameList = []
|
||||
const personCheckedIdList = []
|
||||
checkedList.map(item => {
|
||||
if (item.orgName) {
|
||||
personCheckedNameList.push(item.name)
|
||||
personCheckedIdList.push(item.id)
|
||||
}
|
||||
})
|
||||
const personCheckedId = personCheckedIdList.join(',')
|
||||
const personCheckedName = personCheckedNameList.join(',')
|
||||
this.$emit('treeOnCheck', checkedList)
|
||||
this.$emit('personCheck', personCheckedId, personCheckedName)
|
||||
},
|
||||
// 回显选中checked节点
|
||||
checkedNode (checkedNodes) {
|
||||
this.$refs.deptTree.checkedNode(checkedNodes)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 选中节点移除
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/29 14:42:02
|
||||
*/
|
||||
removeNode (treeNode) {
|
||||
this.$refs.deptTree.removeNode(treeNode)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 节点添加
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/29 14:53:24
|
||||
*/
|
||||
addNode (treeNode) {
|
||||
this.$refs.deptTree.addNode(treeNode)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 节点取消选中
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/29 16:09:11
|
||||
*/
|
||||
cancelSelectedNode (treeNode) {
|
||||
if (treeNode !== '' && treeNode !== undefined) {
|
||||
this.$refs.deptTree.cancelSelectedNode(treeNode)
|
||||
} else {
|
||||
this.$refs.deptTree.cancelSelectedNode()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 节点选中
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/29 16:14:23
|
||||
*/
|
||||
selectNode (treeNode) {
|
||||
if (treeNode !== '' && treeNode !== undefined) {
|
||||
this.$refs.deptTree.selectNode(treeNode)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取选中节点
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/10/29 16:14:23
|
||||
*/
|
||||
getSelectNode (idList) {
|
||||
return this.$refs.deptTree.getSelectNode(idList)
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 保存打开的节点
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/11/23 16:37:01
|
||||
*/
|
||||
setOpenNodes () {
|
||||
this.$refs.deptTree.setOpenNodes()
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 清空过滤输入框
|
||||
* @author: chenxiaoxi
|
||||
* @date: 2018/11/23 16:52:10
|
||||
*/
|
||||
clearSearch () {
|
||||
this.$refs.deptTree.clearSearch()
|
||||
},
|
||||
|
||||
// 查询指定角色树
|
||||
getUserByRole (orgId, roleHierarchy) {
|
||||
this.isTree = true
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true
|
||||
this.$http.get('sys/role/getRoleByOrgId', {
|
||||
orgId,
|
||||
roleHierarchy,
|
||||
type: 0
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
this.loading = false
|
||||
if (res.ok) {
|
||||
const treeNodeList = res.data
|
||||
// 获取组织与人员完毕，开始组装树结构
|
||||
let zNodes = []
|
||||
for (let i = 0; i < treeNodeList.length; i++) {
|
||||
let zObj = {...treeNodeList[i]}
|
||||
zObj.pId = treeNodeList[i].pId || '000000'
|
||||
zObj.name = treeNodeList[i].name
|
||||
zObj.icon = 'static/images/dept.png'
|
||||
zObj.iconSkin = 'org-user'
|
||||
zObj.shotName = treeNodeList[i].shotName
|
||||
zObj.remarks = treeNodeList[i].remarks
|
||||
zObj.dyOrgName = treeNodeList[i].dyOrgName
|
||||
zObj.dyOrgId = treeNodeList[i].dyOrgId
|
||||
zObj.type = 'role'
|
||||
|
||||
zNodes[i] = zObj
|
||||
}
|
||||
this.zNodes = zNodes
|
||||
}
|
||||
resolve()
|
||||
}, e => {
|
||||
this.loading = false
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
props: {
|
||||
// 是否显示组织下的用户
|
||||
showUser: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 部门节点
|
||||
zNodesDept: {
|
||||
type: Array
|
||||
},
|
||||
// 部门人员节点
|
||||
zNodesDeptUser: {
|
||||
type: Array
|
||||
},
|
||||
// 是否可进行操作
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 部门是否可以被选择
|
||||
deptSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 树实例Id
|
||||
treeDivId: {
|
||||
type: String
|
||||
},
|
||||
// 是否获取所有组织
|
||||
allDept: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否根据责任部门查找经理
|
||||
department: {
|
||||
type: Array
|
||||
},
|
||||
// 需要回显的节点
|
||||
idList: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
// 回显的部门节点
|
||||
deptList: {
|
||||
type: Array
|
||||
},
|
||||
// 是否展开全部
|
||||
expandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 不选中根节点
|
||||
pIdCheck: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否开启复选框
|
||||
checkEnable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 只能checkbox选中,不能点击选中节点
|
||||
onlyChecked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
chkboxType: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {'Y': 'ps', 'N': 'ps'}
|
||||
}
|
||||
},
|
||||
// checkbox需要选中的节点
|
||||
checkIdList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 节点(给lawsTree传的节点,根据展示的类型传不同的值)
|
||||
// zNodes () {
|
||||
// return this.showUser ? (this.zNodesDeptUser || this.deptUser) : (this.projectManagerzNodes.length === 0 ? (this.zNodesDept || this.dept) : this.projectManagerzNodes)
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
zNodes (val) {
|
||||
this.$nextTick(() => {
|
||||
if (this.idList && this.idList.length) {
|
||||
let deptUser = this.$refs.deptTree.getSelectNode(this.idList)
|
||||
this.$emit('selectNodeUser', deptUser)
|
||||
}
|
||||
})
|
||||
},
|
||||
deptList (val) {
|
||||
if (val.length) {
|
||||
let zNodes = this.showUser ? (this.zNodesDeptUser || this.deptUser) : (this.zNodesDept || this.dept)
|
||||
for (let i = 0; i < zNodes.length; i++) {
|
||||
val.map((displayNode) => {
|
||||
if (zNodes[i].id === displayNode.id) {
|
||||
zNodes.splice(i, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getUserByRole()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.dept-tree{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!--项目相关人员-->
|
||||
<template>
|
||||
<div class="tree__wrapper">
|
||||
<div class="item">
|
||||
<dept-tree
|
||||
treeDivId="selectTree"
|
||||
ref="selectTree"
|
||||
showUser
|
||||
allDept
|
||||
deptSelect
|
||||
style="width: 200px;height: 500px;overflow: auto"
|
||||
:editable="false"
|
||||
@treeClick="handleSelectTreeClick"
|
||||
@treeDblClick=""
|
||||
>
|
||||
</dept-tree>
|
||||
</div>
|
||||
|
||||
<div class="item btn__wrapper">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-arrow-right"
|
||||
@click="toResultTree"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<laws-tree2
|
||||
treeDivId="resultTree"
|
||||
ref="resultTree"
|
||||
:zNodes="resultNodes"
|
||||
:autoSelect="false"
|
||||
deptSelect
|
||||
style="width: 200px;height: 500px;overflow: auto"
|
||||
editable
|
||||
showRMenu
|
||||
:show-r-menu-add="false"
|
||||
:show-r-menu-copy="false"
|
||||
@treeClick="handleResultTreeClick"
|
||||
@treeDblClick=""
|
||||
@treeRemove="handleResultTreeRemove"
|
||||
@treeEdit="handleResultTreeEdit"
|
||||
>
|
||||
</laws-tree2>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
title="编辑角色"
|
||||
:visible.sync="editNodeDialogVisible"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
width="60%">
|
||||
<el-form ref="editNode" :model="editNodeForForm" class="label-input-form" label-width="130px">
|
||||
<el-formItem label="角色" prop="title" class="add-form-item">
|
||||
<el-input v-model="editNodeForForm.wxRole" placeholder="请输入角色"></el-input>
|
||||
</el-formItem>
|
||||
</el-form>
|
||||
<div slot="footer" class="demo-drawer-footer">
|
||||
<el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="editNodeDialogSubmit">确定</el-button>
|
||||
<el-button round class="common-button-default" icon="el-icon-close" @click="editNodeDialogVisible = false">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lawsTree2 from '@/components/lawsTree/index2'
|
||||
|
||||
let wxId = 0
|
||||
|
||||
const rootNode = {
|
||||
id: '-1',
|
||||
name: '根节点',
|
||||
nativeName: '根节点',
|
||||
icon: 'static/images/dept.png',
|
||||
wxId: -1,
|
||||
type: 'root',
|
||||
wxRole: ''
|
||||
}
|
||||
|
||||
const checkNodeTypeByIcon = (data) => {
|
||||
const matcher = {
|
||||
'static/images/dept.png': 'dept',
|
||||
'static/images/user.png': 'user'
|
||||
}
|
||||
return data.type || matcher[data.icon]
|
||||
}
|
||||
|
||||
const checkNodeIconByType = (data) => {
|
||||
const matcher = {
|
||||
'dept': 'static/images/dept.png',
|
||||
'user': 'static/images/user.png'
|
||||
}
|
||||
return data.icon || matcher[data.type]
|
||||
}
|
||||
|
||||
const resolveNameByType = (data) => {
|
||||
if (data.type === 'dept') {
|
||||
return data.orgName
|
||||
} else {
|
||||
return data.userName
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
lawsTree2
|
||||
},
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
selectNode: {}, // 左侧选中的节点数据
|
||||
resultNode: {}, // 右侧选中的节点数据
|
||||
resultNodes: [], // 右侧树数据
|
||||
editNode: {},
|
||||
editNodeForForm: {},
|
||||
editNodeDialogVisible: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newValue, oldValue) {
|
||||
console.log(newValue)
|
||||
this.resolveValueToResultNodes(newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectTreeClick(treeId, treeNode) {
|
||||
console.log(treeId, treeNode)
|
||||
this.selectNode = { ...treeNode }
|
||||
},
|
||||
|
||||
handleResultTreeClick(treeId, treeNode) {
|
||||
this.resultNode = { ...treeNode }
|
||||
},
|
||||
|
||||
toResultTree() {
|
||||
if (this.resultNode.id || this.resultNode.name) {
|
||||
// 判断是否为相同节点
|
||||
if (this.resultNode.id === this.selectNode.id) {
|
||||
this.$message.warning("请选择右侧其他不相同的节点")
|
||||
return
|
||||
}
|
||||
|
||||
if (this.checkHasNode(this.selectNode.id, this.resultNode.id)) {
|
||||
this.$message.warning("右侧当前层级已存在相同节点")
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.selectNode.id && !this.selectNode.name) {
|
||||
this.$message.warning("请选择左侧节点")
|
||||
return
|
||||
}
|
||||
|
||||
const treeNode = {
|
||||
id: this.selectNode.id,
|
||||
name: this.selectNode.name,
|
||||
nativeName: this.selectNode.name,
|
||||
icon: this.selectNode.icon,
|
||||
pId: this.resultNode.id,
|
||||
wxId: wxId++,
|
||||
type: checkNodeTypeByIcon(this.selectNode),
|
||||
wxRole: ''
|
||||
}
|
||||
this.$refs['resultTree'].addNode(treeNode)
|
||||
this.emitInput()
|
||||
} else {
|
||||
this.$message.warning("请选择右侧节点")
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
checkHasNode(id, pId) {
|
||||
return this.resultNodes.some(item => item.pId === pId && item.id === id)
|
||||
},
|
||||
|
||||
handleResultTreeRemove(treeId, treeNode) {
|
||||
const wxId = treeNode.wxId
|
||||
const findIndex = this.resultNodes.findIndex(item => item.wxId === wxId)
|
||||
if (findIndex > -1) {
|
||||
this.resultNodes.splice(findIndex, 1)
|
||||
}
|
||||
this.emitInput()
|
||||
},
|
||||
|
||||
handleResultTreeEdit(treeId, treeNode) {
|
||||
const wxId = treeNode.wxId
|
||||
const findNode = this.resultNodes.find(item => item.wxId === wxId)
|
||||
console.log(findNode)
|
||||
if (findNode && findNode.type === 'user') {
|
||||
this.editNode = findNode
|
||||
this.editNodeForForm = { ...findNode }
|
||||
this.editNodeDialogVisible = true
|
||||
} else {
|
||||
this.$message.warning('当前节点不可编辑角色')
|
||||
}
|
||||
},
|
||||
|
||||
editNodeDialogSubmit() {
|
||||
this.editNode.wxRole = this.editNodeForForm.wxRole
|
||||
// 用户的显示需要 用户名+角色
|
||||
let nameAndRole = this.editNode.nativeName
|
||||
if (this.editNode.type === 'user' && this.editNode.wxRole) {
|
||||
nameAndRole = this.editNode.nativeName + ' - ' + this.editNode.roleName
|
||||
}
|
||||
this.editNodeDialogVisible = false
|
||||
|
||||
this.emitInput()
|
||||
},
|
||||
|
||||
emitInput() {
|
||||
const list = [...this.resultNodes]
|
||||
// 去掉根节点
|
||||
list.shift()
|
||||
const result = list.map(item => {
|
||||
const pId = item.pId === '-1' ? '' : item.pId
|
||||
return {
|
||||
tsId: item.id,
|
||||
pid: pId,
|
||||
roleName: item.wxRole,
|
||||
type: item.type,
|
||||
orgName: item.type === 'dept' && item.nativeName || null,
|
||||
userName: item.type === 'user' && item.nativeName || null
|
||||
}
|
||||
})
|
||||
console.log(result)
|
||||
this.$emit('input', result)
|
||||
},
|
||||
|
||||
resolveValueToResultNodes() {
|
||||
const value = this.value || []
|
||||
const result = value.map(item => {
|
||||
const pId = item.pid || '-1'
|
||||
const name = resolveNameByType(item)
|
||||
// 用户的显示需要 用户名+角色
|
||||
let nameAndRole = name
|
||||
if (item.type === 'user' && item.roleName) {
|
||||
nameAndRole = name + ' - ' + item.roleName
|
||||
}
|
||||
return {
|
||||
id: item.tsId,
|
||||
nativeName: name,
|
||||
name: nameAndRole,
|
||||
icon: checkNodeIconByType(item),
|
||||
pId: pId,
|
||||
wxId: item.id || wxId++,
|
||||
type: item.type,
|
||||
wxRole: item.roleName || ''
|
||||
}
|
||||
})
|
||||
|
||||
this.resultNodes = [rootNode, ...result]
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resolveValueToResultNodes()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
.btn__wrapper {
|
||||
flex: 0 0 60px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,523 @@
|
||||
<!--项目相关人员-->
|
||||
<template>
|
||||
<div style="flex: auto;position: relative;">
|
||||
<div class="singleBox">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="330"
|
||||
trigger="manual"
|
||||
v-model="visible">
|
||||
<div class="proper">
|
||||
<i class="el-icon-close" @click="visible = false"></i>
|
||||
<label>项目名称:</label>
|
||||
<el-select class="inp" v-model="productname" filterable placeholder="节点快速查找" @focus="getNativeName" @change="getProductUserList">
|
||||
<el-option
|
||||
v-for="item in gridData"
|
||||
:key="item.productId"
|
||||
:label="item.productName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button class="bt" round size="small" type="primary" slot="reference" @click="visible = !visible">复制</el-button>
|
||||
</el-popover>
|
||||
<div class="tree__wrapper">
|
||||
<div class="item">
|
||||
<role-tree
|
||||
treeDivId="selectTree"
|
||||
ref="selectTree"
|
||||
deptSelect
|
||||
style="width: 200px;overflow: auto"
|
||||
:editable="false"
|
||||
@treeClick="handleSelectTreeClick"
|
||||
@treeDblClick=""
|
||||
>
|
||||
</role-tree>
|
||||
</div>
|
||||
|
||||
<div class="item btn__wrapper">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-arrow-right"
|
||||
@click="toResultTree"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<laws-tree2
|
||||
treeDivId="resultTree"
|
||||
ref="resultTree"
|
||||
:zNodes="resultNodes"
|
||||
:autoSelect="false"
|
||||
deptSelect
|
||||
style="width: 200px;overflow: auto"
|
||||
editable
|
||||
showRMenu
|
||||
:show-r-menu-add="false"
|
||||
:show-r-menu-copy="false"
|
||||
@treeClick="handleResultTreeClick"
|
||||
@treeDblClick=""
|
||||
@treeRemove="handleResultTreeRemove"
|
||||
@treeEdit="handleResultTreeEdit"
|
||||
>
|
||||
</laws-tree2>
|
||||
</div>
|
||||
|
||||
<!-- <role-user-tree-->
|
||||
<!-- :visible.sync="editNodeDialogVisible"-->
|
||||
<!-- checkEnable-->
|
||||
<!-- :checkIdList="checkIdList"-->
|
||||
<!-- @confirm="confirm"-->
|
||||
<!-- ></role-user-tree>-->
|
||||
<org-table :visible.sync="editNodeDialogVisible" dialog-model @confirm="confirm" :config="orgValChecked"></org-table>
|
||||
|
||||
<!--<el-dialog-->
|
||||
<!-- title="编辑角色"-->
|
||||
<!-- :visible.sync="editNodeDialogVisible"-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- append-to-body-->
|
||||
<!-- width="60%">-->
|
||||
<!-- <div slot="footer" class="demo-drawer-footer">-->
|
||||
<!-- <el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="editNodeDialogSubmit">确定</el-button>-->
|
||||
<!-- <el-button round class="common-button-default" icon="el-icon-close" @click="editNodeDialogVisible = false">取消</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!--</el-dialog>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lawsTree2 from '@/components/lawsTree/index2'
|
||||
import RoleTree from './components/RoleTree'
|
||||
|
||||
let wxId = 0
|
||||
|
||||
const rootNode = {
|
||||
open: true,
|
||||
id: '-1',
|
||||
name: '项目成员',
|
||||
nativeName: '项目成员',
|
||||
icon: 'static/images/dept.png',
|
||||
wxId: -1,
|
||||
type: 'root',
|
||||
wxRole: '',
|
||||
userList: []
|
||||
}
|
||||
|
||||
const checkNodeTypeByIcon = (data) => {
|
||||
const matcher = {
|
||||
'static/images/dept.png': 'role',
|
||||
'static/images/user.png': 'user'
|
||||
}
|
||||
return data.type || matcher[data.icon]
|
||||
}
|
||||
|
||||
const checkNodeIconByType = (data) => {
|
||||
const matcher = {
|
||||
'role': 'static/images/dept.png',
|
||||
'user': 'static/images/user.png'
|
||||
}
|
||||
return data.icon || matcher[data.type]
|
||||
}
|
||||
|
||||
const resolveNameByType = (data) => {
|
||||
if (data.type === 'role') {
|
||||
return data.roleName
|
||||
} else {
|
||||
return data.userName
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
lawsTree2,
|
||||
RoleTree
|
||||
},
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
gridData:[],
|
||||
productname:'',
|
||||
visible:false,
|
||||
selectNode: {}, // 左侧选中的节点数据
|
||||
resultNode: {}, // 右侧选中的节点数据
|
||||
resultNodes: [], // 右侧树数据
|
||||
editNode: {},
|
||||
editNodeForForm: {},
|
||||
editNodeDialogVisible: false,
|
||||
checkIdList: [],
|
||||
orgValChecked: {
|
||||
value: '',
|
||||
valueName: ''
|
||||
},
|
||||
checkList: []
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newValue, oldValue) {
|
||||
this.resolveValueToResultNodes(newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectTreeClick(treeId, treeNode) {
|
||||
this.selectNode = { ...treeNode }
|
||||
},
|
||||
|
||||
handleResultTreeClick(treeId, treeNode) {
|
||||
this.resultNode = { ...treeNode }
|
||||
},
|
||||
|
||||
toResultTree() {
|
||||
if (this.resultNode.id || this.resultNode.name) {
|
||||
// 判断是否为相同节点
|
||||
if (this.resultNode.id === this.selectNode.id) {
|
||||
this.$message.warning("请选择右侧其他不相同的节点")
|
||||
return
|
||||
}
|
||||
|
||||
if (this.checkHasNode(this.selectNode.id, this.resultNode.id)) {
|
||||
this.$message.warning("右侧当前层级已存在相同节点")
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.selectNode.id && !this.selectNode.name) {
|
||||
this.$message.warning("请选择左侧节点")
|
||||
return
|
||||
}
|
||||
const treeNode = {
|
||||
id: this.selectNode.id,
|
||||
name: this.selectNode.name,
|
||||
nativeName: this.selectNode.name,
|
||||
icon: this.selectNode.icon,
|
||||
pId: this.resultNode.id,
|
||||
wxId: wxId++,
|
||||
type: checkNodeTypeByIcon(this.selectNode),
|
||||
wxRole: this.selectNode.id,
|
||||
roleCode: this.selectNode.id,
|
||||
roleName: this.selectNode.name,
|
||||
userList: [],
|
||||
__treeNode__: this.selectNode
|
||||
}
|
||||
this.$refs['resultTree'].addNode(treeNode)
|
||||
this.emitInput()
|
||||
} else {
|
||||
this.$message.warning("请选择右侧节点")
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
checkHasNode(id, pId) {
|
||||
return this.resultNodes.some(item => item.pId === pId && item.id === id)
|
||||
},
|
||||
|
||||
handleResultTreeRemove(treeId, treeNode) {
|
||||
const wxId = treeNode.wxId
|
||||
const findIndex = this.resultNodes.findIndex(item => item.wxId === wxId)
|
||||
if (findIndex > -1) {
|
||||
this.resultNodes.splice(findIndex, 1)
|
||||
}
|
||||
this.emitInput()
|
||||
},
|
||||
|
||||
handleResultTreeEdit(treeId, treeNode) {
|
||||
const wxId = treeNode.wxId
|
||||
const findNode = this.resultNodes.find(item => item.wxId === wxId)
|
||||
|
||||
if (findNode && findNode.type === 'role') {
|
||||
this.editNode = findNode
|
||||
this.editNodeForForm = { ...findNode, userList: [] }
|
||||
this.checkIdList = treeNode.userList.length > 0 ? treeNode.userList[0].id.split(',') : []
|
||||
this.checkList = treeNode.userList
|
||||
const idList = []
|
||||
const nameList = []
|
||||
treeNode.userList.map(item => {
|
||||
if (item.userId) {
|
||||
idList.push(item.userId)
|
||||
} else {
|
||||
idList.push(item.id)
|
||||
}
|
||||
if (item.userName) {
|
||||
nameList.push(item.userName)
|
||||
} else {
|
||||
nameList.push(item.name)
|
||||
}
|
||||
})
|
||||
this.orgValChecked = {
|
||||
value: idList.join(','),
|
||||
valueName: nameList.join(',')
|
||||
}
|
||||
this.editNodeDialogVisible = true
|
||||
} else {
|
||||
this.$message.warning('当前节点不可维护用户')
|
||||
}
|
||||
},
|
||||
|
||||
editNodeDialogSubmit() {
|
||||
this.editNode.userList = this.editNodeForForm.userList
|
||||
// 用户的显示需要 用户名+角色
|
||||
let nameAndRole = this.editNode.nativeName
|
||||
if (this.editNode.type === 'role' && this.editNode.userList && this.editNode.userList.length > 0) {
|
||||
const userName = this.editNode.userList.map(item => item.userName || item.oldname || item.name)
|
||||
const showName = userName.join(',')
|
||||
nameAndRole = this.editNode.nativeName + ' (' + showName + ')'
|
||||
}
|
||||
this.editNodeDialogVisible = false
|
||||
|
||||
this.emitInput()
|
||||
},
|
||||
|
||||
emitInput() {
|
||||
const list = [...this.resultNodes]
|
||||
// 去掉根节点
|
||||
list.shift()
|
||||
const result = list.map(item => {
|
||||
const pId = item.pId === '-1' ? '' : item.pId
|
||||
const userIdArr = item.userList.map(item => item.userId || item.id)
|
||||
const userNameArr = item.userList.map(item => item.userName || item.oldname || item.name)
|
||||
return {
|
||||
tsId: userIdArr.join(','),
|
||||
pid: pId,
|
||||
type: item.type,
|
||||
roleName: item.type === 'role' && item.nativeName || null,
|
||||
roleCode: item.roleCode,
|
||||
userList: [...item.userList],
|
||||
userName: userNameArr.join(',')
|
||||
}
|
||||
})
|
||||
this.$emit('input', result)
|
||||
},
|
||||
|
||||
resolveValueToResultNodes() {
|
||||
const value = this.value || []
|
||||
const result = value.map(item => {
|
||||
const pId = item.pid || '-1'
|
||||
const tsid =item.tsId
|
||||
const tsidArr = tsid ? tsid.split(',') : []
|
||||
const name1 = item.userName
|
||||
const nameArr = name1 ? name1.split(',') : []
|
||||
const userList = tsidArr.map((item, index) => {
|
||||
return {
|
||||
id: item,
|
||||
name:nameArr[index]
|
||||
}
|
||||
})
|
||||
// if (item.tsId) {
|
||||
// userList.push({id: item.tsId, name: item.userName})
|
||||
// }
|
||||
|
||||
const name = resolveNameByType(item)
|
||||
|
||||
// 用户的显示需要 用户名+角色
|
||||
let nameAndRole = name
|
||||
if (item.type === 'role' && userList && userList.length > 0) {
|
||||
const userName = userList.map(item => item.name)
|
||||
nameAndRole = name + ' (' + userName + ')'
|
||||
}
|
||||
return {
|
||||
open: true,
|
||||
id: item.roleCode,
|
||||
roleCode: item.roleCode,
|
||||
roleName: item.roleName,
|
||||
nativeName: name,
|
||||
name: nameAndRole,
|
||||
icon: checkNodeIconByType(item),
|
||||
pId: pId,
|
||||
wxId: item.id || wxId++,
|
||||
type: item.type,
|
||||
userList: userList || []
|
||||
}
|
||||
})
|
||||
|
||||
this.resultNodes = [rootNode, ...result]
|
||||
|
||||
},
|
||||
confirm(checkedList) {
|
||||
this.editNodeForForm.userList = checkedList
|
||||
this.editNodeDialogSubmit()
|
||||
},
|
||||
arraySplit(item){
|
||||
for (let i = 0;i<item.length;i++){
|
||||
const id = item.id
|
||||
const idArr = id ? id.split(',') : []
|
||||
const name = item.name
|
||||
const nameArr = name ? name.split(',') : []
|
||||
debugger
|
||||
const userList = id.map((item, index) => {
|
||||
return {
|
||||
id: item,
|
||||
name:nameArr[index]
|
||||
}
|
||||
})
|
||||
}},
|
||||
//获取所有项目信息
|
||||
getNativeName(){
|
||||
this.$http.get('lawss/sarProductInfo/queryAllProjectInfo',{},{
|
||||
_this : this
|
||||
}, res => {
|
||||
this.gridData = res.data
|
||||
this.gridData.productId = res.data.id
|
||||
})
|
||||
},
|
||||
getProductUserList(value){
|
||||
this.$http.get('lawss/sarProductUser/getUserListByProjectId',{
|
||||
productId : value
|
||||
},{
|
||||
_this : this
|
||||
}, res => {
|
||||
if (res.ok){
|
||||
const list = []
|
||||
|
||||
//角色拆分
|
||||
|
||||
for (let i = 0;i<res.data.length;i++){
|
||||
const tsid = res.data[i].tsId
|
||||
const tsidArr = tsid ? tsid.split(',') : []
|
||||
const name = res.data[i].userName
|
||||
const nameArr = name ? name.split(',') : []
|
||||
const userList = tsidArr.map((item, index) => {
|
||||
return {
|
||||
id: item,
|
||||
name:nameArr[index]
|
||||
}
|
||||
})
|
||||
|
||||
const resultList1 = {
|
||||
id: res.data[i].roleCode,
|
||||
name: res.data[i].roleName,
|
||||
nativeName: res.data[i].roleName,
|
||||
icon: checkNodeIconByType(res.data[i]),
|
||||
pId:res.data[i].pid,
|
||||
wxId: wxId++,
|
||||
type: checkNodeTypeByIcon(res.data[i]),
|
||||
wxRole: res.data[i].roleCode,
|
||||
roleCode: res.data[i].roleCode,
|
||||
roleName: res.data[i].roleName,
|
||||
userList: userList,
|
||||
__treeNode__: res.data[i],
|
||||
}
|
||||
if (resultList1.pId === ''){
|
||||
resultList1.pId = '-1'
|
||||
}else {
|
||||
resultList1.pId = res.data[i].pid
|
||||
}
|
||||
list.push(resultList1)
|
||||
}
|
||||
|
||||
//节点去重
|
||||
|
||||
const idList=[]
|
||||
this.resultNodes.forEach(item =>{
|
||||
idList[item.id+'-'+item.pId] = item
|
||||
})
|
||||
const idListHas=[]
|
||||
const idListNo=[]
|
||||
list.forEach(item => {
|
||||
if (!!idList[item.id + '-' + item.pId]) {
|
||||
idListHas.push(item)
|
||||
} else {
|
||||
idListNo.push(item)
|
||||
}
|
||||
})
|
||||
for (let i = 0;i<idListNo.length;i++){
|
||||
this.resultNodes.push(idListNo[i])
|
||||
}
|
||||
|
||||
//角色去重
|
||||
|
||||
const UserListMapHas=[]
|
||||
const UserListMapNo=[]
|
||||
const idListUserMap={}
|
||||
idListHas.forEach(item =>{
|
||||
const idUserMap = idList[item.id+'-'+item.pId]
|
||||
idUserMap.userList.forEach(i =>{
|
||||
idListUserMap[i.id+'-'+i.name] = i
|
||||
})
|
||||
item.userList.forEach(i =>{
|
||||
if (idListUserMap[i.id+'-'+i.name]){
|
||||
UserListMapHas.push(i)
|
||||
}else {
|
||||
UserListMapNo.push(i)
|
||||
}
|
||||
})
|
||||
for (let i=0;i<UserListMapNo.length;i++){
|
||||
idUserMap.userList.push(UserListMapNo[i])
|
||||
}
|
||||
}
|
||||
)
|
||||
this.emitInput()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resolveValueToResultNodes()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.singleBox {
|
||||
flex: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.tree__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
.item {
|
||||
flex: 1 1 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn__wrapper {
|
||||
flex: 0 0 60px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style scoped>
|
||||
.proper i{
|
||||
float: right;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bt {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.inp{
|
||||
width: 230px;
|
||||
border-radius: 50px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
/deep/.el-input--suffix .el-input__inner {
|
||||
border-radius: 100px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.proper{
|
||||
font-size: 12px;
|
||||
}
|
||||
/deep/.inp .el-input{
|
||||
font-size: 12px!important;
|
||||
}
|
||||
/deep/ .el-input__icon {
|
||||
line-height: 35px!important;
|
||||
}
|
||||
::v-deep .el-scrollbar .el-select-dropdown__item{
|
||||
font-size: 12px!important;
|
||||
height: 24px!important;
|
||||
line-height: 24px!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!--项目相关人员-->
|
||||
<template>
|
||||
<div class="tree__wrapper">
|
||||
<laws-tree2
|
||||
treeDivId="resultTree"
|
||||
ref="resultTree"
|
||||
:zNodes="resultNodes"
|
||||
:autoSelect="false"
|
||||
style="width: 100%;height: 500px;overflow: auto"
|
||||
:editable="false"
|
||||
>
|
||||
</laws-tree2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lawsTree2 from '@/components/lawsTree/index2'
|
||||
|
||||
let wxId = 0
|
||||
|
||||
const rootNode = {
|
||||
open: true,
|
||||
id: '-1',
|
||||
name: '项目成员',
|
||||
icon: 'static/images/dept.png',
|
||||
wxId: -1,
|
||||
type: 'root',
|
||||
wxRole: '',
|
||||
userList: []
|
||||
}
|
||||
|
||||
const checkNodeIconByType = (data) => {
|
||||
const matcher = {
|
||||
'role': 'static/images/dept.png',
|
||||
'user': 'static/images/user.png'
|
||||
}
|
||||
return data.icon || matcher[data.type]
|
||||
}
|
||||
|
||||
const resolveNameByType = (data) => {
|
||||
if (data.type === 'role') {
|
||||
return data.roleName
|
||||
} else {
|
||||
return data.userName
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
lawsTree2
|
||||
},
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
selectNode: {}, // 左侧选中的节点数据
|
||||
resultNode: {}, // 右侧选中的节点数据
|
||||
resultNodes: [], // 右侧树数据
|
||||
editNode: {},
|
||||
editNodeForForm: {},
|
||||
editNodeDialogVisible: false
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newValue, oldValue) {
|
||||
console.log(newValue)
|
||||
this.resolveValueToResultNodes(newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resolveValueToResultNodes() {
|
||||
const value = this.value || []
|
||||
const result = value.map(item => {
|
||||
const pId = item.pid || '-1'
|
||||
const name = resolveNameByType(item)
|
||||
|
||||
const userList = []
|
||||
if (item.tsId) {
|
||||
userList.push({id: item.tsId, name: item.userName})
|
||||
}
|
||||
|
||||
// 用户的显示需要 用户名+角色
|
||||
let nameAndRole = name
|
||||
if (item.type === 'role' && userList && userList.length > 0) {
|
||||
const userName = userList.map(item => item.name)
|
||||
nameAndRole = name + ' (' + userName.join(',') + ')'
|
||||
}
|
||||
return {
|
||||
open: true,
|
||||
id: item.roleCode,
|
||||
roleCode: item.roleCode,
|
||||
roleName: item.roleName,
|
||||
nativeName: name,
|
||||
name: nameAndRole,
|
||||
icon: checkNodeIconByType(item),
|
||||
pId: pId,
|
||||
wxId: item.id || wxId++,
|
||||
type: item.type,
|
||||
userList: userList || []
|
||||
}
|
||||
})
|
||||
|
||||
this.resultNodes = [rootNode, ...result]
|
||||
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.resolveValueToResultNodes()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tree__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
.btn__wrapper {
|
||||
flex: 0 0 60px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user