123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- <template>
- <div class="TreeManagement">
- <header id="header">
- <el-row>
- <el-select v-model="id" @change="selectChange" filterable placeholder="请选择分类">
- <el-option
- v-for="item in options"
- :key="item.id"
- :label="item.nodeName"
- :value="item.id"
- ></el-option>
- </el-select>
- <el-button @click="add_kind" type="primary" class="add_kind">添加分类</el-button>
- <el-button @click="edit_kind" type="primary">编辑分类</el-button>
- <el-button @click="del_kind" type="danger">删除分类</el-button>
- </el-row>
- </header>
- <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
- <section id="section">
- <article v-show="id">
- <el-button @click="add_catalog" type="primary">添加目录</el-button>
- </article>
- <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="title.title" :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 :label="title.nodeName" 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="{ minRows: 4 }"
- ></el-input>
- </el-form-item>
- <el-form-item :label="title.code" 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: [],
- id: "",
- dataTree: [],
- defaultProps,
- showDialog: false,
- form: {
- nodeName: "",
- meta: "",
- code: ""
- },
- /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */
- dialogStatus: null,
- addOrEditThis: {}, // 保存被点击的 this
- title: {
- title: "编辑/添加",
- nodeName: "节点名称",
- code: "节点代号"
- },
- rules
- };
- },
- created() {
- this.getSubNodeList("-1");
- },
- methods: {
- ...mapActions(["fetch"]),
- submitForm(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- console.log(this.dyForm);
- switch (this.dialogStatus) {
- case 1 /* 添加 */:
- this.form.parentId = this.addOrEditThis.id;
- this.reqSave("/publics/treenode/addNode");
- break;
- case 2 /* 编辑 */:
- this.reqSave("/publics/treenode/updateNode");
- break;
- case 3 /* 添加分类 */:
- this.form.parentId = "-1";
- this.reqSave("/publics/treenode/addNode");
- break;
- case 4 /* 编辑 分类*/:
- this.form.id = this.id;
- this.reqSave("/publics/treenode/updateNode");
- break;
- case 6 /* 编辑 分类*/:
- this.form.parentId = this.id;
- this.reqSave("/publics/treenode/addNode");
- break;
- default:
- this.$message.error(
- "没有选中添加编辑项的!操作错误请刷新!"
- );
- }
- } else {
- return false;
- }
- });
- },
- // 保存事件,包括新增字节点和编辑当前节点
- reqSave(api) {
- if (!this.form.code) delete this.form.code;
- this.fetch({
- api,
- method: "POST",
- data: this.form,
- success: res => {
- if(this.id)this.getSubNodeList(this.id);
- this.getSubNodeList("-1");
- this.$message.success(this.title.title + "成功!");
- // 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: true
- },
- success: res => {
- if (parentId == -1 ) {
- this.options = res;
- } else {
- this.dataTree = res;
- }
- },
- fail: err => {
- if (err.errMsg) this.$message.error(err.errMsg);
- else this.$message.error("服务器发生异常");
- }
- });
- },
- // 添加分类
- add_kind() {
- this.showDialog = true;
- this.dialogStatus = 3;
- this.title = {
- title: "添加分类",
- nodeName: "节点名称",
- code: "节点代号"
- };
- },
- // 编辑分类
- edit_kind() {
- if (!this.id) {
- this.$message.warning("请选择要编辑的分类!");
- return;
- }
- this.showDialog = true;
- this.dialogStatus = 4;
- 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.title = {
- title: "编辑分类",
- nodeName: "节点名称",
- code: "节点代号"
- };
- },
- // 删除分类
- del_kind() {
- if (!this.id) {
- this.$message.warning("请选择要删除的分类!");
- return;
- }
- this.$confirm("确认要删除?")
- .then(_ => {
- this.dialogStatus = 5;
- this.del({ id: this.id });
- })
- .catch(_ => {});
-
- },
- // 添加目录
- add_catalog() {
- this.showDialog = true;
- this.dialogStatus = 6;
- this.title = {
- title: "添加目录",
- nodeName: "节点名称",
- code: "节点代号"
- };
- },
- // 选择框改变
- selectChange() {
- console.log(this.id)
- this.getSubNodeList(this.id);
- },
- // 节点后的添加
- add(data) {
- console.log(data);
- this.showDialog = true;
- this.dialogStatus = 1;
- this.title = {
- title: data.nodeName + ":添加目录",
- nodeName: "子节点名称",
- code: "子节点代号"
- };
- this.form.parentId = data.id;
- this.addOrEditThis = data; // 保存当前点击者状态
- },
- // 节点后的编辑
- edit(data) {
- console.log(data);
- this.showDialog = true;
- this.dialogStatus = 2;
- this.title = {
- title: data.nodeName + ":编辑节点",
- nodeName: "子节点名称",
- code: "子节点代号"
- };
- this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
- delete this.form.parentId;
- this.form = {
- id: data.id,
- nodeName: data.nodeName,
- meta: JSON.stringify(data.meta, null, 2),
- code: data.code
- };
- },
- // 节点后的删除
- del(data) {
- this.fetch({
- api: "/publics/treenode/deleteNode",
- method: "POST",
- data: { id: data.id },
- success: res => {
- this.id = null
- this.getSubNodeList("-1");
- this.$message.success("删除成功!");
- },
- fail: err => {
- console.log(err);
- if (err.errMsg) this.$message.error(err.errMsg);
- else this.$message.error("服务器发生异常");
- }
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .TreeManagement {
- #header {
- margin-bottom: 15px;
- .add_kind {
- margin-left: 20px;
- }
- }
- #section {
- .hint {
- color: rgb(240, 34, 34);
- }
- }
- }
- .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>
|