From 69f5fd8a4f733e268f15e2e5bb63698f8689de8b Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 20 Oct 2025 13:40:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=BE=85=E5=8A=9E?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E9=A1=B5=E9=9D=A2=E4=B8=BA=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/workflow/task/allTaskWaiting.vue    | 547 +++++++-----------
 1 file changed, 211 insertions(+), 336 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/task/allTaskWaiting.vue b/apps/web-antd/src/views/workflow/task/allTaskWaiting.vue
index 2288acf5..b789d327 100644
--- a/apps/web-antd/src/views/workflow/task/allTaskWaiting.vue
+++ b/apps/web-antd/src/views/workflow/task/allTaskWaiting.vue
@@ -1,360 +1,235 @@
-<!-- eslint-disable no-use-before-define -->
-<script setup lang="ts">
-import type { User } from '#/api/system/user/model';
-import type { TaskInfo } from '#/api/workflow/task/model';
+<script setup lang="tsx">
+import type { RadioChangeEvent } from 'ant-design-vue';
 
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import type { VbenFormProps } from '@vben/common-ui';
 
-import { Page } from '@vben/common-ui';
-import { useTabs } from '@vben/hooks';
-import { addFullName, getPopupContainer } from '@vben/utils';
+import type { ComponentType } from '#/adapter/component';
+import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { FilterOutlined, RedoOutlined } from '@ant-design/icons-vue';
-import {
-  Empty,
-  Form,
-  FormItem,
-  Input,
-  InputSearch,
-  Popover,
-  Segmented,
-  Spin,
-  Tooltip,
-  TreeSelect,
-} from 'ant-design-vue';
-import { cloneDeep, debounce, uniqueId } from 'lodash-es';
+import { markRaw, onMounted, ref } from 'vue';
 
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+
+import { RadioGroup } from 'ant-design-vue';
+import { isArray } from 'lodash-es';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { categoryTree } from '#/api/workflow/category';
 import { pageByAllTaskFinish, pageByAllTaskWait } from '#/api/workflow/task';
+import { renderDict } from '#/utils/render';
 
-import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
-import { bottomOffset } from './constant';
+import { ApprovalPanelDrawerComp, CopyComponent } from '../components';
+import { DefaultSlot } from '../components/helper';
 
-const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+const formOptions: VbenFormProps<ComponentType> = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: [
+    {
+      fieldName: 'category',
+      component: 'TreeSelect',
+      label: '流程分类',
+    },
+    {
+      fieldName: 'flowCode',
+      component: 'Input',
+      label: '流程编码',
+    },
+    {
+      fieldName: 'createByIds',
+      defaultValue: [],
+      component: markRaw(DefaultSlot),
+      label: '申请人',
+      renderComponentContent: (model) => ({
+        default: () => (
+          <CopyComponent avatarSize={30} v-model:userList={model.createByIds} />
+        ),
+      }),
+    },
+  ],
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
+};
 
-/**
- * 流程监控 - 待办任务页面的id不唯一 改为前端处理
- */
-interface TaskItem extends TaskInfo {
-  active: boolean;
-  randomId: string;
-}
-
-const taskList = ref<TaskItem[]>([]);
-const taskTotal = ref(0);
-const page = ref(1);
-const loading = ref(false);
+onMounted(async () => {
+  const tree = await categoryTree();
+  tableApi.formApi.updateSchema([
+    {
+      fieldName: 'category',
+      componentProps: {
+        fieldNames: { label: 'label', value: 'id' },
+        showSearch: true,
+        treeData: tree,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'label',
+      },
+    },
+  ]);
+});
 
 const typeOptions = [
-  { label: '待办任务', value: 'todo' },
-  { label: '已办任务', value: 'done' },
-];
-const currentType = ref('todo');
-const currentApi = computed(() => {
-  if (currentType.value === 'todo') {
-    return pageByAllTaskWait;
+  { label: '运行中', value: 'running' },
+  { label: '已完成', value: 'finish' },
+] as const;
+type OptionValue = (typeof typeOptions)[number]['value'];
+let currentTypeApi = pageByAllTaskWait;
+const currentType = ref<OptionValue>('running');
+async function handleTypeChange(e: RadioChangeEvent) {
+  const { value } = e.target;
+  switch (value) {
+    case 'finish': {
+      currentTypeApi = pageByAllTaskFinish;
+      break;
+    }
+    case 'running': {
+      currentTypeApi = pageByAllTaskWait;
+      break;
+    }
   }
-  return pageByAllTaskFinish;
-});
-const approvalType = computed(() => {
-  if (currentType.value === 'done') {
-    return 'readonly';
-  }
-  return 'admin';
-});
-async function handleTypeChange() {
-  // 需要先滚动到顶部
-  cardContainerRef.value?.scroll({ top: 0, behavior: 'auto' });
-  page.value = 1;
 
-  taskList.value = [];
-  await nextTick();
-  await reload(true);
+  await tableApi.reload();
 }
 
-const defaultFormData = {
-  flowName: '', // 流程定义名称
-  nodeName: '', // 任务名称
-  flowCode: '', // 流程定义编码
-  createByIds: [] as string[], // 创建人
-  category: null as null | number, // 流程分类
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+  },
+  columns: [
+    {
+      field: 'id',
+      title: 'ID',
+    },
+    {
+      field: 'businessTitle',
+      title: '业务标题',
+      formatter: ({ cellValue }) => cellValue ?? '-',
+    },
+    {
+      field: 'flowName',
+      title: '流程名称',
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+    },
+    {
+      field: 'flowCode',
+      title: '流程编码',
+    },
+    {
+      field: 'nodeName',
+      title: '当前任务',
+    },
+    {
+      field: 'processedByName',
+      title: '办理人',
+      formatter: ({ cellValue }) => cellValue?.split?.(',') ?? cellValue,
+    },
+    {
+      field: 'flowStatus',
+      title: '流程状态',
+      slots: {
+        default: ({ row }) => {
+          return renderDict(row.flowStatus, DictEnum.WF_BUSINESS_STATUS);
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 转换数据
+        if (isArray(formValues.createByIds)) {
+          formValues.createByIds = (formValues.createByIds as Array<any>).map(
+            (item) => item.userId,
+          );
+        }
+
+        return await currentTypeApi({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+    isCurrent: true,
+  },
+  id: 'workflow-task-myself',
+  rowClassName: 'cursor-pointer',
 };
-const formData = ref(cloneDeep(defaultFormData));
 
-/**
- * 是否已经加载全部数据 即 taskList.length === taskTotal
- */
-const isLoadComplete = computed(
-  () => taskList.value.length === taskTotal.value,
-);
-
-// 卡片父容器的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 currentApi.value({
-    pageSize: 10,
-    pageNum: page.value,
-    ...formData.value,
-  });
-  taskList.value = resp.rows.map((item) => ({
-    ...item,
-    active: false,
-    randomId: uniqueId(),
-  }));
-  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) {
-    return;
-  }
-  // e.target.scrollTop 是元素顶部到当前可视区域顶部的距离，即已滚动的高度。
-  // e.target.clientHeight 是元素的可视高度。
-  // e.target.scrollHeight 是元素的总高度。
-  const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
-  // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
-  console.log('scrollTop + clientHeight', scrollTop + clientHeight);
-  console.log('scrollHeight', scrollHeight);
-
-  // 滚动到底部且没有加载完成
-  if (isBottom && !isLoadComplete.value) {
-    loading.value = true;
-    page.value += 1;
-    const resp = await currentApi.value({
-      pageSize: 10,
-      pageNum: page.value,
-      ...formData.value,
-    });
-    taskList.value.push(
-      ...resp.rows.map((item) => ({
-        ...item,
-        active: false,
-        randomId: uniqueId(),
-      })),
-    );
-    loading.value = false;
-  }
-}, 200);
-
-const lastSelectId = ref('');
-const currentTask = ref<TaskInfo>();
-async function handleCardClick(item: TaskItem) {
-  const { randomId } = item;
-  // 点击的是同一个
-  if (lastSelectId.value === randomId) {
-    return;
-  }
-  currentTask.value = item;
-  // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
-  taskList.value.forEach((item) => {
-    item.active = item.randomId === randomId;
-  });
-  lastSelectId.value = randomId;
-}
-
-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;
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellClick: ({ row }) => {
+      handleOpen(row);
+    },
+  },
 });
+
+const [ApprovalPanelDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: ApprovalPanelDrawerComp,
+});
+
+function handleOpen(row: any) {
+  let type = '';
+  switch (currentType.value) {
+    case 'finish': {
+      type = 'readonly';
+      break;
+    }
+    case 'running': {
+      type = 'admin';
+      break;
+    }
+  }
+  drawerApi.setData({ task: row, type }).open();
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <div class="flex h-full gap-2">
-      <div
-        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"
-        >
-          <Segmented
-            v-model:value="currentType"
-            :options="typeOptions"
-            block
-            class="mb-2"
-            @change="handleTypeChange"
-          />
-          <div class="flex items-center gap-1">
-            <InputSearch
-              v-model:value="formData.flowName"
-              placeholder="流程名称搜索"
-              @search="reload(false)"
-            />
-            <Tooltip placement="top" title="重置">
-              <a-button @click="reload(true)">
-                <RedoOutlined />
-              </a-button>
-            </Tooltip>
-            <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"
-        >
-          <template v-if="taskList.length > 0">
-            <ApprovalCard
-              v-for="item in taskList"
-              :key="item.randomId"
-              :info="item"
-              class="mx-2"
-              row-key="randomId"
-              @click="handleCardClick(item)"
-            />
-          </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
-          class="bg-background sticky bottom-0 w-full rounded-b-lg border-t-[1px] py-2"
-        >
-          <div class="flex items-center justify-center">
-            共 {{ taskTotal }} 条记录
-          </div>
-        </div>
-      </div>
-      <ApprovalPanel
-        :task="currentTask"
-        :type="approvalType"
-        @reload="refreshTab"
-      />
-    </div>
+    <BasicTable>
+      <template #toolbar-actions>
+        <RadioGroup
+          v-model:value="currentType"
+          :options="typeOptions"
+          button-style="solid"
+          option-type="button"
+          @change="handleTypeChange"
+        />
+      </template>
+    </BasicTable>
+    <ApprovalPanelDrawer @reload="() => tableApi.query()" />
   </Page>
 </template>
-
-<style lang="scss" scoped>
-.thin-scrollbar {
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-}
-
-:deep(.ant-card-body) {
-  @apply thin-scrollbar;
-}
-</style>