试验分类根节点菜单

src/views/desk/test-classify.vue

@@ -19,6 +19,7 @@
                             :h-props="treeProps"
                             :datas="leftTreeData"
                             tree-key="id"
+                            :root-menu="rootMenuData"
                             :menus="treeMenuDatas"
                             @menu-tap="treeMenuClick"
                         />
@@ -44,6 +45,7 @@
                         :h-props="treeProps"
                         :datas="rightTreeData"
                         tree-key="id"
+                        :root-menu="rootMenuData"
                         :menus="treeMenuDatas"
                         @menu-tap="treeMenuClick"
                     />
@@ -52,10 +54,10 @@
         </hc-card>
         <!-- 新增编辑 -->
         <hc-dialog
-            :title="form.id ? '编辑' : '新增'"
             v-model="treeTap"
-            @close="treeClose"
+            :title="form.id ? '编辑' : '新增'"
             :loading="saveLoading"
+            @close="treeClose"
             @save="saveTree"
         >
             <el-form ref="formRef" :model="form" :rules="fromRules">
@@ -68,100 +70,105 @@
 </template>
 
 <script setup>
-import mainApi from "~api/desk/test-classify";
-import { getArrValue, getObjVal, formValidate } from "js-fast-way";
-import { onMounted, ref, nextTick } from "vue";
-import { HcDelMsg } from "hc-vue3-ui";
+import mainApi from '~api/desk/test-classify'
+import { formValidate, getArrValue, getObjVal } from 'js-fast-way'
+import { nextTick, onMounted, ref } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
 
 onMounted(() => {
-    getTreeData();
-});
+    getTreeData()
+})
 //页面分割
-const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
+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([]);
+    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" },
-];
+    { icon: 'add-circle', label: '新增节点', key: 'add' },
+    { icon: 'draft', label: '编辑节点', key: 'edit' },
+    { icon: 'delete-bin', label: '删除节点', key: 'del' },
+]
+const rootMenuData = ref([
+    { icon: 'add-circle', label: '新增节点', key: 'add' },
+    { icon: 'draft', label: '编辑节点', key: 'edit' },
+ 
+])
 //菜单被点击
 const treeMenuClick = async ({ key, data, node, keys }) => {
-    if (key == "add") {
+    if (key == 'add') {
         form.value = {
-            id: "",
-            nodeName: "",
+            id: '',
+            nodeName: '',
             parentId: data.id,
             nodeType: data.nodeType,
-        };
-        treeTap.value = true;
-    } else if (key == "edit") {
+        }
+        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") {
+        }
+        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 { 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();
+    const { data, code } = await mainApi.getTreeAll()
     if (code === 200) {
-        let { leftTree, rightTree } = getObjVal(data);
+        let { leftTree, rightTree } = getObjVal(data)
         //左边树
         if (leftTree.length > 0) {
             leftTree.forEach((val) => {
-                val.hasChildren = !val.hasChildren;
-            });
+                val.hasChildren = !val.hasChildren
+            })
         }
-        leftTreeData.value = getArrValue(leftTree);
+        leftTreeData.value = getArrValue(leftTree)
 
         //右边树
         if (rightTree.length > 0) {
             rightTree.forEach((val) => {
-                val.hasChildren = !val.hasChildren;
-            });
+                val.hasChildren = !val.hasChildren
+            })
         }
-        rightTreeData.value = rightTree;
+        rightTreeData.value = rightTree
     } else {
-        leftTreeData.value = [];
-        rightTreeData.value = [];
+        leftTreeData.value = []
+        rightTreeData.value = []
     }
-};
+}
 
 //新增编辑
-const form = ref({});
-const treeTap = ref(false);
-const treeClose = () => {};
-const formRef = ref(null);
+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);
+    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);
+    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();
+        window.$message.success(msg)
+        treeTap.value = false
+        getTreeData()
     }
-};
+}
 </script>
 
 <style scoped lang="scss">