tree 树形加载及增删改
Posted byme
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tree 树形加载及增删改相关的知识，希望对你有一定的参考价值。
//异步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>
以上是关于tree 树形加载及增删改的主要内容，如果未能解决你的问题，请参考以下文章