Merge branch 'al'

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)
 }
-
+const getData = async (type = "") => {
-onMounted(async () => {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
   let res;
@@ -249,7 +263,8 @@ onMounted(async () => {
    */
   const userFieldFixed = useList.userFieldFixed?.split(",");
   const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
-
+  if (!type || type == "off") {
+    offList.value = [];
     allList.map((v) => {
       let item = {
         name: v.fieldDesc,
@@ -267,6 +282,8 @@ onMounted(async () => {
       }
     });
     offList.value.unshift(...fixList.value);
+  }
+  if (!type || type == "on") {
     useList.userFieldFixed?.split(",").map((v) => {
       let item = allList.find((v2) => v2.name == v);
       if (item) {
@@ -282,9 +299,13 @@ onMounted(async () => {
         }
       }
     });
-  console.log(offList.value, "offList.value");
+  }
-  console.log(useList, "useList");
+  offShowList.value = cloneDeep(offList.value);
-});
+  fixShowList.value = cloneDeep(fixList.value);
+  onShowList.value = cloneDeep(onList.value);
+};
+
+onMounted(() => getData());
 
 const indeterminate = computed(() => {
   let baseNum = 0;
@@ -295,10 +316,28 @@ 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>
-  <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"
@@ -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"
@@ -415,7 +462,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>
@@ -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;
@@ -551,5 +603,4 @@ const indeterminate = computed(() => {
 ::v-deep(.n-button--default-type) {
   border: 1px solid #cad2dd !important;
 }
-
 </style>