huimv.cloud.client/src/views/treeStructure/TreeManagement.vue

<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-popconfirm title="是否删除选中的树？" @onConfirm="del_kind">
                    <el-button type="primary">删除根</el-button>
                </el-popconfirm>-->
                <el-button @click="del_kind" type="danger">删除分类</el-button>
            </el-row>
        </header>
        <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="addOrEditThis.nodeName+'：'+(dialogStatus==1?'添加子节点':'编辑子节点')"
            :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="子节点名称:" 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: [],
            id: "",
            dataTree: [],
            defaultProps,
            showDialog: false,
            form: {
                nodeName: "",
                meta: "",
                code: ""
            },
            /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */ 
            dialogStatus: null, 
            addOrEditThis: {}, // 保存被点击的 this
            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 => {
                    this.getSubNodeList(this.id);
                    this.getSubNodeList("-1");
                    this.$message.success("编辑节点成功！");
                    // 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 => {
                    parentId == "-1"
                        ? (this.options = res)
                        : (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;
        },
        // 编辑分类
        edit_kind() {
            if (!this.id) {
                this.$message.warning("请选择要编辑的分类！");
                return;
            }
            this.showDialog = true;
            this.dialogStatus = 4;
        },
        // 删除分类
        del_kind() {
            if (!this.id) {
                this.$message.warning("请选择要删除的分类！");
                return;
            }
            this.dialogStatus = 5;
            this.del({ id: this.id });
        },
        // 添加目录
        add_catalog() {
            this.showDialog = true;
            this.dialogStatus = 6;
        },
        // 选择框改变
        selectChange() {
            this.getSubNodeList(this.id);
        },
        // 节点后的添加
        add(data) {
            this.showDialog = true;
            this.dialogStatus = 1;
            this.form.parentId = data.id;
            this.addOrEditThis = data; // 保存当前点击者状态
        },
        // 节点后的编辑
        edit(data) {
            this.showDialog = true;
            this.dialogStatus = 2;
            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.getSubNodeList(this.id);
                    this.getSubNodeList("-1");
                    console.log(res);
                    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>