From 7f239133b5545c1b2d1c1f9c90daa49d97a69bb2 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 20 Dec 2024 09:49:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E6=8A=84=E9=80=81?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2/=E4=BC=98=E5=8C=96=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E7=9A=84=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/components/approval-panel.vue    |   1 +
 .../src/views/workflow/task/taskCopyList.vue  | 222 +++++++++++++++---
 2 files changed, 190 insertions(+), 33 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/approval-panel.vue b/apps/web-antd/src/views/workflow/components/approval-panel.vue
index dd873b40..32a38757 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel.vue
@@ -130,6 +130,7 @@ async function handleLoadInfo(task: TaskInfo | undefined) {
     currentFlowInfo.value = resp;
 
     const taskResp = await getTaskByTaskId(props.task!.id);
+    console.log('taskResp', taskResp);
     currentTask.value = taskResp;
   } catch (error) {
     console.error(error);
diff --git a/apps/web-antd/src/views/workflow/task/taskCopyList.vue b/apps/web-antd/src/views/workflow/task/taskCopyList.vue
index 3a57a39c..4a462151 100644
--- a/apps/web-antd/src/views/workflow/task/taskCopyList.vue
+++ b/apps/web-antd/src/views/workflow/task/taskCopyList.vue
@@ -1,24 +1,47 @@
+<!-- eslint-disable no-use-before-define -->
 <script setup lang="ts">
-import type { FlowInfoResponse } from '#/api/workflow/instance/model';
+import type { User } from '#/api/system/user/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 
 import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { addFullName, getPopupContainer } from '@vben/utils';
 
-import { Empty, InputSearch } from 'ant-design-vue';
-import { debounce } from 'lodash-es';
+import { FilterOutlined, RedoOutlined } from '@ant-design/icons-vue';
+import {
+  Empty,
+  Form,
+  FormItem,
+  Input,
+  InputSearch,
+  Popover,
+  Spin,
+  TreeSelect,
+} from 'ant-design-vue';
+import { cloneDeep, debounce } from 'lodash-es';
 
-import { flowInfo } from '#/api/workflow/instance';
+import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskCopy } from '#/api/workflow/task';
 
-import { ApprovalCard, ApprovalPanel } from '../components';
+import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
 const taskList = ref<({ active: boolean } & TaskInfo)[]>([]);
 const taskTotal = ref(0);
 const page = ref(1);
+const loading = ref(false);
+
+const defaultFormData = {
+  flowName: '', // 流程定义名称
+  nodeName: '', // 任务名称
+  flowCode: '', // 流程定义编码
+  createByIds: [] as string[], // 创建人
+  category: null as null | number, // 流程分类
+};
+const formData = ref(cloneDeep(defaultFormData));
 
 /**
  * 是否已经加载全部数据 即 taskList.length === taskTotal
@@ -27,19 +50,45 @@ const isLoadComplete = computed(
   () => taskList.value.length === taskTotal.value,
 );
 
-onMounted(async () => {
-  /**
-   * 获取待办任务列表
-   */
-  const resp = await pageByTaskCopy({ pageSize: 10, pageNum: page.value });
-  console.log(resp);
-  taskList.value = resp.rows.map((item) => ({
-    ...item,
-    createByName: '抄送',
-    active: false,
-  }));
+// 卡片父容器的ref
+const cardContainerRef = useTemplateRef('cardContainerRef');
+
+/**
+ * @param resetFields 是否清空查询参数
+ */
+async function reload(resetFields: boolean = false) {
+  // 需要先滚动到顶部
+  cardContainerRef.value?.scroll({ top: 0, behavior: 'auto' });
+
+  page.value = 1;
+  currentTask.value = undefined;
+  taskTotal.value = 0;
+  lastSelectId.value = '';
+
+  if (resetFields) {
+    formData.value = cloneDeep(defaultFormData);
+    selectedUserList.value = [];
+  }
+
+  loading.value = true;
+  const resp = await pageByTaskCopy({
+    pageSize: 10,
+    pageNum: page.value,
+    ...formData.value,
+  });
+  taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
   taskTotal.value = resp.total;
-});
+
+  loading.value = false;
+  // 默认选中第一个
+  if (taskList.value.length > 0) {
+    const firstTask = taskList.value[0]!;
+    currentTask.value = firstTask;
+    handleCardClick(firstTask);
+  }
+}
+
+onMounted(reload);
 
 const handleScroll = debounce(async (e: Event) => {
   if (!e.target) {
@@ -54,24 +103,24 @@ const handleScroll = debounce(async (e: Event) => {
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {
+    loading.value = true;
     page.value += 1;
-    const resp = await pageByTaskCopy({ pageSize: 10, pageNum: page.value });
+    const resp = await pageByTaskCopy({
+      pageSize: 10,
+      pageNum: page.value,
+      ...formData.value,
+    });
     taskList.value.push(
-      ...resp.rows.map((item) => ({
-        ...item,
-        createByName: '抄送',
-        active: false,
-      })),
+      ...resp.rows.map((item) => ({ ...item, active: false })),
     );
+    loading.value = false;
   }
 }, 200);
 
-const currentInstance = ref<FlowInfoResponse>();
-
 const lastSelectId = ref('');
 const currentTask = ref<TaskInfo>();
 async function handleCardClick(item: TaskInfo) {
-  const { id, businessId } = item;
+  const { id } = item;
   // 点击的是同一个
   if (lastSelectId.value === id) {
     return;
@@ -82,25 +131,119 @@ async function handleCardClick(item: TaskInfo) {
     item.active = item.id === id;
   });
   lastSelectId.value = id;
-
-  const resp = await flowInfo(businessId);
-  currentInstance.value = resp;
 }
+
+const { refreshTab } = useTabs();
+
+// 由于失去焦点浮层会消失 使用v-model选择人员完毕后强制显示
+const popoverOpen = ref(false);
+const selectedUserList = ref<User[]>([]);
+function handleFinish(userList: User[]) {
+  popoverOpen.value = true;
+  selectedUserList.value = userList;
+  formData.value.createByIds = userList.map((item) => item.userId);
+}
+
+const treeData = ref<any[]>([]);
+onMounted(async () => {
+  // menu
+  const tree = await categoryTree();
+  addFullName(tree, 'label', ' / ');
+  treeData.value = tree;
+});
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-2">
       <div
-        class="bg-background flex h-full min-w-[320px] max-w-[320px] flex-col rounded-lg"
+        class="bg-background relative flex h-full min-w-[320px] max-w-[320px] flex-col rounded-lg"
       >
         <!-- 搜索条件 -->
         <div
           class="bg-background z-100 sticky left-0 top-0 w-full rounded-t-lg border-b-[1px] border-solid p-2"
         >
-          <InputSearch placeholder="搜索还没做" />
+          <div class="flex items-center gap-1">
+            <InputSearch
+              v-model:value="formData.flowName"
+              placeholder="流程名称搜索"
+              @search="reload(false)"
+            />
+            <a-button @click="reload(true)">
+              <RedoOutlined />
+            </a-button>
+            <Popover
+              v-model:open="popoverOpen"
+              :get-popup-container="getPopupContainer"
+              placement="rightTop"
+              trigger="click"
+            >
+              <template #title>
+                <div class="w-full border-b pb-[12px] text-[16px]">搜索</div>
+              </template>
+              <template #content>
+                <Form
+                  :colon="false"
+                  :label-col="{ span: 6 }"
+                  :model="formData"
+                  autocomplete="off"
+                  class="w-[300px]"
+                  @finish="() => reload(false)"
+                >
+                  <FormItem label="申请人">
+                    <!-- 弹窗关闭后仍然显示表单浮层 -->
+                    <CopyComponent
+                      v-model:user-list="selectedUserList"
+                      @cancel="() => (popoverOpen = true)"
+                      @finish="handleFinish"
+                    />
+                  </FormItem>
+                  <FormItem label="流程分类">
+                    <TreeSelect
+                      v-model:value="formData.category"
+                      :allow-clear="true"
+                      :field-names="{ label: 'label', value: 'id' }"
+                      :get-popup-container="getPopupContainer"
+                      :tree-data="treeData"
+                      :tree-default-expand-all="true"
+                      :tree-line="{ showLeafIcon: false }"
+                      placeholder="请选择"
+                      tree-node-filter-prop="label"
+                      tree-node-label-prop="fullName"
+                    />
+                  </FormItem>
+                  <FormItem label="任务名称">
+                    <Input
+                      v-model:value="formData.nodeName"
+                      placeholder="请输入"
+                    />
+                  </FormItem>
+                  <FormItem label="流程编码">
+                    <Input
+                      v-model:value="formData.flowCode"
+                      placeholder="请输入"
+                    />
+                  </FormItem>
+                  <FormItem>
+                    <div class="flex">
+                      <a-button block html-type="submit" type="primary">
+                        搜索
+                      </a-button>
+                      <a-button block class="ml-2" @click="reload(true)">
+                        重置
+                      </a-button>
+                    </div>
+                  </FormItem>
+                </Form>
+              </template>
+              <a-button>
+                <FilterOutlined />
+              </a-button>
+            </Popover>
+          </div>
         </div>
         <div
+          ref="cardContainerRef"
           class="thin-scrollbar flex flex-1 flex-col gap-2 overflow-y-auto py-3"
           @scroll="handleScroll"
         >
@@ -114,6 +257,19 @@ async function handleCardClick(item: TaskInfo) {
             />
           </template>
           <Empty v-else :image="emptyImage" />
+          <div
+            v-if="isLoadComplete && taskList.length > 0"
+            class="flex items-center justify-center text-[14px] opacity-50"
+          >
+            没有更多数据了
+          </div>
+          <!-- 遮罩loading层 -->
+          <div
+            v-if="loading"
+            class="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.1)]"
+          >
+            <Spin tip="加载中..." />
+          </div>
         </div>
         <!-- total显示 -->
         <div
@@ -124,7 +280,7 @@ async function handleCardClick(item: TaskInfo) {
           </div>
         </div>
       </div>
-      <ApprovalPanel :task="currentTask" type="readonly" />
+      <ApprovalPanel :task="currentTask" type="readonly" @reload="refreshTab" />
     </div>
   </Page>
 </template>