试验分类配置

src/api/modules/desk/testClassify.js

@@ -0,0 +1,28 @@
+import { HcApi } from "../../request/index";
+
+export default {
+    //加载外委、第三方树
+    async getTreeAll(form) {
+        return HcApi({
+            url: "/api/blade-manager/trial/tree-all",
+            method: "get",
+            params: form,
+        });
+    },
+    //新增或修改
+    async setTreeSubmit(form) {
+        return HcApi({
+            url: "/api/blade-manager/trial/submit",
+            method: "post",
+            data: form,
+        });
+    },
+    //删除节点
+    async setTreeRemove(form) {
+        return HcApi({
+            url: "/api/blade-manager/trial/remove",
+            method: "get",
+            params: form,
+        });
+    },
+};

src/views/desk/test-classify.vue

@@ -1,10 +1,180 @@
 <template>
+    <hc-page-split :options="splitOptions">
+        <template #left>
+            <hc-card>
+                <template #header>
+                    <div class="header_box">外委检测模板目录</div>
+                </template>
+                <div
+                    style="
+                        position: relative;
+                        flex: 1;
+                        flex-basis: auto;
+                        height: 100%;
+                    "
+                >
+                    <hc-body scrollbar>
+                        <hc-data-tree
+                            default-expand-all
+                            :h-props="treeProps"
+                            :datas="leftTreeData"
+                            tree-key="id"
+                            :menus="treeMenuDatas"
+                            @menu-tap="treeMenuClick"
+                        />
+                    </hc-body>
+                </div>
+            </hc-card>
+        </template>
+        <hc-card>
+            <template #header>
+                <div class="header_box greent_title">第三方检测模板目录</div>
+            </template>
+            <div
+                style="
+                    position: relative;
+                    flex: 1;
+                    flex-basis: auto;
+                    height: 100%;
+                "
+            >
+                <hc-body scrollbar>
+                    <hc-data-tree
+                        default-expand-all
+                        :h-props="treeProps"
+                        :datas="rightTreeData"
+                        tree-key="id"
+                        :menus="treeMenuDatas"
+                        @menu-tap="treeMenuClick"
+                    />
+                </hc-body>
+            </div>
+        </hc-card>
+    </hc-page-split>
+
+    <!-- 新增编辑 -->
+    <hc-dialog
+        :title="form.id ? '编辑' : '新增'"
+        v-model="treeTap"
+        @close="treeClose"
+        :loading="saveLoading"
+        @save="saveTree"
+    >
+        <el-form ref="formRef" :model="form" :rules="fromRules">
+            <el-form-item label="节点名称" prop="nodeName">
+                <el-input v-model="form.nodeName" />
+            </el-form-item>
+        </el-form>
+    </hc-dialog>
 </template>
 
 <script setup>
+import mainApi from "~api/desk/testClassify";
+import { getArrValue, getObjVal, formValidate } from "js-fast-way";
+import { onMounted, ref, nextTick } from "vue";
+import { HcDelMsg } from "hc-vue3-ui";
+
+onMounted(() => {
+    getTreeData();
+});
+//页面分割
+const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
+const treeProps = ref({
+    label: "nodeName",
+    children: "children",
+    isLeaf: "hasChildren",
+});
+const leftTreeData = ref([]);
+const rightTreeData = ref([]);
+const treeMenuDatas = [
+    { icon: "add-circle", label: "新增节点", key: "add" },
+    { icon: "draft", label: "编辑节点", key: "edit" },
+    { icon: "delete-bin", label: "删除节点", key: "del" },
+];
+//菜单被点击
+const treeMenuClick = async ({ key, data, node, keys }) => {
+    if (key == "add") {
+        form.value = {
+            id: "",
+            nodeName: "",
+            parentId: data.id,
+            nodeType: data.nodeType,
+        };
+        treeTap.value = true;
+    } else if (key == "edit") {
+        form.value = {
+            id: data.id,
+            parentId: data.parentId,
+            nodeName: data.nodeName,
+            nodeType: data.nodeType,
+        };
+        treeTap.value = true;
+    } else if (key == "del") {
+        HcDelMsg(async (resolve) => {
+            const { code } = await mainApi.setTreeRemove({ id: data.id });
+            resolve(); //关闭弹窗的回调
+            if (code !== 200) return;
+            window.$message.success("删除成功");
+            getTreeData();
+        }).then();
+    }
+};
+const getTreeData = async () => {
+    const { data, code } = await mainApi.getTreeAll();
+    if (code === 200) {
+        let { leftTree, rightTree } = getObjVal(data);
+        //左边树
+        if (leftTree.length > 0) {
+            leftTree.forEach((val) => {
+                val.hasChildren = !val.hasChildren;
+            });
+        }
+        leftTreeData.value = getArrValue(leftTree);
 
+        //右边树
+        if (rightTree.length > 0) {
+            rightTree.forEach((val) => {
+                val.hasChildren = !val.hasChildren;
+            });
+        }
+        rightTreeData.value = rightTree;
+    } else {
+        leftTreeData.value = [];
+        rightTreeData.value = [];
+    }
+};
+
+//新增编辑
+const form = ref({});
+const treeTap = ref(false);
+const treeClose = () => {};
+const formRef = ref(null);
+const fromRules = {
+    nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
+};
+const saveLoading = ref(false);
+const saveTree = async () => {
+    const formRes = await formValidate(formRef.value);
+    if (!formRes) return false;
+    const { code, msg } = await mainApi.setTreeSubmit(form.value);
+    if (code === 200) {
+        window.$message.success(msg);
+        treeTap.value = false;
+        getTreeData();
+    }
+};
 </script>
 
 <style scoped lang="scss">
-
+.header_box {
+    width: 100%;
+    background-color: #4095e5;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    color: white;
+}
+.greent_title {
+    background-color: #17a854;
+}
 </style>