From 0533b7faa369b7b2ca135f1196f9f7c5ae56f2da Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Tue, 2 Apr 2024 09:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=80=E9=94=AE=E6=9F=A5=E9=87=8D?=
 =?UTF-8?q?=E9=AB=98=E7=BA=A7=E7=AD=9B=E9=80=89=E9=80=BB=E8=BE=91=E8=A1=A5?=
 =?UTF-8?q?=E5=85=A8=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=B7=A6=E4=BE=A7=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=A0=8F=E9=9A=90=E8=97=8F=E5=90=8Esvg=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/aside/Aside.vue                |  72 +++-
 src/views/home/aside/comp/AdvanceFilter.vue   |  23 +-
 .../home/aside/comp/modals/NewFilterModal.vue | 360 ++++++++++--------
 src/views/task/aside/Aside.vue                |   3 +-
 src/views/task/modal/NewFilterModal.vue       | 328 +++++++++-------
 5 files changed, 459 insertions(+), 327 deletions(-)

diff --git a/src/views/home/aside/Aside.vue b/src/views/home/aside/Aside.vue
index 38906fa..b395d41 100644
--- a/src/views/home/aside/Aside.vue
+++ b/src/views/home/aside/Aside.vue
@@ -31,7 +31,7 @@ Object.keys(asideMap).forEach((key) => {
   console.log("asideMap和asideValue", asideValue);
 })
 
-const filterModalRef = ref(null)
+const filterModalRef:any = ref(null)
 const newFilterModalRef = ref(null)
 const customModalRef = ref(null)
 const customObjRef = ref<any>(null) // 获取高级筛选获取的值
@@ -97,7 +97,7 @@ configStore.$subscribe(() => {
   const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
   showKeys.unshift(...defaultKeys)
   */
-  
+
   const showKeys = [...customConfig];
 
   Object.keys(config).forEach((key) => {
@@ -164,6 +164,13 @@ const showSearch = ref(false)
 function setShowSearch(value: boolean) {
   showSearch.value = value
 }
+const newFilterOk = () => {
+  console.log('home', 'newFilterOk',filterModalRef.value);
+  filterModalRef.value.query(
+    filterModalRef.value.pagination.page,
+    filterModalRef.value.pagination.pageSize
+  );
+};
 
 // 滚动容器，让key对应模块处于可视区域
 function scrollHandler(key: string) {
@@ -211,7 +218,12 @@ watch(asideValue, (newVal) => {
 </script>
 
 <template>
-  <div class="aside" :style="asideStyle" @mouseenter="asideEnter = true" @mouseleave="asideEnter = false">
+  <div
+    class="aside"
+    :style="asideStyle"
+    @mouseenter="asideEnter = true"
+    @mouseleave="asideEnter = false"
+  >
     <div v-show="showCollapse" class="aside-collapse">
       <div class="aside-collapse-btn" @click="collapseHandler">
         <SvgIcon :name="collapseIcon" size="40" />
@@ -220,23 +232,40 @@ watch(asideValue, (newVal) => {
     <n-scrollbar trigger="none">
       <div class="aside-header">
         <!-- 搜索跳转模块 -->
-        <Search v-show="showSearch" @select="scrollHandler" @close="setShowSearch(false)" />
+        <Search
+          v-show="showSearch"
+          @select="scrollHandler"
+          @close="setShowSearch(false)"
+        />
         <!-- 高级筛选 -->
         <AdvanceFilter
-          v-show="!showSearch" :type="0" @select="filterHandler" @update:search="setShowSearch(true)"
-          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
+          v-show="!showSearch"
+          :type="0"
+          @select="filterHandler"
+          @update:search="setShowSearch(true)"
+          @show-custom="showModal(customModalRef)"
+          @show-filter="showModal(filterModalRef)"
         />
       </div>
 
       <component
-        :is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="index" v-model:value="asideValue[item.key]"
-        :label="item.config.label"  @update:value="e=>updateComponent(item.key, e)"
+        :is="item.config.component"
+        v-for="(item, index) in showItems"
+        :id="item.key"
+        :key="index"
+        v-model:value="asideValue[item.key]"
+        :label="item.config.label"
+        @update:value="(e) => updateComponent(item.key, e)"
       />
 
       <!-- 过滤列表 -->
-      <FilterModalVue ref="filterModalRef" @edit-filter="editFilter" @show-new-filter="showModal(newFilterModalRef)" />
+      <FilterModalVue
+        ref="filterModalRef"
+        @edit-filter="editFilter"
+        @show-new-filter="showModal(newFilterModalRef)"
+      />
       <!-- 新增过滤 -->
-      <NewFilterModalVue ref="newFilterModalRef" />
+      <NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />
       <!-- 筛选 -->
       <CustomFilterModalVue ref="customModalRef" />
     </n-scrollbar>
@@ -248,7 +277,7 @@ watch(asideValue, (newVal) => {
   display: flex;
   position: relative;
   flex-direction: column;
-  background: #FFF;
+  background: #fff;
   border: 1px solid #efeff5;
   border-radius: 3px;
   box-sizing: border-box;
@@ -285,11 +314,17 @@ watch(asideValue, (newVal) => {
     right: -20px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item.n-collapse-item--right-arrow-placement .n-collapse-item__header .n-collapse-item-arrow) {
+  ::v-deep(.n-collapse
+      .n-collapse-item.n-collapse-item--right-arrow-placement
+      .n-collapse-item__header
+      .n-collapse-item-arrow) {
     margin-left: 8px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-main) {
+  ::v-deep(.n-collapse
+      .n-collapse-item
+      .n-collapse-item__header
+      .n-collapse-item__header-main) {
     font-weight: bold;
     justify-content: space-between;
   }
@@ -302,11 +337,18 @@ watch(asideValue, (newVal) => {
     border-top: 0px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
+  ::v-deep(.n-collapse
+      .n-collapse-item
+      .n-collapse-item__content-wrapper
+      .n-collapse-item__content-inner) {
     padding-top: 10px;
   }
 
-  ::v-deep(.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar) {
+  ::v-deep(.n-scrollbar
+      > .n-scrollbar-rail.n-scrollbar-rail--vertical
+      > .n-scrollbar-rail__scrollbar, .n-scrollbar
+      + .n-scrollbar-rail.n-scrollbar-rail--vertical
+      > .n-scrollbar-rail__scrollbar) {
     width: 0px;
   }
 }
diff --git a/src/views/home/aside/comp/AdvanceFilter.vue b/src/views/home/aside/comp/AdvanceFilter.vue
index 80595df..4c461d5 100644
--- a/src/views/home/aside/comp/AdvanceFilter.vue
+++ b/src/views/home/aside/comp/AdvanceFilter.vue
@@ -156,12 +156,16 @@ const inputHandler = debounce((word) => {
   getSearchedList(word);
 }, 300);
 
-function getSearchedList(word) {
+function getSearchedList(word, isScroll = false) {
   if (word) {
     pagination.pageSize = 300;
-  } else {
+  }
+  if (!word) {
     pagination.pageSize = 10;
   }
+  if (isScroll) {
+    pagination.pageSize = 300;
+  }
   ruleForm.keyword = word;
   featchList().then((list) => {
     let dataArr: FilterEntity[] = [];
@@ -233,9 +237,16 @@ function unFavoriteHandler(event: MouseEvent, item) {
   }
 }
 
-const handleScroll= (event)=>{
-  console.log(event)
-}
+const handleScroll = (event) => {
+  let timer;
+  if (timer) {
+    clearTimeout(timer);
+  } else {
+    timer = setTimeout(() => {
+      getSearchedList("", true);
+    }, 2000);
+  }
+};
 
 const moveEnd = () => {
   unData.value.map((v, index) => {
@@ -438,7 +449,7 @@ const moveEnd = () => {
     align-items: center;
   }
 }
-::v-deep(.wrapper-left-popover .n-form-item){
+::v-deep(.wrapper-left-popover .n-form-item) {
   display: block !important;
 }
 </style>
diff --git a/src/views/home/aside/comp/modals/NewFilterModal.vue b/src/views/home/aside/comp/modals/NewFilterModal.vue
index 7b1212e..d1369bc 100644
--- a/src/views/home/aside/comp/modals/NewFilterModal.vue
+++ b/src/views/home/aside/comp/modals/NewFilterModal.vue
@@ -1,105 +1,107 @@
 <script lang="ts" setup>
-import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
-import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from 'vue'
-import { asideMap } from '@/config/aside'
-import { useDictionary } from '@/store/modules/dictonary'
-import { useConfig } from '@/store/modules/asideConfig'
-import type { FilterCondition } from '/#/api'
-import { addCondition, updateCondition } from '@/api/home/filter'
-import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
-
-type Status = 'edit' | 'new'
-
-const show = ref(false)
-const configStore = useConfig()
-const dicStore = useDictionary()
-const currentStatus = ref<Status>('new')
-let currentEditId: string | null = null
+import type { FormInst, FormItemRule, FormRules } from "naive-ui";
+import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from "vue";
+import { asideMap } from "@/config/aside";
+import { useDictionary } from "@/store/modules/dictonary";
+import { useConfig } from "@/store/modules/asideConfig";
+import type { FilterCondition } from "/#/api";
+import { addCondition, updateCondition } from "@/api/home/filter";
+import { formatToDate2, formatToDate3 } from "@/utils/dateUtil";
+
+type Status = "edit" | "new";
+
+const show = ref(false);
+const configStore = useConfig();
+const dicStore = useDictionary();
+const currentStatus = ref<Status>("new");
+let currentEditId: string | null = null;
+const emit = defineEmits(["onOk"]);
 
 const modalTitle = computed(() => {
-  return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
-})
+  return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件";
+});
 
 const cardStyle = {
-  'width': '800px',
-  '--n-padding-bottom': '10px',
-  '--n-padding-left': '10px',
-}
+  width: "800px",
+  "--n-padding-bottom": "10px",
+  "--n-padding-left": "10px",
+};
 
 const noBorderInput = {
-  '--n-border': '0px',
-  '--n-border-hover': '0px',
-  '--n-border-pressed': '0px',
-}
+  "--n-border": "0px",
+  "--n-border-hover": "0px",
+  "--n-border-pressed": "0px",
+};
 
 const formItemStyle = {
-  '--n-label-height': '0px',
-  '--n-feedback-height': '8px',
-}
+  "--n-label-height": "0px",
+  "--n-feedback-height": "8px",
+};
 
 interface FormType {
-  name: string | null
-  logic: string | null
-  conditions: Condition[]
+  name: string | null;
+  logic: string | null;
+  conditions: Condition[];
 }
 
 interface Condition {
-  type: string | null
-  operator: string | null
-  result: any
+  type: string | null;
+  operator: string | null;
+  result: any;
 }
 
 interface Option {
-  label: string
-  value: string
+  label: string;
+  value: string;
 }
 
 const rules: FormRules = {
   name: {
     required: true,
-    message: '请输入过滤条件名称',
-    trigger: 'blur',
+    message: "请输入过滤条件名称",
+    trigger: "blur",
   },
   logic: {
     required: true,
-    message: '请选择逻辑关系',
-    trigger: 'blur',
+    message: "请选择逻辑关系",
+    trigger: "blur",
   },
   conditions: {
     required: true,
     validator(rule: FormItemRule, value: Condition[]) {
       for (const item of value) {
-        const { type, operator, result } = item
+        const { type, operator, result } = item;
 
         if (type === null || operator === null || result === null)
-          return new Error('请选择过滤条件')
+          return new Error("请选择过滤条件");
       }
-      return true
+      return true;
     },
-    trigger: ['input', 'blur'],
+    trigger: ["input", "blur"],
   },
-}
+};
 
-const formRef = ref<FormInst | null>(null)
+const formRef = ref<FormInst | null>(null);
 
 const formValue = reactive<FormType>({
   name: null,
-  logic: 'where',
-  conditions: [{
-    type: null,
-    operator: 'eq',
-    result: null,
-  }],
-})
+  logic: "where",
+  conditions: [
+    {
+      type: null,
+      operator: "eq",
+      result: null,
+    },
+  ],
+});
 
 function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
+  e.preventDefault();
   formRef.value?.validate((errors) => {
-    if (errors)
-      return
+    if (errors) return;
 
     const list = formValue.conditions.map((item, index) => {
-      const { type, operator, result } = item
+      const { type, operator, result } = item;
 
       return {
         searchfield: type!,
@@ -107,191 +109,202 @@ function handleSumbit(e: MouseEvent) {
         searchvalue: formatValue(type!, result),
         searchRelationType: formValue.logic!,
         orderNum: index + 1,
-      }
-    })
+      };
+    });
 
     const param: FilterCondition = {
       searchname: formValue.name!,
       type: 0,
       ocrUsersearchchildList: list,
-    }
-
-    if (currentStatus.value === 'new')
-      addCondition(param)
-    else
-      updateCondition({ id: currentEditId!, ...param })
-    closeModal()
-  })
+    };
+
+    if (currentStatus.value === "new") addCondition(param);
+    else updateCondition({ id: currentEditId!, ...param });
+    emit("onOk");
+    setTimeout(() => {
+      closeModal();
+    }, 300);
+  });
 }
 
 // 调用接口前转换为服务端格式
 function formatValue(searchfield: string, searchvalue: any) {
-  if (searchfield === 'izyear') {
-    const start = formatToDate2(searchvalue[0])
-    const end = formatToDate2(searchvalue[1])
-    return `${start}-${end}`
+  if (searchfield === "izyear") {
+    const start = formatToDate2(searchvalue[0]);
+    const end = formatToDate2(searchvalue[1]);
+    return `${start}-${end}`;
   }
 
-  if (searchfield === 'izsimilarity' && Array.isArray(searchvalue))
-    return searchvalue.join(',')
+  if (searchfield === "izsimilarity" && Array.isArray(searchvalue))
+    return searchvalue.join(",");
 
-  return searchvalue
+  return searchvalue;
 }
 
 // 编辑前前转换为服务端格式
 function unformatValue(searchfield: string, searchvalue: any) {
   // 2022/01/03-2023/02/04
-  if (searchfield === 'izyear') {
-    const dataStrs = searchvalue.split('-')
-    const start = formatToDate3(dataStrs[0])
-    const end = formatToDate3(dataStrs[1])
-    return [start, end]
+  if (searchfield === "izyear") {
+    const dataStrs = searchvalue.split("-");
+    const start = formatToDate3(dataStrs[0]);
+    const end = formatToDate3(dataStrs[1]);
+    return [start, end];
   }
 
   // 80,90
-  if (searchfield === 'izsimilarity')
-    return searchvalue.split(',')
+  if (searchfield === "izsimilarity") return searchvalue.split(",");
 
-  return searchvalue
+  return searchvalue;
 }
 
 function createCondition() {
   formValue.conditions.push({
     type: null,
-    operator: 'eq',
+    operator: "eq",
     result: null,
-  })
+  });
 }
 
 function removeCondition(index: number) {
-  formValue.conditions.splice(index, 1)
+  formValue.conditions.splice(index, 1);
 }
 
 function formLabel(index: number) {
-  return index === 0 ? '筛选条件' : ''
+  return index === 0 ? "筛选条件" : "";
 }
 
-const typeOptions = ref<Option[]>([])
+const typeOptions = ref<Option[]>([]);
 
 const operatorOptions = [
   {
-    label: '等于',
-    value: 'eq',
+    label: "等于",
+    value: "eq",
   },
   {
-    label: '不等于',
-    value: 'notEq',
+    label: "不等于",
+    value: "notEq",
   },
-]
+];
 
-const logicOptions = ref([])
+const logicOptions = ref([]);
 
 const similarityOptions = [
   {
-    label: '80%-90%',
+    label: "80%-90%",
     value: [80, 90],
   },
   {
-    label: '95%-100%',
+    label: "95%-100%",
     value: [95, 100],
   },
   {
-    label: '100%-100%',
+    label: "100%-100%",
     value: [100, 100],
   },
-]
+];
 
 onBeforeMount(() => {
-  dicStore.fetchRelationTypeList()
-})
+  dicStore.fetchRelationTypeList();
+});
 
-watch(() => dicStore.relationTypeList, (newval) => {
-  logicOptions.value = newval
-})
+watch(
+  () => dicStore.relationTypeList,
+  (newval) => {
+    logicOptions.value = newval;
+  }
+);
 
 function showModal() {
-  const list = generateAllData(configStore.systemConfig)
-  typeOptions.value = list
-  show.value = true
+  const list = generateAllData(configStore.systemConfig);
+  typeOptions.value = list;
+  show.value = true;
 }
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 function generateAllData(config): Option[] {
-  const initVal: Option[] = []
+  const initVal: Option[] = [];
 
   const list = Object.keys(config).reduce((acc, value) => {
-    if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
-      const name = asideMap[value]?.label
-
-      name && acc.push({
-        value,
-        label: name || '未配置',
-      })
+    if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) {
+      const name = asideMap[value]?.label;
+
+      name &&
+        acc.push({
+          value,
+          label: name || "未配置",
+        });
     }
-    return acc
-  }, initVal)
+    return acc;
+  }, initVal);
 
-  return list
+  return list;
 }
 
-watch(() => configStore.systemConfig, (newVal) => {
-  if (!newVal)
-    return
+watch(
+  () => configStore.systemConfig,
+  (newVal) => {
+    if (!newVal) return;
 
-  const list = generateAllData(newVal)
-  typeOptions.value = list
-})
+    const list = generateAllData(newVal);
+    typeOptions.value = list;
+  }
+);
 
 function getOptions(key: string) {
-  if (key === 'izsimilarity')
-    return similarityOptions
+  if (key === "izsimilarity") return similarityOptions;
 
-  const getterName = `get${key}`
-  const options = unref(dicStore[getterName])
-  return options || []
+  const getterName = `get${key}`;
+  const options = unref(dicStore[getterName]);
+  return options || [];
 }
 
 function leaveHandler() {
-  currentStatus.value = 'new'
-  currentEditId = null
+  currentStatus.value = "new";
+  currentEditId = null;
 
-  formValue.name = null
+  formValue.name = null;
   formValue.conditions = [
     {
       type: null,
-      operator: 'eq',
+      operator: "eq",
       result: null,
     },
-  ]
+  ];
 }
 
 function edit(editFilter: any) {
-  currentStatus.value = 'edit'
+  currentStatus.value = "edit";
 
-  const { searchname, ocrUsersearchchildList, id } = editFilter
-  currentEditId = id
-  formValue.name = searchname
+  const { searchname, ocrUsersearchchildList, id } = editFilter;
+  currentEditId = id;
+  formValue.name = searchname;
   formValue.conditions = ocrUsersearchchildList.map((item) => {
     return {
       type: item.searchfield,
       operator: item.searchtype,
       result: unformatValue(item.searchfield, item.searchvalue),
-    }
-  })
+    };
+  });
 }
 
 defineExpose({
   showModal,
   edit,
-})
+});
 </script>
 
 <template>
   <n-modal v-model:show="show" transform-origin="center" @after-leave="leaveHandler">
-    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      :style="cardStyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <div class="wrapper">
         <span class="wrapper-title">{{ modalTitle }}</span>
         <div class="wrapper-bar">
@@ -302,32 +315,61 @@ defineExpose({
         <div class="wrapper-form">
           <n-form ref="formRef" :model="formValue" :rules="rules">
             <n-form-item path="name" label="标题">
-              <n-input v-model:value="formValue.name" :style="{ width: '780px' }" @keydown.enter.prevent />
+              <n-input
+                v-model:value="formValue.name"
+                :style="{ width: '780px' }"
+                @keydown.enter.prevent
+              />
             </n-form-item>
             <n-form-item path="logic" label="逻辑关系" v-show="false">
-              <n-select filterable v-model:value="formValue.logic" placeholder="请选择逻辑关系" :options="logicOptions" />
+              <n-select
+                filterable
+                v-model:value="formValue.logic"
+                placeholder="请选择逻辑关系"
+                :options="logicOptions"
+              />
             </n-form-item>
             <n-form-item
-              v-for="(item, index) in formValue.conditions" :key="index" :style="formItemStyle"
-              path="conditions" :label="formLabel(index)"
+              v-for="(item, index) in formValue.conditions"
+              :key="index"
+              :style="formItemStyle"
+              path="conditions"
+              :label="formLabel(index)"
             >
-              <n-select filterable
-                v-model:value="item.type" placeholder="请选择筛选项名称" :options="typeOptions"
+              <n-select
+                filterable
+                v-model:value="item.type"
+                placeholder="请选择筛选项名称"
+                :options="typeOptions"
               />
-              <n-select filterable
-                v-model:value="item.operator" style="margin-left: 8px;" placeholder="请选择"
+              <n-select
+                filterable
+                v-model:value="item.operator"
+                style="margin-left: 8px"
+                placeholder="请选择"
                 :options="operatorOptions"
               />
               <n-space v-if="item.type === 'izyear'">
                 <n-date-picker
-                  v-model:value="item.result" style="margin-left: 8px;width: 240px;" type="daterange"
+                  v-model:value="item.result"
+                  style="margin-left: 8px; width: 240px"
+                  type="daterange"
                   clearable
                 />
               </n-space>
-              <n-select filterable
-                v-else v-model:value="item.result" style="margin-left: 8px;" placeholder="请选择" :options="getOptions(item.type!)"
+              <n-select
+                filterable
+                v-else
+                v-model:value="item.result"
+                style="margin-left: 8px"
+                placeholder="请选择"
+                :options="getOptions(item.type!)"
               />
-              <n-button :style="noBorderInput" icon-placement="right" @click="removeCondition(index)">
+              <n-button
+                :style="noBorderInput"
+                icon-placement="right"
+                @click="removeCondition(index)"
+              >
                 <template #icon>
                   <SvgIcon size="24" name="close" />
                 </template>
@@ -337,15 +379,13 @@ defineExpose({
         </div>
         <div class="wrapper-new" @click="createCondition">
           <span>+</span>
-          <span style="margin-left:8px">添加筛选条件</span>
+          <span style="margin-left: 8px">添加筛选条件</span>
         </div>
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit">
-            保存
-          </n-button>
-          <n-button secondary style="margin-left:15px" @click="closeModal">
+          <n-button type="info" @click="handleSumbit"> 保存 </n-button>
+          <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -402,7 +442,7 @@ defineExpose({
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 9e2ff6e..484c1d2 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -186,7 +186,8 @@ defineExpose({
         <SvgIcon :name="collapseIcon" size="40" />
       </div>
     </div>
-    <div class="aside-header">
+    
+    <div class="aside-header" :style="`display:${asideWidth == 0?'none':''}`" >
       <!-- <div v-show="!showSearch" class="warpper">
         <div class="left">
           <svg-icon name="all-worksheet" size="32" />
diff --git a/src/views/task/modal/NewFilterModal.vue b/src/views/task/modal/NewFilterModal.vue
index a64ad43..56a93ff 100644
--- a/src/views/task/modal/NewFilterModal.vue
+++ b/src/views/task/modal/NewFilterModal.vue
@@ -1,106 +1,107 @@
 <script lang="ts" setup>
-import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
-import { computed, onBeforeMount, reactive, ref, unref, watch } from 'vue'
-import { asideTaskMap as asideMap } from '@/config/final'
-import { useDictionary } from '@/store/modules/dictonary'
-import { useConfig } from '@/store/modules/asideConfig'
-import type { FilterCondition } from '/#/api'
-import { addCondition, updateCondition } from '@/api/home/filter'
-import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
-
-type Status = 'edit' | 'new'
-
-const show = ref(false)
-const configStore = useConfig()
-const dicStore = useDictionary()
-const currentStatus = ref<Status>('new')
-let currentEditId: string | null = null
-const emit = defineEmits(['onOk'])
+import type { FormInst, FormItemRule, FormRules } from "naive-ui";
+import { computed, onBeforeMount, reactive, ref, unref, watch } from "vue";
+import { asideTaskMap as asideMap } from "@/config/final";
+import { useDictionary } from "@/store/modules/dictonary";
+import { useConfig } from "@/store/modules/asideConfig";
+import type { FilterCondition } from "/#/api";
+import { addCondition, updateCondition } from "@/api/home/filter";
+import { formatToDate2, formatToDate3 } from "@/utils/dateUtil";
+
+type Status = "edit" | "new";
+
+const show = ref(false);
+const configStore = useConfig();
+const dicStore = useDictionary();
+const currentStatus = ref<Status>("new");
+let currentEditId: string | null = null;
+const emit = defineEmits(["onOk"]);
 
 const modalTitle = computed(() => {
-  return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
-})
+  return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件";
+});
 
 const cardStyle = {
-  'width': '800px',
-  '--n-padding-bottom': '10px',
-  '--n-padding-left': '10px',
-}
+  width: "800px",
+  "--n-padding-bottom": "10px",
+  "--n-padding-left": "10px",
+};
 
 const noBorderInput = {
-  '--n-border': '0px',
-  '--n-border-hover': '0px',
-  '--n-border-pressed': '0px',
-}
+  "--n-border": "0px",
+  "--n-border-hover": "0px",
+  "--n-border-pressed": "0px",
+};
 
 const formItemStyle = {
-  '--n-label-height': '0px',
-  '--n-feedback-height': '8px',
-}
+  "--n-label-height": "0px",
+  "--n-feedback-height": "8px",
+};
 
 interface FormType {
-  name: string | null
-  logic: string | null
-  conditions: Condition[]
+  name: string | null;
+  logic: string | null;
+  conditions: Condition[];
 }
 
 interface Condition {
-  type: string | null
-  operator: string | null
-  result: any
+  type: string | null;
+  operator: string | null;
+  result: any;
 }
 
 interface Option {
-  label: string
-  value: string
+  label: string;
+  value: string;
 }
 
 const rules: FormRules = {
   name: {
     required: true,
-    message: '请输入过滤条件名称',
-    trigger: 'blur',
+    message: "请输入过滤条件名称",
+    trigger: "blur",
   },
   logic: {
     required: true,
-    message: '请选择逻辑关系',
-    trigger: 'blur',
+    message: "请选择逻辑关系",
+    trigger: "blur",
   },
   conditions: {
     required: true,
     validator(rule: FormItemRule, value: Condition[]) {
       for (const item of value) {
-        const { type, operator, result } = item
+        const { type, operator, result } = item;
 
         if (type === null || operator === null || result === null)
-          return new Error('请选择过滤条件')
+          return new Error("请选择过滤条件");
       }
-      return true
+      return true;
     },
-    trigger: ['input', 'blur'],
+    trigger: ["input", "blur"],
   },
-}
+};
 
-const formRef = ref<FormInst | null>(null)
+const formRef = ref<FormInst | null>(null);
 
 const formValue = reactive<FormType>({
   name: null,
-  logic: 'where',
-  conditions: [{
-    type: null,
-    operator: 'eq',
-    result: null,
-  }],
-})
+  logic: "where",
+  conditions: [
+    {
+      type: null,
+      operator: "eq",
+      result: null,
+    },
+  ],
+});
 
 function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
+  e.preventDefault();
   formRef.value?.validate((errors) => {
-    if (errors)
-      return
+    if (errors) return;
 
     const list = formValue.conditions.map((item, index) => {
-      const { type, operator, result } = item
+      const { type, operator, result } = item;
 
       return {
         searchfield: type!,
@@ -108,157 +109,167 @@ function handleSumbit(e: MouseEvent) {
         searchvalue: formatValue(type!, result),
         searchRelationType: formValue.logic!,
         orderNum: index + 1,
-      }
-    })
+      };
+    });
 
     const param: FilterCondition = {
       searchname: formValue.name!,
       type: 2,
       ocrUsersearchchildList: list,
-    }
-
-    if (currentStatus.value === 'new')
-      addCondition(param)
-    else
-      updateCondition({ id: currentEditId!, ...param })
-    closeModal()
-    emit('onOk')
-  })
+    };
+
+    if (currentStatus.value === "new") addCondition(param);
+    else updateCondition({ id: currentEditId!, ...param });
+    emit("onOk");
+    setTimeout(() => {
+      closeModal();
+    }, 300);
+  });
 }
 
 function formatValue(searchfield: string, searchvalue: any) {
-  if (searchfield === 'izuptime') {
-    const start = formatToDate2(searchvalue[0])
-    const end = formatToDate2(searchvalue[1])
-    return `${start}-${end}`
+  if (searchfield === "izuptime") {
+    const start = formatToDate2(searchvalue[0]);
+    const end = formatToDate2(searchvalue[1]);
+    return `${start}-${end}`;
   }
 
-  return searchvalue
+  return searchvalue;
 }
 
 // 编辑前前转换为服务端格式
 function unformatValue(searchfield: string, searchvalue: any) {
   // 2022/01/03-2023/02/04
-  if (searchfield === 'izuptime') {
-    const dataStrs = searchvalue.split('-')
-    const start = formatToDate3(dataStrs[0])
-    const end = formatToDate3(dataStrs[1])
-    return [start, end]
+  if (searchfield === "izuptime") {
+    const dataStrs = searchvalue.split("-");
+    const start = formatToDate3(dataStrs[0]);
+    const end = formatToDate3(dataStrs[1]);
+    return [start, end];
   }
 
-  return searchvalue
+  return searchvalue;
 }
 
 function createCondition() {
   formValue.conditions.push({
     type: null,
-    operator: 'eq',
+    operator: "eq",
     result: null,
-  })
+  });
 }
 
 function removeCondition(index: number) {
-  formValue.conditions.splice(index, 1)
+  formValue.conditions.splice(index, 1);
 }
 
 function formLabel(index: number) {
-  return index === 0 ? '筛选条件' : ''
+  return index === 0 ? "筛选条件" : "";
 }
 
-const typeOptions = ref<Option[]>([])
+const typeOptions = ref<Option[]>([]);
 
 const operatorOptions = [
   {
-    label: '等于',
-    value: 'eq',
+    label: "等于",
+    value: "eq",
   },
   {
-    label: '不等于',
-    value: 'notEq',
+    label: "不等于",
+    value: "notEq",
   },
-]
+];
 
-const logicOptions = ref([])
+const logicOptions = ref([]);
 
 onBeforeMount(() => {
-  dicStore.fetchRelationTypeList()
-})
+  dicStore.fetchRelationTypeList();
+});
 
-watch(() => dicStore.relationTypeList, (newval) => {
-  logicOptions.value = newval
-})
+watch(
+  () => dicStore.relationTypeList,
+  (newval) => {
+    logicOptions.value = newval;
+  }
+);
 
 function showModal() {
-  show.value = true
+  show.value = true;
 }
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 function generateAllData(): Option[] {
-  const initVal: Option[] = []
+  const initVal: Option[] = [];
   const list = Object.keys(asideMap).reduce((acc, value) => {
-    if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
-      const name = asideMap[value]?.label
-
-      name && acc.push({
-        value,
-        label: name || '未配置',
-      })
+    if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) {
+      const name = asideMap[value]?.label;
+
+      name &&
+        acc.push({
+          value,
+          label: name || "未配置",
+        });
     }
-    return acc
-  }, initVal)
+    return acc;
+  }, initVal);
 
-  return list
+  return list;
 }
 
-typeOptions.value = generateAllData()
+typeOptions.value = generateAllData();
 
 function getOptions(key: string) {
-  const getterName = `get${key}`
-  const options = unref(dicStore[getterName])
-  return options || []
+  const getterName = `get${key}`;
+  const options = unref(dicStore[getterName]);
+  return options || [];
 }
 
 function leaveHandler() {
-  currentStatus.value = 'new'
-  currentEditId = null
+  currentStatus.value = "new";
+  currentEditId = null;
 
-  formValue.name = null
+  formValue.name = null;
   formValue.conditions = [
     {
       type: null,
-      operator: 'eq',
+      operator: "eq",
       result: null,
     },
-  ]
+  ];
 }
 
 function edit(editFilter: any) {
-  currentStatus.value = 'edit'
+  currentStatus.value = "edit";
 
-  const { searchname, ocrUsersearchchildList, id } = editFilter
-  currentEditId = id
-  formValue.name = searchname
+  const { searchname, ocrUsersearchchildList, id } = editFilter;
+  currentEditId = id;
+  formValue.name = searchname;
   formValue.conditions = ocrUsersearchchildList.map((item) => {
     return {
       type: item.searchfield,
       operator: item.searchtype,
       result: unformatValue(item.searchfield, item.searchvalue),
-    }
-  })
+    };
+  });
 }
 
 defineExpose({
   showModal,
   edit,
-})
+});
 </script>
 
 <template>
   <n-modal v-model:show="show" transform-origin="center" @after-leave="leaveHandler">
-    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      :style="cardStyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <div class="wrapper">
         <span class="wrapper-title">{{ modalTitle }}</span>
         <div class="wrapper-bar">
@@ -269,32 +280,61 @@ defineExpose({
         <div class="wrapper-form">
           <n-form ref="formRef" :model="formValue" :rules="rules">
             <n-form-item path="name" label="标题">
-              <n-input v-model:value="formValue.name" :style="{ width: '780px' }" @keydown.enter.prevent />
+              <n-input
+                v-model:value="formValue.name"
+                :style="{ width: '780px' }"
+                @keydown.enter.prevent
+              />
             </n-form-item>
             <n-form-item path="logic" label="逻辑关系" v-show="false">
-              <n-select filterable v-model:value="formValue.logic" placeholder="请选择逻辑关系" :options="logicOptions" />
+              <n-select
+                filterable
+                v-model:value="formValue.logic"
+                placeholder="请选择逻辑关系"
+                :options="logicOptions"
+              />
             </n-form-item>
             <n-form-item
-              v-for="(item, index) in formValue.conditions" :key="index" :style="formItemStyle"
-              path="conditions" :label="formLabel(index)"
+              v-for="(item, index) in formValue.conditions"
+              :key="index"
+              :style="formItemStyle"
+              path="conditions"
+              :label="formLabel(index)"
             >
-              <n-select filterable
-                v-model:value="item.type" placeholder="请选择筛选项名称" :options="typeOptions"
+              <n-select
+                filterable
+                v-model:value="item.type"
+                placeholder="请选择筛选项名称"
+                :options="typeOptions"
               />
-              <n-select filterable
-                v-model:value="item.operator" style="margin-left: 8px;" placeholder="请选择"
+              <n-select
+                filterable
+                v-model:value="item.operator"
+                style="margin-left: 8px"
+                placeholder="请选择"
                 :options="operatorOptions"
               />
               <n-space v-if="item.type === 'izuptime'">
                 <n-date-picker
-                  v-model:value="item.result" style="margin-left: 8px;width: 240px;" type="daterange"
+                  v-model:value="item.result"
+                  style="margin-left: 8px; width: 240px"
+                  type="daterange"
                   clearable
                 />
               </n-space>
-              <n-select filterable
-                v-else v-model:value="item.result" style="margin-left: 8px;" placeholder="请选择" :options="getOptions(item.type!)"
+              <n-select
+                filterable
+                v-else
+                v-model:value="item.result"
+                style="margin-left: 8px"
+                placeholder="请选择"
+                :options="getOptions(item.type!)"
               />
-              <n-button :style="noBorderInput" icon-placement="right" @click="removeCondition(index)">
+              <n-button
+                :style="noBorderInput"
+                icon-placement="right"
+                @click="removeCondition(index)"
+              >
                 <template #icon>
                   <SvgIcon size="24" name="close" />
                 </template>
@@ -304,15 +344,13 @@ defineExpose({
         </div>
         <div class="wrapper-new" @click="createCondition">
           <span>+</span>
-          <span style="margin-left:8px">添加筛选条件</span>
+          <span style="margin-left: 8px">添加筛选条件</span>
         </div>
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit">
-            保存
-          </n-button>
-          <n-button secondary style="margin-left:15px" @click="closeModal">
+          <n-button type="info" @click="handleSumbit"> 保存 </n-button>
+          <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -369,7 +407,7 @@ defineExpose({
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;