From 7ed436a45418858d2d395493e0a6b7a5284875a3 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Wed, 20 Mar 2024 00:09:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=80=E6=9C=89=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=8A=A8=E6=80=81=E5=88=97=E5=AF=B9=E6=8E=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/final/comp/CustomTabelModal.vue     | 369 +++++---
 src/views/final/content/Content.vue           | 832 +++++++++++-------
 src/views/task/aside/TaskList.vue             |   2 +-
 src/views/task/modal/CustomFieldModal.vue     |  14 +-
 src/views/task/modal/CustomSettingModal.vue   |  30 +-
 src/views/worksheet/aside/Aside.vue           | 197 +++--
 src/views/worksheet/aside/ListItem.vue        |  48 +-
 src/views/worksheet/aside/WorkSheetList.vue   | 118 +--
 .../worksheet/modal/CustomFieldModal copy.vue | 486 ++++++++++
 .../worksheet/modal/CustomFieldModal.vue      |  37 +-
 10 files changed, 1534 insertions(+), 599 deletions(-)
 create mode 100644 src/views/worksheet/modal/CustomFieldModal copy.vue

diff --git a/src/views/final/comp/CustomTabelModal.vue b/src/views/final/comp/CustomTabelModal.vue
index c0ed170..8ba3be8 100644
--- a/src/views/final/comp/CustomTabelModal.vue
+++ b/src/views/final/comp/CustomTabelModal.vue
@@ -1,29 +1,29 @@
 <script lang="ts" setup>
-import { getAllfieldList, getfieldList } from "@/api/home/filter";
-import { ColumnsMap } from '@/config/final';
+import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
+import { ColumnsMap } from "@/config/final";
 import { useUser } from "@/store/modules/user";
-import { difference } from 'lodash-es';
-import { computed, onMounted, ref, watch } from 'vue';
-import { VueDraggable } from 'vue-draggable-plus';
+import { difference } from "lodash-es";
+import { computed, onMounted, ref, watch } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
 
 const emit = defineEmits<{
-  (e: 'commit', columns: any[])
-}>()
+  (e: "commit", columns: any[]);
+}>();
 
 // 左侧隐藏列表
-const offList = ref<any[]>([])
+const offList = ref<any[]>([]);
 // 右侧显示列表
-const fixLeftList = ref<any[]>([])
-const onList = ref<any[]>([])
-  const props = defineProps({
+const fixLeftList = ref<any[]>([]);
+const onList = ref<any[]>([]);
+const props = defineProps({
   reviewType: {
     type: Number,
     default: () => 0,
     require: true,
   },
-})
+});
 
-onMounted(async()=>{
+onMounted(async () => {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
   let res;
@@ -37,71 +37,82 @@ onMounted(async()=>{
    * fix 是否默认
    * checked 是否选中
    */
-
-  allList.map((v) => {
+  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(useList.userFieldFixed?.indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.indexOf(v.name)>-1),
+        Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
+        Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
     };
-    offList.value.push(item)
+    if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
+      if (item.fix) {
+        fixLeftList.value.push(item);
+      }
+    }
+    if (userFieldFixed?.find((v2) => v2 == v.name)) {
+      fixLeftList.value.push(item);
+    }
+    if (userFieldUnFixed?.find((v2) => v2 == v.name)) {
+      onList.value.push(item);
+    }
+    offList.value.push(item);
   });
-})
+});
 
 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(ColumnsMap)
+  const keys = Object.keys(ColumnsMap);
   // const showStr = 'name'
   // const showKeys = showStr.split(',').map((key: string) => key.toLowerCase())
 
   for (const key of keys) {
-    const { title, fixed, fixLeft, width } = ColumnsMap[key]
+    const { title, fixed, fixLeft, width } = ColumnsMap[key];
     const item = {
       id: key,
       title,
       fix: fixed,
       checked: ColumnsMap[key].fixed,
       width,
-    }
+    };
 
-    if (!fixed)
-      offList.value.push(item)
+    if (!fixed) offList.value.push(item);
 
-    if (fixLeft)
-      fixLeftList.value.push(item)
+    if (fixLeft) fixLeftList.value.push(item);
   }
 
   // showList = showKeys.reduce((acc, key) => {
   //   const config = {
   //     id: key,
-  //     title: ColumnsMap[key].title || '未配置',
+  //     title: ColumnsMap[key].name || '未配置',
   //     fix: ColumnsMap[key].fixed,
   //   }
   //   return [...acc, config]
   // }, [])
 
-  const fixedList = generateDefaultList()
+  const fixedList = generateDefaultList();
   const filterList = fixedList.filter((item) => {
-    return !item.fixLeft
-  })
+    return !item.fixLeft;
+  });
 
-  onList.value.unshift(...filterList)
-  offList.value.unshift(...fixedList)
+  onList.value.unshift(...filterList);
+  offList.value.unshift(...fixedList);
 }
 
 function generateDefaultList() {
   return Object.keys(ColumnsMap).reduce((acc, key) => {
-    const { title, fixed, fixLeft, width } = ColumnsMap[key]
+    const { title, fixed, fixLeft, width } = ColumnsMap[key];
 
     if (fixed) {
       const config = {
@@ -111,174 +122,203 @@ function generateDefaultList() {
         checked: true,
         fixLeft,
         width,
-      }
-      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 columns: any[] = [{
-    type: 'selection',
-    fixed: 'left',
-    width: 50,
-  }]
+  e.preventDefault();
+  closeModal();
+  const userStore = useUser();
+  const userInfo = userStore.getUserInfo;
+  let userFieldFixed = "";
+  let userFieldUnFixed = "";
+  fixLeftList.value.map((v) => {
+    userFieldFixed += `${v.id},`;
+  });
+  onList.value.map((v) => {
+    userFieldUnFixed += `${v.id},`;
+  });
+  userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1);
+  userFieldUnFixed = userFieldUnFixed.slice(0, userFieldUnFixed.length - 1);
+  savefield(props.reviewType, userInfo.id, userFieldFixed, userFieldUnFixed);
+  const columns: any[] = [
+    {
+      type: "selection",
+      fixed: "left",
+      width: 50,
+    },
+  ];
 
   const leftList = fixLeftList.value.map((item) => {
     return {
-      title: item.title,
+      title: item.name,
       key: item.id,
-      fixed: 'left',
-      width: item.width,
-    }
-  })
+      fixed: "left",
+      width: 120,
+    };
+  });
 
   const unfixList = onList.value.map((item) => {
     return {
-      title: item.title,
+      title: item.name,
       key: item.id,
-      width: item.width,
-    }
-  })
+      width: 120,
+    };
+  });
 
-  columns.push(...leftList, ...unfixList)
-  emit('commit', columns)
+  columns.push(...leftList, ...unfixList);
+  emit("commit", columns);
 }
 
 defineExpose({
   showModal,
-})
+});
 
 // 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)
-
-  item.checked = checked
-
-  if (index === -1 && checked)
-    selectIds.value.push(item.id)
-  else
-    selectIds.value.splice(index, 1)
+  item.checked = checked;
+  if (checked) {
+    onList.value.push(item);
+  } else {
+    let index = onList.value.findIndex((v) => v.id == item.id);
+    if (index > -1) {
+      onList.value.splice(index, 1);
+    } else {
+      index = fixLeftList.value.findIndex((v) => v.id == item.id);
+      fixLeftList.value.splice(index, 1);
+    }
+  }
+  // TODO 与现有逻辑冲突 暂时注释
+  // 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: string[] = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value)
+    const action = newVal > oldVal ? "add" : "remove";
+    const diff: string[] =
+      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,
-            title: item.title,
+            name: item.name,
             fix: item.fix || false,
-            width: item.width,
-          })
+            width: 120,
+          });
         }
       }
-    }
-    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);
+          return;
         }
       }
     }
-  },
-)
+  }
+);
 
 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, type: 'fix' | 'unfix') {
-  const list = type === 'fix' ? fixLeftList.value : onList.value
+function removeHandler(id: string, type: "fix" | "unfix") {
+  const list = type === "fix" ? fixLeftList.value : onList.value;
 
-  const index = list.findIndex((item) => {
-    return item.id === id
-  })
+  let index = list.findIndex((item) => {
+    return item.id === id;
+  });
 
-  if (index !== -1)
-    list.splice(index, 1)
+  if (index !== -1) list.splice(index, 1);
+  index = offList.value.findIndex((v) => v.id == id);
+  if (index !== -1) {
+    offList.value[index].checked = false;
+  } else {
+    index == fixLeftList.value.findIndex((v) => v.id == id);
+    fixLeftList.value[index].checked = false;
+  }
 }
 </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">
@@ -289,7 +329,10 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
         <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>
@@ -300,15 +343,24 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
                 </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.title" :disabled="item.fix"
+                        v-model:checked="item.checked"
+                        :label="item.name"
+                        :disabled="item.fix"
                         @update:checked="onCheckChange($event, item)"
                       />
                     </div>
@@ -319,7 +371,10 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
           </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>
@@ -333,28 +388,56 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
                 </n-input>
                 <div class="drag-wrapper">
                   <div>固定在左侧</div>
-                  <VueDraggable v-model="fixLeftList" class="draggable-ul" :animation="150" group="show">
+                  <VueDraggable
+                    v-model="fixLeftList"
+                    class="draggable-ul"
+                    :animation="150"
+                    group="show"
+                  >
                     <div
-                      v-for="item in fixLeftList" :key="item.id" :class="{ fix: item.fix }"
+                      v-for="item in fixLeftList"
+                      :key="item.id"
+                      :class="{ fix: item.fix }"
                       class="cursor-move draggable-item"
                     >
-                      <span class="ml-2">{{ item.title }}</span>
+                      <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, 'fix')"
+                        v-if="!item.fix"
+                        size="16px"
+                        style="
+                          display: block;
+                          margin-left: auto;
+                          cursor: pointer;
+                        "
+                        name="clear"
+                        @click="removeHandler(item.id, 'fix')"
                       />
                     </div>
                   </VueDraggable>
                   <div>不固定</div>
-                  <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="show">
+                  <VueDraggable
+                    v-model="onList"
+                    class="draggable-ul"
+                    :animation="150"
+                    group="show"
+                  >
                     <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.title }}</span>
+                      <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, 'unfix')"
+                        v-if="!item.fix"
+                        size="16px"
+                        style="
+                          display: block;
+                          margin-left: auto;
+                          cursor: pointer;
+                        "
+                        name="clear"
+                        @click="removeHandler(item.id, 'unfix')"
                       />
                     </div>
                   </VueDraggable>
@@ -367,10 +450,8 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
 
       <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>
@@ -406,7 +487,7 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
 
     &:before {
       background-color: #1980ff;
-      content: '';
+      content: "";
       width: 5px;
       border-radius: 2px;
       top: 0;
@@ -467,7 +548,9 @@ function removeHandler(id: string, type: 'fix' | 'unfix') {
   }
 }
 
-::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/final/content/Content.vue b/src/views/final/content/Content.vue
index 15b6fdc..a7c36b2 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -1,312 +1,508 @@
 <script lang="ts" setup>
-import type { DataTableColumns, DataTableRowKey, PaginationProps } from 'naive-ui'
-import { NDataTable, useDialog, useMessage } from 'naive-ui'
-import { computed, h, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref, unref, watch } from 'vue'
-import { rowPropKeys } from 'naive-ui/es/legacy-grid/src/Row'
-import { Action, CustomTabelModal, ImportExcelModal, RepeatModal, RepeatTaskTableModal } from '../comp'
-import { getFinalList } from '@/api/final'
-import { audit } from '@/api/task/task'
-import SvgIcon from '@/components/Icon/SvgIcon.vue'
-import type { RowData } from '@/config/final'
-import { findKey, headRules } from '@/config/final'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { useUser } from '@/store/modules/user'
-import { useFinal } from '@/store/modules/final'
-import { getViewportOffset } from '@/utils/domUtils'
-import { isBoolean } from '@/utils/is'
-import { useDictionary } from '@/store/modules/dictonary'
-import ConfrimModal from '@/views/task/modal/ConfrimModal.vue'
-import type { ApprovalParam } from '/#/api'
-import emitter from '@/utils/mitt'
-import { formatToDateHMS } from '@/utils/dateUtil'
-
-const dicStore = useDictionary()
-const izstatusList = ref([])
-
-const columns: DataTableColumns<RowData> = [
-  {
-    type: 'selection',
-    fixed: 'left',
-    width: 50,
-  },
-  {
-    title: '任务Id',
-    key: 'id',
-    fixed: 'left',
-    width: 190,
-  },
-  {
-    title: '任务名称',
-    key: 'fromtaskname',
-    fixed: 'left',
-    width: 200,
-    ellipsis: {
-      tooltip: true,
-    },
-  },
-  {
-    title: '审批节点',
-    key: 'taskname',
-    width: 100,
-  },
-  {
-    title: '审批状态',
-    key: 'states',
-    width: 100,
-    sorter: 'default',
-    renderSorterIcon: ({ order }) => {
-      if (order === false)
-        return h(SvgIcon, { name: 'sort-2' })
-      if (order === 'ascend')
-        return h(SvgIcon, { name: 'sort-1' })
-      if (order === 'descend')
-        return h(SvgIcon, { name: 'sort-3' })
-    },
-    render(row: any) {
-      const item: any = izstatusList.value.find((item: any) => item.value == row.states)
-      return item ? item.label : ''
-    },
-  },
-  {
-    title: '图片相似度',
-    key: 'similarityscore',
-    width: 150,
-    sorter: 'default',
-    renderSorterIcon: ({ order }) => {
-      if (order === false)
-        return h(SvgIcon, { name: 'sort-2' })
-      if (order === 'ascend')
-        return h(SvgIcon, { name: 'sort-1' })
-      if (order === 'descend')
-        return h(SvgIcon, { name: 'sort-3' })
-    },
-    render(row: any) {
-      return row.similarityscore ? `${row.similarityscore}%` : ''
-    },
-  },
-  {
-    title: '提报时间',
-    key: 'createdate',
-    width: 200,
-    sorter: 'default',
-    renderSorterIcon: ({ order }) => {
-      if (order === false)
-        return h(SvgIcon, { name: 'sort-2' })
-      if (order === 'ascend')
-        return h(SvgIcon, { name: 'sort-1' })
-      if (order === 'descend')
-        return h(SvgIcon, { name: 'sort-3' })
+import type { DataTableColumns, DataTableRowKey, PaginationProps } from "naive-ui";
+import { NDataTable, useDialog, useMessage } from "naive-ui";
+import {
+  computed,
+  h,
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { rowPropKeys } from "naive-ui/es/legacy-grid/src/Row";
+import {
+  Action,
+  CustomTabelModal,
+  ImportExcelModal,
+  RepeatModal,
+  RepeatTaskTableModal,
+} from "../comp";
+import { getFinalList } from "@/api/final";
+import { audit } from "@/api/task/task";
+import SvgIcon from "@/components/Icon/SvgIcon.vue";
+import type { RowData } from "@/config/final";
+import { findKey, headRules } from "@/config/final";
+import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
+import { useUser } from "@/store/modules/user";
+import { useFinal } from "@/store/modules/final";
+import { getViewportOffset } from "@/utils/domUtils";
+import { isBoolean } from "@/utils/is";
+import { useDictionary } from "@/store/modules/dictonary";
+import ConfrimModal from "@/views/task/modal/ConfrimModal.vue";
+import type { ApprovalParam } from "/#/api";
+import emitter from "@/utils/mitt";
+import { formatToDateHMS } from "@/utils/dateUtil";
+import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
+
+const dicStore = useDictionary();
+const izstatusList = ref([]);
+const reviewType = 0;
+const columnsRef = ref<DataTableColumns<RowData>>([]);
+// const columns: DataTableColumns<RowData> = [
+//   {
+//     type: "selection",
+//     fixed: "left",
+//     width: 50,
+//   },
+//   {
+//     title: "任务Id",
+//     key: "id",
+//     fixed: "left",
+//     width: 190,
+//   },
+//   {
+//     title: "任务名称",
+//     key: "fromtaskname",
+//     fixed: "left",
+//     width: 200,
+//     ellipsis: {
+//       tooltip: true,
+//     },
+//   },
+//   {
+//     title: "审批节点",
+//     key: "taskname",
+//     width: 100,
+//   },
+// {
+//   title: "审批状态",
+//   key: "states",
+//   width: 100,
+//   sorter: "default",
+//   renderSorterIcon: ({ order }) => {
+//     if (order === false) return h(SvgIcon, { name: "sort-2" });
+//     if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+//     if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+//   },
+//   render(row: any) {
+//     const item: any = izstatusList.value.find(
+//       (item: any) => item.value == row.states
+//     );
+//     return item ? item.label : "";
+//   },
+//   },
+//   {
+//     title: "图片相似度",
+//     key: "similarityscore",
+//     width: 150,
+//     sorter: "default",
+//     renderSorterIcon: ({ order }) => {
+//       if (order === false) return h(SvgIcon, { name: "sort-2" });
+//       if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+//       if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+//     },
+//     render(row: any) {
+//       return row.similarityscore ? `${row.similarityscore}%` : "";
+//     },
+//   },
+//   {
+//     title: "提报时间",
+//     key: "createdate",
+//     width: 200,
+//     sorter: "default",
+//     renderSorterIcon: ({ order }) => {
+//       if (order === false) return h(SvgIcon, { name: "sort-2" });
+//       if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+//       if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+//     },
+//     render(row: any) {
+//       return formatToDateHMS(row.createdate || 0);
+//     },
+//   },
+//   {
+//     title: "更新时间",
+//     key: "updatetime",
+//     width: 200,
+//     render(row: any) {
+//       return row.updatetime ? formatToDateHMS(row.updatetime) : "";
+//     },
+//   },
+//   {
+//     title: "操作",
+//     key: "actions",
+//     width: 200,
+//     fixed: "right",
+//     render(row) {
+//       return h(Action, {
+//         id: row.id,
+//         status: row.states,
+//         trigger: (action) => {
+//           actionHandler(action, row);
+//         },
+//       });
+//     },
+//   },
+// ];
+
+async function getColumns() {
+  columnsRef.value = [
+    {
+      type: "selection",
+      fixed: "left",
+      width: 50,
     },
-    render(row: any) {
-      return formatToDateHMS(row.createdate || 0)
-    },
-  },
-  {
-    title: '更新时间',
-    key: 'updatetime',
-    width: 200,
-    render(row: any) {
-      return row.updatetime ? formatToDateHMS(row.updatetime) : ''
-    },
-  },
-  {
-    title: '操作',
-    key: 'actions',
+  ];
+
+  const userStore = useUser();
+  const userInfo = userStore.getUserInfo;
+  let res;
+  res = await getAllfieldList(reviewType); //所有筛选项目
+  const allList = res.data;
+  res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目
+  const useList = res.data;
+  const userFieldFixed = useList.userFieldFixed?.split(",");
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
+  allList?.map((v) => {
+    if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
+      if (v.isrequired == 2) {
+        columnsRef.value.push({
+          title: v.fieldDesc,
+          fixed: "left",
+          key: v.name,
+          width: 120,
+        });
+      }
+    }
+
+    if (userFieldFixed?.find((v2) => v2 == v.name)) {
+      columnsRef.value.push({
+        title: v.fieldDesc,
+        key: v.name,
+        width: 120,
+      });
+    }
+    if (userFieldUnFixed?.find((v2) => v2 == v.name)) {
+      columnsRef.value.push({
+        title: v.fieldDesc,
+        key: v.name,
+        fixed: "left",
+        width: 120,
+      });
+    }
+  });
+  columnsRef.value.push({
+    title: "操作",
+    key: "actions",
     width: 200,
-    fixed: 'right',
+    fixed: "right",
     render(row) {
-      return h(
-        Action,
-        {
-          id: row.id,
-          status: row.states,
-          trigger: (action) => {
-            actionHandler(action, row)
-          },
+      return h(Action, {
+        id: row.id,
+        status: row.states,
+        trigger: (action) => {
+          actionHandler(action, row);
         },
-      )
+      });
     },
-  },
-]
+  });
+
+  // 处理特殊数据
+  let index;
+  index = columnsRef.value.findIndex((v) => v.title == "任务名称");
+  if (index > -1) {
+    columnsRef.value[index] = {
+      title: "任务名称",
+      key: columnsRef.value[index]["key"], //"fromtaskname"
+      fixed: "left",
+      width: 200,
+      ellipsis: {
+        tooltip: true,
+      },
+    };
+  }
+  index = columnsRef.value.findIndex((v) => v.title == "审批状态");
+  if (index > -1) {
+    columnsRef.value[index] = {
+      title: "审批状态",
+      key: "states",
+      width: 100,
+      sorter: "default",
+      renderSorterIcon: ({ order }) => {
+        if (order === false) return h(SvgIcon, { name: "sort-2" });
+        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+      },
+      render(row: any) {
+        const item: any = izstatusList.value.find(
+          (item: any) => item.value == row.states
+        );
+        return item ? item.label : "";
+      },
+    };
+  }
+  index = columnsRef.value.findIndex((v) => v.title == "图片相似度");
+  if (index > -1) {
+    columnsRef.value[index] = {
+      title: "图片相似度",
+      key: "similarityscore",
+      width: 150,
+      sorter: "default",
+      renderSorterIcon: ({ order }) => {
+        if (order === false) return h(SvgIcon, { name: "sort-2" });
+        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+      },
+      render(row: any) {
+        return row.similarityscore ? `${row.similarityscore}%` : "";
+      },
+    };
+  }
+  index = columnsRef.value.findIndex((v) => v.title == "提报时间");
+  if (index > -1) {
+    columnsRef.value[index] = {
+      title: "提报时间",
+      key: "createdate",
+      width: 200,
+      sorter: "default",
+      renderSorterIcon: ({ order }) => {
+        if (order === false) return h(SvgIcon, { name: "sort-2" });
+        if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
+        if (order === "descend") return h(SvgIcon, { name: "sort-3" });
+      },
+      render(row: any) {
+        return formatToDateHMS(row.createdate || 0);
+      },
+    };
+  }
+
+  index = columnsRef.value.findIndex((v) => v.title == "更新时间");
+  if (index > -1) {
+    columnsRef.value[index] = {
+      title: "更新时间",
+      key: "updatetime",
+      width: 200,
+      render(row: any) {
+        return row.updatetime ? formatToDateHMS(row.updatetime) : "";
+      },
+    };
+  }
+}
 
-const deviceHeight = ref(600)
+const deviceHeight = ref(600);
 
 onMounted(() => {
-  emitter.on('filter-final', refreshHandler)
+  emitter.on("filter-final", refreshHandler);
+  getColumns();
 
   nextTick(() => {
-    computeListHeight()
-  })
-})
+    computeListHeight();
+  });
+});
 
 onBeforeMount(() => {
-  dicStore.fetchizstatusListt()
-})
+  dicStore.fetchizstatusListt();
+});
 
-watch(() => dicStore.izstatusList, (newval) => {
-  izstatusList.value = newval
-})
+watch(
+  () => dicStore.izstatusList,
+  (newval) => {
+    izstatusList.value = newval;
+  }
+);
 
 onUnmounted(() => {
-  emitter.off('filter-final', refreshHandler)
-})
+  emitter.off("filter-final", refreshHandler);
+});
 
-const columnsRef = ref(columns)
-const tableRef = ref<InstanceType<typeof NDataTable>>()
-const rowKey = (row: RowData) => row.id
-const loading = ref(true)
+const tableRef = ref<InstanceType<typeof NDataTable>>();
+const rowKey = (row: RowData) => row.id;
+const loading = ref(true);
 const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-})
-const tableData = ref<Array<RowData>>([])
-const selectionIds = ref<DataTableRowKey[]>([])
-const dialog = useDialog()
-const message = useMessage()
-const finalStore = useFinal()
+});
+const tableData = ref<Array<RowData>>([]);
+const selectionIds = ref<DataTableRowKey[]>([]);
+const dialog = useDialog();
+const message = useMessage();
+const finalStore = useFinal();
 
 async function query(page: number, pageSize: number, filterId?: any) {
-  const asideParmas = unref(finalStore.getAsideValue)
+  const asideParmas = unref(finalStore.getAsideValue);
   // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
-  const params = filterId ? { userSearchId: filterId } : asideParmas
-  const result = await getFinalList({ sortorder: 'asc', pageSize, currPage: page, sortname: '', ...params })
-  const { data, pageCount } = result
-  tableData.value = data
-  pagination.page = page
-  pagination.pageCount = pageCount
-  loading.value = false
+  const params = filterId ? { userSearchId: filterId } : asideParmas;
+  const result = await getFinalList({
+    sortorder: "asc",
+    pageSize,
+    currPage: page,
+    sortname: "",
+    ...params,
+  });
+  const { data, pageCount } = result;
+  tableData.value = data;
+  console.log(data, "tableData");
+  pagination.page = page;
+  pagination.pageCount = pageCount;
+  loading.value = false;
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value)
-    return
+  if (loading.value) return;
 
-  const { pageSize } = pagination
-  await query(currentPage, pageSize)
+  const { pageSize } = pagination;
+  await query(currentPage, pageSize);
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys
+  selectionIds.value = rowKeys;
 }
 
 async function computeListHeight() {
-  const table = unref(tableRef)
-  if (!table)
-    return
-  const tableEl: any = table?.$el
-  const headEl = tableEl.querySelector('.n-data-table-thead ')
-  const { bottomIncludeBody } = getViewportOffset(headEl)
-  const headerH = 64
-  let paginationH = 2
-  const marginH = 60
+  const table = unref(tableRef);
+  if (!table) return;
+  const tableEl: any = table?.$el;
+  const headEl = tableEl.querySelector(".n-data-table-thead ");
+  const { bottomIncludeBody } = getViewportOffset(headEl);
+  const headerH = 64;
+  let paginationH = 2;
+  const marginH = 60;
   if (!isBoolean(unref(pagination))) {
-    const paginationEl = tableEl.querySelector('.n-data-table__pagination') as HTMLElement
+    const paginationEl = tableEl.querySelector(
+      ".n-data-table__pagination"
+    ) as HTMLElement;
     if (paginationEl) {
-      const offsetHeight = paginationEl.offsetHeight
-      paginationH += offsetHeight || 0
-    }
-    else {
-      paginationH += 28
+      const offsetHeight = paginationEl.offsetHeight;
+      paginationH += offsetHeight || 0;
+    } else {
+      paginationH += 28;
     }
   }
-  let height
-    = bottomIncludeBody - (headerH + paginationH + marginH)
-  const maxHeight = 800
-  height = maxHeight && maxHeight < height ? maxHeight : height
-  deviceHeight.value = height
+  let height = bottomIncludeBody - (headerH + paginationH + marginH);
+  const maxHeight = 800;
+  height = maxHeight && maxHeight < height ? maxHeight : height;
+  deviceHeight.value = height;
 }
 
-useWindowSizeFn(computeListHeight)
+useWindowSizeFn(computeListHeight);
 
 const maxHeight = computed(() => {
-  return tableData.value.length ? `${unref(deviceHeight)}px` : 'auto'
-})
+  return tableData.value.length ? `${unref(deviceHeight)}px` : "auto";
+});
 
-query(pagination.page, pagination.pageSize)
+query(pagination.page, pagination.pageSize);
 
-const customTabelRef = ref(null)
-const importExcelRef = ref(null)
-const rejectModalRef = ref(null)
-const repeatModalRef = ref(null)
-const repeatTaskTableModalRef = ref(null)
+const customTabelRef = ref(null);
+const importExcelRef = ref(null);
+const rejectModalRef = ref(null);
+const repeatModalRef = ref(null);
+const repeatTaskTableModalRef = ref(null);
 
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any
-  modal.showModal()
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
 }
 
-const popover = ref<ComponentRef | null>(null)
+const popover = ref<ComponentRef | null>(null);
 
 function importHandler() {
-  (popover.value as any).setShow(false)
-  showModal(importExcelRef)
+  (popover.value as any).setShow(false);
+  showModal(importExcelRef);
 }
 
 function exportHandler() {
-  loading.value = true
-  import('@/utils/exportExcel').then((excel) => {
-    const tHeader = ['任务Id', '任务名称', '审批节点', '审批状态', '图片相似度', '提报时间', '更新时间']
-    const filterVal = ['id', 'name', 'approvalnode', 'approvalstatus', 'similarity', 'uptime', 'updatetime']
-    const list = tableData.value
-    const data = formatJson(filterVal, list)
+  loading.value = true;
+  import("@/utils/exportExcel").then((excel) => {
+    const tHeader = [
+      "任务Id",
+      "任务名称",
+      "审批节点",
+      "审批状态",
+      "图片相似度",
+      "提报时间",
+      "更新时间",
+    ];
+    const filterVal = [
+      "id",
+      "name",
+      "approvalnode",
+      "approvalstatus",
+      "similarity",
+      "uptime",
+      "updatetime",
+    ];
+    const list = tableData.value;
+    const data = formatJson(filterVal, list);
     excel.export_json_to_excel({
       header: tHeader,
       data,
-      filename: 'data',
+      filename: "data",
       autoWidth: true,
-      bookType: 'xlsx',
-    })
-    loading.value = false
-  })
+      bookType: "xlsx",
+    });
+    loading.value = false;
+  });
 }
 
 function formatJson(filterVal, jsonDataList) {
-  return jsonDataList.map(v => filterVal.map((j) => {
-    return v[j]
-  }))
+  return jsonDataList.map((v) =>
+    filterVal.map((j) => {
+      return v[j];
+    })
+  );
 }
 
 function sucessHandler(excelData) {
   const data = excelData.content.map((item) => {
-    const obj = {}
+    const obj = {};
     Object.keys(item).forEach((key) => {
-      const k = findKey(columns, key)
-      obj[k] = item[key]
-    })
-    return obj
-  })
+      const k = findKey(columns, key);
+      obj[k] = item[key];
+    });
+    return obj;
+  });
 
-  tableData.value = data
+  tableData.value = data;
 }
 
 function commitHandler(columns) {
-  columnsRef.value = columns
+  console.log(columns, "commitHandler");
+  columnsRef.value = [
+    ...columns,
+    {
+      title: "操作",
+      key: "actions",
+      width: 200,
+      fixed: "right",
+      render(row) {
+        return h(Action, {
+          id: row.id,
+          status: row.states,
+          trigger: (action) => {
+            actionHandler(action, row);
+          },
+        });
+      },
+    },
+  ];
 }
 
 function actionHandler(action: any, row: any) {
-  const { key } = action
+  const { key } = action;
   switch (key) {
-    case 'view':
-      break
-    case 'reset':
-      resetHandler()
-      break
-    case 'approval':
-      approvalHandler(row)
-      break
-    case 'reject':
-      rejectHandler(row)
-      break
+    case "view":
+      break;
+    case "reset":
+      resetHandler();
+      break;
+    case "approval":
+      approvalHandler(row);
+      break;
+    case "reject":
+      rejectHandler(row);
+      break;
     default:
-      break
+      break;
   }
 }
 
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
-  if (items.length === 0)
-    return '至少选中一个任务'
+  if (items.length === 0) return "至少选中一个任务";
 
   // const useInfo = userStore.getUserInfo
   // const username = useInfo.loginname
@@ -323,123 +519,126 @@ function validate(items: any[]) {
   //     return '审批人不一致'
   // }
 
-  return null
+  return null;
 }
 
 function resetHandler() {
   dialog.info({
-    title: '确认提示',
-    content: '确认重置当前选中的任务的审批吗?',
-    positiveText: '确定',
-    negativeText: '取消',
+    title: "确认提示",
+    content: "确认重置当前选中的任务的审批吗?",
+    positiveText: "确定",
+    negativeText: "取消",
     onPositiveClick: async () => {
       // TODO：需要支持重置
       // const result = await resetApproval()
     },
-    onNegativeClick: () => { },
-  })
+    onNegativeClick: () => {},
+  });
 }
 
 function getSelectItems() {
-  return tableData.value.filter(item => selectionIds.value.includes(item.id))
+  return tableData.value.filter((item) => selectionIds.value.includes(item.id));
 }
 
 function approvalHandler(row) {
   // const items = getSelectItems()
-  const items = [row]
-  const msg = validate(items)
+  const items = [row];
+  const msg = validate(items);
 
   if (msg !== null) {
-    message.error(msg)
-    return
+    message.error(msg);
+    return;
   }
 
   dialog.info({
-    title: '确认提示',
-    content: '确认给该任务审批为【通过】吗?',
-    positiveText: '确定',
-    negativeText: '取消',
+    title: "确认提示",
+    content: "确认给该任务审批为【通过】吗?",
+    positiveText: "确定",
+    negativeText: "取消",
     onPositiveClick: () => {
-      approval(items)
+      approval(items);
     },
-    onNegativeClick: () => { },
-  })
+    onNegativeClick: () => {},
+  });
 }
 
 function approval(items) {
-  const formIds: string[] = items.map(item => item.id)
-  const taskIds: string[] = items.map(item => item.taskId)
-  const tasknames: string[] = items.map(item => item.taskname)
+  const formIds: string[] = items.map((item) => item.id);
+  const taskIds: string[] = items.map((item) => item.taskId);
+  const tasknames: string[] = items.map((item) => item.taskname);
 
   const param: ApprovalParam = {
     formid: formIds,
     taskId: taskIds,
     approvd: true,
-    taskComment: 'approval',
+    taskComment: "approval",
     taskname: tasknames,
-  }
+  };
 
-  doAudit(param)
+  doAudit(param);
 }
 
 function rejectHandler(row) {
   // const items = getSelectItems()
-  const items = [row]
-  const msg = validate(items)
+  const items = [row];
+  const msg = validate(items);
 
   if (msg !== null) {
-    message.error(msg)
-    return
+    message.error(msg);
+    return;
   }
 
-  const modal = unref(rejectModalRef)! as any
-  modal.showModal()
+  const modal = unref(rejectModalRef)! as any;
+  modal.showModal();
 }
 
 function reject(idOrDesc: string, backId: string, isOther: boolean) {
-  const items = getSelectItems()
-  const formIds: string[] = items.map(item => item.id)
-  const taskIds: string[] = items.map(item => item.fromtaskid)
-  const tasknames: string[] = items.map(item => item.fromtaskname)
+  const items = getSelectItems();
+  const formIds: string[] = items.map((item) => item.id);
+  const taskIds: string[] = items.map((item) => item.fromtaskid);
+  const tasknames: string[] = items.map((item) => item.fromtaskname);
 
   const param: ApprovalParam = {
     formid: formIds,
     taskId: taskIds,
     approvd: false,
     taskComment: idOrDesc,
-    taskname: isOther ? tasknames : ['其他'],
-  }
+    taskname: isOther ? tasknames : ["其他"],
+  };
 
-  doAudit(param)
+  doAudit(param);
 }
 
 function doAudit(param: any) {
   audit(param).then((res) => {
-    const { code } = res
-    if (code === 'OK')
-      reload()
-    else message.error(res.message)
-  })
+    const { code } = res;
+    if (code === "OK") reload();
+    else message.error(res.message);
+  });
 }
 
 function reload() {
-  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
-  query(page!, pageSize!)
+  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps;
+  query(page!, pageSize!);
 }
 
-watch(() => finalStore.asideValue, (newVal, oldVal) => {
-  refreshHandler()
-}, { deep: true })
+watch(
+  () => finalStore.asideValue,
+  (newVal, oldVal) => {
+    refreshHandler();
+  },
+  { deep: true }
+);
 
 function reset() {
-  pagination.page = 1
-  pagination.pageCount = 1
-  pagination.pageSize = 1
+  pagination.page = 1;
+  pagination.pageCount = 1;
+  pagination.pageSize = 1;
 }
 
 async function refreshHandler(searchId?: any) {
-  reset()
-  query(pagination.page, pagination.pageSize, searchId)
+  reset();
+  query(pagination.page, pagination.pageSize, searchId);
 }
 </script>
 
@@ -455,25 +654,35 @@ async function refreshHandler(searchId?: any) {
           小结查重
         </n-button>
         <div class="btn">
-          <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
+          <SvgIcon style="margin-right: 6px" size="14" name="tf" />
           批量审批
         </div>
         <n-popover
-          ref="popover" :style="{ padding: '0px' }" style="width: 148px" :show-arrow="false"
-          placement="bottom-start" trigger="click"
+          ref="popover"
+          :style="{ padding: '0px' }"
+          style="width: 148px"
+          :show-arrow="false"
+          placement="bottom-start"
+          trigger="click"
         >
           <template #trigger>
-            <SvgIcon style="cursor: pointer;" size="20" name="more-ver" />
+            <SvgIcon style="cursor: pointer" size="20" name="more-ver" />
           </template>
           <ul class="wrapper-header-action">
             <li @click="importHandler">
-              <SvgIcon size="20" name="download" /><span style="margin-left: 5px;">批量导入数据</span>
+              <SvgIcon size="20" name="download" /><span style="margin-left: 5px"
+                >批量导入数据</span
+              >
             </li>
             <li @click="exportHandler">
-              <SvgIcon size="20" name="download" /><span style="margin-left: 5px;">导出待审数据</span>
+              <SvgIcon size="20" name="download" /><span style="margin-left: 5px"
+                >导出待审数据</span
+              >
             </li>
             <li>
-              <SvgIcon size="20" name="download" /><span style="margin-left: 5px;">导出全部数据</span>
+              <SvgIcon size="20" name="download" /><span style="margin-left: 5px"
+                >导出全部数据</span
+              >
             </li>
           </ul>
         </n-popover>
@@ -493,20 +702,41 @@ async function refreshHandler(searchId?: any) {
       </div>
     </div> -->
     <div class="wrapper-settings">
-      <SvgIcon style="cursor: pointer;" size="18" name="setting" @click="showModal(customTabelRef)" />
+      <SvgIcon
+        style="cursor: pointer"
+        size="18"
+        name="setting"
+        @click="showModal(customTabelRef)"
+      />
     </div>
     <div class="wrapper-content">
       <NDataTable
-        ref="tableRef" remote :columns="columnsRef" :scroll-x="1250" :max-height="maxHeight" :data="tableData"
-        :loading="loading" :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
+        ref="tableRef"
+        remote
+        :columns="columnsRef"
+        :scroll-x="1250"
+        :max-height="maxHeight"
+        :data="tableData"
+        :loading="loading"
+        :pagination="pagination"
+        :row-key="rowKey"
+        @update:page="handlePageChange"
         @update:checked-row-keys="handleCheck"
       />
     </div>
 
     <CustomTabelModal ref="customTabelRef" @commit="commitHandler" />
-    <ImportExcelModal ref="importExcelRef" :on-success="sucessHandler" :header-config="headRules" />
+    <ImportExcelModal
+      ref="importExcelRef"
+      :on-success="sucessHandler"
+      :header-config="headRules"
+    />
     <ConfrimModal ref="rejectModalRef" @commit="reject" />
-    <RepeatModal ref="repeatModalRef" @reject="showModal(rejectModalRef)" @viewrepeat="showModal(repeatTaskTableModalRef)" />
+    <RepeatModal
+      ref="repeatModalRef"
+      @reject="showModal(rejectModalRef)"
+      @viewrepeat="showModal(repeatTaskTableModalRef)"
+    />
     <RepeatTaskTableModal ref="repeatTaskTableModalRef" />
   </div>
 </template>
@@ -520,7 +750,7 @@ async function refreshHandler(searchId?: any) {
   box-sizing: border-box;
   margin-left: 16px;
   width: 100%;
-  background: #FFF;
+  background: #fff;
   padding: 0px 24px 24px 24px;
 
   &-header {
@@ -536,9 +766,9 @@ async function refreshHandler(searchId?: any) {
       align-items: center;
     }
 
-    .xjcc{
+    .xjcc {
       font-weight: bold;
-      color:  #6a80fc;
+      color: #6a80fc;
       margin-right: 20px;
     }
 
@@ -554,11 +784,11 @@ async function refreshHandler(searchId?: any) {
       height: 36px;
       background: linear-gradient(135deg, #5b85f8, #3c6cf0);
       border-radius: 17px;
-      box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.30);
+      box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #FFF;
+      color: #fff;
       margin-right: 6px;
       cursor: pointer;
     }
@@ -654,7 +884,7 @@ async function refreshHandler(searchId?: any) {
 
   &-content {
     flex: auto;
-    background: #FFF;
+    background: #fff;
   }
 }
 </style>
diff --git a/src/views/task/aside/TaskList.vue b/src/views/task/aside/TaskList.vue
index 83028dd..621a00f 100644
--- a/src/views/task/aside/TaskList.vue
+++ b/src/views/task/aside/TaskList.vue
@@ -12,7 +12,7 @@ const el = ref<HTMLDivElement | null>(null);
 const keyword = ref("");
 const canloadMore = ref(true);
 
-const props = defineProps({
+defineProps({
   showFieldList: {
     type: Array,
     default: () => [],
diff --git a/src/views/task/modal/CustomFieldModal.vue b/src/views/task/modal/CustomFieldModal.vue
index 4a3dd11..6b09747 100644
--- a/src/views/task/modal/CustomFieldModal.vue
+++ b/src/views/task/modal/CustomFieldModal.vue
@@ -104,15 +104,15 @@ function closeModal() {
 async function handleSumbit(e: MouseEvent) {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
-  let userField = "";
+  let userFieldFixed = "";
   fixList.value.map((v) => {
-    userField += `${v.id},`;
+    userFieldFixed += `${v.id},`;
   });
   onList.value.map((v) => {
-    userField += `${v.id},`;
+    userFieldFixed += `${v.id},`;
   });
-  userField = userField.slice(0, userField.length - 1);
-  savefield(props.reviewType, userInfo.id, userField);
+  userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1);
+  savefield(props.reviewType, userInfo.id, userFieldFixed);
   e.preventDefault();
   closeModal();
   emit("onOk");
@@ -249,8 +249,8 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(userFieldFixed.find(v2=>v2==v.name)) ||
-        Boolean(userFieldUnFixed.find(v2=>v2==v.name))
+        Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
+        Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
     };
     if (item.fix) {
       fixList.value.push(item);
diff --git a/src/views/task/modal/CustomSettingModal.vue b/src/views/task/modal/CustomSettingModal.vue
index be27573..23f60c3 100644
--- a/src/views/task/modal/CustomSettingModal.vue
+++ b/src/views/task/modal/CustomSettingModal.vue
@@ -10,7 +10,7 @@ const props = defineProps({
     default: () => 3,
     require: true,
   },
-})
+});
 onMounted(async () => {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
@@ -25,7 +25,8 @@ onMounted(async () => {
    * fix 是否默认
    * checked 是否选中
    */
-
+  const userFieldFixed = useList.userFieldFixed?.split(",");
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
   allList.map((v) => {
     let item = {
       name: v.fieldDesc,
@@ -33,10 +34,10 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.indexOf(v.name)>-1) || Boolean(useList.userFieldUnFixed?.indexOf(v.name)>-1),
-
+        Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
+        Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
     };
-    offList.value.push(item)
+    offList.value.push(item);
   });
 });
 
@@ -64,7 +65,7 @@ function generatList() {
   hideList.unshift(...fixedList);
 
   offList.value = hideList;
-  return {  hideList };
+  return { hideList };
 }
 
 function generateDefaultList() {
@@ -95,23 +96,22 @@ function showModal() {
 function closeModal() {
   show.value = false;
 }
-const emit = defineEmits(['onOk'])
+const emit = defineEmits(["onOk"]);
 
 async function handleSumbit(e: MouseEvent) {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
   let userField = "";
   offList.value.map((v) => {
-    if(v.checked){
+    if (v.checked) {
       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')
-
+  emit("onOk");
 }
 
 defineExpose({
@@ -143,11 +143,6 @@ function onCheckChange(checked: any, item: any) {
   if (index === -1 && checked) selectIds.value.push(item.id);
   else selectIds.value.splice(index, 1);
 }
-
-
-
-
-
 </script>
 
 <template>
@@ -172,7 +167,7 @@ function onCheckChange(checked: any, item: any) {
             >
               <div>
                 <div class="draggable-ul">
-                  <div class="draggable-li" style="background: #f8f8f8;">
+                  <div class="draggable-li" style="background: #f8f8f8">
                     <n-checkbox
                       v-model:checked="checkAll"
                       label="全部"
@@ -281,7 +276,6 @@ function onCheckChange(checked: any, item: any) {
   .draggable-li {
     padding: 10px 16px;
     color: #333;
-    
   }
 
   .draggable-item {
diff --git a/src/views/worksheet/aside/Aside.vue b/src/views/worksheet/aside/Aside.vue
index e088c6e..a93a52c 100644
--- a/src/views/worksheet/aside/Aside.vue
+++ b/src/views/worksheet/aside/Aside.vue
@@ -1,91 +1,154 @@
 <script lang="ts" setup>
-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 { getViewportOffset } from '@/utils/domUtils'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
+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 { getViewportOffset } from "@/utils/domUtils";
+import { useWorkOrder } from "@/store/modules/workOrder";
+import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
+import { useUser } from "@/store/modules/user";
+import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
+defineOptions({ name: "AsideContent" });
 
-defineOptions({ name: 'AsideContent' })
-
-const collapse = ref(false)
-const workStore = useWorkOrder()
-const filterModalRef = ref(null)
-const packageListRef = ref<HTMLDivElement | null>(null)
+const collapse = ref(false);
+const workStore = useWorkOrder();
+const filterModalRef = ref(null);
+const packageListRef = ref<HTMLDivElement | null>(null);
+// 展示字段
+const showFieldList = ref<any[]>([]);
+const reviewType = 1;
 
 function collapseHandler() {
-  collapse.value = !collapse.value
+  collapse.value = !collapse.value;
 }
 
 const asideWidth = computed(() => {
-  return collapse.value ? 0 : 308
-})
+  return collapse.value ? 0 : 308;
+});
 
 const asideStyle = computed(() => {
   return {
     width: `${asideWidth.value}px`,
-  }
-})
+  };
+});
 
 const collapseIcon = computed(() => {
-  return collapse.value ? 'expand-cir' : 'collapse-cir'
-})
+  return collapse.value ? "expand-cir" : "collapse-cir";
+});
 
-const listHeight = ref(700)
+const listHeight = ref(700);
 
 function computeListHeight() {
-  const listEl = document.querySelector('.work-sheet-list')!
-  const { bottomIncludeBody } = getViewportOffset(listEl)
-  const height = bottomIncludeBody
-  listHeight.value = height - 25
+  const listEl = document.querySelector(".work-sheet-list")!;
+  const { bottomIncludeBody } = getViewportOffset(listEl);
+  const height = bottomIncludeBody;
+  listHeight.value = height - 25;
 }
 
 const listStyle = computed(() => {
   return {
     height: `${listHeight.value}px`,
-  }
-})
+  };
+});
 
-useWindowSizeFn(computeListHeight, 280)
+useWindowSizeFn(computeListHeight, 280);
+
+async function getshowFieldList() {
+  showFieldList.value = [];
+  const userStore = useUser();
+  const userInfo = userStore.getUserInfo;
+  let res;
+  res = await getAllfieldList(reviewType); //所有筛选项目
+  const allList = res.data;
+  res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目
+  const useList = res.data;
+  /**
+   * name 标题
+   * id 键值
+   * fix 是否默认
+   * checked 是否选中
+   */
+  if (useList.userFieldFixed) {
+    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,
+        };
+        showFieldList.value.push(item);
+      }
+    });
+  } else {
+    // 若为首次获取 则赋默认值
+    allList.map((v) => {
+      if (v.isrequired == 2) {
+        let item = {
+          name: v.fieldDesc,
+          id: v.name,
+          fix: v.isrequired == 2,
+          checked: true,
+        };
+        showFieldList.value.push(item);
+      }
+    });
+  }
+}
 
 onMounted(() => {
   nextTick(() => {
-    computeListHeight()
-  })
-})
-
-const asideEnter = ref(false)
+    computeListHeight();
+    getshowFieldList();
+  });
+});
+const asideEnter = ref(false);
 
 const showCollapse = computed(() => {
-  return collapse.value ? true : asideEnter.value
-})
+  return collapse.value ? true : asideEnter.value;
+});
 
 function showFilter() {
-  const modal = unref(filterModalRef)! as any
-  modal.showModal()
+  const modal = unref(filterModalRef)! as any;
+  modal.showModal();
 }
 
-watch(() => workStore.immersion, () => {
-  collapse.value = true
-})
+watch(
+  () => workStore.immersion,
+  () => {
+    collapse.value = true;
+  }
+);
 
-const showSearch = ref(false)
+const showSearch = ref(false);
 
 function setShowSearch(value: boolean) {
-  showSearch.value = value
+  showSearch.value = value;
 
-  if (value === false)
-    (packageListRef.value as any).search('')
+  if (value === false) (packageListRef.value as any).search("");
 }
 
 const inputHandler = debounce((word) => {
-  (packageListRef.value as any).search(word)
-}, 500)
+  (packageListRef.value as any).search(word);
+}, 500);
 </script>
 
 <template>
-  <div class="aside" :style="asideStyle" @mouseenter="asideEnter = true" @mouseleave="asideEnter = false">
+  <div
+    class="aside"
+    :style="asideStyle"
+    @mouseenter="asideEnter = true"
+    @mouseleave="asideEnter = false"
+  >
     <div v-show="showCollapse" class="aside-collapse">
       <div class="aside-collapse-btn" @click="collapseHandler">
         <SvgIcon :name="collapseIcon" size="40" />
@@ -95,27 +158,51 @@ const inputHandler = debounce((word) => {
       <div v-show="!showSearch" class="warpper">
         <div class="left">
           <svg-icon name="all-worksheet" size="32" />
-          <span style="margin-left: 8px;">所有工单</span>
+          <span style="margin-left: 8px">所有工单</span>
         </div>
         <div class="right">
           <SvgIcon
-            style="cursor: pointer;margin-left: 10px;" size="18" name="magnifying-1"
+            style="cursor: pointer; margin-left: 10px"
+            size="18"
+            name="magnifying-1"
             @click="setShowSearch(true)"
           />
-          <SvgIcon style="cursor: pointer;margin-left: 10px;" size="18" name="filter" @click="showFilter" />
+          <SvgIcon
+            style="cursor: pointer; margin-left: 10px"
+            size="18"
+            name="filter"
+            @click="showFilter"
+          />
         </div>
       </div>
       <div v-show="showSearch" class="warpper">
-        <n-input style="flex: 1;height: 32px;" placeholder="请输入你需要搜索的内容" @input="inputHandler">
+        <n-input
+          style="flex: 1; height: 32px"
+          placeholder="请输入你需要搜索的内容"
+          @input="inputHandler"
+        >
           <template #suffix>
             <SvgIcon size="14px" name="magnifying-1" />
           </template>
         </n-input>
-        <SvgIcon size="16px" style="margin-left: 6px;cursor: pointer;" name="clear" @click="setShowSearch(false)" />
+        <SvgIcon
+          size="16px"
+          style="margin-left: 6px; cursor: pointer"
+          name="clear"
+          @click="setShowSearch(false)"
+        />
       </div>
     </div>
-    <WorkSheetList ref="packageListRef" class="work-sheet-list" />
-    <CustomFieldModalVue ref="filterModalRef" :review-type="1" />
+    <WorkSheetList
+      ref="packageListRef"
+      class="work-sheet-list"
+      :showFieldList="showFieldList"
+    />
+    <CustomFieldModalVue
+      ref="filterModalRef"
+      :review-type="1"
+      @onOk="getshowFieldList"
+    />
   </div>
 </template>
 
@@ -124,7 +211,7 @@ const inputHandler = debounce((word) => {
   display: flex;
   position: relative;
   flex-direction: column;
-  background: #FFF;
+  background: #fff;
   border: 1px solid rgb(239, 239, 245);
   border-radius: 3px;
   box-sizing: border-box;
diff --git a/src/views/worksheet/aside/ListItem.vue b/src/views/worksheet/aside/ListItem.vue
index 78c4ee6..2cc5351 100644
--- a/src/views/worksheet/aside/ListItem.vue
+++ b/src/views/worksheet/aside/ListItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import type { PackageListItem } from '/#/workorder'
+import { computed } from "vue";
+import type { PackageListItem } from "/#/workorder";
 
-defineOptions({ name: 'ListItem' })
+defineOptions({ name: "ListItem" });
 
 const props = defineProps({
   selected: {
@@ -13,16 +13,41 @@ const props = defineProps({
     type: Object as PropType<PackageListItem>,
     required: true,
   },
-})
+  showFieldList: {
+    type: Array,
+    default: () => [],
+  },
+});
 
+console.log(props.listItem,'listItem')
 const svgName = computed(() => {
-  return props.selected ? 'taskpack-select' : 'taskpack'
-})
+  return props.selected ? "taskpack-select" : "taskpack";
+});
 </script>
 
 <template>
   <div class="list-item" :class="{ 'list-item-selected': selected }">
-    <div class="list-item-header">
+    <div v-for="(item, index) in showFieldList" :key="index">
+      <div class="list-item-header" v-if="item.id == 'packagename'">
+        <div style="display: flex">
+          <SvgIcon :name="svgName" size="28" />
+          <span
+            class="list-item-header-name"
+            :class="{ 'list-item-header-selected': selected }"
+          >
+            {{ listItem.packagename }}
+          </span>
+          <span class="list-item-header-selected"
+            >({{ listItem.pictureno }})</span
+          >
+        </div>
+        <SvgIcon v-show="selected" size="14" name="more-ver" />
+      </div>
+      <ul class="list-item-detail" v-else>
+        {{ item.name }}：{{ listItem[item.id] }}
+      </ul>
+    </div>
+    <!-- <div class="list-item-header">
       <div style="display: flex;">
         <SvgIcon :name="svgName" size="28" />
         <span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
@@ -31,11 +56,11 @@ const svgName = computed(() => {
         <span class="list-item-header-selected">({{ listItem.pictureno }})</span>
       </div>
       <SvgIcon v-show="selected" size="14" name="more-ver" />
-    </div>
-    <ul class="list-item-detail">
+    </div> -->
+    <!-- <ul class="list-item-detail">
       <li>筛选时间：{{ listItem.createTime }}</li>
       <li>执行人：{{ listItem.createBy }}</li>
-    </ul>
+    </ul> -->
   </div>
 </template>
 
@@ -58,7 +83,7 @@ const svgName = computed(() => {
     }
 
     &-selected {
-      color: #507AFD;
+      color: #507afd;
     }
   }
 
@@ -84,7 +109,6 @@ const svgName = computed(() => {
     position: absolute;
     bottom: 0px;
   }
-
 }
 </style>
 ../types
diff --git a/src/views/worksheet/aside/WorkSheetList.vue b/src/views/worksheet/aside/WorkSheetList.vue
index 9717eb0..a755ad0 100644
--- a/src/views/worksheet/aside/WorkSheetList.vue
+++ b/src/views/worksheet/aside/WorkSheetList.vue
@@ -1,99 +1,113 @@
 <script lang="ts" setup>
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { isEmpty } from '@/utils'
-import { useInfiniteScroll } from '@vueuse/core'
-import { reactive, ref, watch } from 'vue'
-import ListItem from './ListItem.vue'
-import type { PackageListItem } from '/#/workorder'
-
-const workStore = useWorkOrder()
-const data = ref<PackageListItem[]>([])
-const activeId = ref('')
-const el = ref<HTMLDivElement | null>(null)
-const keyword = ref('')
-const canloadMore = ref(true)
-
+import { useWorkOrder } from "@/store/modules/workOrder";
+import { isEmpty } from "@/utils";
+import { useInfiniteScroll } from "@vueuse/core";
+import { reactive, ref, watch } from "vue";
+import ListItem from "./ListItem.vue";
+import type { PackageListItem } from "/#/workorder";
+
+const workStore = useWorkOrder();
+const data = ref<PackageListItem[]>([]);
+const activeId = ref("");
+const el = ref<HTMLDivElement | null>(null);
+const keyword = ref("");
+const canloadMore = ref(true);
+
+defineProps({
+  showFieldList: {
+    type: Array,
+    default: () => [],
+  },
+});
 const pagination = reactive({
   pageNo: 0,
   pageSize: 10,
-})
+});
 
 function selectHandler(id: string, index: number) {
-  workStore.setActive(index)
+  workStore.setActive(index);
 }
 
 const { isLoading } = useInfiniteScroll(
   el as any,
   () => {
-    loadMore()
+    loadMore();
   },
-  { distance: 10, interval: 800, canLoadMore: () => {
-    // console.log('canloadmore excuted!')
-    return canloadMore.value
-  } },
-)
+  {
+    distance: 10,
+    interval: 800,
+    canLoadMore: () => {
+      // console.log('canloadmore excuted!')
+      return canloadMore.value;
+    },
+  }
+);
 
 async function loadMore() {
-  if (isLoading.value || el.value == null)
-    return
+  if (isLoading.value || el.value == null) return;
 
   // console.log('loadmore')
-  const more = await fetchList()
-  data.value.push(...more)
+  const more = await fetchList();
+  data.value.push(...more);
 }
 
 async function fetchList() {
   try {
-    pagination.pageNo += 1
-    const result = await workStore.fetchOrderList(pagination, keyword.value)
-    const { data, pageCount } = result
-    canloadMore.value = pageCount >= pagination.pageNo && pageCount !== 0
-    return data || []
-  }
-  catch (error) {
-    canloadMore.value = false
-    return []
+    pagination.pageNo += 1;
+    const result = await workStore.fetchOrderList(pagination, keyword.value);
+    const { data, pageCount } = result;
+    canloadMore.value = pageCount >= pagination.pageNo && pageCount !== 0;
+    return data || [];
+  } catch (error) {
+    canloadMore.value = false;
+    return [];
   }
 }
 
-watch(() => workStore.activeId, (newVal) => {
-  if (isEmpty(newVal))
-    return
+watch(
+  () => workStore.activeId,
+  (newVal) => {
+    if (isEmpty(newVal)) return;
 
-  activeId.value = newVal
-})
+    activeId.value = newVal;
+  }
+);
 
 function reset() {
-  pagination.pageNo = 0
-  pagination.pageSize = 10
-  canloadMore.value = true
-  data.value.length = 0
+  pagination.pageNo = 0;
+  pagination.pageSize = 10;
+  canloadMore.value = true;
+  data.value.length = 0;
 
-  workStore.reset()
+  workStore.reset();
 }
 
 async function search(word: string) {
-  keyword.value = word
-  reset()
+  keyword.value = word;
+  reset();
   useInfiniteScroll(
     el as any,
     () => {
-      loadMore()
+      loadMore();
     },
-    { distance: 10, canLoadMore: () => canloadMore.value },
-  )
+    { distance: 10, canLoadMore: () => canloadMore.value }
+  );
 }
 
 defineExpose({
   search,
-})
+});
 </script>
 
 <template>
   <n-spin :show="isLoading">
     <div ref="el" class="list">
       <ListItem
-        v-for="(item, index) in data" :key="item.id" :selected="activeId === item.id" :list-item="item"
+        v-for="(item, index) in data"
+        :key="item.id"
+        :selected="activeId === item.id"
+        :list-item="item"
+        :showFieldList="showFieldList"
         @click="selectHandler(item.id, index)"
       />
     </div>
diff --git a/src/views/worksheet/modal/CustomFieldModal copy.vue b/src/views/worksheet/modal/CustomFieldModal copy.vue
new file mode 100644
index 0000000..4a5ba29
--- /dev/null
+++ b/src/views/worksheet/modal/CustomFieldModal copy.vue	
@@ -0,0 +1,486 @@
+// 原页面备份 逻辑无问题后可删除
+
+
+<script lang="ts" setup>
+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 onList = ref<any[]>([]);
+
+const fixList = ref<any[]>([]);
+
+const allCount = computed(() => {
+  return `全部筛选(共${offList.value.length - 1}个)`;
+});
+
+const selectCount = computed(() => {
+  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());
+
+  for (const key of keys) {
+    const name = workPackageMap[key]?.label;
+    const isDefault = workPackageMap[key]?.isDefault;
+
+    // 系统配置为Y且不是默认配置
+    if (!isDefault) {
+      hideList.push({
+        id: key,
+        name: name || "未配置",
+        fix: isDefault,
+        checked: workPackageMap[key].isDefault,
+      });
+    }
+  }
+
+  showList = showKeys.reduce((acc, key) => {
+    const config = {
+      id: key,
+      name: workPackageMap[key].label || "未配置",
+      fix: workPackageMap[key].isDefault,
+    };
+    return [...acc, config];
+  }, []);
+
+  const fixedList = generateDefaultList();
+
+  hideList.unshift(...fixedList);
+  showList.unshift(...fixedList);
+
+  onList.value = showList;
+  offList.value = hideList;
+  return { showList, hideList };
+}
+
+function generateDefaultList() {
+  return Object.keys(workPackageMap).reduce((acc, key) => {
+    const { label, isDefault } = workPackageMap[key];
+
+    if (isDefault) {
+      const config = {
+        id: key,
+        name: label || "未配置",
+        fix: true,
+        checked: true,
+      };
+      return [...acc, config];
+    } else {
+      return acc;
+    }
+  }, []);
+}
+
+const show = ref(false);
+const checkAll = ref(false);
+
+function showModal() {
+  show.value = true;
+}
+
+function closeModal() {
+  show.value = false;
+}
+
+async function handleSumbit(e: MouseEvent) {
+  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();
+
+const selectIds = ref<string[]>([]);
+
+function onCheckAllChange(value) {
+  const ids: string[] = [];
+
+  for (const item of offList.value) {
+    if (!item.fix) {
+      item.checked = value;
+      ids.push(item.id);
+    }
+  }
+
+  selectIds.value = value ? ids : [];
+}
+
+function onCheckChange(checked: any, item: any) {
+  const index = selectIds.value.indexOf(item.id);
+
+  item.checked = checked;
+
+  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;
+  });
+});
+
+watch(
+  () => selectIds.value.length,
+  (newVal, oldVal) => {
+    if (newVal === oldVal) return;
+
+    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 (action === "add") {
+      for (const item of offList.value) {
+        if (!item.fix && diff.includes(item.id)) {
+          onList.value.push({
+            id: item.id,
+            name: item.name || "未配置",
+            fix: item.fix || false,
+          });
+        }
+      }
+    } 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);
+          index--;
+        }
+      }
+    }
+  }
+);
+
+watch(
+  () => showIds.value.length,
+  (newVal, oldVal) => {
+    if (newVal === oldVal) return;
+
+    const diff = difference(selectIds.value, showIds.value);
+
+    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);
+      }
+    }
+  }
+);
+
+function clearDragSource() {
+  onList.value = onList.value.filter((item) => {
+    return item.fix === true;
+  });
+}
+
+function removeHandler(id: string) {
+  const index = onList.value.findIndex((item) => {
+    return item.id === id;
+  });
+
+  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;
+
+  /**
+   * name 标题
+   * id 键值
+   * fix 是否默认
+   * checked 是否选中
+   */
+  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,
+      };
+      onList.value.push(item);
+    }
+  });
+  if (!onList.value.length) {
+    onList.value.push(...fixList.value);
+  }
+});
+</script>
+
+<template>
+  <n-modal v-model:show="show" transform-origin="center">
+    <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">
+          <div class="wrapper-info">
+            <span :style="{ 'margin-left': '18px' }">字段信息</span>
+          </div>
+        </div>
+        <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"
+              :bordered="false"
+            >
+              <div>
+                <n-input placeholder="搜索关键字">
+                  <template #suffix>
+                    <SvgIcon size="14px" name="magnifying-1" />
+                  </template>
+                </n-input>
+                <div class="draggable-ul">
+                  <div class="draggable-li">
+                    <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"
+                    >
+                      <n-checkbox
+                        v-model:checked="item.checked"
+                        :label="item.name"
+                        :disabled="item.fix"
+                        @update:checked="onCheckChange($event, item)"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </NCard>
+          </n-grid-item>
+          <n-grid-item>
+            <NCard
+              :title="selectCount"
+              class="dragcardStyle"
+              :segmented="{ content: true, footer: true }"
+              size="small"
+              :bordered="false"
+            >
+              <template #header-extra>
+                <span class="textbtnStyle" @click="clearDragSource">清空</span>
+              </template>
+              <div>
+                <n-input placeholder="搜索关键字">
+                  <template #suffix>
+                    <SvgIcon size="14px" name="magnifying-1" />
+                  </template>
+                </n-input>
+                <VueDraggable
+                  v-model="onList"
+                  class="draggable-ul"
+                  :animation="150"
+                  group="shared"
+                >
+                  <div
+                    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)"
+                    />
+                  </div>
+                </VueDraggable>
+              </div>
+            </NCard>
+          </n-grid-item>
+        </n-grid>
+      </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>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="less" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+
+  &-title {
+    font-weight: bold;
+    font-size: 16px;
+  }
+
+  &-bar {
+    background-color: #e8e8e8;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-info {
+    font-weight: bold;
+    position: relative;
+
+    &:before {
+      background-color: #1980ff;
+      content: "";
+      width: 5px;
+      border-radius: 2px;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+    }
+  }
+}
+
+.dragcardStyle {
+  --n-padding-bottom: 0px !important;
+  --n-padding-left: 0px !important;
+}
+
+.cardstyle {
+  width: 820px;
+  --n-padding-bottom: 20px;
+  --n-padding-left: 24px;
+}
+
+.textbtnStyle {
+  cursor: pointer;
+  color: #1980ff;
+}
+
+.draggable-ul {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #cad2dd;
+  border-top: 0px;
+  border-radius: 2px;
+  display: block;
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .draggable-li {
+    padding: 10px 16px;
+    color: #333;
+  }
+
+  .draggable-item {
+    padding: 10px 16px;
+    color: #333;
+    display: flex;
+    align-items: center;
+  }
+
+  .disable-check {
+    color: gainsboro;
+  }
+}
+
+::v-deep(
+    .n-card.n-card--content-segmented > .n-card__content:not(:first-child)
+  ) {
+  border: 0px;
+}
+
+::v-deep(.n-card > .n-card-header) {
+  --n-padding-top: 0px;
+  --n-padding-bottom: 12px;
+}
+</style>
diff --git a/src/views/worksheet/modal/CustomFieldModal.vue b/src/views/worksheet/modal/CustomFieldModal.vue
index 6f9af0b..bd8ad51 100644
--- a/src/views/worksheet/modal/CustomFieldModal.vue
+++ b/src/views/worksheet/modal/CustomFieldModal.vue
@@ -20,7 +20,7 @@ const emit = defineEmits(["onOk"]);
 const offList = ref<any[]>([]);
 // 右侧显示列表
 const onList = ref<any[]>([]);
-
+// 固定默认列表
 const fixList = ref<any[]>([]);
 
 const allCount = computed(() => {
@@ -105,6 +105,9 @@ async function handleSumbit(e: MouseEvent) {
   const userStore = useUser();
   const userInfo = userStore.getUserInfo;
   let userField = "";
+  fixList.value.map((v) => {
+    userField += `${v.id},`;
+  });
   onList.value.map((v) => {
     userField += `${v.id},`;
   });
@@ -213,11 +216,13 @@ function clearDragSource() {
 }
 
 function removeHandler(id: string) {
-  const index = onList.value.findIndex((item) => {
+  let index = onList.value.findIndex((item) => {
     return item.id === id;
   });
-
   if (index !== -1) onList.value.splice(index, 1);
+
+  index = offList.value.findIndex(v=>v.id==id);
+  offList.value[index].checked = false;
 }
 
 onMounted(async () => {
@@ -228,7 +233,6 @@ onMounted(async () => {
   const allList = res.data;
   res = await getfieldList(props.reviewType, userInfo.id); //当前用户选择的项目
   const useList = res.data;
-
   /**
    * name 标题
    * id 键值
@@ -237,6 +241,7 @@ onMounted(async () => {
    */
   const userFieldFixed = useList.userFieldFixed?.split(",");
   const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
+
   allList.map((v) => {
     let item = {
       name: v.fieldDesc,
@@ -244,8 +249,8 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(userFieldFixed.find((v2) => v2 == v.name)) ||
-        Boolean(userFieldUnFixed.find((v2) => v2 == v.name)),
+        Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
+        Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
     };
     if (item.fix) {
       fixList.value.push(item);
@@ -263,12 +268,14 @@ onMounted(async () => {
         fix: item.isrequired == 2,
         checked: true,
       };
-      onList.value.push(item);
+      selectIds.value.push(item.id);
+      if (!item.fix) {
+        onList.value.push(item);
+      }
     }
   });
-  if (!onList.value.length) {
-    onList.value.push(...fixList.value);
-  }
+  console.log(offList.value,'offList.value');
+  console.log(useList, 'useList');
 });
 </script>
 
@@ -348,6 +355,16 @@ onMounted(async () => {
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
                 </n-input>
+                <div class="draggable-ul">
+                  <div
+                    v-for="item in fixList"
+                    :key="item.id"
+                    :class="{ fix: item.fix }"
+                    class="cursor-move draggable-item"
+                  >
+                    <span class="ml-2">{{ item.name }}</span>
+                  </div>
+                </div>
                 <VueDraggable
                   v-model="onList"
                   class="draggable-ul"