|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="TreeManagement">
|
|
|
- <header>
|
|
|
+ <header id="header">
|
|
|
<el-row>
|
|
|
- <el-select v-model="value" filterable placeholder="请选择">
|
|
|
+ <el-select v-model="id" filterable placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.id"
|
|
|
@@ -10,60 +10,218 @@
|
|
|
:value="item.id"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- <el-button>查找</el-button>
|
|
|
+ <el-button @click="onfind">查找</el-button>
|
|
|
</el-row>
|
|
|
</header>
|
|
|
+ <section id="section">
|
|
|
+ <el-tree
|
|
|
+ :data="dataTree"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :props="defaultProps"
|
|
|
+ >
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span class="right">
|
|
|
+ <el-tooltip effect="dark" content="添加节点" placement="top-start">
|
|
|
+ <i class="el-icon-folder-add icon" @click="() => add(data)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" content="编辑节点" placement="top-start">
|
|
|
+ <i class="el-icon-edit icon" @click="() => edit(data)" alt="编辑"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" content="删除节点" placement="top-start">
|
|
|
+ <i class="el-icon-delete icon" @click="() => del(data)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ :title="addOrEditThis.nodeName+'：'+(isAdd?'添加节点':'编辑节点')"
|
|
|
+ :visible.sync="showDialog"
|
|
|
+ >
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
|
|
+ <el-form-item v-show="isAdd">
|
|
|
+ <el-switch
|
|
|
+ @change="switchChange"
|
|
|
+ style="display: block"
|
|
|
+ v-model="isAddSubNode"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ inactive-text="添加当前节点"
|
|
|
+ active-text="添加子节点"
|
|
|
+ ></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="子节点名称:" prop="nodeName">
|
|
|
+ <el-input v-model="form.nodeName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="配置信息:" prop="meta">
|
|
|
+ <el-input
|
|
|
+ v-model="form.meta"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入内容,JSON格式"
|
|
|
+ autosize
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="子节点代号:" prop="code">
|
|
|
+ <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="showDialog=false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">保 存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapActions } from "vuex";
|
|
|
-
|
|
|
+// 表单验证规则
|
|
|
+const rules = {
|
|
|
+ nodeName: [
|
|
|
+ { required: true, message: "请输入消息点编码", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ meta: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
|
|
|
+};
|
|
|
+// tree组件 配置
|
|
|
+const defaultProps = { children: "childs", label: "nodeName"};
|
|
|
export default {
|
|
|
name: "TreeManagement",
|
|
|
data() {
|
|
|
return {
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "选项1",
|
|
|
- nodeName: "黄金糕"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项2",
|
|
|
- label: "双皮奶"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项3",
|
|
|
- label: "蚵仔煎"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项4",
|
|
|
- label: "龙须面"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项5",
|
|
|
- label: "北京烤鸭"
|
|
|
- }
|
|
|
- ],
|
|
|
- value: ""
|
|
|
+ options: [],
|
|
|
+ id: "",
|
|
|
+ dataTree: [],
|
|
|
+ defaultProps,
|
|
|
+ showDialog: false,
|
|
|
+ isAddSubNode: true, // 是添加子节点还是添加当前节点 的 状态标识
|
|
|
+ form: {
|
|
|
+ nodeName: "",
|
|
|
+ meta: "",
|
|
|
+ code: ""
|
|
|
+ },
|
|
|
+ isAdd: null, // 是添加还是编辑状态
|
|
|
+ addOrEditThis: {}, // 保存点击的this
|
|
|
+ rules
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.get("-1")
|
|
|
+ this.getSubNodeList("-1");
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(["fetch"]),
|
|
|
- get(parentId) {
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.dyForm);
|
|
|
+ // 添加
|
|
|
+ if (this.isAdd) {
|
|
|
+ this.form.parentId = this.isAddSubNode
|
|
|
+ ? this.addOrEditThis.id
|
|
|
+ : this.addOrEditThis.parentId;
|
|
|
+ this.reqSave("/publics/treenode/addNode");
|
|
|
+ } else {
|
|
|
+ // 编辑
|
|
|
+ this.reqSave("/publics/treenode/updateNode");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存事件，包括新增字节点和编辑当前节点
|
|
|
+ reqSave(api) {
|
|
|
+ if (!this.form.code) delete this.form.code;
|
|
|
+ this.fetch({
|
|
|
+ api,
|
|
|
+ method: "POST",
|
|
|
+ data: this.form,
|
|
|
+ success: res => {
|
|
|
+ this.getSubNodeList(this.id);
|
|
|
+ this.$message.success(
|
|
|
+ this.isAdd
|
|
|
+ ? "添加" +
|
|
|
+ (this.isAddSubNode ? "子" : "") +
|
|
|
+ "节点成功！"
|
|
|
+ : "编辑节点成功！"
|
|
|
+ );
|
|
|
+ this.showDialog = false;
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
+ else this.$message.error("服务器发生异常");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 请求 拿到树列表
|
|
|
+ getSubNodeList(parentId) {
|
|
|
this.fetch({
|
|
|
api: "/publics/treenode/listNodeByParent",
|
|
|
method: "POST",
|
|
|
data: {
|
|
|
parentId,
|
|
|
- hasSub:false
|
|
|
+ hasSub: true
|
|
|
},
|
|
|
success: res => {
|
|
|
+ parentId == "-1"
|
|
|
+ ? (this.options = res)
|
|
|
+ : (this.dataTree = res);
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ if (err.errMsg) this.$message.error(err.errMsg);
|
|
|
+ else this.$message.error("服务器发生异常");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //
|
|
|
+ switchChange() {
|
|
|
+ console.log(this.isAddSubNode);
|
|
|
+ },
|
|
|
+ // 点击查找
|
|
|
+ onfind() {
|
|
|
+ console.log(this.id);
|
|
|
+ this.getSubNodeList(this.id);
|
|
|
+ },
|
|
|
+ add(data) {
|
|
|
+ console.log("add");
|
|
|
+ console.log(data);
|
|
|
+ this.showDialog = true;
|
|
|
+ this.isAdd = true;
|
|
|
+ this.form.parentId = data.id;
|
|
|
+ this.addOrEditThis = data; // 保存当前点击者状态
|
|
|
+ },
|
|
|
+ edit(data) {
|
|
|
+ this.showDialog = true;
|
|
|
+ this.isAdd = false;
|
|
|
+ this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
|
|
|
+ delete this.form.parentId;
|
|
|
+ console.log(data);
|
|
|
+ this.form = {
|
|
|
+ id: data.id,
|
|
|
+ nodeName: data.nodeName,
|
|
|
+ meta: JSON.stringify(data.meta, null, 2),
|
|
|
+ code: data.code
|
|
|
+ };
|
|
|
+ },
|
|
|
+ del(data) {
|
|
|
+ console.log("del");
|
|
|
+ console.log(data);
|
|
|
+ this.fetch({
|
|
|
+ api: "/publics/treenode/deleteNode",
|
|
|
+ method: "POST",
|
|
|
+ data: { id: data.id },
|
|
|
+ success: res => {
|
|
|
+ this.getSubNodeList(this.id);
|
|
|
console.log(res);
|
|
|
- this.options = res
|
|
|
+ this.$message.success("删除成功！");
|
|
|
},
|
|
|
fail: err => {
|
|
|
console.log(err);
|
|
|
@@ -75,3 +233,24 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.TreeManagement {
|
|
|
+ #header {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.custom-tree-node {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-right: 8px;
|
|
|
+ .right {
|
|
|
+ margin-left: 40px;
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linan