129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<!--项目相关人员-->
|
|
<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) {
|
|
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>
|