From 21301dccc0cb33bece56f1cf8d6871a5694a8a0c Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 21 Mar 2024 18:12:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E9=80=89=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=AB=98=E7=BA=A7?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E6=B5=81=E7=A8=8B=E6=93=8D=E4=BD=9C=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 15 ++++++++-
 src/views/task/aside/Aside.vue | 56 ++++++++++++++++++++++------------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 04f400a..73d2274 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,4 +54,17 @@ const getThemeOverrides = computed(() => {
   </NConfigProvider>
 </template>
 
-<style lang="less"></style>
+<style lang="less">
+.n-checkbox .n-checkbox__label{
+  color: #666666 !important;
+  font-size: 14px !important;
+}
+.n-checkbox.n-checkbox--disabled .n-checkbox__label{
+  color: #c9c9c9 !important;
+  font-size: 14px !important;
+}
+.draggable-ul .draggable-li{
+  color: #666666 !important;
+  font-size: 14px !important;
+}
+</style>
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 7ac8ab7..8e276a7 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
 import { useTaskStore } from "@/store/modules/task";
 import { debounce } from "lodash-es";
-import { computed, onMounted, ref, unref, watch,shallowRef } from "vue";
+import { computed, onMounted, ref, unref, watch, shallowRef } from "vue";
 import CustomFieldModal from "../modal/CustomFieldModal.vue";
-import type { AsideEntity } from '@/config/aside'
+import type { AsideEntity } from "@/config/aside";
 
 import { useUser } from "@/store/modules/user";
 import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
 
 import TaskList from "./TaskList.vue";
-import AdvanceFilter from '../../home/aside/comp/AdvanceFilter.vue'
+import AdvanceFilter from "../../home/aside/comp/AdvanceFilter.vue";
 
-import emitter from '@/utils/mitt'
+import {
+  CustomFilterModalVue,
+  FilterModalVue,
+  NewFilterModalVue,
+} from "../../home/aside/comp/modals";
 
+import emitter from "@/utils/mitt";
 
 const CustomFieldModalRef = ref(null);
 const collapse = ref(false);
@@ -118,26 +123,26 @@ onMounted(() => {
 
 // 滚动容器，让key对应模块处于可视区域
 function scrollHandler(key: string) {
-  const element = document.querySelector(`#${key}`)
-  element?.scrollIntoView(true)
+  const element = document.querySelector(`#${key}`);
+  element?.scrollIntoView(true);
 }
 // 选择某个过滤配置，刷新图片墙
 function filterHandler(searchId: string) {
-  emitter.emit('filter', searchId)
+  emitter.emit("filter", searchId);
 }
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any
-  modal.showModal()
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
 }
 // 当前显示的模块，按照数组顺序显示
-const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
-const filterModalRef = ref(null)
-const newFilterModalRef = ref(null)
-const customModalRef = ref(null)
+const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
+const filterModalRef = ref(null);
+const newFilterModalRef = ref(null);
+const customModalRef = ref(null);
 function editFilter(filter: any) {
-  const modal = unref(newFilterModalRef)! as any
-  modal.showModal()
-  modal.edit(filter)
+  const modal = unref(newFilterModalRef)! as any;
+  modal.showModal();
+  modal.edit(filter);
 }
 </script>
 
@@ -176,9 +181,13 @@ function editFilter(filter: any) {
       </div> -->
       <!-- 高级筛选 -->
       <AdvanceFilter
-          v-show="!showSearch" :type="2" @select="filterHandler" @update:search="setShowSearch(true)"
-          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
-        />
+        v-show="!showSearch"
+        :type="2"
+        @select="filterHandler"
+        @update:search="setShowSearch(true)"
+        @show-custom="showModal(CustomFieldModalRef)"
+        @show-filter="showModal(filterModalRef)"
+      />
 
       <div v-show="showSearch" class="warpper">
         <n-input
@@ -197,7 +206,6 @@ function editFilter(filter: any) {
           @click="setShowSearch(false)"
         />
       </div>
-    
     </div>
     <TaskList
       ref="taskListRef"
@@ -210,6 +218,14 @@ function editFilter(filter: any) {
       :reviewType="reviewType"
       @onOk="getshowFieldList"
     />
+    <!-- 过滤列表 -->
+    <FilterModalVue
+      ref="filterModalRef"
+      @edit-filter="editFilter"
+      @show-new-filter="showModal(newFilterModalRef)"
+    />
+    <!-- 新增过滤 -->
+    <NewFilterModalVue ref="newFilterModalRef" />
   </div>
 </template>