系统管理-菜单管理树添加所属的专题

src/views/dashboard/test/components/ShowTableList/index.vue

@@ -9,7 +9,7 @@
   >
     <template #bodyCell="{ column, record }">
       <template v-if="column.key === 'type'">
-        <div
+        <!-- <div
           :style="{
             backgroundColor: `${getColorByType(record.type)}`,
             width: '10px',
@@ -17,7 +17,7 @@
             display: 'inline-block',
             marginRight: '5px',
           }"
-        />
+        /> -->
         {{ record.type }}
       </template>
       <template v-if="column.key === 'stats'">
@@ -76,8 +76,8 @@
     { code: '采矿用地', color: '#30123b', linecolor: '#e8500f' },
     { code: '城镇村道路用地', color: '#38266a', linecolor: '#73cbcd' },
     { code: '城镇住宅用地', color: '#3e3892', linecolor: '#dd59e4' },
-    { code: '干渠', color: '#424ab4', linecolor: '#2c22f0' },       // 无此项目
-    { code: '高教用地', color: '#455dd0', linecolor: '#e95bb0' },   // 无此项目
+    { code: '干渠', color: '#424ab4', linecolor: '#2c22f0' }, // 无此项目
+    { code: '高教用地', color: '#455dd0', linecolor: '#e95bb0' }, // 无此项目
     { code: '工业用地', color: '#476de5', linecolor: '#53d711' },
     { code: '公路用地', color: '#467ef5', linecolor: '#e8b184' },
     { code: '公用设施用地', color: '#448ffe', linecolor: '#79d81f' },
@@ -88,7 +88,7 @@
     { code: '果园', color: '#18dbc6', linecolor: '#7a8ecd' },
     { code: '旱地', color: '#1be5b5', linecolor: '#d75c94' },
     { code: '河流水面', color: '#27eea4', linecolor: '#124df0' },
-    { code: '机场用地', color: '#3af490', linecolor: '#ca7263' },   // 无此项目
+    { code: '机场用地', color: '#3af490', linecolor: '#ca7263' }, // 无此项目
     { code: '机关团体新闻出版用地', color: '#52fa7a', linecolor: '#25f01e' },
     { code: '交通服务场站用地', color: '#6bfe64', linecolor: '#8114ee' },
     { code: '科教文卫用地', color: '#85ff51', linecolor: '#cc57af' },

src/views/demo/system/menu/MenuDrawer.vue

@@ -18,10 +18,12 @@
 
   import { getMenuList, addMenu, editMenu, addButton, editButton } from '@/api/demo/system';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { cloneDeep } from 'lodash-es';
   const { createMessage } = useMessage();
   defineOptions({ name: 'MenuDrawer' });
 
   const emit = defineEmits(['success', 'register']);
+  const props = defineProps(['treeData']);
 
   const isUpdate = ref(true);
 
@@ -46,7 +48,8 @@
         ...record,
       });
     }
-    const treeData = await getMenuList();
+    // const treeData = await getMenuList();
+    const treeData = cloneDeep(props.treeData);
     treeData.unshift({
       id: '0',
       key: '0',

src/views/demo/system/menu/MenuTree.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
   import { onMounted, ref, h, nextTick, unref } from 'vue';
   import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
-  import { getMenuList, deleteMenu } from '@/api/demo/system';
+  import { getMenuList, deleteMenu, getMenuDetail, getSpecialData } from '@/api/demo/system';
   import { FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { router } from '@/router';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -33,12 +33,29 @@
   const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
   async function fetch() {
     treeData.value = (await getMenuList()) as unknown as TreeItem[];
+    treeData.value.forEach((item, index) => {
+      getMenuDetailById(item).then((res) => {
+        let title = specialMenu.value.find((sp) => {
+          return sp.id == res.moduleTypeId;
+        })?.title;
+        if (title) {
+          treeData.value[index].name = item.name = item.name + ' （' + title + ')';
+        }
+      });
+    });
+
     // 展开全部
     nextTick(() => {
       unref(asyncExpandTreeRef)?.expandAll(true);
     });
   }
 
+  async function getMenuDetailById(node) {
+    return await getMenuDetail({
+      id: node.id,
+    });
+  }
+
   function handleSelect(keys) {
     emit('select', keys[0]);
   }
@@ -97,10 +114,19 @@
     }
     return '';
   }
+
+  // 专题
+  const specialMenu = ref();
+  async function specialData() {
+    specialMenu.value = await getSpecialData();
+  }
+
   onMounted(() => {
     fetch();
+    specialData();
   });
   defineExpose({
     fetch,
+    treeData,
   });
 </script>

src/views/demo/system/menu/index.vue

@@ -12,7 +12,7 @@
         <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
       </template>
     </BasicTable>
-    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
+    <MenuDrawer @register="registerDrawer" :treeData="treeData" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -60,13 +60,16 @@
     },
   });
   const childRef = ref<any>();
+  const treeData = ref();
   function handleCreate() {
+    treeData.value = childRef.value.treeData;
     openDrawer(true, {
       isUpdate: false,
     });
   }
 
   function handleEdit() {
+    treeData.value = childRef.value.treeData;
     let rows = getSelectRows();
     if (rows.length == 0) {
       return createMessage.warn('请选择一个按钮进行编辑');
@@ -79,6 +82,7 @@
     });
   }
   async function editMenu(node) {
+    treeData.value = childRef.value.treeData;
     var query = {
       id: node.id,
     };