tree 树形加载及增删改
程序员文章站
2022-05-31 19:21:36
//异步1 ... ......
菜单管理
添加
//异步1
<template> <div class="addequipment org"> <div class="top"> <div class="topfirst">菜单管理</div> <div class="addequi" @click='addnew'>添加</div> </div> <div class="center "> <!-- 菜单tree --> <div class="inputlist"> <el-tree class="org-tree" :data="menulist" :props="defaultprops" node-key="id" :expand-on-click-node="false" :load="loadchildnode" lazy > <span class="custom-tree-button" slot-scope="{ node, data }"> <span @click='itemhandle(data)'>{{ node.label }}</span> <span> <el-button type="text" size="medium" icon="el-icon-edit-outline" @click="() => edit(data)"> </el-button> <el-button type="text" size="medium" icon="el-icon-circle-plus-outline" @click="() => addnew(data)"> </el-button> <el-button type="text" size="medium" icon="el-icon-delete" @click="() => deletemenu(data)"> </el-button> </span> </span> </el-tree> </div> <!-- 权限操作表格 --> <handlepermission ref='handlepermission' :isshowpermissiontable='isshowpermissiontable' :menuid='menuid' v-show='isshowpermissiontable' > </handlepermission> </div> <!-- 新增修改菜单弹窗 --> <addnewmenu ref='addnewmenu' @getmenutree='getdata' > </addnewmenu> </div> </template> <script> import addnewmenu from './component/addnewmenu' import handlepermission from './component/handlepermission' import { getmenulist, deletemenu, listbypid, } from "@/api/menu.js"; export default { name: "menumang", computed: {}, data() { return { formlabelwidth: "120px", dialogformvisible: false, dialogtitle: "添加", menuid: "", spid: "", form: { id: "", name: "", type: 1, url: "", path: "", icon: "", enabled: true, parentid: "", sortnum: "" }, menulist:[], defaultprops: { children: "children", label: "name" }, menuid: '', isshowpermissiontable: false }; }, components: { addnewmenu, handlepermission }, mounted() { this.getdata(); }, methods: { //点击父节点加载子级数据 loadchildnode(node,resolve) { if(node.loading){ this.itemhandle(node.data,resolve) } }, // 点击节点 itemhandle(data,resolve) { //动态加载子菜单 console.log('data',data) this.menuid = '' if(resolve){ listbypid({ pid: data.id }).then(res => { let { body, message } = res; if (message == "success") { resolve(body) } }) } // 如果节点type为0则加载权限操作表格 if (data.type == 0) { this.menuid = data.id this.isshowpermissiontable = true this.$refs.handlepermission.getpermissionlist(data.id) } else { this.isshowpermissiontable = false } }, //符合条件显示权限table showpermissiontable() { this.isshowpermissiontable = true this.$refs.handlepermission.showtable(this.menuid) }, // 加载菜单数据 getdata() { this.dialogformvisible = false; getmenulist().then(res => { let { body, message } = res; if (res.code == 200) { this.menulist = res.body } }); }, //打开新增修改弹窗 addnew(data) { let parentid = data.parentid let menuid = data.id this.$refs.addnewmenu.showdialog(1, menuid, parentid) }, //打开编辑弹窗 edit(data) { let parentid = data.parentid let menuid = data.id this.$refs.addnewmenu.showdialog(2, menuid, parentid) }, //删除菜单 deletemenu(data) { this.$confirm('确定要删除吗') .then(_ => { deletemenu({id: data.id}).then(res => { if (res.code === 200) { this.$message({ message: '删除成功', type: 'success' }); this.getdata() } else { this.$message.error(res.message); } }) }) .catch(_ => { this.$message({ message: '确认取消', type: 'info' }); }); }, } }; </script> <style lang="less" scoped> .addequipment { position: absolute; top: 120px; left: 0; width: 100%; box-sizing: border-box; padding: 1% 1% 0 5%; color: #ffffff; .top { width: 100%; height: 50px; background: rgba(2,31,42,.4); display: flex; align-items: center; font-size: 20px; margin-bottom: 20px; .topfirst { color: #01c1da; padding: 0 40px 0 20px; } .addequi { background: #1490ff; width: 130px; height: 30px; font-size: 16px; text-align: center; line-height: 28px; border-radius: 4px; cursor: pointer; } } .center { width: 100%; box-sizing: border-box; padding: 10px; background:rgba(2,21,62,.4); overflow: hidden; .inputlist { width: 100%; font-size: 16px; color: #ffffff; float: left; box-sizing: border-box; padding: 30px 10px 0 10px; margin-bottom: .2rem; .org-tree { width: 100%; background: rgba(0, 0, 0, 0); color: #ffffff; } } .tablelist { width: 75%; margin-top: 30px; float: left; .styleed { display: inline-block; padding: 1px 2px; color: #12b1d2; cursor: pointer; } .span1 { display: inline-block ; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } .span2 { display: inline-block ; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } .span3 { display: inline-block; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } } } } </style>
//异步2
<template> <div class="addequipment org"> <div class="top"> <div class="topfirst">组织管理</div><div class="addequi" @click="adduser">添加关联用户</div> </div> <div class="center "> <div class="inputlist"> <el-tree class="org-tree" node-key="id" check-strictly :load="loadnode" :props="defaultprops" lazy ref="treeform" @node-click="handlenodeclick" :expand-on-click-node="false" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="medium" icon="el-icon-edit-outline" @click="() => editor(node,data)"> </el-button> <el-button type="text" size="medium" icon="el-icon-circle-plus-outline" @click="() => append(node, data)"> </el-button> <el-button type="text" size="medium" icon="el-icon-delete" @click="() => remove(node, data)"> </el-button> </span> </span> </el-tree> </div> <div class="tablelist"> <el-table ref="multipletable" :data="tabledata" border tooltip-effect="dark" style="width: 100%"> <el-table-column align="center" label="用户账号" prop='username' show-overflow-tooltip> </el-table-column> <el-table-column align="center" label="用户姓名" prop='name' show-overflow-tooltip> </el-table-column> <el-table-column label="操作" align="center" show-overflow-tooltip> <template slot-scope="scope"> <span class="styleed" @click="devicedel(scope.row)">删除</span> </template> </el-table-column> </el-table> <div class="elpaination"> <el-pagination @size-change="handlesizechange" @current-change="handlecurrentchange" :current-page="currentpage4" :page-sizes="[10, 20, 40, 80]" :page-size="10" style="float: right" layout="total, sizes, prev, pager, next,jumper" :total="total"> </el-pagination> </div> </div> </div> <bindvs @updateing="updateing" ref="bindvs"></bindvs> <assignedorder @updateing="updateingorg" ref="assignedorder"></assignedorder> </div> </template> <script> import {orglistbypid,orglistusershippage,orgdelusership,orgaddusership,orgadd,orgupdate,orgdel} from "@/api/systemmenu/org.js" import {formatdate} from "@/utils/index.js"; import assignedorder from "./component/assigned.vue"; import bindvs from "./component/bindvs.vue"; export default { name: "addequipment", components: { bindvs, assignedorder }, computed: { }, data() { return { menulist:[], ruleform:{ planname:'', name:'', type:null, code:null, addressname:'', }, defaultprops: { children: 'children', label: 'name' }, data : [], statdata:{}, options:[], option1:[], tabledata: [], multipleselection: [], currentpage4: 1, pagenum:1, pagesize:10, total:0, areaid:null,//区域id orgid:null, //组织id flag:true, node:[], reslover:[], nodelist:[], datalist:{}, addoreditor:null, flags : false, tempnode:[], tempnodelist:[], func :{}, } }, created() { }, mounted() { }, methods: { handlesizechange(val) { this.pagesize = val this.orglistusershippage() }, handlecurrentchange(val) { this.pagenum = val this.orglistusershippage() }, //编辑 editor (node,data) { this.addoreditor = 2 this.$refs.assignedorder.show(2,data.id) this.datalist = data let parent = node.parent this.nodelist = parent }, //点击节点 handlenodeclick (data,node) { this.orgid = data.id this.orglistusershippage() }, //新增 append(node,data) { this.nodelist = node this.datalist = data this.addoreditor = 1 this.$refs.assignedorder.show(1,data.id) }, //删除节点 remove(node, data) { this.$confirm(' ', '确认要删除吗?', { confirmbuttontext: '确定', cancelbuttontext: '取消', center: true, customclass:"massagebox" }).then(() => { orgdel({id:data.id}).then(res => { if(res.code == 200) { this.$message({ type: 'success', message: '删除成功!' }); const parent = node.parent; let children = parent.childnodes || parent.data; const index = children.findindex(d => d.key === data.id); children.splice(index, 1); }else { this.$message.error(res.message); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, //更新节点 updateingorg () { //1新增 2编辑 let data = { id : '', limit : '' } if (this.addoreditor == 1) { data.id = this.datalist.id data.limit = this.datalist.limit }else { data.id = this.datalist.parentid data.limit = this.datalist.limit } orglistbypid(data).then((res) =>{ if(res.code == 200) { let treelist = res.body let thechildren = this.nodelist.childnodes thechildren.splice(0, thechildren.length) this.nodelist.docreatechildren(treelist) } }) }, //更新 updateing () { this.orglistusershippage() }, //添加 adduser () { this.$refs.bindvs.show(this.orgid); }, //查看 lookover (row) { this.$refs.lookover.show(row.id,row.deviceid) }, //删除 devicedel (row) { this.$confirm(' ', '确认要删除吗?', { confirmbuttontext: '确定', cancelbuttontext: '取消', center: true, customclass:"massagebox" }).then(() => { orgdelusership({id:row.id}).then(res => { if(res.code == 200) { this.orglistusershippage() this.$message({ type: 'success', message: '删除成功!' }); } }) }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, //分级加载组织节点 loadnode(node, resolve) { console.log(1) if (node.level == 0) { this.orglistbypid(node,resolve) }else { this.orglistbypid(node,resolve) } }, //查询table orglistbypid (node,resolve) { let id = node.level == 0?0:node.data.id let limit = node.level == 0? false : node.data.limit orglistbypid({id:id,limit:limit}).then((res) =>{ let treelist = res.body this.menulist = treelist; if (this.flag) { this.orgid = treelist[0].id this.orglistusershippage() this.flag = false } return resolve(treelist); }) }, //tabliet orglistusershippage () { let data = { orgid:this.orgid,//组织 id pagenum:this.pagenum,//页数 pagesize:this.pagesize,//页大小 kw:null, //查询条件（通配查询条件） } orglistusershippage(data).then((res) =>{ if(res.code == 200) { let data = res.body.datas this.total = res.body.total this.tabledata = data } }) }, } } </script> <style lang="less" scoped> .addequipment { position: absolute; top: 120px; left: 0; width: 100%; box-sizing: border-box; padding: 1% 1% 0 5%; color: #ffffff; .top { width: 100%; height: 50px; background: rgba(2,31,42,.4); display: flex; align-items: center; font-size: 20px; margin-bottom: 20px; .topfirst { color: #01c1da; padding: 0 40px 0 20px; } .addequi { font-size: 16px; background: #1490ff; width: 130px; height: 30px; text-align: center; line-height: 28px; border-radius: 4px; cursor: pointer; } } .center { width: 100%; box-sizing: border-box; padding: 10px; background:rgba(2,21,62,.4); overflow: hidden; .inputlist { width: 25%; /*height: 77vh;*/ font-size: 16px; color: #ffffff; float: left; box-sizing: border-box; padding: 30px 10px 30px 10px; .org-tree { width: 100%; background: rgba(0, 0, 0, 0); color: #ffffff; } } .tablelist { width: 75%; margin-top: 30px; float: left; .styleed { display: inline-block; padding: 1px 2px; color: #12b1d2; cursor: pointer; } .span1 { display: inline-block ; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } .span2 { display: inline-block ; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } .span3 { display: inline-block; width: 1px; height: 10px; background: #12b1d2; margin:0 3px 0 4px; } } } } .addequipment .customized_input { width: 160px!important; } .elpaination { width:100%; height: 40px; margin-top: 10px; color: #ffffff; } </style>
//同步1
<!-- 用户管理 --> <template> <div class="view-wrap" style="min-width:800px"> <!-- 树形部分 --> <div class="div-box-tree"> <div class="depart-page"> <div> <!-- <span>机构名称</span> --> <el-select v-model="organizationname" @change="selectchange" size="small" placeholder="请选择机构" style="width:95%;" > <el-option v-for="item in organizationoptions" :key="item.value" :label="item.agencyname" :value="item.id" /> </el-select> </div> <div class="tree"> <el-tree :data="depttreedata" :props="props" node-key="id" :load="loadnode" @node-click="handlenodeclick" :expand-on-click-node="true" lazy :default-expand-all="true" ref="tree" > <span slot-scope="{ node, data }" class="custom-tree-node"> <span>{{ node.label }}</span> <span> <el-button type="text" @click.stop="() => append(node, data, 'append')" >添加</el-button> <el-button v-if="node.level!==1" type="text" @click.stop="() => getmodifyinfo(node, data, 'modify')" >修改</el-button> <el-button v-if="node.level!==1" type="text" @click.stop="() => remove(node, data)" >删除</el-button> </span> </span> </el-tree> </div> </div> </div> </div> </template> <script> import { post, get } from "@/utils/axios"; //树形部分 import {getorgnizationlist, getorgnizationlistnew, getsuborgnizationlistbyid, addneworg, modifyneworg, deleteorg, getdetailbyid} from '@/api/departmanagement.js' export default { name: "empmng", data() { return { //树形部分 organizationname: '', organizationoptions: [], departoptions: [], depttreedata: [], props: { label: 'deptname', children: 'children', }, dialogformvisible: false, addorgform: { deptno:'', deptname:'', deptpinyin:'', parentdeptname: '', deptpath: '', deptfloor: '', orgname: '' }, formlabelwidth:'120px', rules:{ deptno: [{ required: true, message: '请填写部门编号', trigger: 'blur' }], deptname: [{ required: true, message: '请填写部门名称', trigger: 'blur' }] }, tempnode: {}, func: {}, parentorgid: '', orgid: '', buttontext: '', childorg: [] }; }, //树形部分 created() { }, methods: { //树形部分 //获取组织列表 getorgnizationlist() { getorgnizationlist().then((res)=>{ this.organizationoptions = res.data.data this.depttreedata = [res.data.data[0]] // this.parentorgid = this.organizationoptions[0].id this.organizationname = this.organizationoptions[0].deptname }) }, getorgnizationlist() { getorgnizationlistnew({ agencyname: '', parkname: '', minupdatetime: '', maxupdatetime: '', pagenum: 1, pagesize: 999 }).then((res)=>{ this.organizationoptions = res.data.data.rows this.depttreedata = [res.data.data.rows[0]] console.log('organizationname',this.organizationoptions) debugger this.organizationname = this.organizationoptions[0].agencyname this.parentorgid = this.organizationoptions[0].id this.orgname = this.organizationoptions[0].agencyname }); let that = this; get("property/dept/viewdeptbyorgid",{params:{orgid: "365c29ad69f54db0acf63ce404c21a5b"}}).then(function(res){ console.log('res.data.data',res.data.data) that.depttreedata = res.data.data }) }, //点击树节点 handlenodeclick(data,event) { if (data.id) { this.parentorgid = data.id this.queryform.department = data.deptname // console.log('this.queryform',this.queryform) this.onsearch(); } else { return } this.tempnode.childnodes = [] this.$refs.tree.load(this.tempnode, this.func) }, // 选中组织 selectchange(value) { // this.parentorgid = value let sameitem = this.organizationoptions.find((item)=> { return item.id === value }) this.depttreedata = [sameitem] }, getorgname(data) { if (data.level === 1) { this.addorgform.orgname = data.label } else { this.getorgname(data.parent) } }, //添加 append(data, node, type) { this.orgid = node.id this.dialogformvisible = true this.buttontext = '确认添加' this.addorgform.parentdeptname = data.label this.addorgform.deptpath = data.level === 1 ? data.label : `${data.parent.label}/${data.label}` this.getorgname(data) this.addorgform.parentdeptname = data.label }, //获取修改弹窗信息 getmodifyinfo(data, node, type) { console.log('data',data) this.parentorgid = data.data.parentdeptid this.orgid = node.id this.dialogformvisible = true this.buttontext = '确认修改' this.addorgform.parentdeptname = data.label this.addorgform.deptpath = data.level === 1 ? data.label : `${data.parent.label}/${data.label}` this.getorgname(data) this.addorgform.parentdeptname = data.label getdetailbyid(this.orgid).then((res)=>{ this.addorgform = res.data.data }) }, //删除 remove(data,node) { this.$confirm("确认删除吗？", "提示", { confirmbuttontext: "确定", cancelbuttontext: "取消", type: "warning" }).then(() => { deleteorg(node.id).then((res)=> { this.$message({ type: "success", message: "删除成功!" }); this.getorgnizationlist(); }) }).catch(()=>{ return; }) }, loadnode(node, resolve) { if (node.level === 0) { // return resolve([{ deptname: this.organizationname }]); } else if (node.level > 0) { getsuborgnizationlistbyid(node.data.id).then((res)=>{ this.childorg = res.data.data resolve(this.childorg); }) } }, submitform(formname) { this.$refs[formname].validate((valid) => { if (valid) { if(this.buttontext === '确认添加') { let data = this.addorgform data.parentdeptid = this.orgid addneworg(data).then((res)=> { this.resetform('ruleform') this.getorgnizationlist(); }) } else if (this.buttontext === '确认修改') { let data = this.addorgform data.parentdeptid = this.parentorgid modifyneworg(data).then((res)=> { this.resetform('ruleform') this.getorgnizationlist(); }) } } else { return false; } }); }, resetform(formname) { this.dialogformvisible = false this.$refs[formname].resetfields(); } }, mounted: function() { let _this = this; this.onsearch(); //获取机构下拉 get("/property/agency/page", { params: { agencyname: "", parkname: "", minupdatetime: "", maxupdatetime: "", pagenum: 1, pagesize: 9999, time: new date().gettime() } }).then(function(res) { _this.agencyoptions = res.data.data.rows; }); //获取角色下拉 get("/property/role/page", { params: { rolename: "", minupdatetime: "", maxupdatetime: "", pagenum: 1, pagesize: 9999, time: new date().gettime() } }).then(function(res) { _this.roleoptions = res.data.data.rows; var nonerole = { roleid: "0", rolename: "无" }; _this.roleoptions.push(nonerole); }); } }; </script> <style lang="scss" scoped> .view-wrap { margin: 20px; } .ibox-content p { font-size: 14px; font-weight: bold; margin-bottom: 10px; } .ibox-content p span { margin-left: 6px; } .title { border-bottom: 1px solid #fff; margin: 20px 0; padding-bottom: 20px; } .boxr { border-left: 10px solid #fff; } .boxl { border-right: 10px solid #fff; } h3 { padding-left: 20px; font-size: 18px; } .boxr, .boxl { background: #eee; } .example { margin-left: 20px; } .btn1 { position: absolute; top: 300px; right: 150px; border-color: #71bedf; background: #71bedf; } .btn2 { position: absolute; right: 80px; top: 300px; background: #dfab5d; border-color: #dfab5d; color: #fff; } .tianjiexample { padding-bottom: 150px; } .tongji { border-top: 8px solid #fff; } .biaoge { padding-right: 15px; } .fonts { font-size: 16px; } .btns { margin-left: 0px; } .div-box-wrap { width: 100%; overflow: auto; height: 100%; .div-box-tree { float: left; width: 25%; height: 100%; min-height: 420px; overflow: auto; } .div-box-table { float: right; width: 75%; height: 100%; } } </style>
上一篇： ext TreePanel树节点操作
下一篇： 竹叶青店以及叶青常识详细介绍