From 663afdaf5efeab0bf65861dfae63822711bc67e1 Mon Sep 17 00:00:00 2001
From: raofuzi <2641346316@qq.com>
Date: Fri, 12 Apr 2024 16:14:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   8 -
 src/store/modules/final.ts                    |  28 +-
 src/views/final/aside/Aside.vue               | 134 ++-----
 src/views/final/comp/CustomFilterModalVue.vue | 344 +++++++++++-------
 4 files changed, 268 insertions(+), 246 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 6458938..11049e1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,7 +11,6 @@ declare module 'vue' {
     BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
     DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
     NAvatar: typeof import('naive-ui')['NAvatar']
-    NBackTop: typeof import('naive-ui')['NBackTop']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
@@ -22,8 +21,6 @@ declare module 'vue' {
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
@@ -35,7 +32,6 @@ declare module 'vue' {
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NotPassed: typeof import('./src/components/NotPassed.vue')['default']
-    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']
     NPopselect: typeof import('naive-ui')['NPopselect']
     NProgress: typeof import('naive-ui')['NProgress']
@@ -45,11 +41,7 @@ declare module 'vue' {
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
-    NTimeline: typeof import('naive-ui')['NTimeline']
-    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
diff --git a/src/store/modules/final.ts b/src/store/modules/final.ts
index f0480e6..629deec 100644
--- a/src/store/modules/final.ts
+++ b/src/store/modules/final.ts
@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 import { store } from '@/store'
 import { getFilter } from '@/api/home/filter'
 import { getConfig } from '@/api/system/user'
+import { asideMap } from "@/config/final";
+import { cloneDeep, isEqual } from "lodash-es";
 
 import type { AsideConfig } from '/#/api'
 
@@ -29,7 +31,7 @@ export const useFinalStore = defineStore({
     filterConfig: [],
   }),
   getters: {
-    getConfig(): AsideConfig | null {
+    getSystemConfig(): AsideConfig | null {
       return this.systemConfig
     },
     getCustomConfig(): string[] | null {
@@ -52,7 +54,7 @@ export const useFinalStore = defineStore({
     },
   },
   actions: {
-    setConfig(config: AsideConfig) {
+    setSystemConfig(config: AsideConfig) {
       this.systemConfig = config
       console.log("systemConfig----------", config);
     },
@@ -82,14 +84,28 @@ export const useFinalStore = defineStore({
     async fetchConfig() {
       const response = await getConfig()
       console.log("response.data----------", response.data);
-      this.setConfig(response.data)
+      this.setSystemConfig(response.data)
       return response.data
     },
+    // // 获取终审个性化配置
+    // async fetchCustomConfig() {
+    //   const res = await getFilter(1)
+    //   const { data } = res
+    //   const list = data && data.searchcount ? data.searchcount.split(',') : [];
+    //   console.log("listkey---------------", list);
+    //   this.customConfig = list
+    //   return list
+    // },
     // 获取终审个性化配置
     async fetchCustomConfig() {
-      const res = await getFilter(1)
-      const { data } = res
-      const list = data && data.searchcount ? data.searchcount.split(',') : []
+      let list: any = [];
+      let tempAsideMap = cloneDeep(asideMap);
+      Object.keys(tempAsideMap).map(key => {
+        if(!tempAsideMap[key].isDefaultFilter) {
+          list.push(key);
+        }
+      });
+      console.log("listkey---------------", list);
       this.customConfig = list
       return list
     },
diff --git a/src/views/final/aside/Aside.vue b/src/views/final/aside/Aside.vue
index 66d64da..79c70cd 100644
--- a/src/views/final/aside/Aside.vue
+++ b/src/views/final/aside/Aside.vue
@@ -22,8 +22,8 @@ import type { AsideEntity } from "@/config/aside";
 import { asideMap } from "@/config/final";
 import type { AsideConfig } from "/#/api";
 import emitter from "@/utils/mitt";
-import { cloneDeep, isEqual } from "lodash-es";
 import { getFilterList } from "@/api/home/main";
+import { cloneDeep, isEqual } from "lodash-es";
 
 const emit = defineEmits(["inputChange"]);
 const finalStore = useFinal();
@@ -33,6 +33,16 @@ const asideValue: Record<keyof typeof asideMap, any> = reactive({});
 const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({});
 // 当前显示的模块，按照数组顺序显示
 const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
+const initAsideValueRef = ref<any>(null); // 所有左侧模块的值(初始值)
+const customObjRef = ref<any>(null); // 获取高级筛选获取的值
+const customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
+
+initAsideValueRef.value = cloneDeep(asideMap);
+
+onBeforeMount(async () => {
+  finalStore.fetchConfig();
+  finalStore.fetchCustomConfig();
+});
 
 Object.keys(asideMap).forEach((key) => {
   const { defaultValue, inFilterList } = asideMap[key];
@@ -42,9 +52,6 @@ Object.keys(asideMap).forEach((key) => {
 const filterModalRef:any = ref(null);
 const newFilterModalRef = ref(null);
 const customModalRef = ref(null);
-const customObjRef = ref<any>(null); // 获取高级筛选获取的值
-const customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
-  const configFilterRef = ref<any>([]); // 获取排序的值
 const AdvanceFilterRef: any = ref(null);
 
 function showModal(modalRef: any) {
@@ -66,7 +73,6 @@ mousetrap.bind("[", collapseHandler);
 onMounted(() => {
   nextTick(() => {
     computeSlideHeight();
-    // let tempAsideValue = cloneDeep(asideValue);
   });
 });
 
@@ -102,97 +108,43 @@ function computeSlideHeight() {
 useWindowSizeFn(computeSlideHeight, 280);
 
 onBeforeMount(async () => {
-  finalStore.fetchConfig();
   finalStore.fetchCustomConfig();
 });
 
 nextTick(()=>{
   finalStore.$subscribe(() => {
-    const config = finalStore.getConfig;
     const customConfig = finalStore.getCustomConfig;
-    console.log("customConfig", customConfig, config);
-    console.log("configFilterRef", configFilterRef.value, finalStore.getFilterConfig);
-    console.log("customObjRef", customObjRef.value, customTempObjRef.value);
-    if (
-      configFilterRef.value.length > 0 &&
-      isEqual(configFilterRef.value, finalStore.getFilterConfig) &&
-      customObjRef.value &&
-      isEqual(customObjRef.value, customTempObjRef.value)
-    ) {
-      return;
-    }
-    if (config == null || customConfig == null) return;
-    // console.log("config", config, "customConfig", customConfig);
-    /* rao
-    const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
-    const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
-    showKeys.unshift(...defaultKeys)
-    */
-
-    let sortKeyList: any = [];
-    finalStore.getFilterConfig.map((item: any) => {
-      sortKeyList.push(item?.id);
-    });
-    const showKeys = [...sortKeyList];
-
-    Object.keys(config).forEach((key) => {
-      if (key.startsWith("iz") && asideMap[key] !== undefined)
+    console.log("customConfig111111111---------------", customConfig);
+    if (customConfig === null) return;
+
+    const showKeys: string[] = [...customConfig];
+    const defaultKeys = Object.keys(asideMap).filter(
+      (key) => asideMap[key].isDefaultFilter
+    );
+    showKeys.unshift(...defaultKeys);
+
+    Object.keys(asideMap).forEach((key) => {
+      // 设置显示的或者默认显示的
+      if (key.startsWith("iz"))
         asideVisible[key] =
-          (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y";
+          asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter);
     });
-    if (customObjRef.value) {
-      // 赋值
-      Object.keys(customObjRef.value).map((key) => {
-        if (asideMap.hasOwnProperty(key)) {
-          const str = key.toLowerCase();
-          if (str == "izsimilarity") {
-            if (typeof customObjRef.value[str] == "string") {
-              customObjRef.value[str] = customObjRef.value[str].split(",");
-            }
-            asideValue[key] = customObjRef.value[str]; // 赋值
-          } else if (str == "izyear") {
-            if (typeof customObjRef.value[str] == "string") {
-              let time = customObjRef.value[str].split("-");
-              time[0] = new Date(time[0]).getTime();
-              time[1] = new Date(time[1]).getTime();
-              customObjRef.value[str] = time;
-            }
-            asideValue[key] = customObjRef.value[str]; // 赋值
-          } else if (str != "izsimilarity" && str != "izyear" && customObjRef.value[str]) {
-            asideValue[key] = customObjRef.value[str]; // 赋值
-          } else {
-            asideValue[key] = null;
-          }
-          // asideMap[str].defaultValue = customObjRef.value[str];// 赋值
-        }
-      });
-      customTempObjRef.value = customObjRef.value;
-      console.log("asideValue直接处理后的结果", asideValue);
-      console.log("customTempObjRef.value", customTempObjRef.value);
-      let tempobj = cloneDeep(asideValue);
-      console.log("tempObj", tempobj);
-      finalStore.setAsideValue(tempobj);
-    }
+
     const items = showKeys.reduce((acc, key) => {
-      const currentData = asideMap[key];
-      const render = currentData?.render;
-      if (render !== false) {
-        const str = key?.toLowerCase();
-
-        const o = {
-          key: str,
-          config: asideMap[str],
+      if (asideMap[key]) {
+        const config = {
+          key,
+          config: asideMap[key],
         };
-        return [...acc, o];
+        return [...acc, config];
       } else {
         return acc;
       }
     }, []);
-    console.log("showItems=================================", items);
+    console.log("showItems111111111---------------", items);
     showItems.value = items;
-    configFilterRef.value = finalStore.getFilterConfig;
   });
-});
+})
 
 watch(asideVisible, (newVal) => {
   Object.keys(asideValue).forEach((key) => {
@@ -222,7 +174,9 @@ function scrollHandler(key: string) {
 }
 
 async function filterHandler(searchId: string) {
+  emitter.emit("filter-final", searchId);
   const res = await getFilterList({ userSearchId: searchId });
+  // console.log("顾虑结果", res);
   if (res.code == "OK") {
     let obj = res.data;
     customObjRef.value = res.data;
@@ -232,10 +186,9 @@ async function filterHandler(searchId: string) {
         showKeys.push(key);
       }
     });
-    // console.log(showKeys);
+    console.log("showKeys1111111111111111",  showKeys);
     finalStore.setCustomConfig(showKeys);
   }
-  emitter.emit("filter-final", searchId);
 }
 
 function editFilter(filter: any) {
@@ -244,20 +197,6 @@ function editFilter(filter: any) {
   modal.edit(filter);
 }
 
-function updateComponent(key, e) {
-  console.log("跟新值", key, e);
-  console.log("tempAsideValue跟新值", finalStore.getAsideValue, asideValue);
-  // let tempAsideValue = finalStore.getAsideValue || asideValue;
-  let tempobj = cloneDeep(asideValue);
-  console.log(tempobj, "tempobj");
-  tempobj[key] = e;
-  console.log(tempobj, "tempobj After");
-  customObjRef.value = tempobj;
-  // asideValue = Object.assign({}, asideValue, tempobj);
-  console.log("asideValue跟新值", tempobj);
-  finalStore.setAsideValue(tempobj);
-}
-
 watch(asideValue, (newVal) => {
   finalStore.setAsideValue(newVal);
 });
@@ -314,10 +253,9 @@ const handleOk = (item: any) => {
         :is="item.config.component"
         v-for="(item, index) in showItems"
         :id="item.key"
-        :key="item.key"
+        :key="index"
         v-model:value="asideValue[item.key]"
         :label="item.config.label"
-        @update:value="(e) => updateComponent(item.key, e)"
       />
 
       <!-- 筛选 -->
diff --git a/src/views/final/comp/CustomFilterModalVue.vue b/src/views/final/comp/CustomFilterModalVue.vue
index fd81a3b..2c4f9d2 100644
--- a/src/views/final/comp/CustomFilterModalVue.vue
+++ b/src/views/final/comp/CustomFilterModalVue.vue
@@ -1,18 +1,43 @@
 <script lang="ts" setup>
 import { debounce, difference } from 'lodash-es'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } 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 finalStore = useFinal()
+const tempList = ref<string[]>([])
 
 function showModal() {
   show.value = true
+
+  // 重置左右列表数据
+  const config = finalStore.getSystemConfig
+  const customConfig = finalStore.getCustomConfig
+
+  console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config,  customConfig)
+  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)
+  if (tempList.value.length > 0)
+    finalStore.setFilterConfig(tempList.value)
+
+  onList.value = showList
+  offList.value = hideList
+  // 重置全选状态
+  checkAll.value = hideList.every(item => item.checked)
+  // 重置输入框查询条件
+  offKeyword.value = ''
+  onKeyword.value = ''
 }
 
 function closeModal() {
@@ -36,16 +61,16 @@ defineExpose({
   showModal,
 })
 
-function generateDefaultList() {
+function generateDefaultList(config) {
   return Object.keys(asideMap).reduce((acc, key) => {
     const { label, isDefaultFilter } = asideMap[key]
 
-    // 默认开启配置
-    if (isDefaultFilter) {
+    // 个人配置开启且系统配置开启
+    if (isDefaultFilter && config[key] === 'Y') {
       const config = {
         id: key,
         name: label || '未配置',
-        fix: isDefaultFilter,
+        fix: true,
         checked: true,
       }
       return [...acc, config]
@@ -56,37 +81,39 @@ function generateDefaultList() {
   }, [])
 }
 
-function generatList(customConfig) {
-  const keys = Object.keys(asideMap)
+function generatList(config, customConfig) {
+  const keys = Object.keys(config)
   let onList: object[] = []
   const offList: object[] = []
-  const showKeys = customConfig.map((key: string) => key.toLowerCase())
+  const showKeys = [...customConfig]
 
   for (const key of keys) {
-    if (!key.startsWith('iz') || asideMap[key] === undefined)
+    if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
       continue
 
     const name = asideMap[key]?.label
     const isDefaultFilter = asideMap[key]?.isDefaultFilter
 
-    // 不是默认配置
-    const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
+    // 系统配置为Y，且不是默认配置
+    if (!isDefaultFilter) {
+      const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
 
-    offList.push({
-      id: key,
-      name: name || '未配置',
-      fix: isDefaultFilter,
-      checked: isChecked,
-    })
-
-    isChecked && selectIds.value.push(key)
+      offList.push({
+        id: key,
+        name: name || '未配置',
+        fix: isDefaultFilter,
+        checked: isChecked,
+      })
+      if (isChecked && !selectIds.value.includes(key))
+        isChecked && selectIds.value.push(key)
+    }
   }
 
   onList = showKeys.reduce((acc, key) => {
     const isDefaultFilter = asideMap[key]?.isDefaultFilter
 
-    // 把默认显示的过滤掉(理论上不会出现这种情况)
-    if (isDefaultFilter === false) {
+    // 也需要系统配置开启（可能个人开启后，系统配置关闭） && 把默认显示的过滤掉(理论上不会出现这种情况)
+    if (config[key] === 'Y' && isDefaultFilter === false) {
       const config = {
         id: key,
         name: asideMap[key].label || '未配置',
@@ -99,34 +126,85 @@ function generatList(customConfig) {
     }
   }, [])
 
-  const fixedList = generateDefaultList()
+  const fixedList = generateDefaultList(config)
+  offList.unshift(...fixedList)
   onList.unshift(...fixedList)
-  return { showList: onList, hideList: offList }
+  console.log('原始筛选条件customConfig', customConfig)
+  // onList按照customConfig排序
+  const tempOnList = cloneDeep(onList)
+  console.log('原始筛选条件tempOnList', tempOnList)
+
+  const sortKeyList: any = []
+  finalStore.getFilterConfig.map((item: any) => {
+    sortKeyList.push(item.id)
+  })
+  console.log('原始筛选条件sortKeyList', sortKeyList)
+  const sortList: any = []
+  if (sortKeyList.length > 0) {
+    sortKeyList.map((key) => {
+      const tempItem = tempOnList.find(item => item.id == key)
+      sortList.push(tempItem)
+    })
+  }
+  else {
+    customConfig.map((key) => {
+      const tempItem = tempOnList.find(item => item.id == key)
+      if(tempItem) {
+        sortList.push(tempItem)
+      }
+    })
+  }
+  console.log('原始筛选条件sortList', sortList)
+  console.log('原始筛选条件configStore.getFilterConfig', finalStore.getFilterConfig)
+  // return { showList: onList, hideList: offList }
+  return { showList: sortList, hideList: offList }
 }
 
 finalStore.$subscribe(() => {
+  const config = finalStore.getSystemConfig
   const customConfig = finalStore.getCustomConfig
 
-  if (customConfig === null)
+  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(customConfig)
+  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);
   onList.value = showList
   offList.value = hideList
 })
 
 async function handleSumbit(e: MouseEvent) {
   e.preventDefault()
+  const param = onList.value.map((item) => {
+    return item.id
+  }).join(',')
+
+  await setFilter({ searchcount: param, type: 0 })
+  const obj = await finalStore.fetchCustomConfig()
+  console.log('obj-------------------------------', obj)
+  const tempOnList = cloneDeep(onList.value)
+  console.log('原始筛选条件tempOnList', tempOnList)
+  const sortList: any = []
+  obj.map((key) => {
+    const tempItem = tempOnList.find(item => item.id == key)
+    sortList.push(tempItem)
+  })
+  console.log('finalStore.sortList---------------', sortList)
+  // setTimeout(() => {
+  if (sortList.length > 0)
+    finalStore.setFilterConfig(sortList)
 
-  const param = onList.value
-    .filter(item => !asideMap[item.id].isDefaultFilter)
-    .map((item) => {
-      return item.id
-    })
-    .join(',')
-
-  await setFilter({ searchcount: param, type: 1 })
-  finalStore.fetchCustomConfig()
+  // }, 500);
   closeModal()
 }
 
@@ -147,16 +225,18 @@ function onCheckChange(checked: any, item: any) {
   const index = selectIds.value.indexOf(item.id)
 
   item.checked = checked
-  const currentIndex = offList.value.findIndex(v => v.id == item.id)
-  offList.value[currentIndex].checked = item.checked
+
   if (index === -1 && checked)
     selectIds.value.push(item.id)
-  else selectIds.value.splice(index, 1)
+  else
+    index !== -1 && selectIds.value.splice(index, 1)
+
+  checkAll.value = offList.value.every(item => item.checked)
 }
 
 const showIds = computed(() => {
   return onList.value.map((item) => {
-    return item.id
+    return item?.id
   })
 })
 
@@ -167,10 +247,7 @@ 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
@@ -178,11 +255,13 @@ watch(
     if (action === 'add') {
       for (const item of offList.value) {
         if (!item.fix && diff.includes(item.id)) {
-          onList.value.push({
-            id: item.id,
-            name: item.name || '未配置',
-            fix: item.fix || false,
-          })
+          if (item.checked) {
+            onList.value.push({
+              id: item.id,
+              name: item.name || '未配置',
+              fix: item.fix || false,
+            })
+          }
         }
       }
     }
@@ -245,62 +324,59 @@ const leftInputHandler = debounce((keyword) => {
 const rightInputHandler = debounce((keyword) => {
   onKeyword.value = keyword
 }, 300)
+
+// async function getfield() {
+//   let res
+//   res = await getAllfieldList(3)
+//   const userStore = useUser()
+//   const userInfo = userStore.getUserInfo
+//   res = await getfieldList(3, userInfo.id)
+// }
+function onMove(e) {
+  // 这里的e表示即将停靠的元素。
+  if (e?.related?.className?.indexOf('fix') !== -1)
+    return false
+}
+
+onMounted(() => {
+  // getfield()
+})
 </script>
 
 <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" style="color: #333333;">自定义筛选</span>
+        <span class="wrapper-title">自定义筛选</span>
         <div class="wrapper-bar">
-          <div class="wrapper-info" style="background-color: #F8F8F8;">
-            <span :style="{ 'margin-left': '18px', 'color': '#333333' }">筛选项信息</span>
+          <div class="wrapper-info">
+            <span :style="{ 'margin-left': '18px' }">筛选项信息</span>
           </div>
         </div>
 
         <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>
+              <div class="input_wrap">
                 <n-input placeholder="搜索关键词" @input="leftInputHandler">
                   <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" color="#999999" />
+                    <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" style="color:#666666">
-                      <n-checkbox
-                        v-model:checked="checkAll"
-                        label="全选"
-                        @update:checked="onCheckAllChange"
-                      />
+                    <div class="draggable-li">
+                      <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>
@@ -309,55 +385,31 @@ const rightInputHandler = debounce((keyword) => {
               </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>
                 <span class="textbtnStyle" @click="clearDragSource">清空</span>
               </template>
-              <div>
-                <!-- j -->
+              <div class="input_wrap">
                 <n-input placeholder="搜索关键词" @input="rightInputHandler">
                   <template #suffix>
-                    <SvgIcon size="14px" name="magnifying-1" color="#999999" />
+                    <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"
-                    filter=".draggable-li[draggable='false']"
-                    :animation="150"
-                    group="shared"
-                  >
-                    <div
-                      v-for="item in onList"
-                      v-show="item.name.includes(onKeyword)"
-                      :key="item.id"
-                      :draggable="!item.fix"
-                      :class="{ fix: item.fix }"
-                      class="cursor-move draggable-li"
-                    >
-                      <!-- v-show="!item.fix"  判断是否为固定值 -->
-                      <SvgIcon name="drag" size="14" />
+                <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>
@@ -372,7 +424,7 @@ const rightInputHandler = debounce((keyword) => {
           <n-button type="info" @click="handleSumbit">
             确定
           </n-button>
-          <n-button secondary style="margin-left: 15px" @click="closeModal">
+          <n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -389,18 +441,25 @@ const rightInputHandler = debounce((keyword) => {
   &-title {
     font-weight: bold;
     font-size: 16px;
-    color: #333333;
   }
 
   &-bar {
-    background-color: #e8e8e8;
-    width: 100%;
+    background-color: #f8f8f8 !important;
+    width: calc(100% + 12px);
     margin-top: 20px;
+    color: #333333;
   }
 
   &-footer {
     display: flex;
     justify-content: flex-end;
+    .n-button--info-type{
+      background: #507AFD !important;
+    }
+    .n-button--default-type{
+      background: #fff !important;
+      color: #333333;
+    }
   }
 
   &-info {
@@ -409,7 +468,7 @@ const rightInputHandler = debounce((keyword) => {
     font-size: 14px;
 
     &:before {
-      background-color: #1980ff;
+      background-color: #1980FF;
       content: "";
       width: 5px;
       border-radius: 2px;
@@ -423,20 +482,23 @@ const rightInputHandler = debounce((keyword) => {
 .dragcardStyle {
   --n-padding-bottom: 0px !important;
   --n-padding-left: 0px !important;
+  ::v-deep(.n-card__content) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
 }
 
 .cardstyle {
   width: 620px;
   height: 800px;
-  --n-padding-bottom: 16px;
+  --n-padding-bottom: 20px;
   --n-padding-left: 24px;
-  --n-padding-right: 24px;
-  --n-padding-top: 20px;
+  // background-color: #f8f8f8 !important;
 }
 
 .textbtnStyle {
   cursor: pointer;
-  color: #1980ff;
+  color: #1980FF;
 }
 
 .draggable-ul {
@@ -452,6 +514,10 @@ const rightInputHandler = debounce((keyword) => {
     align-items: center;
   }
 
+  .fix {
+    cursor: default !important;
+  }
+
   .disable-check {
     color: gainsboro;
   }
@@ -465,23 +531,33 @@ const rightInputHandler = debounce((keyword) => {
   --n-padding-top: 0px;
   --n-padding-bottom: 12px;
 }
-::v-deep(.n-card > .n-card-header .n-card-header__main) {
+::v-deep(.n-card > .n-card-header .n-card-header__main){
   font-weight: lighter !important;
   font-size: 14px;
-  color: #666666;
+  color: #666;
 }
-::v-deep(.n-scrollbar) {
-  border-top: none !important;
+::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;
 }
-::v-deep(.n-button--info-type) {
-  background: #507afd !important;
+::v-deep(.n-card__content){
+  padding: 20px 24px  0 24px !important;
 }
-::v-deep(.n-card__footer) {
-  padding: 0 16px 16px 16px !important;
+::v-deep(.n-card__footer){
+  padding: 0 24px 16px 24px !important;
 }
-::v-deep(.n-button--default-type) {
+::v-deep(.n-input .n-input-wrapper){
+  height: 44px !important;
   border: 1px solid #cad2dd !important;
-  color: #333333;
-  background: #ffffff;
+  border-bottom: none !important;
+  // margin-bottom: -3px;
+  .n-input__input input{
+    height: 44px !important;
+  }
+}
+::v-deep(.n-button--info-type){
+  background: #507AFD !important;
 }
 </style>