快捷入口开发中

src/views/workbench/index2.vue

@@ -120,7 +120,7 @@
                       </div>
                       <div class="quickly_item_content">{{ item.name }}</div>
                     </div>
-                    <div class="quickly_item add">
+                    <div @click="addQuieckDialog" class="quickly_item add">
                       <el-icon><Plus /></el-icon>
                       <span>添加</span>
                     </div>
@@ -228,6 +228,38 @@
         </el-col>
       </el-row>
     </div>
+
+    <!-- 添加快捷入口 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="repairProjectFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入" />
+        </el-form-item>
+        <!-- <el-form-item label="图标" prop="icon">
+          <el-input v-model="form.icon" placeholder="请输入" />
+        </el-form-item> -->
+        <el-form-item label="页面" prop="path">
+          <el-input v-model="form.path" placeholder="请输入" />
+          <el-tree
+            ref="menuRef"
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            node-key="id"
+            :check-strictly="false"
+            empty-text="加载中，请稍候"
+            :props="{ label: 'label', children: 'children' }"
+          >
+          </el-tree>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button> -->
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -236,6 +268,7 @@ import summicon from '@/assets/images/index/summer.png';
 import repairEcharts from './components/repairEcharts.vue';
 import { delResident, listResident } from '@/api/system/resident';
 import { useHouseStore } from '@/store/modules/house';
+import { usePermissionStore } from '@/store/modules/permission';
 
 const houseStore = useHouseStore();
 
@@ -258,12 +291,14 @@ import info from './assets/info.png';
 import profile from './assets/profile.png';
 import star from './assets/star.png';
 
+import { roleMenuTreeselect, treeselect as menuTreeselect } from '@/api/system/menu/index';
 import { UploadUserFile } from 'element-plus';
 import { getVillageByIdAPI } from '@/api/system/community';
 import { getLast7Days, numToWeek2 } from '@/utils/time';
 import { EChartsOption } from 'echarts';
 import { workSpaceIncomeTrendListApi, workSpaceTotalListApi, workSpaceWeatherApi } from '@/api/workflow';
 import { getWeatherIcon } from '@/utils/weather';
+import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
@@ -504,6 +539,78 @@ function handleRouter(val: string) {
     path: val
   });
 }
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '添加快捷入口'
+});
+const menuOptions = ref<MenuTreeOption[]>([]);
+const form = ref({
+  name: '',
+  path: '',
+  icon: ''
+});
+const rules = {
+  name: [{ required: true, trigger: 'blur', message: '请输入快捷入口名称' }],
+  path: [{ required: true, trigger: 'blur', message: '请选择快捷入口页面' }]
+};
+function addQuieckDialog() {
+  form.value = {
+    name: '',
+    path: '',
+    icon: ''
+  };
+  const permissionStore = usePermissionStore();
+  const routes = permissionStore.getDefaultRoutes();
+  console.log(routes);
+  handleroutestoshowlist(routes);
+  dialog.visible = true;
+}
+function handleroutestoshowlist(rotues) {
+  function _hanle(parentRoute, currentroute, level) {
+    console.log(currentroute, level);
+    let obj: {
+      name: string;
+      icon: string;
+      path: string;
+      level: number;
+      children: unknown[];
+    } = {};
+    // 非页面路由和 二级路由
+    if (currentroute.hidden || level === 2) {
+      return null;
+    }
+    if (currentroute.meta) {
+      obj = {
+        name: currentroute.meta.title,
+        icon: currentroute.meta.icon,
+        path: currentroute.path,
+        level: level,
+        children: []
+      };
+    } else if (currentroute.path === '/') {
+      obj = {
+        name: '',
+        icon: currentroute.meta.icon,
+        path: currentroute.path,
+        level: level,
+        children: []
+      };
+    }
+    // 传过来父级path 拼接
+    if (parentRoute) {
+      obj.path = parentRoute.path + '/' + currentroute.path;
+    }
+    //  没有按钮第三级 普遍是 删除按钮操作
+    if (level < 2) {
+      obj.children = currentroute.children.map((item) => _hanle(obj, item, level + 1)).filter((item) => item);
+    }
+
+    return obj;
+  }
+  // const arr = rotues.map((ele) => _hanle(null, ele, 1)).filter((item) => item);
+  // console.log(arr);
+}
 // ! 快捷入口
 
 // ! 创建办事记录