521 lines
15 KiB
Vue
521 lines
15 KiB
Vue
<!--项目相关人员-->
|
|
<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 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(',') : []
|
|
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;
|
|
margin-left: 5px;
|
|
}
|
|
/deep/.el-input--suffix .el-input__inner {
|
|
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>
|