feat: 修复逻辑问题及样式缺陷

src/components/RichEditor/Quill.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { defineEmits, reactive, ref } from 'vue'
 import { QuillEditor } from '@vueup/vue-quill'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
 import { debounce } from 'lodash-es'
 import { queryNote, saveNote } from '@/api/home/main'
 
+const emit = defineEmits(['close'])
+
 const quillEditor = ref()
 
 const cardStyle = {
@@ -27,12 +29,14 @@ const options = reactive({
 })
 
 function initHandler() {
-  queryNote().then((res) => {
+  queryNote()
+    .then((res) => {
       if (res.data)
         note.value = res.data.notecontent
 
       console.log('note:', note.value)
-  }).catch(e => console.log(e))
+    })
+    .catch(e => console.log(e))
 }
 
 const saveHandler = debounce(() => {
@@ -44,9 +48,17 @@ const saveHandler = debounce(() => {
 <template>
   <div>
     <n-card :style="cardStyle" :bordered="false" class="mt-4 proCard">
+      <div class="top_box">
         <div class="title">
           备注信息
         </div>
+        <SvgIcon
+          size="24"
+          name="close-none-border"
+          class="close_box"
+          @click="emit('close')"
+        />
+      </div>
       <QuillEditor
         ref="quillEditor"
         v-model:content="note"
@@ -62,15 +74,25 @@ const saveHandler = debounce(() => {
 </template>
 
 <style lang="less" scoped>
-  .title{
+.top_box {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  .close_box {
+    cursor: pointer;
+    margin-bottom: 25px;
+  }
+}
+.title {
   font-size: 18px;
   font-family: PingFang SC, PingFang SC-Medium;
   font-weight: Medium;
   color: #333333;
   margin-bottom: 24px;
-  }
+}
 
-  .ql-toolbar.ql-snow {
+.ql-toolbar.ql-snow {
   border-top: none;
   border-left: none;
   border-right: none;
@@ -78,9 +100,9 @@ const saveHandler = debounce(() => {
   margin-top: -10px;
   background: #f8f8f8;
   border: 1px solid #d8d8d8;
-  }
+}
 
-  .ql-container.ql-snow {
+.ql-container.ql-snow {
   border: 1px solid #d8d8d8;
-  }
+}
 </style>

src/components/Search/Search.vue

@@ -91,6 +91,8 @@ function highlightText(text, query) {
 }
 onMounted(() => {
   setTimeout(() => (value.value = ''))
+  handlerShowList()
+  handlerSearch('')
 })
 </script>
 
@@ -114,7 +116,7 @@ onMounted(() => {
     </div>
     <div v-show="showList && (historyList.length || resultList.length)" class="list_box">
       <div
-        v-if="historyList.length"
+        v-if="historyList.length && !value"
         class="list_classfiy_item"
         style="border-bottom: 1px solid #e4e4e4"
       >

src/layout/components/Header/QuillModal.vue

@@ -24,11 +24,9 @@ defineExpose({
 <template>
   <div>
     <n-modal v-model:show="show" transform-origin="center">
-      <Quill />
+      <Quill @close="show = false" />
     </n-modal>
   </div>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

src/utils/image.ts

@@ -9,7 +9,9 @@ export function hideDownload(e: MouseEvent) {
     const downloadEle: any = document.querySelector('.n-image-preview-toolbar')?.children[5]
     const asideValue = unref(configStore.getAsideValue)
     const download = asideValue?.izimgdownload
-    if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false)
+    // TODO 判断条件调整
+    // if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false)
+    if (downloadEle && !download)
       downloadEle.style.display = 'none'
     else
       downloadEle.style.display = 'block'

src/views/final/aside/Aside.vue

@@ -173,7 +173,8 @@ nextTick(() => {
     Object.keys(config).forEach((key) => {
       if (key.startsWith('iz') && asideMap[key] !== undefined) {
         asideVisible[key]
-          = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y'
+          = (showKeys.includes(key) || asideMap[key].isDefaultFilter)
+          && config[key] === 'Y'
       }
     })
     if (customObjRef.value) {
@@ -308,6 +309,7 @@ function inputChange(keyword) {
 }
 function handleOk(item: any) {
   console.log('handleOk', item)
+  // .setCurrentlySelectedAdvanced(item.searchname)
   if (item) {
     AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname)
     filterHandler(item.id)
@@ -407,7 +409,7 @@ function updateComponent(key, e) {
     width: 100%;
     border-bottom: 1px solid #e8e8e8;
     margin-bottom: 15px;
-    height: 58px
+    height: 58px;
   }
 
   &-divider {

src/views/final/comp/CustomFilterModalVue.vue

@@ -1,46 +1,51 @@
 <script lang="ts" setup>
-import { debounce, difference } from 'lodash-es'
-import { computed, ref, watch, onMounted } from 'vue'
+import { cloneDeep, debounce, difference, isEqual } from 'lodash-es'
+import { computed, onMounted, ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { setFilter } from '@/api/home/filter'
 import { asideMap } from '@/config/final'
 import { useFinal } from '@/store/modules/final'
-import { cloneDeep, isEqual } from "lodash-es";
 
 const show = ref(false)
 const finalStore = useFinal()
 const checkAll = ref(false)
 const selectIds = ref<string[]>([])
 const tempList = ref<string[]>([])
-let extraCustomConfig :any = [];
+const extraCustomConfig: any = []
+// 左侧隐藏列表
+const offList = ref<any[]>([])
+// 右侧显示列表
+const onList = ref<any[]>([])
+
+const allCount = computed(() => {
+  return `全部筛选(共${offList.value.length}个)`
+})
+
+const selectCount = computed(() => {
+  return `已选筛选(共${onList.value.length}个)`
+})
+const offKeyword = ref('')
+const onKeyword = ref('')
 
 Object.keys(asideMap).forEach((key) => {
-  const { isDefaultFilter } = asideMap[key];
-  if (isDefaultFilter) {
-    extraCustomConfig.push(key);
-  }
-});
+  const { isDefaultFilter } = asideMap[key]
+  if (isDefaultFilter)
+    extraCustomConfig.push(key)
+})
 
 function showModal() {
   show.value = true
-
   // 重置左右列表数据
   const config = finalStore.getSystemConfig
   const customConfig = finalStore.getCustomConfig
-
-  console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config,  customConfig)
-  console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',tempList.value, finalStore.getFilterConfig)
   if (config == null || customConfig == null)
     return
   if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
     return
-
   const { showList, hideList } = generatList(config, customConfig)
   tempList.value = cloneDeep(showList)
-  console.log("tempList.value开启了lllllllllllllllllll", showList, hideList);
   if (tempList.value.length > 0)
     finalStore.setFilterConfig(tempList.value)
-
   onList.value = showList
   offList.value = hideList
   // 重置全选状态
@@ -51,22 +56,11 @@ function showModal() {
 }
 
 function closeModal() {
+  offKeyword.value = ''
+  onKeyword.value = ''
   show.value = false
 }
 
-// 左侧隐藏列表
-const offList = ref<any[]>([])
-// 右侧显示列表
-const onList = ref<any[]>([])
-
-const allCount = computed(() => {
-  return `全部筛选(共${offList.value.length}个)`
-})
-
-const selectCount = computed(() => {
-  return `已选筛选(共${onList.value.length}个)`
-})
-
 defineExpose({
   showModal,
 })
@@ -94,16 +88,13 @@ function generateDefaultList(config) {
 function generatList(config, customConfig) {
   const keys = Object.keys(config)
   let onList: object[] = []
-  let offList: any = []
-  let showKeys = [];
-  const tempShowKeys = [...customConfig, ...extraCustomConfig];
-  tempShowKeys.map(item => {
-    if(!showKeys.includes(item)) {
-      showKeys.push(item);
-    }
-  });
-  console.log('原始筛选条件showKeys', showKeys)
-  console.log('原始筛选条件config customConfig', config, customConfig)
+  const offList: any = []
+  const showKeys = []
+  const tempShowKeys = [...customConfig, ...extraCustomConfig]
+  tempShowKeys.forEach((item) => {
+    if (!showKeys.includes(item))
+      showKeys.push(item)
+  })
   // for (const key of keys) {
   //   if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
   //     continue
@@ -125,7 +116,7 @@ function generatList(config, customConfig) {
   //       isChecked && selectIds.value.push(key)
   //   }
   // }
-  Object.keys(asideMap).map(key => {
+  Object.keys(asideMap).forEach((key) => {
     const name = asideMap[key]?.label
     const isDefaultFilter = asideMap[key]?.isDefaultFilter
 
@@ -161,43 +152,30 @@ function generatList(config, customConfig) {
       return acc
     }
   }, [])
-  console.log('原始筛选条件onList', onList)
   const fixedList = generateDefaultList(config)
   // offList.unshift(...fixedList)
-  console.log('原始筛选条件fixedList', fixedList)
   onList.unshift(...fixedList)
-  console.log('原始筛选条件customConfig', customConfig)
   // onList按照customConfig排序
   const tempOnList = cloneDeep(onList)
-  console.log('原始筛选条件tempOnList', tempOnList)
-
   const sortKeyList: any = []
-  finalStore.getFilterConfig.map((item: any) => {
-    console.log("tFilterConfig item000000000000000", item);
+  finalStore.getFilterConfig.forEach((item: any) => {
     sortKeyList.push(item.id)
   })
-  console.log('原始筛选条件sortKeyList', sortKeyList)
-  console.log('原始筛选条件showKeys', showKeys)
   const sortList: any = []
   if (sortKeyList.length > 0) {
-    sortKeyList.map((key) => {
+    sortKeyList.forEach((key) => {
       const tempItem = tempOnList.find(item => item.id == key)
-      if(tempItem) {
+      if (tempItem)
         sortList.push(tempItem)
-      }
     })
   }
   else {
-    showKeys.map((key) => {
+    showKeys.forEach((key) => {
       const tempItem = tempOnList.find(item => item.id == key)
-      if(tempItem) {
+      if (tempItem)
         sortList.push(tempItem)
-      }
     })
   }
-  console.log('原始筛选条件showList', sortList)
-  console.log('原始筛选条件hideList', offList)
-  console.log('原始筛选条件configStore.getFilterConfig', finalStore.getFilterConfig)
   // return { showList: onList, hideList: offList }
   return { showList: sortList, hideList: offList }
 }
@@ -208,48 +186,36 @@ finalStore.$subscribe(() => {
 
   if (config == null || customConfig == null)
     return
-  console.log('订阅tempList.value-----------', tempList.value)
-  console.log('订阅finalStore.getFilterConfig-----------', finalStore.getFilterConfig)
   if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
     return
 
   const { showList, hideList } = generatList(config, customConfig)
   tempList.value = cloneDeep(showList)
-  console.log('订阅克隆条件', tempList.value)
   if (tempList.value.length > 0)
     finalStore.setFilterConfig(tempList.value)
-
-  // setTimeout(() => {
-  // }, 500);
-  console.log('订阅showList, hideList-----------', showList, hideList)
   onList.value = showList
   offList.value = hideList
 })
 
 async function handleSumbit(e: MouseEvent) {
   e.preventDefault()
-  const param = onList.value.map((item) => {
+  const param = onList.value
+    .map((item) => {
       return item.id
-  }).join(',')
+    })
+    .join(',')
 
   await setFilter({ searchcount: param, type: 1 })
   const obj = await finalStore.fetchCustomConfig()
-  console.log('obj-------------------------------', obj)
   const tempOnList = cloneDeep(onList.value)
-  console.log('提交筛选条件tempOnList', tempOnList)
   const sortList: any = []
-  obj.map((key) => {
+  obj.forEach((key) => {
     const tempItem = tempOnList.find(item => item.id == key)
-    if(tempItem) {
+    if (tempItem)
       sortList.push(tempItem)
-    }
   })
-  console.log('finalStore.sortList提交---------------', sortList)
-  // setTimeout(() => {
   if (sortList.length > 0)
     finalStore.setFilterConfig(sortList)
-
-  // }, 500);
   closeModal()
 }
 
@@ -273,8 +239,7 @@ function onCheckChange(checked: any, item: any) {
 
   if (index === -1 && checked)
     selectIds.value.push(item.id)
-  else
-    index !== -1 && selectIds.value.splice(index, 1)
+  else index !== -1 && selectIds.value.splice(index, 1)
 
   checkAll.value = offList.value.every(item => item.checked)
 }
@@ -292,7 +257,10 @@ watch(
       return
 
     const action = newVal > oldVal ? 'add' : 'remove'
-    const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value)
+    const diff
+      = action === 'add'
+        ? difference(selectIds.value, showIds.value)
+        : difference(showIds.value, selectIds.value)
 
     if (diff.length === 0)
       return
@@ -359,9 +327,6 @@ function removeHandler(id: string) {
     onList.value.splice(index, 1)
 }
 
-const offKeyword = ref('')
-const onKeyword = ref('')
-
 const leftInputHandler = debounce((keyword) => {
   offKeyword.value = keyword
 }, 300)
@@ -390,7 +355,13 @@ onMounted(() => {
 
 <template>
   <n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
-    <n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      class="cardstyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <div class="wrapper">
         <span class="wrapper-title">自定义筛选</span>
         <div class="wrapper-bar">
@@ -402,7 +373,10 @@ onMounted(() => {
         <n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24">
           <n-grid-item span="11">
             <NCard
-              :title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
+              :title="allCount"
+              class="dragcardStyle"
+              :segmented="{ content: true, footer: true }"
+              size="small"
               :bordered="false"
             >
               <div class="input_wrap">
@@ -411,17 +385,29 @@ onMounted(() => {
                     <SvgIcon size="14px" name="magnifying-1-color999" />
                   </template>
                 </n-input>
-                <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;">
+                <n-scrollbar
+                  style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
+                >
                   <div class="draggable-ul">
                     <div class="draggable-li">
-                      <n-checkbox v-model:checked="checkAll" label="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" />
+                      <n-checkbox
+                        v-model:checked="checkAll"
+                        label="全选"
+                        :indeterminate="!checkAll"
+                        @update:checked="onCheckAllChange"
+                      />
                     </div>
                     <div
-                      v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }"
+                      v-for="item in offList"
+                      v-show="item.name.includes(offKeyword)"
+                      :key="item.id"
+                      :class="{ 'disable-check': item.fix }"
                       class="draggable-li"
                     >
                       <n-checkbox
-                        v-model:checked="item.checked" :label="item.name" :disabled="item.fix"
+                        v-model:checked="item.checked"
+                        :label="item.name"
+                        :disabled="item.fix"
                         @update:checked="onCheckChange($event, item)"
                       />
                     </div>
@@ -430,12 +416,15 @@ onMounted(() => {
               </div>
             </NCard>
           </n-grid-item>
-          <n-grid-item style="display: flex;align-items: center;" span="2">
+          <n-grid-item style="display: flex; align-items: center" span="2">
             <SvgIcon size="20" name="switchsvg" />
           </n-grid-item>
           <n-grid-item span="11">
             <NCard
-              :title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
+              :title="selectCount"
+              class="dragcardStyle"
+              :segmented="{ content: true, footer: true }"
+              size="small"
               :bordered="false"
             >
               <template #header-extra>
@@ -447,14 +436,31 @@ onMounted(() => {
                     <SvgIcon size="14px" name="magnifying-1-color999" />
                   </template>
                 </n-input>
-                <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
-                  <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
-                    <div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li">
+                <n-scrollbar
+                  style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
+                  class="scroll"
+                >
+                  <VueDraggable
+                    v-model="onList"
+                    class="draggable-ul"
+                    :animation="150"
+                    group="shared"
+                  >
+                    <div
+                      v-for="item in onList"
+                      v-show="item.name.includes(onKeyword)"
+                      :key="item.id"
+                      :draggable="true"
+                      class="cursor-move draggable-li"
+                    >
                       <SvgIcon name="drag" size="24" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
-                        v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
-                        name="clear" @click="removeHandler(item.id)"
+                        v-if="!item.fix"
+                        size="16px"
+                        style="display: block; margin-left: auto; cursor: pointer"
+                        name="clear"
+                        @click="removeHandler(item.id)"
                       />
                     </div>
                   </VueDraggable>
@@ -469,7 +475,11 @@ onMounted(() => {
           <n-button type="info" @click="handleSumbit">
             确定
           </n-button>
-          <n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal">
+          <n-button
+            secondary
+            style="margin-left: 15px; border: 1px solid #cad2dd"
+            @click="closeModal"
+          >
             取消
           </n-button>
         </div>
@@ -498,10 +508,10 @@ onMounted(() => {
   &-footer {
     display: flex;
     justify-content: flex-end;
-    .n-button--info-type{
-      background: #507AFD !important;
+    .n-button--info-type {
+      background: #507afd !important;
     }
-    .n-button--default-type{
+    .n-button--default-type {
       background: #fff !important;
       color: #333333;
     }
@@ -513,7 +523,7 @@ onMounted(() => {
     font-size: 14px;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
@@ -543,7 +553,7 @@ onMounted(() => {
 
 .textbtnStyle {
   cursor: pointer;
-  color: #1980FF;
+  color: #1980ff;
 }
 
 .draggable-ul {
@@ -576,33 +586,33 @@ onMounted(() => {
   --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;
   color: #666;
 }
-::v-deep(.n-scrollbar){
+::v-deep(.n-scrollbar) {
   border-left: 1px solid #cad2dd !important;
   border-right: 1px solid #cad2dd !important;
-  border-bottom: 1px solid #E8E8E8 !important;
-  border-top: 1px solid #E8E8E8 !important;
+  border-bottom: 1px solid #e8e8e8 !important;
+  border-top: 1px solid #e8e8e8 !important;
 }
-::v-deep(.n-card__content){
+::v-deep(.n-card__content) {
   padding: 20px 24px 0 24px !important;
 }
-::v-deep(.n-card__footer){
+::v-deep(.n-card__footer) {
   padding: 0 24px 16px 24px !important;
 }
-::v-deep(.n-input .n-input-wrapper){
+::v-deep(.n-input .n-input-wrapper) {
   height: 44px !important;
   border: 1px solid #cad2dd !important;
   border-bottom: none !important;
   // margin-bottom: -3px;
-  .n-input__input input{
+  .n-input__input input {
     height: 44px !important;
   }
 }
-::v-deep(.n-button--info-type){
-  background: #507AFD !important;
+::v-deep(.n-button--info-type) {
+  background: #507afd !important;
 }
 </style>

src/views/final/comp/FilterModal.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {
+  computed,
   defineOptions,
   h,
   nextTick,
@@ -8,97 +9,100 @@ import {
   reactive,
   ref,
   unref,
-  computed,
-} from "vue";
-import { NDataTable } from "naive-ui";
-import type { DataTableColumns, DataTableRowKey } from "naive-ui";
-import type { SortableEvent } from "sortablejs";
-import Sortable from "sortablejs";
-import { debounce } from "lodash-es";
-import Action from "@/views/home/aside/comp/Action.vue";
-import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
-import type { FilterSearchParam } from "/#/api";
-
-import SvgIcon from "@/components/Icon/SvgIcon.vue";
+} from 'vue'
+import { NButton, NDataTable, useModal } from 'naive-ui'
+import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
+import type { SortableEvent } from 'sortablejs'
+import Sortable from 'sortablejs'
+import { debounce } from 'lodash-es'
+import Action from '@/views/home/aside/comp/Action.vue'
+import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
+import type { FilterSearchParam } from '/#/api'
 
-import { useModal, NButton } from "naive-ui";
-const modal = useModal();
+import SvgIcon from '@/components/Icon/SvgIcon.vue'
 
-defineOptions({ name: "FilterModal" });
+defineOptions({ name: 'FilterModal' })
 
 const emit = defineEmits<{
-  (e: "showNewFilter"): void;
-  (e: "editFilter", filter: any): void;
-}>();
+  (e: 'showNewFilter'): void
+  (e: 'editFilter', filter: any): void
+  (e: 'handleOk', item: any): void
+}>()
 
-const show = ref(false);
-const checkedRowKeys = ref([]);
+const modal = useModal()
+
+const show = ref(false)
+const checkedRowKeys = ref([])
+const $message = window.$message
 
 const cardStyle = {
-  width: "800px",
-  height: "800px",
-  "--n-padding-bottom": "10px",
-  "--n-padding-left": "10px",
-};
+  'width': '800px',
+  'height': '800px',
+  '--n-padding-bottom': '10px',
+  '--n-padding-left': '10px',
+}
 
 interface RowData {
-  id: string;
-  searchname: string;
-  createby: string;
-  createtime: string;
-  updateby: string;
-  updatetime: string;
+  id: string
+  searchname: string
+  createby: string
+  createtime: string
+  updateby: string
+  updatetime: string
 }
 
 const columns: DataTableColumns<RowData> = [
   {
-    type: "selection",
+    type: 'selection',
   },
   {
-    title: "操作",
-    key: "action",
+    title: '操作',
+    key: 'action',
     render(row) {
       return h(Action, {
         options: [
-          { label: "编辑", key: 1 },
-          { label: "删除", key: 2 },
+          { label: '编辑', key: 1 },
+          { label: '删除', key: 2 },
         ],
         id: row.id,
         select,
-      });
+      })
     },
   },
   {
-    title: "名称",
-    key: "searchname",
+    title: '名称',
+    key: 'searchname',
   },
   {
-    title: "创建者",
-    key: "createby",
+    title: '创建者',
+    key: 'createby',
   },
   {
-    title: "创建时间",
-    key: "createtime",
+    title: '创建时间',
+    key: 'createtime',
     renderSorterIcon: ({ order }) => {
-      if (order === false) return h(SvgIcon, { name: "sort-2" });
-      if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
-      if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+      if (order === false)
+        return h(SvgIcon, { name: 'sort-2' })
+      if (order === 'ascend')
+        return h(SvgIcon, { name: 'sort-1' })
+      if (order === 'descend')
+        return h(SvgIcon, { name: 'sort-3' })
     },
     sorter: (row1, row2) =>
       new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(),
   },
   {
-    title: "更新者",
-    key: "updateby",
+    title: '更新者',
+    key: 'updateby',
   },
   {
-    title: "更新时间",
-    key: "updatetime",
+    title: '更新时间',
+    key: 'updatetime',
   },
-];
+]
 
-const loading = ref(true);
-const total = ref(0);
+const loading = ref(true)
+const total = ref(0)
 const pagination = reactive({
   page: 1,
   pageCount: 1,
@@ -106,220 +110,232 @@ const pagination = reactive({
   showSizePicker: true,
   pageSizes: [
     {
-      label: "10 每页",
+      label: '10 每页',
       value: 10,
     },
     {
-      label: "15 每页",
+      label: '15 每页',
       value: 15,
     },
     {
-      label: "30 每页",
+      label: '30 每页',
       value: 30,
     },
     {
-      label: "50 每页",
+      label: '50 每页',
       value: 50,
     },
   ],
   showQuickJumper: true,
   prefix: () => `共 ${total.value} 条数据`,
-});
-const tableData = ref<Array<RowData>>([]);
-const keyword = ref("");
+})
+const tableData = ref<Array<RowData>>([])
+const keyword = ref('')
 
 async function query(page: number, pageSize: number) {
   const searchParam: FilterSearchParam = {
-    search_searchname: { value: keyword.value, op: "like", type: "string" },
-  };
-  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
-  const { data, pageCount, total: totalCount } = result;
-  total.value = totalCount;
-  tableData.value = data;
-  pagination.page = page;
-  pagination.pageCount = pageCount;
-  loading.value = false;
+    search_searchname: { value: keyword.value, op: 'like', type: 'string' },
+  }
+  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1)
+  const { data, pageCount, total: totalCount } = result
+  total.value = totalCount
+  tableData.value = data
+  pagination.page = page
+  pagination.pageCount = pageCount
+  loading.value = false
 }
 
 function afterLeave() {
-  pagination.page = 1;
-  pagination.pageCount = 1;
-  pagination.pageSize = 10;
+  pagination.page = 1
+  pagination.pageCount = 1
+  pagination.pageSize = 10
 }
 
-const selectionIds = ref<DataTableRowKey[]>([]);
+const selectionIds = ref<DataTableRowKey[]>([])
 
-const rowKey = (row: RowData) => row.id;
+const rowKey = (row: RowData) => row.id
 
 function rowProps(row: RowData) {
   return {
-    "data-id": row.id,
-  };
+    'data-id': row.id,
+  }
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys;
+  selectionIds.value = rowKeys
 }
 
 function select(key: number, id: string) {
-  switch (key) {
-    case 1:
-      editSelection(id);
-      break;
-    case 2:
+  if (key == 1) {
+    editSelection(id)
+  }
+  else {
     const modalInst = modal.create({
-        title: "确认提示",
-        content: "确认删除该条过滤条件吗?",
-        positiveText: "确定",
-        negativeText: "取消",
-        preset: "dialog",
+      title: '确认提示',
+      content: '确认删除该条过滤条件吗?',
+      positiveText: '确定',
+      negativeText: '取消',
+      preset: 'dialog',
       onPositiveClick: () => deleteSelection(id),
       onNegativeClick: () => modalInst.destroy(),
-      });
-
-      break;
-    default:
-      break;
+    })
   }
 }
 
-function editSelection(id = "") {
-  // eslint-disable-next-line dot-notation
+function editSelection(id = '') {
   // const $message = window["$message"];
   // if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
   //   $message.error("请选中一条过滤");
   //   return;
   // }
 
-  const selectedId = id;
+  const selectedId = id
   const selectedFilter = tableData.value.find((item: any) => {
-    return item.id === selectedId;
-  });
+    return item.id === selectedId
+  })
 
-  emit("editFilter", selectedFilter);
-  closeModal();
+  emit('editFilter', selectedFilter)
+  closeModal()
 }
 
-function deleteSelection(id = "") {
-  // eslint-disable-next-line dot-notation
+function deleteSelection(id = '') {
   if (selectionIds.value.length === 0) {
     deleteCondition({ ids: id }).then(() => {
-      query(pagination.page, pagination.pageSize);
-    });
-    return;
+      query(pagination.page, pagination.pageSize)
+    })
+    return
   }
   const modalInst = modal.create({
-    title: "确认提示",
-    content: "确认删除所选过滤条件吗?",
-    positiveText: "确定",
-    negativeText: "取消",
-    preset: "dialog",
+    title: '确认提示',
+    content: '确认删除所选过滤条件吗?',
+    positiveText: '确定',
+    negativeText: '取消',
+    preset: 'dialog',
     onPositiveClick: () =>
-      deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
-        selectionIds.value = [];
-        query(pagination.page, pagination.pageSize);
+      deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
+        selectionIds.value = []
+        query(pagination.page, pagination.pageSize)
       }),
     onNegativeClick: () => modalInst.destroy(),
-  });
+  })
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value) return;
-  pagination.page = currentPage;
-  const { pageSize } = pagination;
-  await query(currentPage, pageSize);
+  if (loading.value)
+    return
+  pagination.page = currentPage
+  const { pageSize } = pagination
+  await query(currentPage, pageSize)
 }
 async function handlePageSizeChange(currentPageSize) {
-  if (loading.value) return;
+  if (loading.value)
+    return
 
-  const { page } = pagination;
-  pagination.pageSize = currentPageSize;
+  const { page } = pagination
+  pagination.pageSize = currentPageSize
 
-  await query(page, currentPageSize);
+  await query(page, currentPageSize)
 }
 
 function handleClick() {
-  emit("showNewFilter");
+  emit('showNewFilter')
   // show.value = false;
-  closeModal();
+  closeModal()
 }
 
-let sortTable: Sortable | null = null;
-const tableRef = ref<InstanceType<typeof NDataTable>>();
+let sortTable: Sortable | null = null
+const tableRef = ref<InstanceType<typeof NDataTable>>()
 
 onMounted(() => {
   nextTick(() => {
-    console.log(tableRef.value, "tableRef");
-  });
-});
+    console.log(tableRef.value, 'tableRef')
+  })
+})
 
 async function showModal() {
-  show.value = true;
+  show.value = true
 
-  const { page, pageSize } = pagination;
-  await query(page, pageSize);
+  const { page, pageSize } = pagination
+  await query(page, pageSize)
 
   nextTick(() => {
-    if (sortTable !== null) destory();
-
-    const el: HTMLDivElement = tableRef.value?.$el;
-    const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
-    if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
-  });
+    if (sortTable !== null)
+      destory()
+
+    const el: HTMLDivElement = tableRef.value?.$el
+    const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
+    if (tbody)
+      sortTable = Sortable.create(tbody, { onEnd, onMove })
+  })
 }
-let relatedId = "";
-let insertafter = false;
+let relatedId = ''
+let insertafter = false
 
 // TODO: 有bug，需跟后端联调
 function onEnd(event: SortableEvent) {
-  const data = unref(tableData);
-  const oldElem = data[event.oldIndex!];
-  data.splice(event.oldIndex!, 1);
-  data.splice(event.newIndex!, 0, oldElem);
+  const data = unref(tableData)
+  const oldElem = data[event.oldIndex!]
+  data.splice(event.oldIndex!, 1)
+  data.splice(event.newIndex!, 0, oldElem)
 
-  const dragId = oldElem.id;
+  const dragId = oldElem.id
   const index = data.findIndex((item) => {
-    return item.id === relatedId;
-  });
+    return item.id === relatedId
+  })
 
   // 插入到元素后，索引-1；插入到元素前，索引+1
-  const order = insertafter ? index - 1 : index + 1;
+  const order = insertafter ? index - 1 : index + 1
   // console.log('dragid:', dragId, 'order:', order)
-  sort(dragId, order);
+  sort(dragId, order)
 }
 
 function onMove(evt: any) {
-  relatedId = evt.related?.dataset?.id;
-  insertafter = evt.willInsertAfter;
+  relatedId = evt.related?.dataset?.id
+  insertafter = evt.willInsertAfter
   // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
 }
 
 function destory() {
-  sortTable && sortTable.destroy();
-  sortTable = null;
+  sortTable && sortTable.destroy()
+  sortTable = null
 }
 
 onUnmounted(() => {
-  destory();
-});
+  destory()
+})
 
 function closeModal() {
-  show.value = false;
+  show.value = false
 }
 
 defineExpose({
   showModal,
   query,
   pagination,
-});
+})
 const inputHandler = debounce((word) => {
-  keyword.value = word;
-  query(1, 5);
-}, 300);
+  keyword.value = word
+  query(1, 5)
+}, 300)
 
 const showSearch = computed(() => {
-  return selectionIds.value.length > 0;
-});
+  return selectionIds.value.length > 0
+})
+function handleOk() {
+  if (selectionIds.value.length > 1) {
+    $message.error('只能选择一条筛选条件')
+    return
+  }
+  if (selectionIds.value.length == 1) {
+    const selectedId = selectionIds.value[0]
+    const item = tableData.value.find(v => v.id == selectedId)
+    emit('handleOk', item)
+  }
+  if (selectionIds.value.length == 0)
+    emit('handleOk', '')
+
+  closeModal()
+}
 </script>
 
 <template>
@@ -331,9 +347,9 @@ const showSearch = computed(() => {
       v-model:show="show"
       transform-origin="center"
       display-directive="if"
-      @after-leave="afterLeave"
       :mask-closable="false"
       class="modal_wrapper"
+      @after-leave="afterLeave"
     >
       <n-card
         :style="cardStyle"
@@ -352,11 +368,10 @@ const showSearch = computed(() => {
                   'font-size': '16px',
                   'font-weight': '600',
                 }"
-                >基本信息</span
-              >
+              >基本信息</span>
             </div>
           </div>
-          <div class="wrapper-form" v-if="!showSearch">
+          <div v-if="!showSearch" class="wrapper-form">
             <n-input
               :style="{ width: '360px', border: '1px solid #cad2dd' }"
               placeholder="请输入过滤条件名称搜索"
@@ -366,31 +381,29 @@ const showSearch = computed(() => {
                 <SvgIcon size="14px" name="magnifying-1" />
               </template>
             </n-input>
-            <n-button type="info" @click="handleClick">
+            <NButton type="info" @click="handleClick">
               创建
               <template #icon>
                 <SvgIcon size="14px" name="creatFilter" />
               </template>
-            </n-button>
+            </NButton>
           </div>
 
-          <div class="wrapper-form" v-else>
+          <div v-else class="wrapper-form">
             <div class="del_btn">
-              <n-button icon-placement="left" size="medium" @click="deleteSelection">
+              <NButton icon-placement="left" size="medium" @click="deleteSelection">
                 <template #icon>
                   <SvgIcon name="delete-history" size="16" />
                 </template>
-                删除</n-button
-              >
+                删除
+              </NButton>
             </div>
             <div class="msg">
-              <span
-                >已选中
+              <span>已选中
                 <span style="color: #507afd; font-size: 16px">{{
                   selectionIds.length
                 }}</span>
-                项</span
-              >
+                项</span>
               <a @click="selectionIds = []">清空</a>
             </div>
           </div>
@@ -405,19 +418,21 @@ const showSearch = computed(() => {
               :loading="loading"
               :pagination="pagination"
               :row-key="rowKey"
+              :checked-row-keys="selectionIds"
               @update:page="handlePageChange"
               @update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
-              :checked-row-keys="selectionIds"
             />
           </div>
         </div>
         <template #footer>
           <div class="wrapper-footer">
-            <n-button type="info" @click="closeModal"> 确认 </n-button>
-            <n-button secondary style="margin-left: 15px" @click="closeModal">
+            <NButton type="info" @click="handleOk">
+              确认
+            </NButton>
+            <NButton secondary style="margin-left: 15px" @click="closeModal">
               取消
-            </n-button>
+            </NButton>
           </div>
         </template>
       </n-card>

src/views/home/aside/comp/AdvanceFilter.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { favorite, getConditionList, unfavorite, sort } 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";
-import { VueDraggable } from "vue-draggable-plus";
+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'
+import { VueDraggable } from 'vue-draggable-plus'
+import { asideMap } from '@/config/aside'
+import { favorite, getConditionList, sort, unfavorite } from '@/api/home/filter'
 
-defineOptions({ name: "AdvanceFilter" });
+defineOptions({ name: 'AdvanceFilter' })
 
 const props = defineProps({
   type: {
@@ -16,43 +16,42 @@ const props = defineProps({
     default: 0,
     required: true,
   },
-});
-const ruleForm = reactive({
-  keyword: "",
-});
-const ruleformRef = ref();
+})
 const emit = defineEmits<{
-  (e: "show-filter"): void;
-  (e: "show-custom"): void;
-  (e: "update:search"): void;
-  (e: "select", id: string);
-}>();
-
-const data = ref<FilterEntity[]>([]);
-const unData = ref<FilterEntity[]>([]);
-const loading = ref(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 ruleForm = reactive({
+  keyword: '',
+})
+const ruleformRef = ref()
+const data = ref<FilterEntity[]>([])
+const unData = ref<FilterEntity[]>([])
+const loading = ref(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 currentlySelectedAdvanced = ref("高级筛选");
+})
+const keyword = ref('')
+const currentlySelectedAdvanced = 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,
@@ -62,70 +61,73 @@ function generateDefaultConfig(): FilterEntity[] {
             value: defaultValue,
           },
         ],
-      };
-      return [...acc, config];
-    } else {
-      return acc;
       }
-  }, []);
+      return [...acc, config]
+    }
+    else {
+      return acc
+    }
+  }, [])
 }
 
 useInfiniteScroll(
   el as any,
   () => {
-    loadMore();
+    loadMore()
   },
-  { distance: 10, interval: 300, canLoadMore: () => false }
-);
-const showClick = async () => {
-  getSearchedList("");
-};
+  { distance: 10, interval: 300, canLoadMore: () => false },
+)
+async function showClick() {
+  getSearchedList('')
+}
 
 async function loadMore() {
-  if (loading.value || el.value == null) return;
+  if (loading.value || 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.value = true;
+  loading.value = true
   try {
     const searchParam: FilterSearchParam = {
-      search_searchname: { value: ruleForm.keyword, op: "like", type: "string" },
-    };
-    const result = await getConditionList(pagination, searchParam, props.type);
-    const { data } = result;
+      search_searchname: { value: ruleForm.keyword, 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.value = false;
+    const entityList = generateFilterEntityList(data)
+    return entityList
+  }
+  catch (error) {
+    return []
+  }
+  finally {
+    loading.value = false
   }
 }
 
 // 转换服务器数据格式
 function generateFilterEntityList(data) {
   const filterEntityList = data.map((item) => {
-    const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item;
-
+    const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item
     const list = ocrUsersearchchildList.map((item) => {
-      const { searchfield, searchvalue } = item;
-
+      const { searchfield, searchvalue } = item
       return {
         key: searchfield,
         value: searchvalue,
-      };
-    });
+      }
+    })
 
-    const reg = new RegExp(ruleForm.keyword, "gi");
-    const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`);
+    const reg = new RegExp(ruleForm.keyword, 'gi')
+    const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`)
 
     return {
       id,
@@ -135,132 +137,130 @@ function generateFilterEntityList(data) {
       filterList: list,
       reorder,
       searchname,
-    };
-  });
+    }
+  })
 
-  return filterEntityList;
+  return filterEntityList
 }
 
 function selectHandler(item: FilterEntity) {
-  (popover.value as any).setShow(false);
-  currentlySelectedAdvanced.value = item.searchname;
-  emit("select", item.id);
+  (popover.value as any).setShow(false)
+  currentlySelectedAdvanced.value = item.searchname
+  emit('select', item.id)
 }
 
 const inputHandler = debounce((word) => {
-  ruleForm.keyword = word;
-  ruleformRef.value.validate();
-  if (word.length < 2 && word) {
-    return;
-  }
-  getSearchedList(word);
-}, 300);
+  ruleForm.keyword = word
+  ruleformRef.value.validate()
+  if (word.length < 2 && word)
+    return
+
+  getSearchedList(word)
+}, 300)
 
 function getSearchedList(word, isScroll = false) {
-  if (word) {
-    pagination.pageSize = 300;
-  }
-  if (!word) {
-    pagination.pageSize = 10;
-  }
-  if (isScroll) {
-    pagination.pageSize = 300;
-  }
-  ruleForm.keyword = word;
+  if (word)
+    pagination.pageSize = 300
+
+  if (!word)
+    pagination.pageSize = 10
+
+  if (isScroll)
+    pagination.pageSize = 300
+
+  ruleForm.keyword = word
   featchList().then((list) => {
-    let dataArr: FilterEntity[] = [];
-    let unDataArr: FilterEntity[] = [];
-    list.map((item) => {
-      if (item.favorite && !item.isDefaultFilter) {
-        dataArr.push(item);
-      }
-      if (!item.favorite && !item.isDefaultFilter) {
-        unDataArr.push(item);
-      }
-    });
+    const dataArr: FilterEntity[] = []
+    const unDataArr: FilterEntity[] = []
+    list.forEach((item) => {
+      if (item.favorite && !item.isDefaultFilter)
+        dataArr.push(item)
+
+      if (!item.favorite && !item.isDefaultFilter)
+        unDataArr.push(item)
+    })
     data.value = dataArr.sort(
-      (a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime))
-    );
+      (a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime)),
+    )
     unData.value = unDataArr.sort(
-      (a, b) => Number((a as any).reorder) - Number((b as any).reorder)
-    );
-  });
+      (a, b) => Number((a as any).reorder) - Number((b as any).reorder),
+    )
+  })
 }
 
 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);
-    data.value.map((v, index) => {
-      if (v.id == id) {
-        sort(v.id, 0);
-      } else {
-        sort(v.id, index + 1);
-      }
-    });
-
-    inputHandler(ruleForm.keyword);
+    item.favorite = true
+    favorite(id)
+    data.value.forEach((v, index) => {
+      if (v.id == id)
+        sort(v.id, 0)
+      else
+        sort(v.id, index + 1)
+    })
+
+    inputHandler(ruleForm.keyword)
   }
 }
 
 const rules = {
   keyword: [
     {
-      trigger: ["blur", "input", "change"],
-      level: "error",
+      trigger: ['blur', 'input', 'change'],
+      level: 'error',
       validator(_rule, value) {
-        if (value.length >= 2) {
-          return true;
-        } else {
-          return new Error("搜索关键字最少为两个");
-        }
+        if (value.length >= 2)
+          return true
+        else
+          return new Error('搜索关键字最少为两个')
       },
     },
   ],
-};
+}
 
 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);
-    inputHandler(ruleForm.keyword);
+    item.favorite = false
+    unfavorite(id)
+    inputHandler(ruleForm.keyword)
   }
 }
 
-const handleScroll = (event) => {
-  let timer;
+function handleScroll(event) {
+  let timer
   if (timer) {
-    clearTimeout(timer);
-  } else {
+    clearTimeout(timer)
+  }
+  else {
     timer = setTimeout(() => {
-      getSearchedList("", true);
-    }, 2000);
+      getSearchedList('', true)
+    }, 2000)
   }
-};
+}
 
-const moveEnd = () => {
-  unData.value.map((v, index) => {
-    sort(v.id, index);
-  });
-};
+function moveEnd() {
+  unData.value.forEach((v, index) => {
+    sort(v.id, index)
+  })
+}
 
-const setCurrentlySelectedAdvanced = (value: string) => {
-  currentlySelectedAdvanced.value = value;
-};
+function setCurrentlySelectedAdvanced(value: string) {
+  currentlySelectedAdvanced.value = value
+}
 
 defineExpose({
   setCurrentlySelectedAdvanced,
-});
+})
 </script>
 
 <template>
@@ -284,8 +284,7 @@ defineExpose({
                 font-size: 17px;
                 font-weight: 600;
               "
-              >{{ currentlySelectedAdvanced }}</span
-            >
+            >{{ currentlySelectedAdvanced }}</span>
             <SvgIcon
               :style="{ marginLeft: '5px' }"
               name="down"
@@ -296,7 +295,7 @@ defineExpose({
         </template>
         <n-spin :show="loading">
           <div class="wrapper-left-popover">
-            <n-form :rules="rules" ref="ruleformRef" :model="ruleForm">
+            <n-form ref="ruleformRef" :rules="rules" :model="ruleForm">
               <n-form-item path="keyword">
                 <n-input
                   :style="{
@@ -305,9 +304,9 @@ defineExpose({
                     '--n-height': '40px',
                   }"
                   placeholder="请输入关键词"
-                  @input="inputHandler"
                   :value="ruleForm.keyword"
                   :minlength="2"
+                  @input="inputHandler"
                 >
                   <template #prefix>
                     <SvgIcon size="14px" name="magnifying-1" />
@@ -354,23 +353,23 @@ defineExpose({
                   style="margin-right: 3px"
                   @click="favoriteHandler($event, item)"
                 />
-                <div v-html="item.name" style="color: #333333" />
+                <div style="color: #333333" v-html="item.name" />
               </li>
               <!-- filter=".draggable-li[draggable='false']" -->
               <VueDraggable
-                @end="moveEnd"
                 v-model="unData"
                 class="draggable-ul"
                 :animation="150"
                 group="shared"
+                @end="moveEnd"
               >
                 <li
                   v-for="(item, index) in unData"
                   :key="index"
                   style="display: flex; align-items: center"
-                  @click="selectHandler(item)"
                   class="cursor-move draggable-li fix"
                   :draggable="true"
+                  @click="selectHandler(item)"
                 >
                   <SvgIcon name="drag" size="10" style="margin-right: 3px" />
                   <SvgIcon
@@ -392,7 +391,7 @@ defineExpose({
                     style="cursor: pointer !important; margin-right: 3px"
                     @click="favoriteHandler($event, item)"
                   />
-                  <div v-html="item.name" style="color: #333333" />
+                  <div style="color: #333333" v-html="item.name" />
                 </li>
               </VueDraggable>
             </ul>
@@ -441,6 +440,12 @@ defineExpose({
       align-items: center;
       margin-left: 12px;
       cursor: pointer;
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 120px;
+      }
     }
 
     &-popvoer {

src/views/home/aside/comp/items/Similarity.vue

@@ -1,47 +1,49 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import { useConfig } from "@/store/modules/asideConfig";
+import { ref } from 'vue'
+import { useConfig } from '@/store/modules/asideConfig'
 
-const configUseStore = useConfig();
+const props = defineProps<{
+  value: [number, number]
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:value', value: string): void
+}>()
+
+const range = ref<[number, number]>(props.value || [])
+
+const marks = {
+  0: '0',
+  50: '50',
+  100: '100',
+}
+const isLoadValue = ref(false)
+const configUseStore = useConfig()
 
 configUseStore.$subscribe(() => {
   if (isLoadValue.value) {
-    isLoadValue.value = false;
-    return;
+    isLoadValue.value = false
+    return
   }
-  let asideValue = configUseStore.getAsideValue;
-  if (asideValue["izsimilarity"]) {
-    range.value = asideValue["izsimilarity"];
-  } else {
-    range.value = [0, 100];
-  }
-  console.log(range.value, "range.value");
+  const asideValue = configUseStore.getAsideValue
+  if (asideValue.izsimilarity)
+    range.value = asideValue.izsimilarity
+  else
+    range.value = [0, 100]
+
+  console.log(range.value, 'range.value')
   //  else {
   //   range.value = [0, 100];
   // }
-});
-const props = defineProps<{
-  value: [number, number];
-  label: string;
-}>();
+})
 
-const emit = defineEmits<{
-  (e: "update:value", value: string): void;
-}>();
-
-const range = ref<[number, number]>(props.value || []);
-
-const marks = {
-  0: "0",
-  50: "50",
-  100: "100",
-};
-const isLoadValue = ref(false);
 function onChange(value: number & number[]) {
-  range.value = value as any;
-  isLoadValue.value = true;
-  let valueStr = value.join("-");
-  emit("update:value", valueStr);
+  value = value.sort((a, b) => a - b)
+  range.value = value as any
+  isLoadValue.value = true
+  const valueStr = value.join('-')
+  emit('update:value', valueStr)
 }
 </script>
 

src/views/message/content/List.vue

@@ -1,32 +1,32 @@
 <script lang="ts" setup>
-import { computed, reactive, ref, toRefs } from "vue";
-import { format } from "date-fns";
-import { useRoute, useRouter } from "vue-router";
-import { getMessageList, readAllMsg, readMsg } from "@/api/message/message";
-import iconApproveActive from "@/assets/images/message/approve-active.png";
-import iconApprove from "@/assets/images/message/approve.png";
-import iconSystemActive from "@/assets/images/message/system-active.png";
-import iconSystem from "@/assets/images/message/system.png";
-import iconArrowActive from "@/assets/images/message/arrow-active.png";
-import iconArrow from "@/assets/images/message/arrow.png";
-import iconClear from "@/assets/images/message/clear.png";
-import iconArrowDown from "@/assets/images/message/arrow-down.png";
-
-const emit = defineEmits(["goDetail"]);
-const router = useRouter();
-const route = useRoute();
-const hasNextPage = ref(false);
+import { computed, reactive, ref, toRefs } from 'vue'
+import { format } from 'date-fns'
+import { useRoute, useRouter } from 'vue-router'
+import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
+import iconApproveActive from '@/assets/images/message/approve-active.png'
+import iconApprove from '@/assets/images/message/approve.png'
+import iconSystemActive from '@/assets/images/message/system-active.png'
+import iconSystem from '@/assets/images/message/system.png'
+import iconArrowActive from '@/assets/images/message/arrow-active.png'
+import iconArrow from '@/assets/images/message/arrow.png'
+import iconClear from '@/assets/images/message/clear.png'
+import iconArrowDown from '@/assets/images/message/arrow-down.png'
+
+const emit = defineEmits(['goDetail'])
+const router = useRouter()
+const route = useRoute()
+const hasNextPage = ref(false)
 
 const state = reactive({
   tabList: [
+    // {
+    //   name: "审批通知",
+    //   icon: iconApprove,
+    //   activeIcon: iconApproveActive,
+    //   value: 1,
+    // },
     {
-      name: "审批通知",
-      icon: iconApprove,
-      activeIcon: iconApproveActive,
-      value: 1,
-    },
-    {
-      name: "系统消息",
+      name: '系统消息',
       icon: iconSystem,
       activeIcon: iconSystemActive,
       value: 2,
@@ -34,127 +34,148 @@ const state = reactive({
   ],
   list: [] as any,
   pageNo: 1,
-});
+})
 
-const { list, tabList } = toRefs(state);
+const { list, tabList } = toRefs(state)
 
-const tab = ref(1);
+const tab = ref(2)
 
 const getStateText = computed(() => {
-  return (value) => (value == 1 ? "待审批" : value == 2 ? "通过" : "不通过");
-});
+  return value => (value == 1 ? '待审批' : value == 2 ? '通过' : '不通过')
+})
 
-async function getList(type = "") {
+async function getList(type = '') {
   let res = await getMessageList({
     pageNo: state.pageNo,
-    pageSize: "20",
+    pageSize: '20',
     msgCategory: tab.value,
-  });
-  console.log("getMessageList", res.data);
-  if (type == "more") {
-    if (res.code == "OK") {
+  })
+  console.log('getMessageList', res.data)
+  if (type == 'more') {
+    if (res.code == 'OK') {
       if (tab.value === 1) {
         res.data.list.forEach((item) => {
-          item.tag = JSON.parse(item.busJson);
-        });
+          item.tag = JSON.parse(item.busJson)
+        })
       }
-      state.list = state.list.concat(res.data.list);
-      state.pageNo++;
+      state.list = state.list.concat(res.data.list)
+      state.pageNo++
       res = await getMessageList({
         pageNo: state.pageNo,
-        pageSize: "20",
+        pageSize: '20',
         msgCategory: tab.value,
-      });
+      })
     }
-    hasNextPage.value = res.data.hasNextPage;
-  } else {
-    if (res.code === "OK") {
-      hasNextPage.value = res.data.hasNextPage;
+    hasNextPage.value = res.data.hasNextPage
+  }
+  else {
+    if (res.code === 'OK') {
+      hasNextPage.value = res.data.hasNextPage
       if (tab.value === 1) {
         res.data.list.forEach((item) => {
-          item.tag = JSON.parse(item.busJson);
-        });
+          item.tag = JSON.parse(item.busJson)
+        })
       }
-      state.list = state.list.concat(res.data.list);
+      state.list = state.list.concat(res.data.list)
     }
   }
 }
 
-getList();
+getList()
 
 async function clearMsg() {
-  const res = await readAllMsg({ msgCategory: tab.value });
-  if (res.code === "OK") {
-    state.list = [];
-    state.pageNo = 1;
-    getList();
+  const res = await readAllMsg({ msgCategory: tab.value })
+  if (res.code === 'OK') {
+    state.list = []
+    state.pageNo = 1
+    getList()
   }
 }
 
 function switchTab(type: number) {
-  tab.value = type;
-  state.list = [];
-  state.pageNo = 1;
-  getList();
+  tab.value = type
+  state.list = []
+  state.pageNo = 1
+  getList()
 }
 
 function goFinalDetail(row) {
-  console.log(row);
+  console.log(row)
   router.push({
-    name: "final-detail",
+    name: 'final-detail',
     query: { id: row.tag.fromId, packageid: row.packageid },
-  });
+  })
 }
 
 function goDetail(item) {
   if (tab.value === 1) {
-    clearMsgOne(item.id);
-    goFinalDetail(item);
+    clearMsgOne(item.id)
+    goFinalDetail(item)
   }
   // emit('goDetail', item.id)
   else {
-    router.push({ name: "message-detail", query: { id: item.id } });
+    router.push({ name: 'message-detail', query: { id: item.id } })
   }
 }
 
 async function clearMsgOne(id) {
-  const res = await readMsg({ msgid: id });
+  const res = await readMsg({ msgid: id })
 }
 
 function getMore() {
-  state.pageNo += 1;
-  getList("more");
+  state.pageNo += 1
+  getList('more')
 }
 
-console.log(tabList);
+console.log(tabList)
 </script>
 
 <template>
   <div class="wrapper-message">
     <div class="flex justify-between header">
-      <div class="header-title">消息通知</div>
+      <div class="header-title">
+        消息通知
+      </div>
       <div class="clear" @click="clearMsg">
-        <img class="icon-clear" :src="iconClear" alt="" />
+        <img class="icon-clear" :src="iconClear" alt="">
         清除未读
       </div>
     </div>
     <div class="content">
       <div class="slider">
-        <div v-for="item in tabList" :key="item.value" :class="{ 'item-active': tab === item.value }" class="flex item"
-          @click="switchTab(item.value)">
+        <div
+          v-for="item in tabList"
+          :key="item.value"
+          :class="{ 'item-active': tab === item.value }"
+          class="flex item"
+          @click="switchTab(item.value)"
+        >
           <div class="flex item-left align-center">
-            <img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt="" />
+            <img
+              class="icon"
+              :src="tab === item.value ? item.activeIcon : item.icon"
+              alt=""
+            >
             <div :class="{ 'text-active': tab === item.value }" class="text">
               {{ item.name }}
             </div>
           </div>
-          <img class="icon-arrow" :src="tab === item.value ? iconArrowActive : iconArrow" alt="" />
+          <img
+            class="icon-arrow"
+            :src="tab === item.value ? iconArrowActive : iconArrow"
+            alt=""
+          >
           <div v-if="tab === item.value" class="line" />
         </div>
       </div>
       <div class="list">
-        <div v-for="(item, index) in list" :key="item.id" :class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
-          class="item" @click="goDetail(item)">
+        <div
+          v-for="(item, index) in list"
+          :key="item.id"
+          :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
+          class="item"
+          @click="goDetail(item)"
+        >
           <div class="left">
             <div class="num">
               {{ format(item.sendTime, "dd") }}
@@ -172,7 +193,9 @@ console.log(tabList);
               {{ item.titile }}
             </div>
             <div v-if="tab === 1" class="status">
-              <div class="tag tag-blue">审批节点：{{ item.tag.sendUserName }}</div>
+              <div class="tag tag-blue">
+                审批节点：{{ item.tag.sendUserName }}
+              </div>
               <div :class="item.tag.states === 3 ? 'tag-red' : 'tag-green'" class="tag">
                 审批状态：{{ getStateText(item.tag.states) }}
               </div>
@@ -186,11 +209,13 @@ console.log(tabList);
               <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
             </div>
           </div>
-          <div class="look">查看</div>
+          <div class="look">
+            查看
+          </div>
         </div>
 
         <div v-if="hasNextPage" class="more" @click="getMore">
-          查看更多<img class="icon-more" :src="iconArrowDown" alt="" />
+          查看更多<img class="icon-more" :src="iconArrowDown" alt="">
         </div>
       </div>
     </div>
@@ -457,4 +482,5 @@ console.log(tabList);
 // ::v-deep(.n-divider:not(.n-divider--vertical)) {
 //   margin-top: 12px;
 //   margin-bottom: 12px;
-// }</style>
+// }
+</style>

src/views/task/modal/CustomFieldModal.vue

@@ -31,7 +31,13 @@ const allCount = computed(() => {
 })
 
 const selectCount = computed(() => {
-  return `显示字段(共${onList.value.length}个)`
+  let baseNum = 0
+  offList.value.forEach((item) => {
+    if (item.fix)
+      baseNum++
+  })
+  return `显示字段(共${baseNum + onList.value.length}个)`
+  // return `显示字段(共${onList.value.length}个)`
 })
 
 const show = ref(false)
@@ -196,6 +202,11 @@ function clearDragSource() {
     return item.fix === true
   })
   onShowList.value = cloneDeep(onList.value)
+  offList.value = offList.value.map(item => ({
+    ...item,
+    checked: item.fix,
+  }))
+  offShowList.value = cloneDeep(offList.value)
 }
 
 function removeHandler(id: string) {

src/views/worksheet/aside/ListItem.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
   mouseOverTask: {
     type: Object,
-    default: () => [],
+    default: () => {},
   },
 })
 const emit = defineEmits(['dismisClick'])
@@ -189,7 +189,7 @@ onMounted(async () => {})
 
 <style lang="less" scoped>
 .list-item {
-  padding: 10px 0px 10px 8px;
+  padding: 10px 0px 30px 8px;
   position: relative;
   border-bottom: 1px solid #e8e8e8;
   // · transition: height: 0.2s ease-out;

src/views/worksheet/aside/WorkSheetList.vue

@@ -11,7 +11,7 @@ import { isEmpty } from '@/utils'
 import type { PackageListItem } from '/#/workorder'
 import NotPassed from '@/components/NotPassed.vue'
 
-defineProps({
+const props = defineProps({
   showFieldList: {
     type: Array,
     default: () => [],
@@ -21,9 +21,13 @@ defineProps({
     default: () => [],
   },
 })
-
 const emit = defineEmits(['ApprovalOver'])
-
+watch(
+  () => props.showFieldList,
+  (value) => {
+    console.log('showFieldList---->', value)
+  },
+)
 const workStore = useWorkOrder()
 const data = ref<PackageListItem[]>([])
 const activeId = ref('')

src/views/worksheet/modal/CustomFieldModal.vue

@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import { difference } from 'lodash-es'
-import { computed, defineEmits, defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  computed,
+  defineEmits,
+  defineProps,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
 import { workPackageMap } from '@/config/workorder'
@@ -40,73 +48,18 @@ const showOnList = computed(() => {
   return onList.value.filter(i => i.name.includes(searchFixVal.value))
 })
 const selectCount = computed(() => {
-  return `显示字段(共${onList.value.length}个)`
-})
-
-function generatList() {
-  const keys = Object.keys(workPackageMap)
-  let showList: object[] = []
-  const hideList: object[] = []
-  const showStr = 'status'
-  const showKeys = showStr.split(',').map((key: string) => key.toLowerCase())
-
-  for (const key of keys) {
-    const name = workPackageMap[key]?.label
-    const isDefault = workPackageMap[key]?.isDefault
-
-    // 系统配置为Y且不是默认配置
-    if (!isDefault) {
-      hideList.push({
-        id: key,
-        name: name || '未配置',
-        fix: isDefault,
-        checked: workPackageMap[key].isDefault,
+  let baseNum = 0
+  offList.value.forEach((item) => {
+    if (item.fix)
+      baseNum++
   })
-    }
-  }
-
-  showList = showKeys.reduce((acc, key) => {
-    const config = {
-      id: key,
-      name: workPackageMap[key].label || '未配置',
-      fix: workPackageMap[key].isDefault,
-    }
-    return [...acc, config]
-  }, [])
-
-  const fixedList = generateDefaultList()
-
-  hideList.unshift(...fixedList)
-  showList.unshift(...fixedList)
-
-  onList.value = showList
-  offList.value = hideList
-  return { showList, hideList }
-}
-
-function generateDefaultList() {
-  return Object.keys(workPackageMap).reduce((acc, key) => {
-    const { label, isDefault } = workPackageMap[key]
-
-    if (isDefault) {
-      const config = {
-        id: key,
-        name: label || '未配置',
-        fix: true,
-        checked: true,
-      }
-      return [...acc, config]
-    }
-    else {
-      return acc
-    }
-  }, [])
-}
+  return `显示字段(共${baseNum + onList.value.length}个)`
+})
 
 const show = ref(false)
 const checkAll = computed(() => {
   let baseNum = 0
-  offList.value.map((v) => {
+  offList.value.forEach((v) => {
     if (v.fix)
       baseNum += 1
   })
@@ -124,10 +77,10 @@ async function handleSumbit(e: MouseEvent) {
   const userStore = useUser()
   const userInfo = userStore.getUserInfo
   let userField = ''
-  fixList.value.map((v) => {
+  fixList.value.forEach((v) => {
     userField += `${v.id},`
   })
-  onList.value.map((v) => {
+  onList.value.forEach((v) => {
     userField += `${v.id},`
   })
   userField = userField.slice(0, userField.length - 1)
@@ -141,20 +94,26 @@ defineExpose({
   showModal,
 })
 
-// generatList();
-
 const selectIds = ref<string[]>([])
 
 function onCheckAllChange(value) {
   const ids: string[] = []
-
+  if (value) {
+    offList.value.forEach((v) => {
+      console.log()
+      if (!v.checked)
+        onList.value.push(v)
+    })
+  }
+  else {
+    onList.value = []
+  }
   for (const item of offList.value) {
     if (!item.fix) {
       item.checked = value
       ids.push(item.id)
     }
   }
-
   selectIds.value = value ? ids : []
 }
 
@@ -174,15 +133,12 @@ const showIds = computed(() => {
   })
 })
 // 关闭弹窗，清空搜索条件
-watch(
-  show,
-  (val) => {
+watch(show, (val) => {
   if (!val) {
     searchKey.value = ''
     searchFixVal.value = ''
   }
-  },
-)
+})
 watch(
   () => selectIds.value.length,
   (newVal, oldVal) => {
@@ -288,7 +244,7 @@ async function getData() {
   const userFieldFixed = useList.userFieldFixed?.split(',')
   const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
 
-  allList.map((v) => {
+  allList.forEach((v) => {
     const item = {
       name: v.fieldDesc,
       id: v.name,
@@ -303,7 +259,7 @@ async function getData() {
     else offList.value.push(item)
   })
   offList.value.unshift(...fixList.value)
-  useList.userFieldFixed?.split(',').map((v) => {
+  useList.userFieldFixed?.split(',').forEach((v) => {
     let item = allList.find(v2 => v2.name == v)
     if (item) {
       item = {
@@ -338,7 +294,7 @@ onUnmounted(() => {
 })
 const indeterminate = computed(() => {
   let baseNum = 0
-  offList.value.map((v) => {
+  offList.value.forEach((v) => {
     if (v.fix)
       baseNum += 1
   })