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

<template>
    <div class="TreeManagement">
        <header id="header">
            <el-row>
                <el-select v-model="id" 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="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: [],
            id: "",
            dataTree: [],
            defaultProps,
            showDialog: false,
            isAddSubNode: true, // 是添加子节点还是添加当前节点 的 状态标识
            form: {
                nodeName: "",
                meta: "",
                code: ""
            },
            isAdd: null, // 是添加还是编辑状态
            addOrEditThis: {}, // 保存点击的this
            rules
        };
    },
    created() {
        this.getSubNodeList("-1");
    },
    methods: {
        ...mapActions(["fetch"]),
        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: 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.$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;
    }
}

.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>