From c3be5f3ca73657d2101a7f37bc1475adf2974d1c Mon Sep 17 00:00:00 2001
From: elseif <else.switch@gmail.com>
Date: Thu, 14 Mar 2024 08:59:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E4=B8=80=E5=AE=A1?=
 =?UTF-8?q?=E4=BA=8C=E5=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/task/task.ts                 |   7 +-
 src/api/work/work.ts                 |   3 +-
 src/store/modules/task.ts            |   8 +-
 src/views/task/aside/Aside.vue       |  20 +++-
 src/views/task/content/Content.vue   |  45 ++++++--
 src/views/task/content/TaskTable.vue |   2 +-
 src/views/task/modal/BatchModal.vue  | 150 +++++++++++++++++++++------
 7 files changed, 178 insertions(+), 57 deletions(-)

diff --git a/src/api/task/task.ts b/src/api/task/task.ts
index a0056b0..1d711d0 100644
--- a/src/api/task/task.ts
+++ b/src/api/task/task.ts
@@ -1,3 +1,4 @@
+import qs from 'qs'
 import { http } from '@/utils/http/axios'
 import type { ApprovalParam, PageParam } from '/#/api'
 import { ContentTypeEnum } from '@/enums/httpEnum'
@@ -10,7 +11,7 @@ export async function getApprovalList(params: PageParam, assigneeId: string) {
   const res = await http.request({
     url: `/flow/task/listdata`,
     method: 'get',
-    params,
+    params: { ...params, assigneeId },
   })
 
   const { data: { list, totalPage } } = res
@@ -26,9 +27,9 @@ export async function getApprovalList(params: PageParam, assigneeId: string) {
  */
 export async function audit(params: ApprovalParam) {
   return http.request({
-    url: `/flow/task/completeBatchFlow`,
+    url: `/flow/task/completeBatchFlow?`,
     method: 'post',
-    params,
+    params: qs.stringify(params, { indices: false }),
     headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
   })
 }
diff --git a/src/api/work/work.ts b/src/api/work/work.ts
index a787453..5f97baf 100644
--- a/src/api/work/work.ts
+++ b/src/api/work/work.ts
@@ -75,8 +75,9 @@ export async function getTaskDetailPictureList(packageid: string, taskchildpictu
   const list = records.map((item) => {
     return {
       id: item.id,
-      taskid: item.taskId,
+      taskId: item.taskId,
       taskname: item.fromtaskname,
+      assignee: item.assignee,
       pictureid: item.pictureid,
       imgurl: item.ocrPicture.imgurl,
       iztrueorfalse: item.iztrueorfalse,
diff --git a/src/store/modules/task.ts b/src/store/modules/task.ts
index 72d4b8d..9fad4b4 100644
--- a/src/store/modules/task.ts
+++ b/src/store/modules/task.ts
@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import type { TaskState } from '/#/task'
-import { useMessage } from 'naive-ui'
 import { getApprovalList } from '@/api/task/task'
 import { store } from '@/store'
 
@@ -30,18 +29,15 @@ export const useTaskStore = defineStore({
     },
     forward() {
       const len = this.approvalList.length
-      const message = useMessage()
 
       if (this.currentIndex === len - 1)
-        message.error('已经到达最后一个')
+        return
 
       this.setActive(++this.currentIndex)
     },
     back() {
-      const message = useMessage()
-
       if (this.currentIndex === 0)
-        message.error('已经到达第一个')
+        return
 
       this.setActive(--this.currentIndex)
     },
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index e64fac0..64e253e 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed, onBeforeMount, reactive, ref } from 'vue'
+import { computed, onBeforeMount, onMounted, onUnmounted, reactive, ref } from 'vue'
 import TaskList from './TaskList.vue'
 import type { TaskListItem } from '/#/task'
 import { useTaskStore } from '@/store/modules/task'
 import { useUser } from '@/store/modules/user'
+import emitter from '@/utils/mitt'
 
 const collapse = ref(false)
 const taskStore = useTaskStore()
@@ -48,6 +49,23 @@ const asideEnter = ref(false)
 const showCollapse = computed(() => {
   return collapse.value ? true : asideEnter.value
 })
+
+onMounted(() => {
+  emitter.on('refresh', refreshHandler)
+})
+
+onUnmounted(() => {
+  emitter.off('refresh', refreshHandler)
+})
+
+async function refreshHandler() {
+  pagination.pageNo = 1
+  pagination.pageSize = 10
+
+  const id = userStore.getUserInfo.id
+  const orderList = await taskStore.fetchApprovalList(pagination, id)
+  data.value = orderList
+}
 </script>
 
 <template>
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index cba85aa..3acd3ff 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -10,6 +10,8 @@ import { useTask } from '@/store/modules/task'
 import { audit } from '@/api/task/task'
 import type { ApprovalParam, PictureSortParam } from '/#/api'
 import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
+import { useUser } from '@/store/modules/user'
+import emitter from '@/utils/mitt'
 
 const batch = ref(false)
 const selectItems = ref<any[]>([])
@@ -56,28 +58,32 @@ const overTask = ref<any>(null)
 const taskDetailInfo = ref<any>({})
 const taskDetailPictureList = ref<any[]>([])
 let processItems: any[] = []
+const userStore = useUser()
 
 // states:1未提交，2待审批，3通过，4不通过
 function validate(items: any[]) {
   if (items.length === 0)
     return '至少选中一个任务'
 
+  const useInfo = userStore.getUserInfo
+  const username = useInfo.loginname
+
   for (const item of items) {
-    const { iztrueorfalse, history, states } = item
-    if (iztrueorfalse !== null)
+    const { iztrueorfalse, states, assignee } = item
+    if (iztrueorfalse === null)
       return '未判别真假'
 
     else if (states !== 2)
       return '审批状态不合法'
 
-    // else if (history)
-    //   return '包含历史数据'
+    else if (assignee !== username)
+      return '审批人不一致'
   }
 
   return null
 }
 
-function approvalHandler() {
+function approvalHandler(items?: any) {
   let cloneItem: any
   if (batch.value) { processItems = selectItems.value }
   else if (overTask.value) {
@@ -85,6 +91,9 @@ function approvalHandler() {
     processItems = [cloneItem]
   }
 
+  if (items !== undefined && !(items instanceof PointerEvent))
+    processItems = items
+
   const msg = validate(processItems)
 
   if (msg !== null) {
@@ -104,13 +113,17 @@ function approvalHandler() {
   })
 }
 
-function rejectHandler() {
+function rejectHandler(items?: any) {
   let cloneItem: any
   if (batch.value) { processItems = selectItems.value }
   else if (overTask.value) {
     cloneItem = clone(overTask.value)
     processItems = [cloneItem]
   }
+
+  if (items !== undefined && !(items instanceof PointerEvent))
+    processItems = items
+
   const msg = validate(processItems)
 
   if (msg !== null) {
@@ -125,7 +138,7 @@ function rejectHandler() {
 function approval() {
   const formIds: string[] = processItems.map(item => item.id)
   const taskIds: string[] = processItems.map(item => item.taskId)
-  const tasknames: string[] = processItems.map(item => item.buessinessno)
+  const tasknames: string[] = processItems.map(item => item.taskname)
 
   const param: ApprovalParam = {
     formid: formIds,
@@ -135,13 +148,23 @@ function approval() {
     taskname: tasknames,
   }
 
-  audit(param)
+  doAudit(param)
+}
+
+function doAudit(param: any) {
+  audit(param).then((res) => {
+    const { code } = res
+    processItems.length = 0
+    if (code === 'OK')
+      emitter.emit('refresh')
+    else message.error(res.message)
+  })
 }
 
 function reject(idOrDesc: string, backId: string, isOther: boolean) {
   const formIds: string[] = processItems.map(item => item.id)
   const taskIds: string[] = processItems.map(item => item.taskId)
-  const tasknames: string[] = processItems.map(item => item.buessinessno)
+  const tasknames: string[] = processItems.map(item => item.taskname)
 
   const param: ApprovalParam = {
     formid: formIds,
@@ -151,7 +174,7 @@ function reject(idOrDesc: string, backId: string, isOther: boolean) {
     taskname: isOther ? tasknames : ['其他'],
   }
 
-  audit(param)
+  doAudit(param)
 }
 
 function showModal(modalRef: any) {
@@ -320,7 +343,7 @@ const mark = computed(() => {
       <n-tab-pane name="history" tab="历史审查" />
     </n-tabs>
     <ConfrimModal ref="confrimModalRef" @commit="reject" />
-    <BatchModal ref="batchModalRef" />
+    <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
   </div>
 </template>
 
diff --git a/src/views/task/content/TaskTable.vue b/src/views/task/content/TaskTable.vue
index 2cc78be..2e9027f 100644
--- a/src/views/task/content/TaskTable.vue
+++ b/src/views/task/content/TaskTable.vue
@@ -73,7 +73,7 @@ td {
 th,
 td {
   border: 1px solid #ebebeb;
-  padding: 12px 24px;
+  padding: 10px 24px;
   text-align: left;
 }
 
diff --git a/src/views/task/modal/BatchModal.vue b/src/views/task/modal/BatchModal.vue
index cea5037..c8082c8 100644
--- a/src/views/task/modal/BatchModal.vue
+++ b/src/views/task/modal/BatchModal.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUpdated, reactive, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue'
 import Masonry from 'masonry-layout'
 import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
@@ -7,8 +7,14 @@ import imagesloaded from 'imagesloaded'
 import { timeOptions, viewOptions } from '@/config/home'
 import { off, on } from '@/utils/domUtils'
 import { useTask } from '@/store/modules/task'
-import { getTaskDetailPictureList } from '@/api/work/work'
+import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
 import type { PictureSortParam } from '/#/api'
+import emitter from '@/utils/mitt'
+
+const emit = defineEmits<{
+  (e: 'reject', params: any)
+  (e: 'approval', params: any)
+}>()
 
 const cardStyle = {
   '--n-padding-bottom': '40px',
@@ -38,6 +44,7 @@ const taskStore = useTask()
 const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
 const listData = ref<any[]>([])
+const taskDetailInfo = ref<any>({})
 const pagination = reactive({
   pageNo: 1,
   pageSize: 30,
@@ -100,13 +107,7 @@ async function featchList() {
     pagination.pageNo += 1
     canloadMore = pageCount >= pagination.pageNo
 
-    const list = data.map((item) => {
-      return {
-        imgUrl: item.imgurl,
-      }
-    })
-
-    return list
+    return data
   }
   catch (error) {
     return []
@@ -134,8 +135,11 @@ onUpdated(() => {
 let start: { x: number, y: number } | null = null
 let selectionBox: HTMLDivElement | null
 const selectIds = ref<string[]>([])
+const selectItems = ref<any[]>([])
 
 function downHandler(event: MouseEvent) {
+  event.stopPropagation()
+
   if (!selectionBox)
     return
 
@@ -163,10 +167,6 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
   })
 }
 
-function isSelected(id: number) {
-  return selectIds.value.includes(String(id))
-}
-
 function moveHandler(e: MouseEvent) {
   if (!selectionBox || !start)
     return
@@ -197,22 +197,30 @@ const gridHeight = computed(() => {
 })
 
 function addListeners() {
-  selectionBox = document.querySelector('.selection-box') as HTMLDivElement
+  // selectionBox = document.querySelector('.selection-box') as HTMLDivElement
+
+  // on(el.value!, 'mousedown', downHandler)
+  // on(el.value!, 'mousemove', moveHandler)
+  // on(document, 'mouseup', upHandler)
 
-  on(el.value!, 'mousedown', downHandler)
-  on(el.value!, 'mousemove', moveHandler)
-  on(document, 'mouseup', upHandler)
+  emitter.on('refresh', refreshHandler)
 }
 
 function removeListeners() {
-  off(el.value!, 'mousedown', downHandler)
-  on(el.value!, 'mousemove', moveHandler)
-  on(document, 'mouseup', upHandler)
+  // off(el.value!, 'mousedown', downHandler)
+  // on(el.value!, 'mousemove', moveHandler)
+  // on(document, 'mouseup', upHandler)
+
+  emitter.off('refresh', refreshHandler)
 }
 
 async function afterEnter() {
   addListeners()
 
+  const packageid = taskStore.getPackageid
+  const taskId = taskStore.getActiveId
+  taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
+
   const list = await featchList()
   listData.value = list
 }
@@ -248,8 +256,6 @@ function backHandler() {
   taskStore.back()
 }
 
-const selectItems = ref<any[]>([])
-
 function onCheckChange(checked: any, item: any) {
   const index = selectItems.value.indexOf(item)
   item.checked = checked
@@ -260,6 +266,60 @@ function onCheckChange(checked: any, item: any) {
   else
     selectItems.value.splice(index, 1)
 }
+
+// watch(() => selectIds.value.length, () => {
+//   const list = listData.value
+//   for (const item of list) {
+//     if (selectIds.value.includes(item.id))
+//       item.checked = true
+//     else
+//       item.checked = false
+//   }
+// })
+
+const batch = ref(false)
+
+const showActions = computed(() => {
+  return selectItems.value.length > 0 && batch
+})
+
+function setBatch(value: boolean) {
+  batch.value = value
+  if (value === false) {
+    selectItems.value.forEach(item => item.checked = false)
+    selectItems.value.length = 0
+  }
+}
+
+function reject() {
+  emit('reject', selectItems.value)
+}
+
+function approval() {
+  emit('approval', selectItems.value)
+}
+
+async function refreshHandler() {
+  pagination.pageNo = 1
+  pagination.pageSize = 30
+
+  const list = await featchList()
+  listData.value = list
+}
+
+watch(() => taskStore.activeId, async (newValue, oldValue) => {
+  const packageid = taskStore.getPackageid
+  const taskId = taskStore.getActiveId
+  taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
+
+  pagination.pageNo = 1
+  pagination.pageSize = 30
+  listData.value.length = 0
+
+  const list = await featchList()
+  listData.value = list
+  layout()
+})
 </script>
 
 <template>
@@ -306,12 +366,12 @@ function onCheckChange(checked: any, item: any) {
               <tbody>
                 <tr>
                   <td>
-                    张三丰
+                    {{ taskDetailInfo?.createusername }}
                   </td>
-                  <td>待审批</td>
-                  <td>2023-12-02 14:20:11</td>
-                  <td>网络截图</td>
-                  <td>15</td>
+                  <td>{{ taskDetailInfo?.states }}</td>
+                  <td>{{ taskDetailInfo?.ocrPicture?.createTime }}</td>
+                  <td>{{ taskDetailInfo?.fromsourceid }}</td>
+                  <td>{{ taskDetailInfo?.ocpictureid.split(',').length }}</td>
                 </tr>
               </tbody>
             </table>
@@ -334,11 +394,25 @@ function onCheckChange(checked: any, item: any) {
                 </n-popselect>
               </div>
               <div>
-                <div>移除可疑文件夹</div>
-                <div class="wrapper-content-form-button">
+                <div v-show="!showActions" class="wrapper-content-form-button" @click="setBatch(true)">
                   <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
                   批量审批
                 </div>
+                <div v-show="showActions" class="batch">
+                  <n-button text @click="setBatch(false)">
+                    <template #icon>
+                      <SvgIcon name="revoke" />
+                    </template>
+                    返回
+                  </n-button>
+                  <div style="cursor: pointer;margin-left: 16px;" @click="reject">
+                    <SvgIcon width="64" height="28" name="a1" />
+                  </div>
+                  <SvgIcon size="24" name="vs" />
+                  <div style="cursor: pointer;" @click="approval">
+                    <SvgIcon width="64" height="28" name="a2" />
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -346,16 +420,18 @@ function onCheckChange(checked: any, item: any) {
               <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
               <div ref="masonryRef" class="grid">
                 <div
-                  v-for="(item, index) in listData" :key="index" :data-id="index"
-                  :class="{ 'grid-item-selected': isSelected(index) }" :style="{ height: gridHeight }"
+                  v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }"
                   class="grid-item"
                 >
                   <img
                     class="wrapper-content-item-img"
-                    :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
+                    :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgurl"
                   >
                   <div class="top">
-                    <n-checkbox v-model:checked="item.checked" @click.stop @update:checked="onCheckChange($event, item)" />
+                    <n-checkbox
+                      v-show="batch" v-model:checked="item.checked" @click.prevent
+                      @update:checked="onCheckChange($event, item)"
+                    />
                     <div class="percent">
                       30%
                     </div>
@@ -460,6 +536,11 @@ function onCheckChange(checked: any, item: any) {
     &-form {
       display: flex;
       justify-content: space-between;
+      align-items: center;
+    background: #FFF;
+    box-sizing: border-box;
+    border-radius: 3px;
+    height: 36px;
 
       &-dropdown {
         display: flex;
@@ -483,6 +564,7 @@ function onCheckChange(checked: any, item: any) {
         justify-content: center;
         color: #FFF;
         margin-left: 18px;
+        cursor: pointer;
       }
 
       div {
@@ -539,7 +621,7 @@ function onCheckChange(checked: any, item: any) {
 
     .scroll {
       overflow-y: scroll;
-      height: calc(100vh - 282px);
+      height: calc(100vh - 320px);
     }
   }
 }