From a93ed2c06a68a526ab0a13e2e30e333f386e5f8e Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 21 Mar 2024 11:30:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=AB=98=E7=BA=A7=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84=EF=BC=8C=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E8=A1=A5=E5=85=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/aside/comp/AdvanceFilter.vue | 229 ++++++++++++--------
 src/views/task/aside/Aside.vue              |  42 +++-
 2 files changed, 176 insertions(+), 95 deletions(-)

diff --git a/src/views/home/aside/comp/AdvanceFilter.vue b/src/views/home/aside/comp/AdvanceFilter.vue
index 9388c82..42b03f2 100644
--- a/src/views/home/aside/comp/AdvanceFilter.vue
+++ b/src/views/home/aside/comp/AdvanceFilter.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { favorite, getConditionList, unfavorite } from '@/api/home/filter'
-import { asideMap } from '@/config/aside'
-import { useInfiniteScroll } from '@vueuse/core'
-import { debounce } from 'lodash-es'
-import { onMounted, reactive, ref } from 'vue'
-import type { FilterSearchParam } from '/#/api'
-import type { Filter, FilterEntity } from '/#/home'
+import { favorite, getConditionList, unfavorite } from "@/api/home/filter";
+import { asideMap } from "@/config/aside";
+import { useInfiniteScroll } from "@vueuse/core";
+import { debounce } from "lodash-es";
+import { onMounted, reactive, ref,watch } from "vue";
+import type { FilterSearchParam } from "/#/api";
+import type { Filter, FilterEntity } from "/#/home";
 
-defineOptions({ name: 'AdvanceFilter' })
+defineOptions({ name: "AdvanceFilter" });
 
 const props = defineProps({
   type: {
@@ -15,109 +15,115 @@ const props = defineProps({
     default: 0,
     required: true,
   },
-})
+});
 
 const emit = defineEmits<{
-  (e: 'show-filter'): void
-  (e: 'show-custom'): void
-  (e: 'update:search'): void
-  (e: 'select', id: string)
-}>()
-
-const data = ref<FilterEntity[]>([])
-let loading = false
-const canloadMore = true
-const el = ref<HTMLDivElement | null>(null)
-const popover = ref<ComponentRef | null>(null)
+  (e: "show-filter"): void;
+  (e: "show-custom"): void;
+  (e: "update:search"): void;
+  (e: "select", id: string);
+}>();
+
+const data = ref<FilterEntity[]>([]);
+let loading = false;
+const canloadMore = true;
+const el = ref<HTMLDivElement | null>(null);
+const popover = ref<ComponentRef | null>(null);
 const pagination = reactive({
   pageNo: 1,
   pageSize: 300,
-})
-const keyword = ref('')
+});
+const keyword = ref("");
 
 onMounted(() => {
   // data.value = generateDefaultConfig()
-})
+});
 
 // 默认的过滤配置
 function generateDefaultConfig(): FilterEntity[] {
   return Object.keys(asideMap).reduce((acc, key) => {
-    const { label, defaultValue, isDefaultFilter } = asideMap[key]
+    const { label, defaultValue, isDefaultFilter } = asideMap[key];
 
     if (isDefaultFilter === true) {
       const config = {
-        id: '',
+        id: "",
         name: label,
         favorite: false,
         isDefaultFilter,
-        filterList: [{
-          key,
-          value: defaultValue,
-        }],
-      }
-      return [...acc, config]
-    }
-    else {
-      return acc
+        filterList: [
+          {
+            key,
+            value: defaultValue,
+          },
+        ],
+      };
+      return [...acc, config];
+    } else {
+      return acc;
     }
-  }, [])
+  }, []);
 }
 
 useInfiniteScroll(
   el as any,
   () => {
-    loadMore()
+    loadMore();
   },
-  { distance: 10, interval: 300, canLoadMore: () => false },
-)
+  { distance: 10, interval: 300, canLoadMore: () => false }
+);
+const showClick = ()=>{
+  console.log('showClick')
+  inputHandler('')
+}
 
 async function loadMore() {
-  if (loading || el.value == null)
-    return
+  if (loading || el.value == null) return;
 
-  const more = await featchList()
+  const more = await featchList();
 
-  if (more.length === 0)
-    return
+  if (more.length === 0) return;
 
-  data.value.push(...more)
+  data.value.push(...more);
 }
 
 async function featchList() {
-  loading = true
+  loading = true;
   try {
-    const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
-    const result = await getConditionList(pagination, searchParam, props.type)
-    const { data } = result
+    const searchParam: FilterSearchParam = {
+      search_searchname: { value: keyword.value, op: "like", type: "string" },
+    };
+    const result = await getConditionList(pagination, searchParam, props.type);
+    const { data } = result;
     // pagination.pageNo += 1
     // canloadMore = pageCount >= pagination.pageNo
-    const entityList = generateFilterEntityList(data)
-    return entityList
-  }
-  catch (error) {
-    return []
-  }
-  finally {
-    loading = false
+    const entityList = generateFilterEntityList(data);
+    return entityList;
+  } catch (error) {
+    return [];
+  } finally {
+    loading = false;
   }
 }
 
 // 转换服务器数据格式
 function generateFilterEntityList(data) {
   const filterEntityList = data.map((item) => {
-    const { searchname, iztop, ocrUsersearchchildList, id } = item
+    const { searchname, iztop, ocrUsersearchchildList, id } = item;
 
     const list = ocrUsersearchchildList.map((item) => {
-      const { searchfield, searchvalue } = item
+      const { searchfield, searchvalue } = item;
 
       return {
         key: searchfield,
         value: searchvalue,
-      }
-    })
+      };
+    });
 
-    const reg = new RegExp(keyword.value, 'gi')
-    const hilightText = searchname.replace(reg, `<span style='color:#FF0000'>${keyword.value}</span>`)
+    const reg = new RegExp(keyword.value, "gi");
+    const hilightText = searchname.replace(
+      reg,
+      `<span style='color:#FF0000'>${keyword.value}</span>`
+    );
 
     return {
       id,
@@ -125,45 +131,45 @@ function generateFilterEntityList(data) {
       favorite: iztop,
       isDefaultFilter: false,
       filterList: list,
-    }
-  })
+    };
+  });
 
-  return filterEntityList
+  return filterEntityList;
 }
 
 function selectHandler(item: FilterEntity) {
-  (popover.value as any).setShow(false)
-  emit('select', item.id)
+  (popover.value as any).setShow(false);
+  emit("select", item.id);
 }
 
 const inputHandler = debounce((word) => {
-  keyword.value = word
+  keyword.value = word;
   featchList().then((list) => {
-    data.value = list
-  })
-}, 300)
+    data.value = list;
+  });
+}, 300);
 
 function favoriteHandler(event: MouseEvent, item: any) {
-  event.stopImmediatePropagation()
-  event.stopPropagation()
+  event.stopImmediatePropagation();
+  event.stopPropagation();
 
-  const { isDefaultFilter, id } = item
+  const { isDefaultFilter, id } = item;
 
   if (!isDefaultFilter) {
-    item.favorite = true
-    favorite(id)
+    item.favorite = true;
+    favorite(id);
   }
 }
 
 function unFavoriteHandler(event: MouseEvent, item) {
-  event.stopImmediatePropagation()
-  event.stopPropagation()
+  event.stopImmediatePropagation();
+  event.stopPropagation();
 
-  const { isDefaultFilter, id } = item
+  const { isDefaultFilter, id } = item;
 
   if (!isDefaultFilter) {
-    item.favorite = false
-    unfavorite(id)
+    item.favorite = false;
+    unfavorite(id);
   }
 }
 </script>
@@ -173,29 +179,58 @@ function unFavoriteHandler(event: MouseEvent, item) {
     <div class="wrapper-left">
       <svg-icon name="shield" size="32" />
       <n-popover
-        ref="popover" :style="{ padding: '0px' }" style="width: 248px" :show-arrow="false"
-        placement="bottom-start" trigger="click"
+        ref="popover"
+        :style="{ padding: '0px' }"
+        style="width: 248px"
+        :show-arrow="false"
+        placement="bottom-start"
+        trigger="click"
       >
         <template #trigger>
-          <div class="wrapper-left-dropdown">
+          <div class="wrapper-left-dropdown" @click="showClick">
             <span>高级筛选</span>
             <SvgIcon :style="{ marginLeft: '5px' }" name="down" size="14" />
           </div>
         </template>
         <n-spin :show="loading">
           <div class="wrapper-left-popover">
-            <n-input :style="{ '--n-border': '0px' }" placeholder="请输入关键字" @input="inputHandler">
+            <n-input
+              :style="{ '--n-border': '0px' }"
+              placeholder="请输入关键字"
+              @input="inputHandler"
+            >
               <template #prefix>
                 <SvgIcon size="14px" name="magnifying-1" />
               </template>
               <template #suffix>
-                <SvgIcon size="14px" style="cursor: pointer;" name="setting" @click="emit('show-filter')" />
+                <SvgIcon
+                  size="14px"
+                  style="cursor: pointer"
+                  name="setting"
+                  @click="emit('show-filter')"
+                />
               </template>
             </n-input>
             <ul ref="el" class="wrapper-left-list">
-              <li v-for="(item, index) in data" :key="index" style="display: flex;align-items: center;" @click="selectHandler(item)">
-                <SvgIcon v-if="item.favorite && !item.isDefaultFilter" name="favorite-fill" color="#fd9b0a" size="18" @click="unFavoriteHandler($event, item)" />
-                <SvgIcon v-else-if="!item.favorite && !item.isDefaultFilter" name="favorite-unfill" size="18" @click="favoriteHandler($event, item)" />
+              <li
+                v-for="(item, index) in data"
+                :key="index"
+                style="display: flex; align-items: center"
+                @click="selectHandler(item)"
+              >
+                <SvgIcon
+                  v-if="item.favorite && !item.isDefaultFilter"
+                  name="favorite-fill"
+                  color="#fd9b0a"
+                  size="18"
+                  @click="unFavoriteHandler($event, item)"
+                />
+                <SvgIcon
+                  v-else-if="!item.favorite && !item.isDefaultFilter"
+                  name="favorite-unfill"
+                  size="18"
+                  @click="favoriteHandler($event, item)"
+                />
                 <div v-html="item.name" />
               </li>
             </ul>
@@ -204,8 +239,18 @@ function unFavoriteHandler(event: MouseEvent, item) {
       </n-popover>
     </div>
     <div class="wrapper-right">
-      <SvgIcon style="display: block;cursor: pointer;" size="18" name="magnifying-1" @click="emit('update:search')" />
-      <SvgIcon style="display: block;cursor: pointer;margin-left: 10px;" size="18" name="filter" @click="emit('show-custom')" />
+      <SvgIcon
+        style="display: block; cursor: pointer"
+        size="18"
+        name="magnifying-1"
+        @click="emit('update:search')"
+      />
+      <SvgIcon
+        style="display: block; cursor: pointer; margin-left: 10px"
+        size="18"
+        name="filter"
+        @click="emit('show-custom')"
+      />
     </div>
   </div>
 </template>
@@ -243,7 +288,7 @@ function unFavoriteHandler(event: MouseEvent, item) {
       scrollbar-width: none; /* firefox */
       -ms-overflow-style: none; /* IE 10+ */
 
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
         display: none;
       }
 
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 1753057..7ac8ab7 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import { useTaskStore } from "@/store/modules/task";
 import { debounce } from "lodash-es";
-import { computed, onMounted, ref, unref, watch } from "vue";
+import { computed, onMounted, ref, unref, watch,shallowRef } from "vue";
 import CustomFieldModal from "../modal/CustomFieldModal.vue";
+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 emitter from '@/utils/mitt'
+
 
 const CustomFieldModalRef = ref(null);
 const collapse = ref(false);
@@ -110,6 +115,30 @@ async function getshowFieldList() {
 onMounted(() => {
   getshowFieldList();
 });
+
+// 滚动容器，让key对应模块处于可视区域
+function scrollHandler(key: string) {
+  const element = document.querySelector(`#${key}`)
+  element?.scrollIntoView(true)
+}
+// 选择某个过滤配置，刷新图片墙
+function filterHandler(searchId: string) {
+  emitter.emit('filter', searchId)
+}
+function showModal(modalRef: any) {
+  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)
+function editFilter(filter: any) {
+  const modal = unref(newFilterModalRef)! as any
+  modal.showModal()
+  modal.edit(filter)
+}
 </script>
 
 <template>
@@ -125,7 +154,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="aside-header">
-      <div v-show="!showSearch" class="warpper">
+      <!-- <div v-show="!showSearch" class="warpper">
         <div class="left">
           <svg-icon name="all-worksheet" size="32" />
           <span style="margin-left: 8px">所有请求</span>
@@ -144,7 +173,13 @@ onMounted(() => {
             @click="showFilter"
           />
         </div>
-      </div>
+      </div> -->
+      <!-- 高级筛选 -->
+      <AdvanceFilter
+          v-show="!showSearch" :type="2" @select="filterHandler" @update:search="setShowSearch(true)"
+          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
+        />
+
       <div v-show="showSearch" class="warpper">
         <n-input
           style="flex: 1; height: 32px"
@@ -162,6 +197,7 @@ onMounted(() => {
           @click="setShowSearch(false)"
         />
       </div>
+    
     </div>
     <TaskList
       ref="taskListRef"