From 31cf269a0d2f8d4f0c589503325b582fb721a2e4 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 28 Mar 2024 19:52:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Menu/index.vue          | 96 ++++++++++++-------
 src/views/final/comp/CustomFilterModalVue.vue | 39 +++++---
 2 files changed, 86 insertions(+), 49 deletions(-)

diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index eac3a36..e665776 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -1,72 +1,98 @@
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { IconGroup } from '../IconGroup'
-import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
-import { generatorMenu } from '@/utils'
+import { computed, defineComponent, onMounted, ref, unref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { IconGroup } from "../IconGroup";
+import { useAsyncRouteStore } from "@/store/modules/asyncRoute";
+import { generatorMenu } from "@/utils";
+import { storage } from "@/utils/Storage";
+import { CURRENT_USER } from "@/store/mutation-types";
 
 export default defineComponent({
-  name: 'AppMenu',
+  name: "AppMenu",
   components: { IconGroup },
-  emits: ['clickMenuItem'],
+  emits: ["clickMenuItem"],
   setup(props, { emit }) {
     // 当前路由
-    const currentRoute = useRoute()
-    const router = useRouter()
-    const asyncRouteStore = useAsyncRouteStore()
-    const menus = ref<any[]>([])
-    const selectedSvg = ref<string>(currentRoute.meta.svgname as string)
+    const currentRoute = useRoute();
+    const router = useRouter();
+    const asyncRouteStore = useAsyncRouteStore();
+    const menus = ref<any[]>([]);
+    const selectedSvg = ref<string>(currentRoute.meta.svgname as string);
 
     const getSelectedSvg = computed(() => {
-      return unref(selectedSvg)
-    })
+      return unref(selectedSvg);
+    });
 
     // 跟随页面路由变化，切换菜单选中状态
     watch(
       () => currentRoute.fullPath,
       () => {
-        updateMenu()
-      },
-    )
+        updateMenu();
+      }
+    );
 
     function updateSelectedKeys() {
-      const svgname: string = (currentRoute.meta?.svgname as string) || ''
-      selectedSvg.value = svgname
+      const svgname: string = (currentRoute.meta?.svgname as string) || "";
+      selectedSvg.value = svgname;
     }
 
     function updateMenu() {
-      menus.value = generatorMenu(asyncRouteStore.getMenus)
-      updateSelectedKeys()
+      menus.value = generatorMenu(asyncRouteStore.getMenus);
+      const userInfo = storage.get(CURRENT_USER);
+      if (userInfo && userInfo.frontmenuTList) {
+        menus.value = userInfo.frontmenuTList.map((item) => {
+          let v = {
+            component: () =>
+              item.resUrl == "/task"
+                ? import("@/views/task/index.vue")
+                : item.resUrl == "/home"
+                ? import("@/views/home/index.vue")
+                : item.resUrl == "/worksheet"
+                ? import("@/views/worksheet/index.vue")
+                : item.resUrl == "/final"
+                ? import("@/views/final/index.vue")
+                : "",
+            icon: undefined,
+            key: item.resKey,
+            label: item.name,
+            meta: {
+              title: item.name,
+              permissions: [item.resKey],
+            },
+            path: item.resUrl,
+            name: item.resKey,
+            svgname: item.icon,
+            svgsize: 32,
+            title: item.name,
+          };
+          return v;
+        });
+      }
+      updateSelectedKeys();
     }
 
     // 点击菜单
     function clickMenuItem(key: string) {
-      if (/http(s)?:/.test(key))
-        window.open(key)
-      else
-        router.push({ name: key })
+      if (/http(s)?:/.test(key)) window.open(key);
+      else router.push({ name: key });
 
-      emit('clickMenuItem' as any, key)
+      emit("clickMenuItem" as any, key);
     }
 
     onMounted(() => {
-      updateMenu()
-    })
+      updateMenu();
+    });
 
     return {
       menus,
       selectedSvg,
       getSelectedSvg,
       clickMenuItem,
-    }
+    };
   },
-})
+});
 </script>
 
 <template>
-  <IconGroup
-    :options="menus"
-    :value="getSelectedSvg"
-    @update:value="clickMenuItem"
-  />
+  <IconGroup :options="menus" :value="getSelectedSvg" @update:value="clickMenuItem" />
 </template>
diff --git a/src/views/final/comp/CustomFilterModalVue.vue b/src/views/final/comp/CustomFilterModalVue.vue
index 4164c8e..429b986 100644
--- a/src/views/final/comp/CustomFilterModalVue.vue
+++ b/src/views/final/comp/CustomFilterModalVue.vue
@@ -29,7 +29,7 @@ const allCount = computed(() => {
 });
 
 const selectCount = computed(() => {
-  return `全部筛选(共${onList.value.length}个)`;
+  return `已选筛选(共${onList.value.length}个)`;
 });
 
 defineExpose({
@@ -137,15 +137,13 @@ function onCheckAllChange(value) {
   }
 
   selectIds.value = value ? ids : [];
-
-  
 }
 
 function onCheckChange(checked: any, item: any) {
   const index = selectIds.value.indexOf(item.id);
 
   item.checked = checked;
-  let currentIndex = offList.value.findIndex(v=>v.id == item.id)
+  let currentIndex = offList.value.findIndex((v) => v.id == item.id);
   offList.value[currentIndex].checked = item.checked;
   if (index === -1 && checked) selectIds.value.push(item.id);
   else selectIds.value.splice(index, 1);
@@ -267,17 +265,17 @@ const rightInputHandler = debounce((keyword) => {
               <div>
                 <n-input placeholder="搜索关键字" @input="leftInputHandler">
                   <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" />
+                    <SvgIcon size="14px" name="magnifying-1" color="#999999" />
                   </template>
                 </n-input>
                 <n-scrollbar
                   style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
                 >
                   <div class="draggable-ul">
-                    <div class="draggable-li">
+                    <div class="draggable-li" style="color:#666666">
                       <n-checkbox
                         v-model:checked="checkAll"
-                        label="全部"
+                        label="全选"
                         @update:checked="onCheckAllChange"
                       />
                     </div>
@@ -317,7 +315,7 @@ const rightInputHandler = debounce((keyword) => {
               <div>
                 <n-input placeholder="搜索关键字" @input="rightInputHandler">
                   <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" />
+                    <SvgIcon size="14px" name="magnifying-1" color="#999999" />
                   </template>
                 </n-input>
                 <n-scrollbar
@@ -339,7 +337,8 @@ const rightInputHandler = debounce((keyword) => {
                       :class="{ fix: item.fix }"
                       class="cursor-move draggable-li"
                     >
-                      <SvgIcon v-show="!item.fix" name="drag" size="24" />
+                    <!-- v-show="!item.fix"  判断是否为固定值 -->
+                      <SvgIcon  name="drag" size="14" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix"
@@ -358,7 +357,7 @@ const rightInputHandler = debounce((keyword) => {
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit"> 确认 </n-button>
+          <n-button type="info" @click="handleSumbit"> 确定 </n-button>
           <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
@@ -376,6 +375,7 @@ const rightInputHandler = debounce((keyword) => {
   &-title {
     font-weight: bold;
     font-size: 16px;
+    color: #333333;
   }
 
   &-bar {
@@ -416,6 +416,8 @@ const rightInputHandler = debounce((keyword) => {
   height: 800px;
   --n-padding-bottom: 20px;
   --n-padding-left: 24px;
+  --n-padding-right: 24px;
+  --n-padding-top: 20px;
 }
 
 .textbtnStyle {
@@ -426,6 +428,7 @@ const rightInputHandler = debounce((keyword) => {
 .draggable-ul {
   width: 100%;
   overflow: hidden;
+  background: #f8f8f8;
 
   .draggable-li {
     width: 100%;
@@ -449,14 +452,22 @@ const rightInputHandler = debounce((keyword) => {
   --n-padding-top: 0px;
   --n-padding-bottom: 12px;
 }
-::v-deep(.n-card > .n-card-header .n-card-header__main){
+::v-deep(.n-card > .n-card-header .n-card-header__main) {
   font-weight: lighter !important;
   font-size: 14px;
 }
-::v-deep(.n-scrollbar){
+::v-deep(.n-scrollbar) {
   border-top: none !important;
 }
-::v-deep(.n-button--info-type){
-  background: #507AFD !important;
+::v-deep(.n-button--info-type) {
+  background: #507afd !important;
+}
+::v-deep(.n-card__footer) {
+  padding: 0 16px 16px 16px !important;
+}
+::v-deep(.n-button--default-type) {
+  border: 1px solid #cad2dd !important;
+  color: #333333;
+  background: #ffffff;
 }
 </style>