tree 树形加载及增删改
2024-08-26 12:30:09
//异步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>
最新文章
- ASP.NET Core 折腾笔记一
- <<< ajax在jsp中对于https跨域不能访问
- JSON总结
- javaEE-----org.springframework.dao.InvalidDataAccessApiUsageException: Write operation
- socket网络编程中read与recv区别
- CodeForces 164A Variable, or There and Back Again 搜索
- 柯南君 ：Oracle 分区技术 之 怎样支撑大数据操作？
- 使用本地光盘安装Microsoft .NET Framework 3.5 for Win8.1/WinServer2012R2
- 【C#】详解使用Enumerable.Distinct方法去重
- HDFS操作--文件上传/创建/删除/查询文件信息
- C语言中的函数、数组与指针
- RxJava在Android中使用场景详解
- 如何恢复Eclipse中被误删除的文件
- Debatching(Splitting) XML Message in Orchestration using DefaultPipeline - BizTalk 2010
- @media only screen and (max-width:640px)中的问题，响应式布局
- HBase中无法使用backspace删除
- flume-elasticsearch-sink indexName
- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
- git 免密码配置
- 关于secureCRT的安装