前言
本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录。云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1
<template>
<div>
<div style="width: 500px">
<!-- 搜索输入框-->
<el-input
placeholder="输入需要搜索的内容"
prefix-icon="el-icon-search"
v-model="filterText"
>
</el-input>
<!-- 自定义节点树形控件-->
<!-- :data数据是部门数据-->
<!-- :props默认展示数据(name和children)-->
<el-tree
style="margin-top: 20px"
:data="deps"
:props="defaultProps"
:filter-node-method="filterNode"
:expand-on-click-node="false"
ref="tree"
>
<!-- style、justify-content、width设置按钮样式靠右-->
<span
slot-scope="{ node, data }"
style="display: flex; justify-content: space-between; width: 100%">
<!-- 默认展示的部门名-->
<span>{{ node.label }}</span>
<span>
<el-button
style="padding: 2px"
type="primary"
size="mini"
@click="() => showAddDep(data)"
>
添加部门
</el-button>
<el-button
style="padding: 2px"
type="danger"
size="mini"
@click="() => deleteDep(data)"
>
删除部门
</el-button>
</span>
</span>
</el-tree>
<!-- 弹出框-->
<el-dialog title="添加部门" :visible.sync="dialogVisible" width="30%">
<div>
<table>
<tr>
<td><el-tag>上级部门</el-tag></td>
<td>{{ pname }}</td>
</tr>
<tr>
<td><el-tag>部门名称</el-tag></td>
<td>
<el-input
v-model="dep.name"
placeholder="请输入部门名称"
></el-input>
</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="doAddDep">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: "DepMana",
data() {
return {
filterText: "",
//展示的部门数据
deps: [],
defaultProps: {
children: "children",
label: "name",
},
dialogVisible: false,
dep: {
name: "",
parentId: "",
},
pname: "",
};
},
mounted() {
this.initDeps();
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
//递归删除部门
removeDepFromDeps(p, deps, id) {
for (let i = 0; i < deps.length; i++) {
let d = deps[i];
if (d.id == id) {
//遍历到当前删除部门id,删除一个
deps.splice(i, 1);
if (deps.length == 0) {
p.isParent = false;
}
return;
} else {
this.removeDepFromDeps(d, d.children, id);
}
}
},
deleteDep(data) {
//如果是父部门,不能删除
if (data.isParent) {
this.$message.error("父部门删除失败!");
} else {
this.$confirm(
"此操作将删除[" + data.name + "]部门, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.deleteRequest(
"/system/basic/department/" + data.id
).then((resp) => {
if (resp) {
this.removeDepFromDeps(null, this.deps, data.id);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
}
},
//添加部门
doAddDep() {
this.postRequest("/system/basic/department/", this.dep).then(
(resp) => {
if (resp) {
this.initDeps();
this.dialogVisible = false;
}
}
);
},
//添加部门
showAddDep(data) {
console.log();
this.dialogVisible = true;
this.pname = data.name;
this.dep.parentId = data.id;
},
initDeps() {
this.getRequest("/system/basic/department/").then((resp) => {
if (resp) {
this.deps = resp;
}
});
},
filterNode(value, data) {
//如果输入框有值就直接展示,没有值返回true,全部展示
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
},
};
</script>
<style>
</style>