feat: 任务审批自定义列表完成

src/views/task/aside/Aside.vue

@@ -1,63 +1,124 @@
 <script lang="ts" setup>
-import { useTaskStore } from '@/store/modules/task';
+import { useTaskStore } from "@/store/modules/task";
-import { debounce } from 'lodash-es';
+import { debounce } from "lodash-es";
-import { computed, ref, unref, watch } from 'vue';
+import { computed, onMounted, ref, unref, watch } from "vue";
-import CustomFieldModal from '../modal/CustomFieldModal.vue';
+import CustomFieldModal from "../modal/CustomFieldModal.vue";
 
+import { useUser } from "@/store/modules/user";
+import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
 
-import TaskList from './TaskList.vue';
+import TaskList from "./TaskList.vue";
 
-const CustomFieldModalRef = ref(null)
+const CustomFieldModalRef = ref(null);
-const collapse = ref(false)
+const collapse = ref(false);
-const taskStore = useTaskStore()
+const taskStore = useTaskStore();
-const taskListRef = ref<HTMLDivElement | null>(null)
+const taskListRef = ref<HTMLDivElement | null>(null);
+// 展示字段
+const showFieldList = ref<any[]>([]);
 
 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 asideEnter = ref(false)
+const asideEnter = ref(false);
 
 const showCollapse = computed(() => {
-  return collapse.value ? true : asideEnter.value
+  return collapse.value ? true : asideEnter.value;
-})
+});
 
-watch(() => taskStore.immersion, () => {
+watch(
-  collapse.value = true
+  () => taskStore.immersion,
-})
+  () => {
+    collapse.value = true;
+  }
+);
 
 function showFilter() {
-  const modal = unref(CustomFieldModalRef)! as any
+  const modal = unref(CustomFieldModalRef)! as any;
-  modal.showModal()
+  modal.showModal();
 }
 
-const showSearch = ref(false)
+const showSearch = ref(false);
 
 function setShowSearch(value: boolean) {
-  showSearch.value = value
+  showSearch.value = value;
 }
 
 const inputHandler = debounce((word) => {
-  (taskListRef.value as any).search(word)
+  (taskListRef.value as any).search(word);
-}, 500)
+}, 500);
+
+const reviewType = 2;
+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(() => {
+  getshowFieldList();
+});
 </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" />
@@ -67,27 +128,52 @@ 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>
-    <TaskList ref="taskListRef" style="height: calc(100vh - 146px);" class="work-sheet-list" />
+    <TaskList
-    <CustomFieldModal ref="CustomFieldModalRef" :reviewType="2" />
+      ref="taskListRef"
+      :showFieldList="showFieldList"
+      style="height: calc(100vh - 146px)"
+      class="work-sheet-list"
+    />
+    <CustomFieldModal
+      ref="CustomFieldModalRef"
+      :reviewType="reviewType"
+      @onOk="getshowFieldList"
+    />
   </div>
 </template>
 
@@ -96,7 +182,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;
@@ -139,7 +225,7 @@ const inputHandler = debounce((word) => {
     background-color: #e8e8e8;
   }
 
-  &-collapse{
+  &-collapse {
     width: 2px;
     height: 100%;
     background: #507afd;

src/views/task/aside/ListItem.vue

@@ -13,16 +13,58 @@ const props = defineProps({
     type: Object as PropType<any>,
     required: true,
   },
+  showFieldList: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const svgName = computed(() => {
   return props.selected ? "task-select" : "task";
 });
+
+
 </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 v-if="item.id == 'fromtaskname'" 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 }"
+          >
+            任务ID:{{ listItem.fromtaskname }}
+          </span>
+        </div>
+        <SvgIcon v-show="selected" size="14" name="more-ver" />
+      </div>
+      <ul class="list-item-detail" v-else>
+        <li v-if="item.id == 'statshisText'">
+          审批状态：<span
+          class="list-item-status"
+          :class="
+            listItem.statshisText == '通过'
+              ? 'list-item-success'
+              : listItem.statshisText == '不通过'
+              ? 'list-item-error'
+              : 'list-item-watting'
+          "
+          >{{ listItem.statshisText }}</span
+        >
+        </li>
+        <li v-else-if="item.id == 'createdate'">
+        提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
+      </li>
+      <li v-else>
+        {{ item.name }}：{{ listItem[item.id] }}
+      </li>
+      </ul>
+    </div>
+
+    <!-- <div class="list-item-header">
       <div style="display: flex">
         <SvgIcon :name="svgName" size="28" />
         <span
@@ -33,8 +75,8 @@ const svgName = computed(() => {
         </span>
       </div>
       <SvgIcon v-show="selected" size="14" name="more-ver" />
-    </div>
+    </div> -->
-    <ul class="list-item-detail">
+    <!-- <ul class="list-item-detail">
       <li>
         审批状态：<span
           class="list-item-status"
@@ -53,7 +95,7 @@ const svgName = computed(() => {
         提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
       </li>
       <li>提报人：{{ listItem.fromUserName }}</li>
-    </ul>
+    </ul> -->
     <div class="list-item-divider" />
   </div>
 </template>

src/views/task/aside/TaskList.vue

@@ -1,102 +1,115 @@
 <script lang="ts" setup>
-import { useInfiniteScroll } from '@vueuse/core'
+import { useInfiniteScroll } from "@vueuse/core";
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { onMounted, onUnmounted, reactive, ref, watch, defineProps } from "vue";
-import ListItem from './ListItem.vue'
+import ListItem from "./ListItem.vue";
-import emitter from '@/utils/mitt'
+import emitter from "@/utils/mitt";
-import { useTaskStore } from '@/store/modules/task'
+import { useTaskStore } from "@/store/modules/task";
-
+
-const taskStore = useTaskStore()
+const taskStore = useTaskStore();
-const data = ref<any[]>([])
+const data = ref<any[]>([]);
-const activeId = ref('')
+const activeId = ref("");
-const el = ref<HTMLDivElement | null>(null)
+const el = ref<HTMLDivElement | null>(null);
-const keyword = ref('')
+const keyword = ref("");
-const canloadMore = ref(true)
+const canloadMore = ref(true);
+
+const props = defineProps({
+  showFieldList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
 
 const pagination = reactive({
   pageNo: 0,
   pageSize: 100,
-})
+});
 
 function selectHandler(id: string, index: number) {
-  taskStore.setActive(index)
+  taskStore.setActive(index);
 }
 
 const { isLoading } = useInfiniteScroll(
   el as any,
   () => {
-    loadMore()
+    loadMore();
   },
-  { distance: 10, interval: 1500, canLoadMore: () => canloadMore.value },
+  { distance: 10, interval: 1500, canLoadMore: () => canloadMore.value }
-)
+);
 
 async function loadMore() {
-  if (isLoading.value || el.value == null)
+  if (isLoading.value || el.value == null) return;
-    return
+  const more = await fetchList();
-  const more = await fetchList()
+  data.value.push(...more);
-  data.value.push(...more)
 }
 
 async function fetchList() {
   try {
-    pagination.pageNo += 1
+    pagination.pageNo += 1;
-    const result = await taskStore.fetchApprovalList(pagination)
+    const result = await taskStore.fetchApprovalList(pagination);
-    const { data, pageCount } = result
+    const { data, pageCount } = result;
-    canloadMore.value = pageCount >= pagination.pageNo
+    canloadMore.value = pageCount >= pagination.pageNo;
-    return data || []
+    return data || [];
-  }
+  } catch (error) {
-  catch (error) {
+    canloadMore.value = false;
-    canloadMore.value = false
+    return [];
-    return []
   }
 }
 
-watch(() => taskStore.activeId, (newVal) => {
+watch(
-  activeId.value = newVal
+  () => taskStore.activeId,
-})
+  (newVal) => {
+    activeId.value = newVal;
+  }
+);
 
 function reset() {
-  pagination.pageNo = 0
+  pagination.pageNo = 0;
-  pagination.pageSize = 100
+  pagination.pageSize = 100;
-  canloadMore.value = true
+  canloadMore.value = true;
-  data.value.length = 0
+  data.value.length = 0;
 
-  taskStore.reset()
+  taskStore.reset();
 }
 
 async function search(word: string) {
-  keyword.value = word
+  keyword.value = word;
-  reset()
+  reset();
   useInfiniteScroll(
     el as any,
     () => {
-      loadMore()
+      loadMore();
     },
-    { distance: 10, canLoadMore: () => canloadMore.value },
+    { distance: 10, canLoadMore: () => canloadMore.value }
-  )
+  );
 }
 
 onMounted(() => {
-  emitter.on('refresh', refreshHandler)
+  emitter.on("refresh", refreshHandler);
-})
+});
 
 onUnmounted(() => {
-  emitter.off('refresh', refreshHandler)
+  emitter.off("refresh", refreshHandler);
-})
+});
 
 async function refreshHandler() {
-  search('')
+  search("");
 }
 
 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"
+        :showFieldList="showFieldList"
+        v-for="(item, index) in data"
+        :key="item.id"
+        :selected="activeId === item.id"
+        :list-item="item"
         @click="selectHandler(item.id, index)"
       />
     </div>

src/views/task/content/Content.vue

@@ -215,7 +215,6 @@ async function getTableData() {
   const fieldList = (res as any)?.data
   res = await getfieldList(reviewType, useInfo.id)
   const userFieldList = (res as any)?.data.userFieldFixed
-  console.log(userFieldList, 'userFieldList')
   fieldList.map((v) => {
     if (userFieldList.includes(v.name)) {
       const item = {

src/views/task/modal/CustomFieldModal.vue

@@ -20,6 +20,8 @@ const emit = defineEmits(["onOk"]);
 const offList = ref<any[]>([]);
 // 右侧显示列表
 const onList = ref<any[]>([]);
+// 固定默认列表
+const fixList = ref<any[]>([]);
 
 const allCount = computed(() => {
   return `全部筛选(共${offList.value.length - 1}个)`;
@@ -103,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},`;
   });
@@ -211,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 () => {
@@ -226,17 +233,15 @@ onMounted(async () => {
   const allList = res.data;
   res = await getfieldList(props.reviewType, userInfo.id); //当前用户选择的项目
   const useList = res.data;
-  console.log(allList, "getAllfieldList", props.reviewType);
-  console.log(useList, "getfieldList", props.reviewType);
-
   /**
    * name 标题
    * id 键值
    * fix 是否默认
    * checked 是否选中
    */
+  const userFieldFixed = useList.userFieldFixed?.split(",");
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
 
-  let fixList = [];
   allList.map((v) => {
     let item = {
       name: v.fieldDesc,
@@ -244,16 +249,16 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.indexOf(v.name) > -1) ||
+        Boolean(userFieldFixed.find(v2=>v2==v.name)) ||
-        Boolean(useList.userFieldUnFixed?.indexOf(v.name) > -1),
+        Boolean(userFieldUnFixed.find(v2=>v2==v.name))
     };
     if (item.fix) {
-      fixList.push(item);
+      fixList.value.push(item);
     } else {
       offList.value.push(item);
     }
   });
-  offList.value.unshift(...fixList);
+  offList.value.unshift(...fixList.value);
   useList.userFieldFixed?.split(",").map((v) => {
     let item = allList.find((v2) => v2.name == v);
     if (item) {
@@ -263,9 +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);
+      }
     }
   });
+  console.log(offList.value,'offList.value');
+  console.log(useList, 'useList');
 });
 </script>
 
@@ -345,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"

src/views/worksheet/modal/CustomFieldModal.vue

@@ -21,6 +21,8 @@ const offList = ref<any[]>([]);
 // 右侧显示列表
 const onList = ref<any[]>([]);
 
+const fixList = ref<any[]>([]);
+
 const allCount = computed(() => {
   return `全部筛选(共${offList.value.length - 1}个)`;
 });
@@ -233,8 +235,8 @@ onMounted(async () => {
    * fix 是否默认
    * checked 是否选中
    */
-
+  const userFieldFixed = useList.userFieldFixed?.split(",");
-  let fixList = [];
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
   allList.map((v) => {
     let item = {
       name: v.fieldDesc,
@@ -242,16 +244,16 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(useList.userFieldFixed?.indexOf(v.name) > -1) ||
+        Boolean(userFieldFixed.find((v2) => v2 == v.name)) ||
-        Boolean(useList.userFieldUnFixed?.indexOf(v.name) > -1),
+        Boolean(userFieldUnFixed.find((v2) => v2 == v.name)),
     };
     if (item.fix) {
-      fixList.push(item);
+      fixList.value.push(item);
     } else {
       offList.value.push(item);
     }
   });
-  offList.value.unshift(...fixList);
+  offList.value.unshift(...fixList.value);
   useList.userFieldFixed?.split(",").map((v) => {
     let item = allList.find((v2) => v2.name == v);
     if (item) {
@@ -264,6 +266,9 @@ onMounted(async () => {
       onList.value.push(item);
     }
   });
+  if (!onList.value.length) {
+    onList.value.push(...fixList.value);
+  }
 });
 </script>