|
@@ -15,10 +15,10 @@
|
|
<el-button @click="del_kind" type="danger">删除分类</el-button>
|
|
<el-button @click="del_kind" type="danger">删除分类</el-button>
|
|
</el-row>
|
|
</el-row>
|
|
</header>
|
|
</header>
|
|
- <hr style="border-top: 2px solid #eee;margin: 10px 0;">
|
|
|
|
|
|
+ <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
|
|
<section id="section">
|
|
<section id="section">
|
|
<article v-show="id">
|
|
<article v-show="id">
|
|
- <el-button @click="add_catalog" type="primary">添加目录</el-button>
|
|
|
|
|
|
+ <el-button @click="add_catalog" type="primary">添加目录</el-button>
|
|
</article>
|
|
</article>
|
|
<el-tree
|
|
<el-tree
|
|
:data="dataTree"
|
|
:data="dataTree"
|
|
@@ -44,10 +44,7 @@
|
|
</el-tree>
|
|
</el-tree>
|
|
</section>
|
|
</section>
|
|
|
|
|
|
- <el-dialog
|
|
|
|
- :title="title.title"
|
|
|
|
- :visible.sync="showDialog"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-dialog :title="title.title" :visible.sync="showDialog">
|
|
<el-row type="flex">
|
|
<el-row type="flex">
|
|
<el-col :span="14">
|
|
<el-col :span="14">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
|
@@ -80,9 +77,7 @@
|
|
import { mapActions } from "vuex";
|
|
import { mapActions } from "vuex";
|
|
// 表单验证规则
|
|
// 表单验证规则
|
|
const rules = {
|
|
const rules = {
|
|
- nodeName: [
|
|
|
|
- { required: true, message: "请输入节点名称", trigger: "blur" }
|
|
|
|
- ],
|
|
|
|
|
|
+ nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
|
|
meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
|
|
meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
|
|
};
|
|
};
|
|
// tree组件 配置
|
|
// tree组件 配置
|
|
@@ -101,8 +96,8 @@ export default {
|
|
meta: "",
|
|
meta: "",
|
|
code: ""
|
|
code: ""
|
|
},
|
|
},
|
|
- /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */
|
|
|
|
- dialogStatus: null,
|
|
|
|
|
|
+ /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */
|
|
|
|
+ dialogStatus: null,
|
|
addOrEditThis: {}, // 保存被点击的 this
|
|
addOrEditThis: {}, // 保存被点击的 this
|
|
title: {
|
|
title: {
|
|
title: "编辑/添加",
|
|
title: "编辑/添加",
|
|
@@ -122,27 +117,29 @@ export default {
|
|
if (valid) {
|
|
if (valid) {
|
|
console.log(this.dyForm);
|
|
console.log(this.dyForm);
|
|
switch (this.dialogStatus) {
|
|
switch (this.dialogStatus) {
|
|
- case 1: /* 添加 */
|
|
|
|
- this.form.parentId = this.addOrEditThis.id
|
|
|
|
|
|
+ case 1 /* 添加 */:
|
|
|
|
+ this.form.parentId = this.addOrEditThis.id;
|
|
this.reqSave("/publics/treenode/addNode");
|
|
this.reqSave("/publics/treenode/addNode");
|
|
break;
|
|
break;
|
|
- case 2: /* 编辑 */
|
|
|
|
|
|
+ case 2 /* 编辑 */:
|
|
this.reqSave("/publics/treenode/updateNode");
|
|
this.reqSave("/publics/treenode/updateNode");
|
|
break;
|
|
break;
|
|
- case 3: /* 添加分类 */
|
|
|
|
|
|
+ case 3 /* 添加分类 */:
|
|
this.form.parentId = "-1";
|
|
this.form.parentId = "-1";
|
|
this.reqSave("/publics/treenode/addNode");
|
|
this.reqSave("/publics/treenode/addNode");
|
|
break;
|
|
break;
|
|
- case 4: /* 编辑 分类*/
|
|
|
|
|
|
+ case 4 /* 编辑 分类*/:
|
|
this.form.id = this.id;
|
|
this.form.id = this.id;
|
|
this.reqSave("/publics/treenode/updateNode");
|
|
this.reqSave("/publics/treenode/updateNode");
|
|
break;
|
|
break;
|
|
- case 6: /* 编辑 分类*/
|
|
|
|
|
|
+ case 6 /* 编辑 分类*/:
|
|
this.form.parentId = this.id;
|
|
this.form.parentId = this.id;
|
|
this.reqSave("/publics/treenode/addNode");
|
|
this.reqSave("/publics/treenode/addNode");
|
|
break;
|
|
break;
|
|
default:
|
|
default:
|
|
- this.$message.error("没有选中添加编辑项的!操作错误请刷新!");
|
|
|
|
|
|
+ this.$message.error(
|
|
|
|
+ "没有选中添加编辑项的!操作错误请刷新!"
|
|
|
|
+ );
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
return false;
|
|
return false;
|
|
@@ -157,7 +154,7 @@ export default {
|
|
method: "POST",
|
|
method: "POST",
|
|
data: this.form,
|
|
data: this.form,
|
|
success: res => {
|
|
success: res => {
|
|
- this.getSubNodeList(this.id);
|
|
|
|
|
|
+ if(this.id)this.getSubNodeList(this.id);
|
|
this.getSubNodeList("-1");
|
|
this.getSubNodeList("-1");
|
|
this.$message.success(this.title.title + "成功!");
|
|
this.$message.success(this.title.title + "成功!");
|
|
// this.showDialog = false;
|
|
// this.showDialog = false;
|
|
@@ -178,10 +175,10 @@ export default {
|
|
hasSub: true
|
|
hasSub: true
|
|
},
|
|
},
|
|
success: res => {
|
|
success: res => {
|
|
- if(parentId == -1 || this.dialogStatus == 3) {
|
|
|
|
- this.options = res
|
|
|
|
|
|
+ if (parentId == -1 ) {
|
|
|
|
+ this.options = res;
|
|
} else {
|
|
} else {
|
|
- this.dataTree = res
|
|
|
|
|
|
+ this.dataTree = res;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
fail: err => {
|
|
fail: err => {
|
|
@@ -190,7 +187,7 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+
|
|
// 添加分类
|
|
// 添加分类
|
|
add_kind() {
|
|
add_kind() {
|
|
this.showDialog = true;
|
|
this.showDialog = true;
|
|
@@ -199,7 +196,7 @@ export default {
|
|
title: "添加分类",
|
|
title: "添加分类",
|
|
nodeName: "节点名称",
|
|
nodeName: "节点名称",
|
|
code: "节点代号"
|
|
code: "节点代号"
|
|
- }
|
|
|
|
|
|
+ };
|
|
},
|
|
},
|
|
// 编辑分类
|
|
// 编辑分类
|
|
edit_kind() {
|
|
edit_kind() {
|
|
@@ -209,17 +206,16 @@ export default {
|
|
}
|
|
}
|
|
this.showDialog = true;
|
|
this.showDialog = true;
|
|
this.dialogStatus = 4;
|
|
this.dialogStatus = 4;
|
|
- let findItem = this.options.find(item => item.id == this.id)
|
|
|
|
- if(findItem.meta instanceof Object) {
|
|
|
|
- findItem.meta = JSON.stringify(findItem.meta, null, 2 )
|
|
|
|
|
|
+ let findItem = this.options.find(item => item.id == this.id);
|
|
|
|
+ if ( findItem.meta && (findItem.meta instanceof Object)) {
|
|
|
|
+ findItem.meta = JSON.stringify(findItem.meta, null, 2);
|
|
}
|
|
}
|
|
-
|
|
|
|
- this.form = findItem
|
|
|
|
|
|
+ this.form = findItem;
|
|
this.title = {
|
|
this.title = {
|
|
title: "编辑分类",
|
|
title: "编辑分类",
|
|
nodeName: "节点名称",
|
|
nodeName: "节点名称",
|
|
code: "节点代号"
|
|
code: "节点代号"
|
|
- }
|
|
|
|
|
|
+ };
|
|
},
|
|
},
|
|
// 删除分类
|
|
// 删除分类
|
|
del_kind() {
|
|
del_kind() {
|
|
@@ -227,8 +223,13 @@ export default {
|
|
this.$message.warning("请选择要删除的分类!");
|
|
this.$message.warning("请选择要删除的分类!");
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- this.dialogStatus = 5;
|
|
|
|
- this.del({ id: this.id });
|
|
|
|
|
|
+ this.$confirm("确认要删除?")
|
|
|
|
+ .then(_ => {
|
|
|
|
+ this.dialogStatus = 5;
|
|
|
|
+ this.del({ id: this.id });
|
|
|
|
+ })
|
|
|
|
+ .catch(_ => {});
|
|
|
|
+
|
|
},
|
|
},
|
|
// 添加目录
|
|
// 添加目录
|
|
add_catalog() {
|
|
add_catalog() {
|
|
@@ -238,35 +239,36 @@ export default {
|
|
title: "添加目录",
|
|
title: "添加目录",
|
|
nodeName: "节点名称",
|
|
nodeName: "节点名称",
|
|
code: "节点代号"
|
|
code: "节点代号"
|
|
- }
|
|
|
|
|
|
+ };
|
|
},
|
|
},
|
|
// 选择框改变
|
|
// 选择框改变
|
|
selectChange() {
|
|
selectChange() {
|
|
|
|
+ console.log(this.id)
|
|
this.getSubNodeList(this.id);
|
|
this.getSubNodeList(this.id);
|
|
},
|
|
},
|
|
// 节点后的添加
|
|
// 节点后的添加
|
|
add(data) {
|
|
add(data) {
|
|
- console.log(data)
|
|
|
|
|
|
+ console.log(data);
|
|
this.showDialog = true;
|
|
this.showDialog = true;
|
|
this.dialogStatus = 1;
|
|
this.dialogStatus = 1;
|
|
this.title = {
|
|
this.title = {
|
|
- title: data.nodeName+":添加目录",
|
|
|
|
|
|
+ title: data.nodeName + ":添加目录",
|
|
nodeName: "子节点名称",
|
|
nodeName: "子节点名称",
|
|
code: "子节点代号"
|
|
code: "子节点代号"
|
|
- }
|
|
|
|
|
|
+ };
|
|
this.form.parentId = data.id;
|
|
this.form.parentId = data.id;
|
|
this.addOrEditThis = data; // 保存当前点击者状态
|
|
this.addOrEditThis = data; // 保存当前点击者状态
|
|
},
|
|
},
|
|
// 节点后的编辑
|
|
// 节点后的编辑
|
|
edit(data) {
|
|
edit(data) {
|
|
- console.log(data)
|
|
|
|
|
|
+ console.log(data);
|
|
this.showDialog = true;
|
|
this.showDialog = true;
|
|
this.dialogStatus = 2;
|
|
this.dialogStatus = 2;
|
|
this.title = {
|
|
this.title = {
|
|
- title: data.nodeName+":编辑节点",
|
|
|
|
|
|
+ title: data.nodeName + ":编辑节点",
|
|
nodeName: "子节点名称",
|
|
nodeName: "子节点名称",
|
|
code: "子节点代号"
|
|
code: "子节点代号"
|
|
- }
|
|
|
|
|
|
+ };
|
|
this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
|
|
this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
|
|
delete this.form.parentId;
|
|
delete this.form.parentId;
|
|
this.form = {
|
|
this.form = {
|
|
@@ -283,9 +285,8 @@ export default {
|
|
method: "POST",
|
|
method: "POST",
|
|
data: { id: data.id },
|
|
data: { id: data.id },
|
|
success: res => {
|
|
success: res => {
|
|
- this.getSubNodeList(this.id);
|
|
|
|
|
|
+ this.id = null
|
|
this.getSubNodeList("-1");
|
|
this.getSubNodeList("-1");
|
|
- console.log(res);
|
|
|
|
this.$message.success("删除成功!");
|
|
this.$message.success("删除成功!");
|
|
},
|
|
},
|
|
fail: err => {
|
|
fail: err => {
|
|
@@ -302,12 +303,12 @@ export default {
|
|
.TreeManagement {
|
|
.TreeManagement {
|
|
#header {
|
|
#header {
|
|
margin-bottom: 15px;
|
|
margin-bottom: 15px;
|
|
- .add_kind{
|
|
|
|
|
|
+ .add_kind {
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- #section{
|
|
|
|
- .hint{
|
|
|
|
|
|
+ #section {
|
|
|
|
+ .hint {
|
|
color: rgb(240, 34, 34);
|
|
color: rgb(240, 34, 34);
|
|
}
|
|
}
|
|
}
|
|
}
|