From cfad79edd0d7f16b588e29492584aa99179f9355 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Wed, 27 Mar 2024 17:11:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E3=80=90=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E3=80=91=E6=89=93=E5=BC=80=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E4=BB=BB=E5=8A=A1=E5=8C=85=E5=AD=97=E6=AE=B5=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=90=8E=EF=BC=8C=E9=BC=A0=E6=A0=87=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E7=A9=BA=E7=99=BD=E5=A4=84=E4=B8=8D=E5=BA=94=E8=AF=A5=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=BC=B9=E7=AA=97=EF=BC=8C=E7=82=B9=E5=87=BB=E7=A1=AE?=
 =?UTF-8?q?=E5=AE=9A=E6=88=96=E5=8F=96=E6=B6=88=E6=8C=89=E9=92=AE=E6=89=8D?=
 =?UTF-8?q?=E8=83=BD=E5=85=B3=E9=97=AD=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/modal/CustomFieldModal.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/views/task/modal/CustomFieldModal.vue b/src/views/task/modal/CustomFieldModal.vue
index 5a06d03..5c9659d 100644
--- a/src/views/task/modal/CustomFieldModal.vue
+++ b/src/views/task/modal/CustomFieldModal.vue
@@ -135,7 +135,7 @@ function onCheckAllChange(value) {
     }
   }
   selectIds.value = value ? ids : [];
-  console.log(offList.value,'offList')
+  console.log(offList.value, "offList");
   if (value) {
     offList.value.map((v) => {
       if (!v.checked) {
@@ -298,7 +298,7 @@ const indeterminate = computed(() => {
 </script>
 
 <template>
-  <n-modal v-model:show="show" transform-origin="center">
+  <n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
     <n-card
       class="cardstyle"
       :bordered="false"
@@ -415,7 +415,7 @@ const indeterminate = computed(() => {
       <template #footer>
         <div class="wrapper-footer">
           <n-button type="info" @click="handleSumbit"> 确认 </n-button>
-          <n-button secondary style="margin-left: 15px;" @click="closeModal">
+          <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -452,7 +452,7 @@ const indeterminate = computed(() => {
     color: #333333;
     font-size: 14px;
     background: #f8f8f8;
-    
+
     &:before {
       background-color: #1980ff;
       content: "";
@@ -548,8 +548,7 @@ const indeterminate = computed(() => {
 ::v-deep(.n-button--info-type) {
   background: #507afd !important;
 }
-::v-deep(.n-button--default-type){
+::v-deep(.n-button--default-type) {
   border: 1px solid #cad2dd !important;
 }
-
 </style>

From 062b2b164737ef26136ca4056ffd233c93a51bcd Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Wed, 27 Mar 2024 18:07:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E4=BB=BB=E5=8A=A1=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E7=AD=9B=E9=80=89=E5=BC=B9=E7=AA=97=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/modal/CustomFieldModal.vue | 144 +++++++++++++++-------
 1 file changed, 98 insertions(+), 46 deletions(-)

diff --git a/src/views/task/modal/CustomFieldModal.vue b/src/views/task/modal/CustomFieldModal.vue
index 5c9659d..a6f0996 100644
--- a/src/views/task/modal/CustomFieldModal.vue
+++ b/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;