huimv.cloud.client/src/views/deviceManagement/DeviceType.vue

<template>
    <div class="DeviceType">
        <header id="header">
            <el-button @click="add_catalog" type="primary">添加目录</el-button>
        </header>
        <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
        <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="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" };
const formDataInit = {
                nodeName: "",
                meta: "",
                code: ""
            }

export default {
    name: "DeviceType",
    data() {
        return {
            options: [],
            id: "",
            dataTree: [],
            defaultProps,
            showDialog: false,
            form: formDataInit,
            /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 6:添加目录} */
            dialogStatus: null,
            addOrEditThis: {}, // 保存被点击的 this
            title: {
                title: "编辑/添加",
                nodeName: "节点名称",
                code: "节点代号"
            },
            rules
        };
    },
    created() {
        // 获取区域管理 树
        this.getTreeByCode("device-type");
    },
    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 6 /* 编辑 分类*/:
                            this.form.parentId = this.id;
                            this.reqSave("/publics/treenode/addNode");
                            break;
                        default:
                            this.$message.error(
                                "操作错误请刷新！"
                            );
                    }
                } else {
                    return false;
                }
            });
        },

        // 通过code获取树
        getTreeByCode(code) {
            this.fetch({
                api: "/publics/treenode/getTreeByCode",
                method: "POST",
                data: { code }, //目前只有一个组织,其他参数调整钟
                success: res => {
                    this.id = res.id;
                    this.getSubNodeList(res.id);
                },
                fail: err => {
                    console.log(err);
                    if (err.errCode == "request_not_authorize") {
                        this.$message({
                            message: "请重新登录",
                            type: "warning"
                        });
                    }
                }
            });
        },
        // 保存事件，包括新增字节点和编辑当前节点
        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.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 => {
                    this.dataTree = res;
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },

        // 添加目录
        add_catalog() {
            this.showDialog = true;
            this.dialogStatus = 6;
            this.title = {
                title: "添加目录",
                nodeName: "节点名称",
                code: "节点代号"
            };
        },

        // 节点后的添加
        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.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>
.DeviceType {
    #header {
        margin-bottom: 15px;
    }
    #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>