<template>
|
<GlobalAlertWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="select-container">
|
<div class="tree">
|
<div style="display: flex; margin-bottom: 5px;">
|
<el-input
|
placeholder="输入关键字进行过滤"
|
v-model="filterText"
|
clearable
|
@input="inputAction"
|
@keypress.enter.native="search"
|
></el-input>
|
<el-button @click="search" style="margin-left: 5px;" type="primary">搜索</el-button>
|
</div>
|
<el-tree
|
key="tree"
|
v-if="!filterList.length"
|
:data="data"
|
:load="loadNode"
|
lazy
|
>
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.data.name }}</span>
|
<el-checkbox @change="selectUser(node.data)" v-if="node.data.isUser" v-model="node.data.isSelect"></el-checkbox>
|
</span>
|
</el-tree>
|
<div v-else>
|
<div v-for="item in filterList" :key="item.id" class="custom-tree-node">
|
<span>{{ item.realname }}</span>
|
<el-checkbox @change="selectUser(item)" v-model="item.isSelect"></el-checkbox>
|
</div>
|
</div>
|
</div>
|
<div class="line"></div>
|
<div class="selected">
|
<div style="margin-bottom: 5px;">已选：{{ selectList.length }}</div>
|
<div v-for="item in selectList" :key="item.id" class="custom-tree-node">
|
<span>{{ item.name }}</span>
|
<i class="el-icon-delete delete" @click="deleteAction(item)"></i>
|
</div>
|
</div>
|
</div>
|
</GlobalAlertWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
|
// import { findTreeUser } from '@/api/system/department'
|
import { fetchList as userList } from '@/api/system/user'
|
export default {
|
name: 'selectMember',
|
extends: BaseOpera,
|
components: { GlobalAlertWindow },
|
data () {
|
return {
|
props: {
|
label: 'name',
|
children: 'zones',
|
isLeaf: 'isUser'
|
},
|
data: [],
|
filterText: '',
|
filterList: [],
|
selectList: [],
|
// 表单数据
|
form: {
|
id: null,
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
remark: '',
|
name: '',
|
roomId: '',
|
startTime: '',
|
endTime: '',
|
content: ''
|
},
|
rootNode: {},
|
// 验证规则
|
rules: {
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/meeting/bookings',
|
'field.id': 'id'
|
})
|
|
},
|
methods: {
|
/**
|
* 打开窗口
|
* @title 窗口标题
|
* @target 编辑的对象
|
*/
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.filterList = []
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
// this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
},
|
loadNode(node, resolve) {
|
this.rootNode = node
|
// console.log(node, resolve);
|
if (node.data.isUser) {
|
return resolve([])
|
}
|
let parentId = ''
|
if (node.level === 0) {
|
parentId = ''
|
} else {
|
parentId = node.data.id
|
}
|
// findTreeUser({parentId})
|
// .then(res => {
|
// // this.data = [res]
|
// if (!parentId) {
|
// resolve([res])
|
// } else {
|
// let resolveList = []
|
// if (res.userList) {
|
// res.userList.forEach(item => {
|
// let index = this.selectList.findIndex(sel => sel.id == item.id)
|
// resolveList.push({
|
// ...item,
|
// name: item.realname,
|
// isUser: true,
|
// isSelect: index !== -1
|
// })
|
// });
|
// }
|
// if (res.children) {
|
// res.children.forEach(item => {
|
// resolveList.push(item)
|
// })
|
// }
|
|
// resolve(resolveList)
|
// }
|
|
// })
|
},
|
inputAction() {
|
if (!this.filterText) {
|
this.filterList = []
|
}
|
},
|
search() {
|
this.filterList = []
|
if (this.filterText) {
|
userList({
|
page: 1,
|
capacity: 9999,
|
model: { realname: this.filterText },
|
})
|
.then(res => {
|
// console.log(res);
|
// this.filterList = res.records
|
res.records.forEach(item => {
|
let index = this.selectList.findIndex(sel => sel.id == item.id)
|
this.filterList.push({
|
...item,
|
isSelect: index !== -1
|
})
|
})
|
})
|
}
|
},
|
selectUser(item) {
|
let index = this.selectList.findIndex(sel => sel.id == item.id)
|
if (index !== -1) {
|
this.selectList.splice(index, 1)
|
} else {
|
this.selectList.push({
|
name: item.realname,
|
id: item.id
|
})
|
}
|
},
|
deleteAction(item) {
|
console.log(this.rootNode);
|
this.selectList.splice(this.selectList.findIndex(sel => sel.id == item.id), 1)
|
this.filterList.forEach(filter => {
|
if (filter.id == item.id) {
|
filter.isSelect = false
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.select-container {
|
display: flex;
|
height: 100%;
|
.tree {
|
padding: 0 10px 10px;
|
box-sizing: border-box;
|
width: calc(50% - 0.5px);
|
min-height: 200px;
|
// height: 100%;
|
|
}
|
.line {
|
width: 1px;
|
min-height: 200px;
|
// height: 100%;
|
|
background-color: #f7f7f7;
|
}
|
.selected {
|
padding: 0 10px 10px;
|
box-sizing: border-box;
|
// background-color: red;
|
// flex: 1;
|
width: calc(50% - 0.5px);
|
min-height: 200px;
|
// height: 100%;
|
}
|
}
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 8px;
|
}
|
.delete {
|
box-sizing: border-box;
|
line-height: 26px;
|
margin-left: 10px;
|
width: 16px;
|
height: 16px;
|
// background-color: #BFC3CB;
|
color: #216EEE;
|
border-radius: 50%;
|
padding: 1.5px;
|
cursor: pointer;
|
&:hover {
|
color: #ff0000;
|
}
|
}
|
</style>
|
