From 6692fe5b0a179672f3abe773edad8b8d5baaed6d Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Tue, 19 Mar 2024 11:34:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=80=BB=E8=BE=91=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/final/comp/CustomTabelModal.vue     |   2 +-
 src/views/task/aside/Aside.vue                |   2 +-
 src/views/task/modal/CustomFieldModal.vue     | 314 ++++++++++++------
 src/views/task/modal/CustomSettingModal.vue   |   2 +-
 .../worksheet/modal/CustomFieldModal.vue      |  29 +-
 5 files changed, 229 insertions(+), 120 deletions(-)

diff --git a/src/views/final/comp/CustomTabelModal.vue b/src/views/final/comp/CustomTabelModal.vue
index d647ee4..c0ed170 100644
--- a/src/views/final/comp/CustomTabelModal.vue
+++ b/src/views/final/comp/CustomTabelModal.vue
@@ -45,7 +45,7 @@ onMounted(async()=>{
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.toLowerCase().indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.toLowerCase().indexOf(v.name)>-1),
+        Boolean(useList.userFieldFixed?.indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.indexOf(v.name)>-1),
     };
     offList.value.push(item)
   });
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 1a90839..3065f7b 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -2,7 +2,7 @@
 import { useTaskStore } from '@/store/modules/task';
 import { debounce } from 'lodash-es';
 import { computed, ref, unref, watch } from 'vue';
-import CustomFieldModal from '../../worksheet/modal/CustomFieldModal.vue';
+import CustomFieldModal from '../modal/CustomFieldModal.vue';
 
 
 import TaskList from './TaskList.vue';
diff --git a/src/views/task/modal/CustomFieldModal.vue b/src/views/task/modal/CustomFieldModal.vue
index 02b39f3..6bc5681 100644
--- a/src/views/task/modal/CustomFieldModal.vue
+++ b/src/views/task/modal/CustomFieldModal.vue
@@ -1,212 +1,283 @@
 <script lang="ts" setup>
-import { workPackageMap } from '@/config/workorder';
-import { difference } from 'lodash-es';
-import { computed, ref, watch } from 'vue';
-import { VueDraggable } from 'vue-draggable-plus';
+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 { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
+
+const props = defineProps({
+  reviewType: {
+    type: Number,
+    default: () => 1,
+    require: true,
+  },
+});
+
+const emit = defineEmits(["onOk"]);
 
 // 左侧隐藏列表
-const offList = ref<any[]>([])
+const offList = ref<any[]>([]);
 // 右侧显示列表
-const onList = ref<any[]>([])
+const onList = ref<any[]>([]);
 
 const allCount = computed(() => {
-  return `全部筛选(共${offList.value.length - 1}个)`
-})
+  return `全部筛选(共${offList.value.length - 1}个)`;
+});
 
 const selectCount = computed(() => {
-  return `全部筛选(共${onList.value.length}个)`
-})
+  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())
+  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
+    const name = workPackageMap[key]?.label;
+    const isDefault = workPackageMap[key]?.isDefault;
 
     // 系统配置为Y且不是默认配置
     if (!isDefault) {
       hideList.push({
         id: key,
-        name: name || '未配置',
+        name: name || "未配置",
         fix: isDefault,
         checked: workPackageMap[key].isDefault,
-      })
+      });
     }
   }
 
   showList = showKeys.reduce((acc, key) => {
     const config = {
       id: key,
-      name: workPackageMap[key].label || '未配置',
+      name: workPackageMap[key].label || "未配置",
       fix: workPackageMap[key].isDefault,
-    }
-    return [...acc, config]
-  }, [])
+    };
+    return [...acc, config];
+  }, []);
 
-  const fixedList = generateDefaultList()
+  const fixedList = generateDefaultList();
 
-  hideList.unshift(...fixedList)
-  showList.unshift(...fixedList)
+  hideList.unshift(...fixedList);
+  showList.unshift(...fixedList);
 
-  onList.value = showList
-  offList.value = hideList
-  return { showList, hideList }
+  onList.value = showList;
+  offList.value = hideList;
+  return { showList, hideList };
 }
 
 function generateDefaultList() {
   return Object.keys(workPackageMap).reduce((acc, key) => {
-    const { label, isDefault } = workPackageMap[key]
+    const { label, isDefault } = workPackageMap[key];
 
     if (isDefault) {
       const config = {
         id: key,
-        name: label || '未配置',
+        name: label || "未配置",
         fix: true,
         checked: true,
-      }
-      return [...acc, config]
+      };
+      return [...acc, config];
+    } else {
+      return acc;
     }
-    else {
-      return acc
-    }
-  }, [])
+  }, []);
 }
 
-const show = ref(false)
-const checkAll = ref(false)
+const show = ref(false);
+const checkAll = ref(false);
 
 function showModal() {
-  show.value = true
+  show.value = true;
 }
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 async function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
-  closeModal()
+  const userStore = useUser();
+  const userInfo = userStore.getUserInfo;
+  let userField = "";
+  onList.value.map((v) => {
+    userField += `${v.id},`;
+  });
+  userField = userField.slice(0, userField.length - 1);
+  savefield(props.reviewType, userInfo.id, userField);
+  e.preventDefault();
+  closeModal();
+  emit("onOk");
 }
 
 defineExpose({
   showModal,
-})
+});
 
-generatList()
+// generatList();
 
-const selectIds = ref<string[]>([])
+const selectIds = ref<string[]>([]);
 
 function onCheckAllChange(value) {
-  const ids: string[] = []
+  const ids: string[] = [];
 
   for (const item of offList.value) {
     if (!item.fix) {
-      item.checked = value
-      ids.push(item.id)
+      item.checked = value;
+      ids.push(item.id);
     }
   }
 
-  selectIds.value = value ? ids : []
+  selectIds.value = value ? ids : [];
 }
 
 function onCheckChange(checked: any, item: any) {
-  const index = selectIds.value.indexOf(item.id)
+  const index = selectIds.value.indexOf(item.id);
 
-  item.checked = checked
+  item.checked = checked;
 
-  if (index === -1 && checked)
-    selectIds.value.push(item.id)
-  else
-    selectIds.value.splice(index, 1)
+  if (index === -1 && checked) selectIds.value.push(item.id);
+  else selectIds.value.splice(index, 1);
 }
 
 const showIds = computed(() => {
   return onList.value.map((item) => {
-    return item.id
-  })
-})
+    return item.id;
+  });
+});
 
 watch(
   () => selectIds.value.length,
   (newVal, oldVal) => {
-    if (newVal === oldVal)
-      return
+    if (newVal === oldVal) return;
 
-    const action = newVal > oldVal ? 'add' : 'remove'
-    const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value)
+    const action = newVal > oldVal ? "add" : "remove";
+    const diff =
+      action === "add"
+        ? difference(selectIds.value, showIds.value)
+        : difference(showIds.value, selectIds.value);
 
-    if (diff.length === 0)
-      return
+    if (diff.length === 0) return;
 
-    if (action === 'add') {
+    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 || '未配置',
+            name: item.name || "未配置",
             fix: item.fix || false,
-          })
+          });
         }
       }
-    }
-    else {
-      const list = onList.value
+    } else {
+      const list = onList.value;
       for (let index = 0; index < list.length; index++) {
-        const item = list[index]
+        const item = list[index];
         if (!item.fix && diff.includes(item.id)) {
-          list.splice(index, 1)
-          index--
+          list.splice(index, 1);
+          index--;
         }
       }
     }
-  },
-)
+  }
+);
 
 watch(
   () => showIds.value.length,
   (newVal, oldVal) => {
-    if (newVal === oldVal)
-      return
+    if (newVal === oldVal) return;
 
-    const diff = difference(selectIds.value, showIds.value)
+    const diff = difference(selectIds.value, showIds.value);
 
-    if (diff.length === 0)
-      return
+    if (diff.length === 0) return;
 
     for (const item of offList.value) {
       if (!item.fix && diff.includes(item.id)) {
-        const index = selectIds.value.indexOf(item.id)
-        item.checked = false
-        selectIds.value.splice(index, 1)
+        const index = selectIds.value.indexOf(item.id);
+        item.checked = false;
+        selectIds.value.splice(index, 1);
       }
     }
-  },
-)
+  }
+);
 
 function clearDragSource() {
   onList.value = onList.value.filter((item) => {
-    return item.fix === true
-  })
+    return item.fix === true;
+  });
 }
 
 function removeHandler(id: string) {
   const index = onList.value.findIndex((item) => {
-    return item.id === id
-  })
+    return item.id === id;
+  });
 
-  if (index !== -1)
-    onList.value.splice(index, 1)
+  if (index !== -1) onList.value.splice(index, 1);
 }
+
+onMounted(async () => {
+  const userStore = useUser();
+  const userInfo = userStore.getUserInfo;
+  let res;
+  res = await getAllfieldList(props.reviewType); //所有筛选项目
+  const allList = res.data;
+  res = await getfieldList(props.reviewType, userInfo.id); //当前用户选择的项目
+  const useList = res.data;
+  console.log(allList, "getAllfieldList", props.reviewType);
+  console.log(useList, "getfieldList", props.reviewType);
+
+  /**
+   * name 标题
+   * id 键值
+   * fix 是否默认
+   * checked 是否选中
+   */
+
+  let fixList = [];
+  allList.map((v) => {
+    let item = {
+      name: v.fieldDesc,
+      id: v.name,
+      fix: v.isrequired == 2,
+      checked:
+        v.isrequired == 2 ||
+        Boolean(useList.userFieldFixed?.indexOf(v.name) > -1) ||
+        Boolean(useList.userFieldUnFixed?.indexOf(v.name) > -1),
+    };
+    if (item.fix) {
+      fixList.push(item);
+    } else {
+      offList.value.push(item);
+    }
+  });
+  offList.value.unshift(...fixList);
+  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,
+      };
+      onList.value.push(item);
+    }
+  });
+});
 </script>
 
 <template>
   <n-modal v-model:show="show" transform-origin="center">
-    <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">
@@ -217,7 +288,10 @@ function removeHandler(id: string) {
         <n-grid cols="4" class="mt-4 proCard" responsive="screen" :x-gap="24">
           <n-grid-item span="3">
             <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>
@@ -228,15 +302,24 @@ function removeHandler(id: string) {
                 </n-input>
                 <div class="draggable-ul">
                   <div class="draggable-li">
-                    <n-checkbox v-model:checked="checkAll" label="全部" @update:checked="onCheckAllChange" />
+                    <n-checkbox
+                      v-model:checked="checkAll"
+                      label="全部"
+                      @update:checked="onCheckAllChange"
+                    />
                   </div>
                   <div class="content">
                     <div
-                      v-for="item in offList" :key="item.id" style="width: 170px;"
-                      :class="{ 'disable-check': item.fix }" class="draggable-li"
+                      v-for="item in offList"
+                      :key="item.id"
+                      style="width: 170px"
+                      :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>
@@ -247,7 +330,10 @@ function removeHandler(id: string) {
           </n-grid-item>
           <n-grid-item>
             <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>
@@ -259,15 +345,25 @@ function removeHandler(id: string) {
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
                 </n-input>
-                <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
+                <VueDraggable
+                  v-model="onList"
+                  class="draggable-ul"
+                  :animation="150"
+                  group="shared"
+                >
                   <div
-                    v-for="item in onList" :key="item.id" :class="{ fix: item.fix }"
+                    v-for="item in onList"
+                    :key="item.id"
+                    :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
                   >
                     <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>
@@ -278,10 +374,8 @@ function removeHandler(id: string) {
       </div>
       <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 type="info" @click="handleSumbit"> 确认 </n-button>
+          <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -317,7 +411,7 @@ function removeHandler(id: string) {
 
     &:before {
       background-color: #1980ff;
-      content: '';
+      content: "";
       width: 5px;
       border-radius: 2px;
       top: 0;
@@ -373,7 +467,9 @@ function removeHandler(id: string) {
   }
 }
 
-::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
+::v-deep(
+    .n-card.n-card--content-segmented > .n-card__content:not(:first-child)
+  ) {
   border: 0px;
 }
 
diff --git a/src/views/task/modal/CustomSettingModal.vue b/src/views/task/modal/CustomSettingModal.vue
index 5674e08..be27573 100644
--- a/src/views/task/modal/CustomSettingModal.vue
+++ b/src/views/task/modal/CustomSettingModal.vue
@@ -33,7 +33,7 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.toLowerCase().indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.toLowerCase().indexOf(v.name)>-1),
+        Boolean(useList.userFieldFixed?.indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.indexOf(v.name)>-1),
 
     };
     offList.value.push(item)
diff --git a/src/views/worksheet/modal/CustomFieldModal.vue b/src/views/worksheet/modal/CustomFieldModal.vue
index 3dbbcb6..9c0dcee 100644
--- a/src/views/worksheet/modal/CustomFieldModal.vue
+++ b/src/views/worksheet/modal/CustomFieldModal.vue
@@ -3,7 +3,7 @@ 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 { computed, defineProps, onMounted, ref, watch } from "vue";
+import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 
 const props = defineProps({
@@ -14,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["onOk"]);
+
 // 左侧隐藏列表
 const offList = ref<any[]>([]);
 // 右侧显示列表
@@ -104,10 +106,11 @@ async function handleSumbit(e: MouseEvent) {
   onList.value.map((v) => {
     userField += `${v.id},`;
   });
-  userField = userField.slice(0,userField.length-1);
+  userField = userField.slice(0, userField.length - 1);
   savefield(props.reviewType, userInfo.id, userField);
   e.preventDefault();
   closeModal();
+  emit("onOk");
 }
 
 defineExpose({
@@ -239,18 +242,28 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.toLowerCase().indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.toLowerCase().indexOf(v.name)>-1),
+        Boolean(useList.userFieldFixed?.indexOf(v.name) > -1) ||
+        Boolean(useList.userFieldUnFixed?.indexOf(v.name) > -1),
     };
-    if (item.checked) {
-      onList.value.push(item);
-    } else {
-      offList.value.push(item);
-    }
     if (item.fix) {
       fixList.push(item);
+    } else {
+      offList.value.push(item);
     }
   });
   offList.value.unshift(...fixList);
+  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,
+      };
+      onList.value.push(item);
+    }
+  });
 });
 </script>