chore: 我发起的

apps/web-antd/src/api/workflow/instance/index.ts

@@ -1,6 +1,7 @@
+import type { TaskInfo } from '../task/model';
 import type { FlowInfoResponse } from './model';
 
-import type { ID, IDS, PageQuery } from '#/api/common';
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
 import { requestClient } from '#/api/request';
 
@@ -67,10 +68,13 @@ export function workflowInstanceActive(instanceId: ID, active: boolean) {
 /**
  * 获取当前登录人发起的流程实例
  * @param params
- * @returns
+ * @returns PageResult<Flow>
  */
 export function pageByCurrent(params?: PageQuery) {
-  return requestClient.get('/workflow/instance/current', { params });
+  return requestClient.get<PageResult<TaskInfo>>(
+    '/workflow/instance/pageByCurrent',
+    { params },
+  );
 }
 
 /**

apps/web-antd/src/views/workflow/components/approval-panel.vue

@@ -2,12 +2,19 @@
 import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { onUnmounted, ref, watch } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 
 import { Fallback, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Card, Divider, Space, TabPane, Tabs } from 'ant-design-vue';
+import {
+  Card,
+  Divider,
+  Popconfirm,
+  Space,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
 
 import { flowInfo } from '#/api/workflow/instance';
 import { renderDict } from '#/utils/render';
@@ -19,7 +26,27 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps<{ task?: TaskInfo }>();
+// eslint-disable-next-line no-use-before-define
+const props = defineProps<{ task?: TaskInfo; type: ApprovalType }>();
+
+/**
+ * myself 我发起的
+ * readonly 只读 只用于查看
+ */
+type ApprovalType = 'myself' | 'readonly';
+const showFooter = computed(() => {
+  if (props.type === 'readonly') {
+    return false;
+  }
+  // 我发起的 && [已完成, 已作废] 不显示
+  if (
+    props.type === 'myself' &&
+    ['finish', 'invalid'].includes(props.task?.flowStatus ?? '')
+  ) {
+    return false;
+  }
+  return true;
+});
 
 const currentFlowInfo = ref<FlowInfoResponse>();
 /**
@@ -43,6 +70,10 @@ async function handleLoadInfo(task: TaskInfo | undefined) {
 watch(() => props.task, handleLoadInfo);
 
 onUnmounted(() => (currentFlowInfo.value = undefined));
+
+async function handleCancel() {
+  // await cancelProcessApply()
+}
 </script>
 
 <template>
@@ -102,11 +133,22 @@ onUnmounted(() => (currentFlowInfo.value = undefined));
       </Tabs>
     </div>
     <!-- 固定底部 -->
+    <div class="h-[57px]"></div>
     <div
+      v-if="showFooter"
       class="border-t-solid bg-background absolute bottom-0 left-0 w-full border-t-[1px] p-3"
     >
       <div class="flex justify-end">
-        <Space>
+        <Space v-if="type === 'myself'">
+          <Popconfirm
+            placement="topRight"
+            title="确定要撤销该申请吗？"
+            @confirm="handleCancel"
+          >
+            <a-button danger type="primary">撤销申请</a-button>
+          </Popconfirm>
+        </Space>
+        <Space v-if="false">
           <a-button type="primary">通过</a-button>
           <a-button danger type="primary">驳回</a-button>
           <a-button>其他</a-button>

apps/web-antd/src/views/workflow/task/myDocument.vue

@@ -1,9 +1,133 @@
 <script setup lang="ts">
-import CommonSkeleton from '#/views/common';
+import type { FlowInfoResponse } from '#/api/workflow/instance/model';
+import type { TaskInfo } from '#/api/workflow/task/model';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Empty, InputSearch } from 'ant-design-vue';
+import { debounce } from 'lodash-es';
+
+import { flowInfo, pageByCurrent } from '#/api/workflow/instance';
+
+import { ApprovalCard, ApprovalPanel } from '../components';
+
+const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+const taskList = ref<({ active: boolean } & TaskInfo)[]>([]);
+const taskTotal = ref(0);
+const page = ref(1);
+
+/**
+ * 是否已经加载全部数据 即 taskList.length === taskTotal
+ */
+const isLoadComplete = computed(
+  () => taskList.value.length === taskTotal.value,
+);
+
+onMounted(async () => {
+  /**
+   * 获取待办任务列表
+   */
+  const resp = await pageByCurrent({ pageSize: 10, pageNum: page.value });
+  console.log(resp);
+  taskList.value = resp.rows.map((item) => ({ ...item, active: false }));
+  taskTotal.value = resp.total;
+});
+
+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;
+
+  // 滚动到底部且没有加载完成
+  if (isBottom && !isLoadComplete.value) {
+    page.value += 1;
+    const resp = await pageByCurrent({ pageSize: 10, pageNum: page.value });
+    taskList.value.push(
+      ...resp.rows.map((item) => ({ ...item, active: false })),
+    );
+  }
+}, 200);
+
+const currentInstance = ref<FlowInfoResponse>();
+
+const lastSelectId = ref('');
+const currentTask = ref<TaskInfo>();
+async function handleCardClick(item: TaskInfo) {
+  const { id, businessId } = item;
+  // 点击的是同一个
+  if (lastSelectId.value === id) {
+    return;
+  }
+  currentTask.value = item;
+  // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
+  taskList.value.forEach((item) => {
+    item.active = item.id === id;
+  });
+  lastSelectId.value = id;
+
+  const resp = await flowInfo(businessId);
+  currentInstance.value = resp;
+}
 </script>
 
 <template>
-  <div>
-    <CommonSkeleton />
-  </div>
+  <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"
+      >
+        <!-- 搜索条件 -->
+        <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>
+        <div
+          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.id"
+              :info="item"
+              class="mx-2"
+              @click="handleCardClick(item)"
+            />
+          </template>
+          <Empty v-else :image="emptyImage" />
+        </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">
+            共 {{ taskList.length }} 条记录
+          </div>
+        </div>
+      </div>
+      <ApprovalPanel :task="currentTask" type="myself" />
+    </div>
+  </Page>
 </template>
+
+<style lang="scss" scoped>
+.thin-scrollbar {
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+}
+
+:deep(.ant-card-body) {
+  @apply thin-scrollbar;
+}
+</style>

apps/web-antd/src/views/workflow/task/taskWaiting.vue

@@ -90,7 +90,7 @@ async function handleCardClick(item: TaskInfo) {
         <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="搜索任务名称" />
+          <InputSearch placeholder="搜索还没做" />
         </div>
         <div
           class="thin-scrollbar flex flex-1 flex-col gap-2 overflow-y-auto py-3"
@@ -116,7 +116,7 @@ async function handleCardClick(item: TaskInfo) {
           </div>
         </div>
       </div>
-      <ApprovalPanel :task="currentTask" />
+      <ApprovalPanel :task="currentTask" type="readonly" />
     </div>
   </Page>
 </template>