feat: 自定义列表对接完毕并调整代码结构

src/api/home/filter.ts

@@ -143,7 +143,7 @@ export async function sort(searchid: string, reorder: number): Promise<void> {
 /**
  *
  * 获取所有筛选选项列表
- * @param reviewType 拖拽的id
+ * @param reviewType 类型
  * @returns
  */
  export async function getAllfieldList(reviewType: number): Promise<void> {
@@ -154,4 +154,23 @@ export async function sort(searchid: string, reorder: number): Promise<void> {
   })
 }
 
+/**
+ *
+ * 新增或修改用户筛选信息
+ * @param reviewType 类型
+ * @param userId 用户
+ * @param userField 用户动态字段列表（用逗号分隔的字符串）
+ * 
+ * @returns
+ */
+ export async function savefield(reviewType: number,userId:string,userField:string): Promise<void> {
+  return http.request({
+    url: `/ocr/user/field/saveOrUpdate`,
+    method: 'POST',
+    params: { reviewType,userId,userField},
+  })
+}
+
+
+
 

src/views/task/aside/Aside.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { computed, onBeforeMount, onMounted, onUnmounted, reactive, ref, unref, watch } from 'vue'
+import { useTaskStore } from '@/store/modules/task'
 import { debounce } from 'lodash-es'
+import { computed, ref, unref, watch } from 'vue'
 import TaskList from './TaskList.vue'
-import { useTaskStore } from '@/store/modules/task'
-import { useUser } from '@/store/modules/user'
 
 const CustomFieldModalRef = ref(null)
 const collapse = ref(false)
@@ -85,7 +84,7 @@ const inputHandler = debounce((word) => {
       </div>
     </div>
     <TaskList ref="taskListRef" style="height: calc(100vh - 146px);" class="work-sheet-list" />
-    <CustomFieldModal ref="CustomFieldModalRef" />
+    <CustomFieldModal ref="CustomFieldModalRef" :reviewType="2"/>
   </div>
 </template>
 

src/views/worksheet/aside/Aside.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { computed, defineOptions, nextTick, onBeforeMount, onMounted, reactive, ref, unref, watch } from 'vue'
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
+import { useWorkOrder } from '@/store/modules/workOrder'
+import { getViewportOffset } from '@/utils/domUtils'
 import { debounce } from 'lodash-es'
+import { computed, defineOptions, nextTick, onMounted, ref, unref, watch } from 'vue'
 import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
 import WorkSheetList from './WorkSheetList.vue'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { getViewportOffset } from '@/utils/domUtils'
-import { useWorkOrder } from '@/store/modules/workOrder'
 
 defineOptions({ name: 'AsideContent' })
 
@@ -115,7 +115,7 @@ const inputHandler = debounce((word) => {
       </div>
     </div>
     <WorkSheetList ref="packageListRef" :style="listStyle" class="work-sheet-list" />
-    <CustomFieldModalVue ref="filterModalRef" />
+    <CustomFieldModalVue ref="filterModalRef" :reviewType="1"/>
   </div>
 </template>
 

src/views/worksheet/modal/CustomFieldModal.vue

@@ -1,212 +1,269 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
-import { difference } from 'lodash-es'
+import { workPackageMap } from "@/config/workorder";
-import { VueDraggable } from 'vue-draggable-plus'
+import { useUser } from "@/store/modules/user";
-import { workPackageMap } from '@/config/workorder'
+import { difference } from "lodash-es";
+import { computed, defineProps, onMounted, ref, watch } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
+
+const props = defineProps({
+  reviewType: {
+    type: Number,
+    default: () => 1,
+    require: true,
+  },
+});
 
 // 左侧隐藏列表
-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)
+  const keys = Object.keys(workPackageMap);
-  let showList: object[] = []
+  let showList: object[] = [];
-  const hideList: object[] = []
+  const hideList: object[] = [];
-  const showStr = 'status'
+  const showStr = "status";
-  const showKeys = showStr.split(',').map((key: string) => key.toLowerCase())
+  const showKeys = showStr.split(",").map((key: string) => key.toLowerCase());
 
   for (const key of keys) {
-    const name = workPackageMap[key]?.label
+    const name = workPackageMap[key]?.label;
-    const isDefault = workPackageMap[key]?.isDefault
+    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)
+  hideList.unshift(...fixedList);
-  showList.unshift(...fixedList)
+  showList.unshift(...fixedList);
 
-  onList.value = showList
+  onList.value = showList;
-  offList.value = hideList
+  offList.value = hideList;
-  return { showList, 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 {
-    else {
+      return acc;
-      return acc
     }
-  }, [])
+  }, []);
 }
 
-const show = ref(false)
+const show = ref(false);
-const checkAll = 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()
+  const userStore = useUser();
-  closeModal()
+  const userInfo = userStore.getUserInfo;
+  console.log(onList.value, "onList");
+  console.log(offList.value, "offList");
+  let userField = "";
+  onList.value.map((v, index) => {
+    userField += `${v.id}${index == onList.value.length - 1 ? "" : ","}`;
+  });
+  savefield(props.reviewType, userInfo.id, userField);
+  e.preventDefault();
+  closeModal();
 }
 
 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
+      item.checked = value;
-      ids.push(item.id)
+      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)
+  if (index === -1 && checked) selectIds.value.push(item.id);
-    selectIds.value.push(item.id)
+  else selectIds.value.splice(index, 1);
-  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)
+    if (newVal === oldVal) return;
-      return
 
-    const action = newVal > oldVal ? 'add' : 'remove'
+    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)
+    if (diff.length === 0) return;
-      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 {
-    else {
+      const list = onList.value;
-      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)
+          list.splice(index, 1);
-          index--
+          index--;
         }
       }
     }
-  },
+  }
-)
+);
 
 watch(
   () => showIds.value.length,
   (newVal, oldVal) => {
-    if (newVal === oldVal)
+    if (newVal === oldVal) return;
-      return
 
-    const diff = difference(selectIds.value, showIds.value)
+    const diff = difference(selectIds.value, showIds.value);
 
-    if (diff.length === 0)
+    if (diff.length === 0) return;
-      return
 
     for (const item of offList.value) {
       if (!item.fix && diff.includes(item.id)) {
-        const index = selectIds.value.indexOf(item.id)
+        const index = selectIds.value.indexOf(item.id);
-        item.checked = false
+        item.checked = false;
-        selectIds.value.splice(index, 1)
+        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)
+  if (index !== -1) onList.value.splice(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;
+
+  /**
+   * 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.userField?.toLowerCase().indexOf(v.name)),
+    };
+    if (item.checked) {
+      onList.value.push(item);
+    } else {
+      offList.value.push(item);
+    }
+    if (item.fix) {
+      fixList.push(item);
+    }
+  });
+  offList.value.unshift(...fixList);
+});
 </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 +274,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 +288,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;"
+                      v-for="item in offList"
-                      :class="{ 'disable-check': item.fix }" class="draggable-li"
+                      :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 +316,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 +331,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"
+                      v-if="!item.fix"
-                      name="clear" @click="removeHandler(item.id)"
+                      size="16px"
+                      style="display: block; margin-left: auto; cursor: pointer"
+                      name="clear"
+                      @click="removeHandler(item.id)"
                     />
                   </div>
                 </VueDraggable>
@@ -278,10 +360,8 @@ function removeHandler(id: string) {
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit">
+          <n-button type="info" @click="handleSumbit"> 确认 </n-button>
-            确认
+          <n-button secondary style="margin-left: 15px" @click="closeModal">
-          </n-button>
-          <n-button secondary style="margin-left:15px" @click="closeModal">
             取消
           </n-button>
         </div>
@@ -317,7 +397,7 @@ function removeHandler(id: string) {
 
     &:before {
       background-color: #1980ff;
-      content: '';
+      content: "";
       width: 5px;
       border-radius: 2px;
       top: 0;
@@ -373,7 +453,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;
 }