首页菜单选择框为树状选择框

src/views/system/setting/components/change-home-index.vue

@@ -5,6 +5,7 @@ import useI18n from '@/hooks/useI18n';
 import { listMenu } from '@/api/system/menu';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getConfigKey, changeValue } from '@/api/system/config';
+import { parseDataToTree } from '@/utils/parse-tree-utils';
 const { t } = useI18n();
 
 type StateType = {
@@ -59,13 +60,20 @@ onMounted(() => {
   listMenu(toRaw({ status: 1 })).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       // 过滤旧前端菜单以及不是菜单类型以及路径为空
-      res.data = res.data
-        .filter(i => i.perms !== 'page' && i.menuType === 'M' && i.component)
-        .map((item: any) => {
-          state.options.push({
-            label: item.menuName,
-            value: item.component,
-          });
+      res.data = res.data.filter(i => i.perms !== 'page' && i.menuType !== 'B');
+      state.options = parseDataToTree(res.data, 'menuId');
+      const setDisabledAndComponent = (item:any) => {
+        if (!item.component) {
+          item.disabled = true;
+          item.component = 'Null' + item.menuId;
+        }
+      };
+
+      state.options.forEach((item:any) => {
+        setDisabledAndComponent(item); // 处理父菜单
+        if (item.children && Array.isArray(item.children)) {
+          item.children.forEach(setDisabledAndComponent); // 处理子菜单
+        }
       });
     }
   });
@@ -84,13 +92,22 @@ onMounted(() => {
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <template v-if="state.edite">
         <a-form-item :label="t('views.system.setting.home')">
-          <a-select
-            ref="select"
+          <a-tree-select
             v-model:value="state.default"
+            show-search
             style="width: 240px"
-            :disabled="false"
-            :options="state.options"
-          ></a-select>
+            :tree-data="state.options"
+            :field-names="{
+              children: 'children',
+              label: 'menuName',
+              value: 'component',
+            }"
+            tree-default-expand-all
+            tree-node-label-prop="menuName"
+            tree-node-filter-prop="menuName"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            :placeholder="t('common.selectPlease')"
+          ></a-tree-select>
         </a-form-item>
 
         <a-button type="primary" @click="fnSave">
@@ -102,13 +119,23 @@ onMounted(() => {
       </template>
       <template v-else>
         <a-form-item :label="t('views.system.setting.home')">
-          <a-select
-            ref="select"
+          <a-tree-select
             v-model:value="state.default"
-            style="width: 240px"
             :disabled="true"
-            :options="state.options"
-          ></a-select>
+            show-search
+            style="width: 240px"
+            :tree-data="state.options"
+            :field-names="{
+              children: 'children',
+              label: 'menuName',
+              value: 'component',
+            }"
+            tree-default-expand-all
+            tree-node-label-prop="menuName"
+            tree-node-filter-prop="menuName"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            :placeholder="t('common.selectPlease')"
+          ></a-tree-select>
         </a-form-item>
 
         <a-button type="dashed" @click="fnEdit(true)">