feat: 任务审批筛选弹窗搜索功能完成

src/views/task/modal/CustomFieldModal.vue

@@ -2,10 +2,9 @@
 import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
 import { workPackageMap } from "@/config/workorder";
 import { useUser } from "@/store/modules/user";
-import { difference } from "lodash-es";
+import { difference, cloneDeep } from "lodash-es";
 import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
-
 const props = defineProps({
   reviewType: {
     type: Number,
@@ -23,6 +22,10 @@ const onList = ref<any[]>([]);
 // 固定默认列表
 const fixList = ref<any[]>([]);
 
+const offShowList = ref<any[]>([]);
+const onShowList = ref<any[]>([]);
+const fixShowList = ref<any[]>([]);
+
 const allCount = computed(() => {
   return `全部筛选(共${offList.value.length - 1}个)`;
 });
@@ -134,16 +137,23 @@ function onCheckAllChange(value) {
       ids.push(item.id);
     }
   }
+  for (const item of offShowList.value) {
+    if (!item.fix) {
+      item.checked = value;
+      ids.push(item.id);
+    }
+  }
   selectIds.value = value ? ids : [];
-  console.log(offList.value, "offList");
   if (value) {
     offList.value.map((v) => {
       if (!v.checked) {
         onList.value.push(v);
       }
     });
+    onShowList.value = cloneDeep(onList.value)
   } else {
     onList.value = [];
+    onShowList.value = [];
   }
 }
 
@@ -151,7 +161,8 @@ function onCheckChange(checked: any, item: any) {
   const index = selectIds.value.indexOf(item.id);
 
   item.checked = checked;
-
+  let 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);
 }
@@ -185,12 +196,14 @@ watch(
           });
         }
       }
+      onShowList.value = cloneDeep(onList.value);
     } else {
       const list = onList.value;
       for (let index = 0; index < list.length; index++) {
         const item = list[index];
         if (!item.fix && diff.includes(item.id)) {
           list.splice(index, 1);
+          onShowList.value.splice(index, 1);
           index--;
         }
       }
@@ -221,6 +234,7 @@ function clearDragSource() {
   onList.value = onList.value.filter((item) => {
     return item.fix === true;
   });
+  onShowList.value = cloneDeep(onList.value);
 }
 
 function removeHandler(id: string) {
@@ -231,9 +245,9 @@ function removeHandler(id: string) {
 
   index = offList.value.findIndex((v) => v.id == id);
   offList.value[index].checked = false;
+  offShowList.value = cloneDeep(offList.value)
 }
-
-onMounted(async () => {
+const getData = async (type = "") => {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
   let res;
@@ -249,42 +263,49 @@ onMounted(async () => {
    */
   const userFieldFixed = useList.userFieldFixed?.split(",");
   const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
-
-  allList.map((v) => {
-    let item = {
-      name: v.fieldDesc,
-      id: v.name,
-      fix: v.isrequired == 2,
-      checked:
-        v.isrequired == 2 ||
-        Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
-        Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
-    };
-    if (item.fix) {
-      fixList.value.push(item);
-    } else {
-      offList.value.push(item);
-    }
-  });
-  offList.value.unshift(...fixList.value);
-  useList.userFieldFixed?.split(",").map((v) => {
-    let item = allList.find((v2) => v2.name == v);
-    if (item) {
-      item = {
-        name: item.fieldDesc,
-        id: item.name,
-        fix: item.isrequired == 2,
-        checked: true,
+  if (!type || type == "off") {
+    offList.value = [];
+    allList.map((v) => {
+      let item = {
+        name: v.fieldDesc,
+        id: v.name,
+        fix: v.isrequired == 2,
+        checked:
+          v.isrequired == 2 ||
+          Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
+          Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
       };
-      selectIds.value.push(item.id);
-      if (!item.fix) {
-        onList.value.push(item);
+      if (item.fix) {
+        fixList.value.push(item);
+      } else {
+        offList.value.push(item);
       }
-    }
-  });
-  console.log(offList.value, "offList.value");
-  console.log(useList, "useList");
-});
+    });
+    offList.value.unshift(...fixList.value);
+  }
+  if (!type || type == "on") {
+    useList.userFieldFixed?.split(",").map((v) => {
+      let item = allList.find((v2) => v2.name == v);
+      if (item) {
+        item = {
+          name: item.fieldDesc,
+          id: item.name,
+          fix: item.isrequired == 2,
+          checked: true,
+        };
+        selectIds.value.push(item.id);
+        if (!item.fix) {
+          onList.value.push(item);
+        }
+      }
+    });
+  }
+  offShowList.value = cloneDeep(offList.value);
+  fixShowList.value = cloneDeep(fixList.value);
+  onShowList.value = cloneDeep(onList.value);
+};
+
+onMounted(() => getData());
 
 const indeterminate = computed(() => {
   let baseNum = 0;
@@ -295,6 +316,24 @@ const indeterminate = computed(() => {
   });
   return onList.value.length > 0 && offList.value.length - baseNum > onList.value.length;
 });
+const queryData = (value, type) => {
+  if (value) {
+    if (type == "off") {
+      offShowList.value = offList.value.filter((item) => item.name.indexOf(value) > -1);
+    } else {
+      onShowList.value = onList.value.filter((item) => item.name.indexOf(value) > -1);
+      fixShowList.value = fixList.value.filter((item) => item.name.indexOf(value) > -1);
+    }
+  } else {
+    // getData(type);
+    if(type == "off") {
+      offShowList.value = cloneDeep(offList.value);
+    }else{
+      onShowList.value = cloneDeep(onList.value);
+      fixShowList.value = cloneDeep(fixList.value)
+    }
+  }
+};
 </script>
 
 <template>
@@ -323,7 +362,10 @@ const indeterminate = computed(() => {
               :bordered="false"
             >
               <div>
-                <n-input placeholder="搜索关键字">
+                <n-input
+                  placeholder="搜索关键字"
+                  @input="(value) => queryData(value, 'off')"
+                >
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
@@ -339,7 +381,7 @@ const indeterminate = computed(() => {
                   </div>
                   <div class="content">
                     <div
-                      v-for="item in offList"
+                      v-for="item in offShowList"
                       :key="item.id"
                       style="width: 170px"
                       :class="{ 'disable-check': item.fix }"
@@ -369,14 +411,18 @@ const indeterminate = computed(() => {
                 <span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
               </template>
               <div>
-                <n-input placeholder="搜索关键字">
+                <n-input
+                  placeholder="搜索关键字"
+                  @input="(value) => queryData(value, 'on')"
+                >
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
                 </n-input>
+                <div class="draggable-title">系统默认</div>
                 <div class="draggable-ul">
                   <div
-                    v-for="item in fixList"
+                    v-for="item in fixShowList"
                     :key="item.id"
                     :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
@@ -384,6 +430,7 @@ const indeterminate = computed(() => {
                     <span class="ml-2">{{ item.name }}</span>
                   </div>
                 </div>
+                <div class="draggable-title" style="border-top: none">自定义配置</div>
                 <VueDraggable
                   v-model="onList"
                   class="draggable-ul"
@@ -391,7 +438,7 @@ const indeterminate = computed(() => {
                   group="shared"
                 >
                   <div
-                    v-for="item in onList"
+                    v-for="item in onShowList"
                     :key="item.id"
                     :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
@@ -480,7 +527,12 @@ const indeterminate = computed(() => {
   cursor: pointer;
   color: #1980ff;
 }
-
+.draggable-title {
+  border: 1px solid #cad2dd;
+  border-bottom: none;
+  color: gray;
+  padding: 12px;
+}
 .draggable-ul {
   width: 100%;
   overflow: hidden;