VUE-ElementUI 对话框多层级树形控件，穿越框复杂业务实现

VUE-ElementUI 对话框多层级树形控件，穿越框复杂业务实现

请忽略css，主要是逻辑，看图，图片为子组件,左侧树形控件，中间选择框，右侧展示框

父组件

<template> <div class="box"> <div class="ad-primary choose-btn" @click="chooseOne">请选择人员</div> <div class="ad-primary choose-btn" @click="chooseTwo">请选择管理员</div> <div>选择人员{{attendanceOfficerNameList}}</div> <div>选择管理员{{attendanceOfficerNameListF}}</div> <select-officer @dialogFun="dialogOne" :post-visible="dialogVisibleOne" :post-person="kqPerson" :post-frame="kqCount" :post-user="kqCountu"></select-officer> <select-officer @dialogFun="dialogTwo" :post-visible="dialogVisibleTwo" :post-person="labelPerson" :post-frame="labelCount" :post-user="labelCountu"></select-officer> </div> </template> <script> import attendanceOfficer from "@/pages/common/attendanceOfficer" export default { name: 'attendanceAdd', components: { 'select-officer': attendanceOfficer }, data() { return { dialogVisibleOne: false, dialogVisibleTwo: false, kqPerson: [], kqCount: 0, kqCountu: 0, labelPerson: [], labelCount: 0, labelCountu: 0, attendanceOfficerIds: [], attendanceOfficerNameList: "", attendanceOfficerIdsF: [], attendanceOfficerNameListF: "", } }, created() { this.getDatas(); }, methods: { /** 考勤类型列表 */ getDatas() { function getQuery (variable) { let code = window.location.search.substring(1) //let enUrl = 'user=dev-test&pwd=11111111' //let enUrls = encodeURIComponent(enUrl) //console.log(enUrls) let codes = decodeURIComponent(code) let vars = codes.split("&"); for (let i = 0; i < vars.length; i++) { let pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } let that = this; let u = getQuery('kqId'); //console.log('kq = '+u) if (u) { let params_show = { //"requestId":"4333532244114", "authToken": "12312", "userToken": "26cea5f746ae4c7fbf7c3a4018b23f28", "data": { "kqId": u } } this.http.post('www.centby.com/show', params_show).then( res => { if (res.data.kqPersons != null) { that.kqPerson = res.data.kqPersons; let j = 0; let k = 0; res.data.kqPersons.forEach(function (item) { if (nodeType == 0) { j++; } else if (nodeType == 1) { k++ } }); that.kqCount = j; that.kqCountu = k; } if (res.data.kqLiablePersons != null) { that.labelPerson = res.data.kqLiablePersons; let m = 0; let n = 0; res.data.kqLiablePersons.forEach(function (item) { if (nodeType == 0) { m++; } else if (nodeType == 1) { n++ } }); that.labelCount = m; that.labelCountu = n; } //console.log(JSON.stringify(res)) }, error => { console.log(error.message) } ) } }, chooseOne(){ this.dialogVisibleOne = true; }, chooseTwo(){ this.dialogVisibleTwo = true; }, dialogOne(data){ //console.log(data) this.dialogVisibleOne = data.emita; this.attendanceOfficerIds = data.emitb; this.attendanceOfficerNameList = data.emitc; }, dialogTwo(data){ //console.log(data) this.dialogVisibleTwo = data.emita; this.attendanceOfficerIdsF = data.emitb; this.attendanceOfficerNameListF = data.emitc; } } } </script> <style scoped> .choose-btn { width: 80px; height: 30px; line-height: 30px; padding: 0 20px; margin-bottom: 10px; font-size: 14px; font-weight: 600; border-radius: 4px; cursor: pointer; } </style> 

子组件

<template> <el-dialog title="选择人员" align="left" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"> <div class="chosen-modal"> <div class="chosen-modal-left"> <div class="chosen-modal-hd"> <div class="chosen-modal-hd-search"> <i class="el-icon-search" @click="searchSelect"></i> <input type="text" class="aui-input" placeholder="搜索" v-model="searchWord" id="chosenSearch"> </div> </div> <div class="chosen-modal-bd" style="position: relative;"> <div class="chosen-left" style="width: 200px;"> <el-tree :data="treeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick"> <span class="custom-tree-node" slot-scope="{ node, data }"> <i class="el-icon-folder-opened" v-show="data.nodeType == 0 ? true : false"></i> <i class="el-icon-s-custom" v-show="data.nodeType == 0 ? false : true"></i> <span>{{ node.label }}</span> </span> </el-tree> </div> <div class="chosen-right"> <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :disabled="forbid">全选</el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox v-for="item in category" :label="item.id" :key="item.id" :disabled="forbid"> <i class="el-icon-folder-opened" v-show="item.nodeType == 0 ? true : false"></i> <i class="el-icon-s-custom" v-show="item.nodeType == 0 ? false : true"></i> {{item.name}} </el-checkbox> </el-checkbox-group> </div> </div> </div> <div class="chosen-modal-right"> <div class="chosen-modal-right-hd"> <p id="tipText">已选{{frameCount}}个架构，{{userCount}}名用户</p> </div> <div class="chosen-modal-right-bd"> <div class="chosen-person-org" v-for="items in selectList" :key="items.id" @click="delList(items.id)"> <i class="el-icon-folder-opened" v-show="items.nodeType == 0 ? true : false"></i> <i class="el-icon-s-custom" v-show="items.nodeType == 0 ? false : true"></i> <span class="js-chosen-rs-text">{{items.name}}</span> <i class="el-icon-close"></i> </div> </div> </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="handleClose">取 消</el-button> <el-button type="primary" class="ad-primary" @click="next">确 定</el-button> </span> </el-dialog> </template> <script> //centby.com export default { name: 'attendanceOfficer', props: { postFrame: { type: Number }, postUser: { type: Number }, postVisible: { type: Boolean }, postPerson: { type: Array, default: () => [] } }, data () { return { searchWord: "", defaultProps: { children: 'children', label: 'label' }, treeData: [],//树形渲染 category: [],//选中框渲染 selectList: [],//展示框渲染 checkAll: false,//全选按钮状态 checkedCities: [],//选中框选中的 id 列表 listId:[],//选中框所有 id 列表 parentList: [],//当前树形节点所有父级 id 列表包含自己 forbid: false,//选中框所有禁选状态，默认可选 frameCount: 0, userCount: 0, attendanceOfficerIds: [],//选中的 id 传给父组件 attendanceOfficerNameList: "",//选中字符串传给父组件，做展示 reviewData: '',//展示框请求回显数据 dialogVisible: false//对话框打开或关闭状态 } }, watch: { postFrame: { handler(newName, oldName) { this.frameCount = newName; }, immediate: true, deep: true }, postUser: { handler(newName, oldName) { this.userCount = newName; }, immediate: true, deep: true }, postPerson: { handler(newName, oldName) { this.selectList = newName; }, immediate: true, deep: true }, postVisible: { handler(newName, oldName) { this.dialogVisible = newName; }, type: Boolean } }, created(){ this.treePool(); }, methods: { handleClose(){ this.dialogVisible = false; this.$emit('dialogFun', this.dialogVisible); }, next() { let list = this.selectList; let arr = []; list.forEach(item => { this.attendanceOfficerIds.push(item.id); arr.push(item.name); }) this.attendanceOfficerNameList = arr.join(","); console.log(this.attendanceOfficerIds) console.log(this.attendanceOfficerNameList) this.dialogVisible = false; //对话框打开关闭状态，选中 id 列表，选中 name 列表返回给父组件 this.$emit('dialogFun', {emita:this.dialogVisible,emitb:this.attendanceOfficerIds,emitc:this.attendanceOfficerNameList}); }, treePool () { //展示框数据 // this.selectList = [{ // id: '7387601', // name: '科技部', // nodeType: '0' // }] //树形数据 /* [{ "id": "0", "label": "学生", "nodeType": 0, "orgType": 1, "children": [ { "id": "3736461431145987660", "label": "初中部", "nodeType": 0, "orgType": 1, "children": [ { "id": "3736461431145987661", "label": "2011级", "nodeType": 0, "orgType": 1, "children": [ { "id": "3736461431145987662", "label": "3班", "nodeType": 0, "orgType": 1, "children": [ { "id": "3736461431145987663", "label": "小牛奶", "nodeType": 1, "orgType": 1, "children": null }, { "id": "3736461431145987663", "label": "小牛奶", "nodeType": 1, "orgType": 1, "children": null } ] } ] } ] } ] }] */ let that = this; let params = { //"requestId":"4333532244114", "authToken":"12312", "userToken":"26cea5f746ae4c7fbf7c3a4018b23f28", "data":{ } } this.http.post('www.centby.com/whole', params).then( res => { that.treeData = res.data; //console.log(JSON.stringify(treeData)) }, error => { console.log(error.message) } ) }, searchSelect() { console.log(this.searchWord); let that = this; let keyWord = this.searchWord; let params = { //"requestId":"userToken1574677356105xRx1", "authToken":"666", "userToken":"666", "data":{ "keyWord": keyWord } } this.http.post('www.centby.com/word', params).then( res => { console.log(JSON.stringify(res)) that.treeData = res.data }, error => { console.log(error.message) } ) }, handleCheckAllChange(val) { let all = JSON.parse(JSON.stringify(this.listId)); //console.log("all === "+all) this.checkedCities = val ? all : []; //this.isIndeterminate = false; //console.log("list === "+this.checkedCities); let that = this; let categorys = JSON.parse(JSON.stringify(this.category)); if(val === true){ //全部展示 categorys.forEach(function(item){ categorys.find(function(s){ if(s.id === item.id){ //console.log(s) that.selectList = that.selectList.concat([s]) //放入展示框，并去重 let k = {}; that.selectList = that.selectList.reduce(function (subitem, next) { k[next.id] ? '' : k[next.id] = true && subitem.push(next); return subitem; }, []); } }) }) }else{ //取消展示 categorys.forEach(function(item){ for(let j = 0;j < that.selectList.length;j++){ if(that.selectList[j].id === item.id){ that.selectList.splice(j,1); } } }) } //计算展示框数量 let j = 0; let k = 0; that.selectList.forEach(function(item){ if(item.nodeType == 0){ j++; }else if(item.nodeType == 1){ k++ } }); that.frameCount = j; that.userCount = k; }, handleCheckedCitiesChange(value) { //console.log("sub === "+JSON.stringify(value)) /* //选中 id 列表数据示例 //checkedCities = [3736461431145987743] //选择框数据示例 category = [ { "id": "3736461431145987660", "name": "初中部", "nodeType": 0 }, { "id": "3736461431145987743", "name": "小学部", "nodeType": 0 } ] * * */ let categorys = this.category; console.log("value === " + this.checkedCities ) let checkedCount = value.length; this.checkAll = checkedCount === this.category.length; //this.isIndeterminate = checkedCount > 0 && checkedCount < this.category.length; let that = this; //console.log('list = '+this.listId) let deepCopy = JSON.stringify(this.listId); let unChecked = JSON.parse(deepCopy); //选中ID展示 value.forEach(function (item) { //console.log(item) //添加到展示框 categorys.find(function(s){ if(s.id === item){ //console.log(s) that.selectList = that.selectList.concat([s]) //放入展示框，并去重 let k = {}; that.selectList = that.selectList.reduce(function (subitem, next) { k[next.id] ? '' : k[next.id] = true && subitem.push(next); return subitem; }, []); } }) //console.log('uncheck = '+JSON.stringify(unChecked)) //获取不选中的id for(let i = 0;i < unChecked.length;i++){ // /console.log(item) if(unChecked[i] == item){ unChecked.splice(i,1); } } }) //console.log('res = '+JSON.stringify(unChecked)) //把未选中的从展示框删除 unChecked.forEach(function(item){ for(let j = 0;j < that.selectList.length;j++){ if(that.selectList[j].id == item){ that.selectList.splice(j,1); } } }) //计算展示框数量 let j = 0; let k = 0; that.selectList.forEach(function(item){ if(item.nodeType == 0){ j++; }else if(item.nodeType == 1){ k++ } }); that.frameCount = j; that.userCount = k; }, delList(val){ console.log('del '+JSON.stringify(val)) //console.log('forbid = '+ this.forbid) let that = this; //let checkedMenu = JSON.parse(JSON.stringify(this.checkedCities)); let categorys = JSON.parse(JSON.stringify(that.category)); //第一步先从展示框删除 for(let j = 0;j < that.selectList.length;j++){ if(that.selectList[j].id == val){ that.selectList.splice(j,1); } } let permission = this.forbid; if(permission === true){ //禁止选择状态 //第二步拿删除当前id后的展示框列表 和 所有树形父级 id 列表对比 let hasOne = false; let parent = JSON.parse(JSON.stringify(that.parentList)); let showList = JSON.parse(JSON.stringify(that.selectList)); console.log('after == '+ JSON.stringify(showList)) console.log('parent == '+ JSON.stringify(parent)) parent.forEach(function(item){ showList.forEach(function(show){ if(show.id == item){ hasOne = true; } }) }) //没有父级，改变禁选状态为可选，并重新渲染选择框列表 if(hasOne === false){ //改变禁选状态为可选 that.forbid = false; //从展示框删除 for(let j = 0;j < that.selectList.length;j++){ if(that.selectList[j].id == val){ that.selectList.splice(j,1); } } //重新渲染选中框 that.checkAll = false; that.checkedCities = []; that.selectList.forEach(function (item) { //console.log(item) categorys.find(function(s){ if(s.id === item.id){ //console.log(s) that.checkedCities.push(item.id) //选中等于当前所有选中框列表全选操作 if(that.checkedCities.length == categorys.length){ that.checkAll = true; } } }) }) } }else{ //非禁选状态 //重新渲染选中框 for(let j = 0;j < that.checkedCities.length;j++){ if(that.checkedCities[j] == val){ that.checkedCities.splice(j,1); that.checkAll = false; } } } //计算展示框数量 let j = 0; let k = 0; that.selectList.forEach(function(item){ if(item.nodeType == 0){ j++; }else if(item.nodeType == 1){ k++ } }); that.frameCount = j; that.userCount = k; }, handleNodeClick(data) { //点击树状列表 //console.log(data); /* //选择框数据示例 { "code": 0, "message": "调用成功", "data": { "parentIds": [], "nodes": [ { "id": "3736461431145987660", "name": "初中部", "nodeType": 0 }, { "id": "3736461431145987743", "name": "小学部", "nodeType": 0 } ] } } //选中 id 数据示例 checkedCities = [3736461431145987743] //选择框展示数据示例，展示框数据结构和选择框数据结构相同，选择框选中的列表为数组结构 id 列表 category = [ { "id": "3736461431145987660", "name": "初中部", "nodeType": 0 }, { "id": "3736461431145987743", "name": "小学部", "nodeType": 0 } ] * * */ let that = this; let idx = data.id; let types = data.orgType; let params = { //"requestId":"userToken1574677356105xRx1", "authToken":"666", "userToken":"666", "data":{ "orgId": idx, "orgType": types } } this.http.post('www.centby.com/info', params).then( res => { //console.log(res) that.category = res.data.nodes; //提取所有ID并保存 let arr = []; that.category.forEach(function(item){ //console.log(item.id) arr.push(item.id) }); that.listId = arr; //所有id保存，that.listId = ['3736461431145987600','3736461431145987601','3736461431145987602']; //初始化并保存当前所有树形父级 id 列表包含自己，展示框删除操作会调用此数据 that.parentList = JSON.parse(JSON.stringify(res.data.parentIds)); console.log('parent = '+ JSON.stringify(that.parentList)); //初始化禁选判断，禁选，全选按钮，已选中 let permission = false; that.forbid = false; that.checkAll = false; that.checkedCities = []; //使用JSON转换解决深拷贝问题 let parent = JSON.parse(JSON.stringify(that.parentList)); let showList = JSON.parse(JSON.stringify(that.selectList)); //每次点击树状列表,拿当前所有树形父级 id 列表（parentIds）包含自己，和展示框列表 id 对比，如果有，选择框展示全部全选并且禁止状态 //展示框删除动作，会取此禁选状态做展示框删除动作 parent.forEach(function(item){ showList.forEach(function(show){ if(show.id == item){ permission = true; } }) }) if(permission == true){ //禁止选择操作 that.checkedCities = that.listId; that.checkAll = true; that.forbid = true; // that.selectList.forEach(function (item) { // if(item.id == idx){ // that.checkedCities = that.listId; // that.checkAll = true; // that.forbid = true; // } // }) }else{ //不禁止状态回显渲染 that.selectList.forEach(function (item) { //console.log(item) that.category.find(function(s){ if(s.id === item.id){ //console.log(s) that.checkedCities.push(item.id) //选中等于当前所有选中框列表全选操作 if(that.checkedCities.length == that.listId.length){ that.checkAll = true; } } }) }) } }, error => { console.log(error.message) } ) }, } } </script> <style scoped lang="scss"> .box >>> .el-checkbox { display: block; } .chosen-modal { display: flex; height: 598px; padding: 15px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .chosen-modal-left { width: 430px; } .chosen-modal-hd { padding: 20px; display: flex; border-top: 1px solid #dddee1; border-right: 1px solid #dddee1; border-left: 1px solid #dddee1; } .chosen-modal-hd .chosen-modal-hd-search { position: relative; flex: 1; } .chosen-modal-hd .chosen-modal-hd-search i { width: 32px; height: 32px; line-height: 32px; font-size: 16px; text-align: center; color: #80848f; position: absolute; right: 0; z-index: 1; cursor: pointer; } .aui-input { display: inline-block; width: 100%; height: 32px; line-height: 1.5; padding: 4px 32px 4px 7px; box-sizing: border-box; font-size: 12px; border: 1px solid #dddee1; border-radius: 4px; color: #6e7d8f; background-color: #fff; background-image: none; position: relative; cursor: text; transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out; } .chosen-modal-bd { display: flex; height: 526px; border: 1px solid #dddee1; } .chosen-left { margin-top: -1px; width: 200px; min-width: 200px; height: 525px; overflow-y: auto; position: absolute; background: #fff; z-index: 2; overflow-x: hidden; border-top: 1px solid #dddee1; border-right: 1px solid #dddee1; } .chosen-left-device { margin-top: -1px; width: 200px; min-width: 200px; height: 525px; overflow-y: auto; position: absolute; background: #fff; z-index: 2; overflow-x: hidden; border-top: 1px solid #dddee1; } .chosen-right { flex: 1; padding-left: 200px; z-index: 1; overflow-y: scroll; } .chosen-right .el-checkbox { padding: 10px 15px; color: #0cb181; } .aui-checkbox-label { align-items: center; width: 100%; white-space: normal; word-wrap: break-word; word-break: break-all; margin-bottom: 0; line-height: 1.3; } .chosen-modal-right { flex: 1; border: 1px solid #dddee1; margin-left: 20px; } .chosen-modal-right-hd { padding: 20px; } .chosen-modal-right-bd { height: 538px; overflow: auto; } .chosen-person-org { display: flex; padding: 6px 20px; height: 20px; align-items: center; } .chosen-modal-right-bd>div>i { font-size: 12px; color: #0cb181; margin-right: 5px; align-self: baseline; position: relative; top: 6px; } .chosen-modal-right-bd>div>span { flex: 1; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden; } </style>