feat: 终审列表数据筛选。图审弹窗bug修复

src/store/modules/workOrder.ts

@@ -11,7 +11,9 @@ export const useWorkOrderStore = defineStore({
     activeId: '',
     packageList: [],
     immersion: false,
-    name: ''
+    name: '',
+    dataId: '',
+    approvalList: [],
   }),
   getters: {
     getActiveId: (state: OrderState) => state.activeId,
@@ -22,10 +24,11 @@ export const useWorkOrderStore = defineStore({
     setOrderList(list: PackageListItem[]) {
       this.packageList = list
     },
-    setActive(index: number, orderId?: string) {
+    setActive(index: number, orderId?: string, dataId?: string) {
       this.currentIndex = index
       const order = this.packageList[index]
       this.activeId = orderId || order?.checkDuplicateId
+      this.dataId = dataId || order.id;
     },
     forward() {
       const len = this.packageList.length
@@ -46,7 +49,7 @@ export const useWorkOrderStore = defineStore({
     },
     async fetchOrderList(pagination, keyword) {
       const res = await getPackageList(pagination, keyword)
-      if (res.data&&res.data.length > 0) {
+      if (res.data && res.data.length > 0) {
         this.packageList.push(...res.data)
         if (!this.activeId)
           this.setActive(0)

src/views/final/aside/Aside.vue

@@ -1,162 +1,178 @@
 <script lang="ts" setup>
-import { computed, inject, nextTick, onBeforeMount, onMounted, reactive, ref, shallowRef, unref, watch } from 'vue'
-import { CustomFilterModalVue, FilterModal, NewFilterModal } from '@/views/final/comp'
-import Search from '@/views/home/aside/comp/Search.vue'
-import AdvanceFilter from '@/views/home/aside/comp/AdvanceFilter.vue'
-import { getViewportOffset } from '@/utils/domUtils'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { useFinal } from '@/store/modules/final'
-import type { Filter } from '/#/home'
-import type { AsideEntity } from '@/config/aside'
-import { asideMap } from '@/config/final'
-import type { AsideConfig } from '/#/api'
-import emitter from '@/utils/mitt'
-
-const finalStore = useFinal()
-
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+  shallowRef,
+  unref,
+  watch,
+} from "vue";
+import { CustomFilterModalVue, FilterModal, NewFilterModal } from "@/views/final/comp";
+import Search from "@/views/home/aside/comp/Search.vue";
+import AdvanceFilter from "@/views/home/aside/comp/AdvanceFilter.vue";
+import { getViewportOffset } from "@/utils/domUtils";
+import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
+import { useFinal } from "@/store/modules/final";
+import type { Filter } from "/#/home";
+import type { AsideEntity } from "@/config/aside";
+import { asideMap } from "@/config/final";
+import type { AsideConfig } from "/#/api";
+import emitter from "@/utils/mitt";
+
+const emit = defineEmits(["inputChange"]);
+const finalStore = useFinal();
 // 所有左侧模块的值
-const asideValue: Record<keyof typeof asideMap, any> = reactive({})
+const asideValue: Record<keyof typeof asideMap, any> = reactive({});
 // 左侧某个模块是否显示: 个人配置
-const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({})
+const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({});
 // 当前显示的模块，按照数组顺序显示
-const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
+const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
 
 Object.keys(asideMap).forEach((key) => {
-  const { defaultValue, inFilterList } = asideMap[key]
-  if (inFilterList !== false)
-    asideValue[key] = defaultValue
-})
+  const { defaultValue, inFilterList } = asideMap[key];
+  if (inFilterList !== false) asideValue[key] = defaultValue;
+});
 
-const filterModalRef = ref(null)
-const newFilterModalRef = ref(null)
-const customModalRef = ref(null)
+const filterModalRef = ref(null);
+const newFilterModalRef = ref(null);
+const customModalRef = ref(null);
 
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any
-  modal.showModal()
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
 }
-const mousetrap = inject('mousetrap') as any
-mousetrap.bind('[', collapseHandler)
+const mousetrap = inject("mousetrap") as any;
+mousetrap.bind("[", collapseHandler);
 
 onMounted(() => {
   nextTick(() => {
-    computeSlideHeight()
-  })
-})
+    computeSlideHeight();
+  });
+});
 
-const collapse = ref(false)
+const collapse = ref(false);
 
 function collapseHandler() {
-  collapse.value = !collapse.value
+  collapse.value = !collapse.value;
 }
 
 const asideWidth = computed(() => {
-  return collapse.value ? 0 : 308
-})
+  return collapse.value ? 0 : 308;
+});
 
-const asideHeight = ref(500)
+const asideHeight = ref(500);
 const asideStyle = computed(() => {
   return {
     width: `${asideWidth.value}px`,
     height: `${asideHeight.value}px`,
-  }
-})
+  };
+});
 
 const collapseIcon = computed(() => {
-  return collapse.value ? 'expand-cir' : 'collapse-cir'
-})
+  return collapse.value ? "expand-cir" : "collapse-cir";
+});
 
 function computeSlideHeight() {
-  const headEl = document.querySelector('.aside-header')!
-  const { bottomIncludeBody } = getViewportOffset(headEl)
-  const height = bottomIncludeBody
-  asideHeight.value = height - 24
+  const headEl = document.querySelector(".aside-header")!;
+  const { bottomIncludeBody } = getViewportOffset(headEl);
+  const height = bottomIncludeBody;
+  asideHeight.value = height - 24;
 }
 
-useWindowSizeFn(computeSlideHeight, 280)
+useWindowSizeFn(computeSlideHeight, 280);
 
 onBeforeMount(async () => {
-  finalStore.fetchCustomConfig()
-})
+  finalStore.fetchCustomConfig();
+});
 
 finalStore.$subscribe(() => {
-  const customConfig = finalStore.getCustomConfig
+  const customConfig = finalStore.getCustomConfig;
 
-  if (customConfig === null)
-    return
+  if (customConfig === null) return;
 
-  const showKeys: string[] = [...customConfig]
-  const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)
-  showKeys.unshift(...defaultKeys)
+  const showKeys: string[] = [...customConfig];
+  const defaultKeys = Object.keys(asideMap).filter(
+    (key) => asideMap[key].isDefaultFilter
+  );
+  showKeys.unshift(...defaultKeys);
 
   Object.keys(asideMap).forEach((key) => {
     // 设置显示的或者默认显示的
-    if (key.startsWith('iz'))
-      asideVisible[key] = asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter)
-  })
+    if (key.startsWith("iz"))
+      asideVisible[key] =
+        asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter);
+  });
 
   const items = showKeys.reduce((acc, key) => {
     if (asideMap[key]) {
       const config = {
         key,
         config: asideMap[key],
-      }
-      return [...acc, config]
-    }
-    else {
-      return acc
+      };
+      return [...acc, config];
+    } else {
+      return acc;
     }
-  }, [])
+  }, []);
 
-  showItems.value = items
-})
+  showItems.value = items;
+});
 
 watch(asideVisible, (newVal) => {
   Object.keys(asideValue).forEach((key) => {
-    if (newVal[key] === false)
-      asideValue[key] = asideMap[key].defaultValue
-  })
-})
+    if (newVal[key] === false) asideValue[key] = asideMap[key].defaultValue;
+  });
+});
 
-const asideEnter = ref(false)
+const asideEnter = ref(false);
 
 const showCollapse = computed(() => {
-  return collapse.value ? true : asideEnter.value
-})
+  return collapse.value ? true : asideEnter.value;
+});
 
-const showSearch = ref(false)
+const showSearch = ref(false);
 
 function setShowSearch(value: boolean) {
-  showSearch.value = value
+  showSearch.value = value;
 }
 
 // 滚动容器，让key对应模块处于可视区域
 function scrollHandler(key: string) {
-  const element = document.querySelector(`#${key}`)
-  element?.scrollIntoView(true)
+  const element = document.querySelector(`#${key}`);
+  element?.scrollIntoView(true);
 }
 
 function filterHandler(searchId: string) {
-  emitter.emit('filter-final', searchId)
+  emitter.emit("filter-final", searchId);
 }
 
 function editFilter(filter: any) {
-  const modal = unref(newFilterModalRef)! as any
-  modal.showModal()
-  modal.edit(filter)
+  const modal = unref(newFilterModalRef)! as any;
+  modal.showModal();
+  modal.edit(filter);
 }
 
 watch(asideValue, (newVal) => {
-  finalStore.setAsideValue(newVal)
-})
+  finalStore.setAsideValue(newVal);
+});
 
-const inputChange = (keyword)=>{
-  
-}
+const inputChange = (keyword) => {
+  console.log("Search Component", keyword);
+  emit("inputChange", keyword);
+};
 </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" />
@@ -165,23 +181,40 @@ const inputChange = (keyword)=>{
     <n-scrollbar trigger="none">
       <div class="aside-header">
         <!-- 搜索跳转模块 -->
-        <Search v-show="showSearch" @select="scrollHandler" @close="setShowSearch(false)" @inputChange="inputChange" />
+        <Search
+          v-show="showSearch"
+          @select="scrollHandler"
+          @close="setShowSearch(false)"
+          @inputChange="inputChange"
+        />
         <!-- 高级筛选 -->
         <AdvanceFilter
-          v-show="!showSearch" :type="1" @select="filterHandler" @update:search="setShowSearch(true)"
-          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
+          v-show="!showSearch"
+          :type="1"
+          @select="filterHandler"
+          @update:search="setShowSearch(true)"
+          @show-custom="showModal(customModalRef)"
+          @show-filter="showModal(filterModalRef)"
         />
       </div>
 
       <component
-        :is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="index"
-        v-model:value="asideValue[item.key]" :label="item.config.label"
+        :is="item.config.component"
+        v-for="(item, index) in showItems"
+        :id="item.key"
+        :key="index"
+        v-model:value="asideValue[item.key]"
+        :label="item.config.label"
       />
 
       <!-- 筛选 -->
       <CustomFilterModalVue ref="customModalRef" />
       <!-- 过滤列表 -->
-      <FilterModal ref="filterModalRef" @edit-filter="editFilter" @show-new-filter="showModal(newFilterModalRef)" />
+      <FilterModal
+        ref="filterModalRef"
+        @edit-filter="editFilter"
+        @show-new-filter="showModal(newFilterModalRef)"
+      />
       <!-- 新增过滤 -->
       <NewFilterModal ref="newFilterModalRef" />
     </n-scrollbar>
@@ -193,7 +226,7 @@ const inputChange = (keyword)=>{
   display: flex;
   position: relative;
   flex-direction: column;
-  background: #FFF;
+  background: #fff;
   border: 1px solid #efeff5;
   border-radius: 3px;
   box-sizing: border-box;
@@ -230,11 +263,17 @@ const inputChange = (keyword)=>{
     right: -20px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item.n-collapse-item--right-arrow-placement .n-collapse-item__header .n-collapse-item-arrow) {
+  ::v-deep(.n-collapse
+      .n-collapse-item.n-collapse-item--right-arrow-placement
+      .n-collapse-item__header
+      .n-collapse-item-arrow) {
     margin-left: 8px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-main) {
+  ::v-deep(.n-collapse
+      .n-collapse-item
+      .n-collapse-item__header
+      .n-collapse-item__header-main) {
     font-weight: bold;
     justify-content: space-between;
   }
@@ -247,11 +286,18 @@ const inputChange = (keyword)=>{
     border-top: 0px;
   }
 
-  ::v-deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
+  ::v-deep(.n-collapse
+      .n-collapse-item
+      .n-collapse-item__content-wrapper
+      .n-collapse-item__content-inner) {
     padding-top: 10px;
   }
 
-  ::v-deep(.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar) {
+  ::v-deep(.n-scrollbar
+      > .n-scrollbar-rail.n-scrollbar-rail--vertical
+      > .n-scrollbar-rail__scrollbar, .n-scrollbar
+      + .n-scrollbar-rail.n-scrollbar-rail--vertical
+      > .n-scrollbar-rail__scrollbar) {
     width: 0px;
   }
 }

src/views/final/index.vue

@@ -7,7 +7,7 @@ import ListContent from './content/ListContent.vue'
 const showList = ref(false);
 const contentRef = ref(null);
 const inputChange = (keyword)=>{
-
+  contentRef.value.filterTableData(keyword)
 }
 
 </script>

src/views/worksheet/aside/WorkSheetList.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { deletePackage } from '@/api/home/main'
-import NotPassed from '@/components/NotPassed.vue'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { isEmpty } from '@/utils'
-import { useInfiniteScroll } from '@vueuse/core'
-import { useMessage } from 'naive-ui'
-import { reactive, ref, watch } from 'vue'
-import ApprovalModal from '../modal/ApprovalModal.vue'
-import ListItem from './ListItem.vue'
-import type { PackageListItem } from '/#/workorder'
+import { deletePackage } from "@/api/home/main";
+import NotPassed from "@/components/NotPassed.vue";
+import { useWorkOrder } from "@/store/modules/workOrder";
+import { isEmpty } from "@/utils";
+import { useInfiniteScroll } from "@vueuse/core";
+import { useMessage } from "naive-ui";
+import { reactive, ref, watch } from "vue";
+import ApprovalModal from "../modal/ApprovalModal.vue";
+import ListItem from "./ListItem.vue";
+import type { PackageListItem } from "/#/workorder";
 
 defineProps({
   showFieldList: {
@@ -19,132 +19,126 @@ defineProps({
     type: Array,
     default: () => [],
   },
-})
-const workStore = useWorkOrder()
-const data = ref<PackageListItem[]>([])
-const activeId = ref('')
-const el = ref<HTMLDivElement | null>(null)
-const keyword = ref('')
-const canloadMore = ref(true)
-const isLoading = ref(false)
+});
+const workStore = useWorkOrder();
+const data = ref<PackageListItem[]>([]);
+const activeId = ref("");
+const el = ref<HTMLDivElement | null>(null);
+const keyword = ref("");
+const canloadMore = ref(true);
+const isLoading = ref(false);
 
 const pagination = reactive({
   pageNo: 0,
   pageSize: 10,
-})
+});
 
-const approvalModalRef: any = ref(null)
-const notPassedRef: any = ref(null)
+const approvalModalRef: any = ref(null);
+const notPassedRef: any = ref(null);
 const overTask = ref<any>(null);
 
 function selectHandler(id: string, index: number) {
-  workStore.setActive(index)
+  // console.log('selectHandler',id)
+  workStore.setActive(index);
   // showModal(approvalModalRef, id)
 }
 
 useInfiniteScroll(
   el as any,
   () => {
-    loadMore()
+    loadMore();
   },
   {
     distance: 10,
     interval: 1500,
     canLoadMore: () => canloadMore.value,
-  },
-)
+  }
+);
 
 async function loadMore() {
-  if (isLoading.value || el.value == null)
-    return
-  isLoading.value = true
+  if (isLoading.value || el.value == null) return;
+  isLoading.value = true;
   try {
-    const more = await fetchList()
-    more.forEach(ele=>{
-      ele.search = JSON.parse(ele.search)
+    const more = await fetchList();
+    more.forEach((ele) => {
+      ele.search = JSON.parse(ele.search);
       // ele.search.createTime = ele.search.submit_date_timestamp
-    })
-    data.value.push(...more)
-  }
-  finally {
-    isLoading.value = false
+    });
+    data.value.push(...more);
+  } finally {
+    isLoading.value = false;
   }
 }
 
 async function fetchList() {
   try {
-    pagination.pageNo += 1
-    const result = await workStore.fetchOrderList(pagination, keyword.value)
-    const { data, pageCount } = result
-    if (pageCount !== 0)
-      canloadMore.value = pageCount >= pagination.pageNo
-    else
-      canloadMore.value = false
-
-    return data || []
-  }
-  catch (error) {
-    canloadMore.value = false
-    return []
+    pagination.pageNo += 1;
+    const result = await workStore.fetchOrderList(pagination, keyword.value);
+    const { data, pageCount } = result;
+    if (pageCount !== 0) canloadMore.value = pageCount >= pagination.pageNo;
+    else canloadMore.value = false;
+
+    return data || [];
+  } catch (error) {
+    canloadMore.value = false;
+    return [];
   }
 }
 
 watch(
   () => workStore.activeId,
   (newVal) => {
-    if (isEmpty(newVal))
-      return
+    if (isEmpty(newVal)) return;
     activeId.value = newVal;
-    approvalModalRef.value.showModal(activeId.value)
-    
-  },
-)
+    approvalModalRef.value.showModal(workStore.dataId);
+  }
+);
 
 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();
 }
 
 function notPass(value) {
-  notPassedRef.value.showModal(value)
+  notPassedRef.value.showModal(value);
 }
 
 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 }
+  );
 }
 function overTaskHandelr(item: any) {
-  overTask.value = item
+  overTask.value = item;
 }
 function leaveTaskHandler(event) {
-  if(event?.relatedTarget?.id !=="taskPopconfirmRef"){
+  if (event?.relatedTarget?.id !== "taskPopconfirmRef") {
     overTask.value = null;
   }
 }
-const message = useMessage()
-function dismisClick(packageId:string) {
-  deletePackage({packageId: packageId}).then((res) => {
-    if(res.code==="OK"){
-      message.success("解散任务包成功")
-      reset()
-      loadMore()
+const message = useMessage();
+function dismisClick(packageId: string) {
+  deletePackage({ packageId: packageId }).then((res) => {
+    if (res.code === "OK") {
+      message.success("解散任务包成功");
+      reset();
+      loadMore();
     }
-  })
+  });
 }
 defineExpose({
   search,
-})
+});
 </script>
 
 <template>
@@ -161,7 +155,7 @@ defineExpose({
         :dicts="dicts"
         :mouse-over-task="overTask"
         @click="selectHandler(item.id, index)"
-        @mouseover="overTaskHandelr(item)"  
+        @mouseover="overTaskHandelr(item)"
         @mouseleave="leaveTaskHandler"
         @dismisClick="dismisClick"
       />

src/views/worksheet/modal/ApprovalModal.vue

@@ -3,6 +3,7 @@ import { nextTick, onDeactivated, onMounted, reactive, ref, toRefs } from "vue";
 import { format } from "date-fns";
 import { NButton, NDataTable, useDialog, useMessage } from "naive-ui";
 import { aiApprovaltools, aiApprovaltoolsClearmark, setTF } from "@/api/work/work";
+import { audit } from "@/api/task/task";
 import { getToolsCount } from "@/api/home/main";
 import { storage } from "@/utils/Storage";
 import { CURRENT_USER } from "@/store/mutation-types";
@@ -32,6 +33,7 @@ function showModal(id) {
 }
 
 async function getDetail(id) {
+  console.log('getDetail',id)
   // const userInfo = storage.get(CURRENT_USER);
   // const nodeType = userInfo.nodeType;
   // id = "264626184091111068";
@@ -43,12 +45,13 @@ async function getDetail(id) {
 }
 
 const handleReject = async () => {
-  const res = await setTF({
-    taskchildpictureids: state.detail.taskIdList.join(","),
-    packageid: state.packageid,
-    iztrueorfalse: 0,
-  });
-  console.log(res, "handleReject");
+  const res = await audit()
+  // const res = await setTF({
+  //   taskchildpictureids: state.detail.taskIdList.join(","),
+  //   packageid: state.packageid,
+  //   iztrueorfalse: 0,
+  // });
+  // console.log(res, "handleReject");
 };
 
 async function clearMark() {
@@ -86,13 +89,6 @@ async function viewRepeat(e: MouseEvent) {
   closeModal();
 }
 
-async function getShowStatus() {
-  const res = await getToolsCount();
-  if (res.code == "OK") {
-    show.value = true;
-  }
-}
-
 const initRem = () => {
   const designWidth = 1440;
   const rempPx = 16;
@@ -100,7 +96,6 @@ const initRem = () => {
   document.documentElement.style.fontSize = scale * rempPx + "px";
 };
 onMounted(() => {
-  getShowStatus();
   nextTick(() => {
     initRem();
   });
@@ -126,7 +121,7 @@ defineExpose({
       <div class="wrapper-hearder">
         <div class="wrapper-title">智能AI审批工具</div>
         <div class="wrapper-mark">
-          {{ detail.tenantUserName || '部门信息' }}
+          {{ detail.tenantUserName || "部门信息" }}
         </div>
       </div>
       <div class="wrapper-content">

types/workorder.d.ts

@@ -17,7 +17,8 @@ export interface OrderState {
   currentIndex: number
   packageList: PackageListItem[]
   approvalList: any[]
-  immersion: boolean
+  immersion: boolean,
+  dataId: string
 }
 
 // 任务实体