fix

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

@@ -120,6 +120,17 @@ export function pageByCompleted(params?: PageQuery) {
 }
 
 /**
+ * 获取当前登录人的延时审批工单
+ * @param params
+ * @returns PageResult<TaskInfo>
+ */
+export function pageByDelay(params?: PageQuery) {
+  return requestClient.get<PageResult<TaskInfo>>('/workOrder/order/list/delay',
+    { params },
+  );
+}
+
+/**
  * 获取工单详情
  * @param id 工单id
  * @returns TaskInfo

apps/web-ele/src/views/workflow/components/actions/flow-actions.vue

@@ -3,20 +3,28 @@ import type { ApprovalType } from '../type';
 
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { computed, ref, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import { cn } from '@vben/utils';
 
 import { UploadFilled } from '@element-plus/icons-vue';
-import { ElButton, ElDrawer, ElForm, ElFormItem, ElInput, ElMessage, ElUpload, ElMessageBox, ElSpace, ElTreeSelect, ElSelect, ElOption } from 'element-plus';
-
 import {
-  backProcess,
-  deleteOrder,
-  submitOrder,
-  taskOperation,
-} from '#/api/workflow/task';
+  ElButton,
+  ElDrawer,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElOption,
+  ElSelect,
+  ElSpace,
+  ElTreeSelect,
+  ElUpload,
+} from 'element-plus';
+
 import { requestClient } from '#/api/request';
+import { backProcess, deleteOrder, submitOrder } from '#/api/workflow/task';
 import { getSingleImageUploadConfig } from '#/components/upload/config';
 import CreatOrder from '#/views/workflow/order/creatOrder.vue';
 
@@ -92,6 +100,15 @@ const userList = ref([]);
 const selectedDeptId = ref('');
 const selectedUsers = ref([]);
 
+// 延时审批的抽屉
+const approveDelayDrawerVisible = ref(false);
+const approveDelayFormData = reactive({
+  approveRemark: '',
+  approveStatus: '1',
+  delayId: 0,
+  newDeadline: '',
+});
+
 // 编辑
 const handleEdit = () => {
   drawerId.value = props.task!.id;
@@ -189,7 +206,8 @@ function handleRemove() {
     cancelButtonText: '取消',
     type: 'warning',
     center: true,
-  }).then(async () => {
+  })
+    .then(async () => {
       await deleteOrder([props.task!.id]);
       emit('reload');
     })
@@ -223,7 +241,7 @@ function handleApprove() {
   handleFormData.processContent = '';
   handleFormData.taskId = props.task!.taskId;
   handleFileList.value = [];
-  
+
   // 打开抽屉
   handleDrawerVisible.value = true;
 }
@@ -236,7 +254,7 @@ function handleDelay() {
   delayFormData.delayDuration = 0;
   delayFormData.delayReason = '';
   delayFileList.value = [];
-  
+
   // 打开抽屉
   delayDrawerVisible.value = true;
 }
@@ -249,10 +267,10 @@ function handleCopy() {
   selectedDeptId.value = '';
   selectedUsers.value = [];
   userList.value = [];
-  
+
   // 加载部门树
   loadDeptTree();
-  
+
   // 打开抽屉
   ccDrawerVisible.value = true;
 }
@@ -261,11 +279,7 @@ function handleCopy() {
 async function loadDeptTree() {
   try {
     const response = await requestClient.get('/system/user/deptTree');
-    if (response.code === 200) {
-      deptTree.value = response.data;
-    } else {
-      ElMessage.error('加载部门树失败');
-    }
+    deptTree.value = response;
   } catch (error) {
     ElMessage.error('加载部门树失败');
     console.error('加载部门树失败:', error);
@@ -275,9 +289,12 @@ async function loadDeptTree() {
 // 加载人员列表
 async function loadUserList(deptId) {
   try {
-    const response = await requestClient.get(`/system/user/list?deptId=${deptId}&pageNum=1&pageSize=20`);
-    if (response.code === 200) {
-      userList.value = response.data.list || [];
+    const response = await requestClient.get(
+      `/system/user/list?deptId=${deptId}&pageNum=1&pageSize=999`,
+    );
+    console.log('加载人员列表响应:', response);
+    if (response.rows && response.rows.length > 0) {
+      userList.value = response.rows || [];
     } else {
       ElMessage.error('加载人员列表失败');
     }
@@ -318,14 +335,14 @@ async function handleDelaySubmit() {
       ElMessage.error('请输入有效的延时时长(至少1小时)');
       return;
     }
-    
+
     // 调用延时API
     await requestClient.put('/workOrder/order/delay', delayFormData);
     ElMessage.success('延时申请提交成功');
-    
+
     // 关闭抽屉
     delayDrawerVisible.value = false;
-    
+
     // 重新加载数据
     emit('reload');
   } catch (error) {
@@ -346,14 +363,14 @@ async function handleCCSubmit() {
       ElMessage.error('请选择人员');
       return;
     }
-    
+
     // 调用抄送API
     await requestClient.put('/workOrder/order/cc', ccFormData);
     ElMessage.success('抄送成功');
-    
+
     // 关闭抽屉
     ccDrawerVisible.value = false;
-    
+
     // 重新加载数据
     emit('reload');
   } catch (error) {
@@ -381,9 +398,48 @@ async function handleBack() {
   }
 }
 
+// 延时审批
+function handleApproveDelay() {
+  // 重置表单数据
+  approveDelayFormData.approveRemark = '';
+  approveDelayFormData.approveStatus = '1';
+  approveDelayFormData.delayId = props.task!.taskId;
+  approveDelayFormData.newDeadline = '';
+
+  // 打开抽屉
+  approveDelayDrawerVisible.value = true;
+}
 
+// 延时审批提交
+async function handleApproveDelaySubmit() {
+  try {
+    // 验证表单
+    if (!approveDelayFormData.approveRemark.trim()) {
+      ElMessage.error('请输入审批意见');
+      return;
+    }
+    if (!approveDelayFormData.newDeadline) {
+      ElMessage.error('请选择新截止时间');
+      return;
+    }
+    console.log('延时审批表单数据:', approveDelayFormData);
+    // 调用延时审批API
+    await requestClient.put(
+      '/workOrder/order/approveDelay',
+      approveDelayFormData,
+    );
+    ElMessage.success('延时审批操作成功');
 
+    // 关闭抽屉
+    approveDelayDrawerVisible.value = false;
 
+    // 重新加载数据
+    emit('reload');
+  } catch (error) {
+    ElMessage.error('延时审批操作失败');
+    console.error('延时审批失败:', error);
+  }
+}
 </script>
 
 <template>
@@ -445,6 +501,15 @@ async function handleBack() {
           退回
         </ElButton>
       </ElSpace>
+      <ElSpace v-if="type === 'delay'">
+        <ElButton
+          v-if="buttonPermissions?.approveDelay"
+          type="primary"
+          @click="handleApproveDelay"
+        >
+          延时审批
+        </ElButton>
+      </ElSpace>
     </div>
   </div>
 
@@ -464,7 +529,9 @@ async function handleBack() {
         @close="handleCloseDrawer"
       />
     </div>
-    <div class="absolute bottom-0 left-0 right-0 border-t border-gray-200 p-4 bg-white">
+    <div
+      class="absolute bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4"
+    >
       <div class="flex justify-end space-x-2">
         <ElButton @click="drawerVisible = false">取消</ElButton>
         <ElButton type="primary" @click="handleConfirmEdit">保存</ElButton>
@@ -477,7 +544,8 @@ async function handleBack() {
     v-model="handleDrawerVisible"
     title="处理工单"
     width="800px"
-    :close-on-click-modal="false">
+    :close-on-click-modal="false"
+  >
     <div class="drawer-content p-4 pb-20">
       <ElForm
         :model="handleFormData"
@@ -517,7 +585,9 @@ async function handleBack() {
         </ElFormItem>
       </ElForm>
     </div>
-    <div class="absolute bottom-0 left-0 right-0 border-t border-gray-200 p-4 bg-white">
+    <div
+      class="absolute bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4"
+    >
       <div class="flex justify-end space-x-2">
         <ElButton @click="handleDrawerVisible = false">取消</ElButton>
         <ElButton type="primary" @click="handleSubmitForm">提交</ElButton>
@@ -530,7 +600,8 @@ async function handleBack() {
     v-model="delayDrawerVisible"
     title="延时申请"
     width="800px"
-    :close-on-click-modal="false">
+    :close-on-click-modal="false"
+  >
     <div class="drawer-content p-4 pb-20">
       <ElForm
         :model="delayFormData"
@@ -580,7 +651,9 @@ async function handleBack() {
         </ElFormItem>
       </ElForm>
     </div>
-    <div class="absolute bottom-0 left-0 right-0 border-t border-gray-200 p-4 bg-white">
+    <div
+      class="absolute bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4"
+    >
       <div class="flex justify-end space-x-2">
         <ElButton @click="delayDrawerVisible = false">取消</ElButton>
         <ElButton type="primary" @click="handleDelaySubmit">提交</ElButton>
@@ -593,17 +666,15 @@ async function handleBack() {
     v-model="ccDrawerVisible"
     title="抄送"
     width="800px"
-    :close-on-click-modal="false">
+    :close-on-click-modal="false"
+  >
     <div class="drawer-content p-4 pb-20">
-      <ElForm
-        :model="ccFormData"
-        label-width="120px"
-        class="cc-order-form"
-      >
+      <ElForm :model="ccFormData" label-width="120px" class="cc-order-form">
         <!-- 部门选择 -->
         <ElFormItem label="选择部门" required>
           <ElTreeSelect
             v-model="selectedDeptId"
+            check-strictly
             :data="deptTree"
             node-key="id"
             :props="{ label: 'label', children: 'children' }"
@@ -622,19 +693,81 @@ async function handleBack() {
           >
             <ElOption
               v-for="user in userList"
-              :key="user.id"
-              :label="user.nickname || user.username"
-              :value="user.id"
+              :key="user.userId"
+              :label="
+                user.nickName + (user.userName ? `(${user.userName})` : '')
+              "
+              :value="user.userId"
             />
           </ElSelect>
         </ElFormItem>
       </ElForm>
     </div>
-    <div class="absolute bottom-0 left-0 right-0 border-t border-gray-200 p-4 bg-white">
+    <div
+      class="absolute bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4"
+    >
       <div class="flex justify-end space-x-2">
         <ElButton @click="ccDrawerVisible = false">取消</ElButton>
         <ElButton type="primary" @click="handleCCSubmit">提交</ElButton>
       </div>
     </div>
   </ElDrawer>
+
+  <!-- 延时审批的抽屉组件 -->
+  <ElDrawer
+    v-model="approveDelayDrawerVisible"
+    title="延时审批"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <div class="drawer-content p-4 pb-20">
+      <ElForm
+        :model="approveDelayFormData"
+        label-width="120px"
+        class="approve-delay-form"
+      >
+        <!-- 审批意见 -->
+        <ElFormItem label="审批意见" required>
+          <ElInput
+            v-model="approveDelayFormData.approveRemark"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入审批意见"
+          />
+        </ElFormItem>
+
+        <!-- 审核状态 -->
+        <ElFormItem label="审核状态" required>
+          <ElSelect
+            v-model="approveDelayFormData.approveStatus"
+            placeholder="请选择审核状态"
+          >
+            <ElOption label="审核通过" value="1" />
+            <ElOption label="审核拒绝" value="2" />
+          </ElSelect>
+        </ElFormItem>
+
+        <!-- 新截止时间 -->
+        <ElFormItem label="新截止时间" required>
+          <ElDatePicker
+            v-model="approveDelayFormData.newDeadline"
+            type="datetime"
+            placeholder="请选择新截止时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </ElFormItem>
+      </ElForm>
+    </div>
+    <div
+      class="absolute bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4"
+    >
+      <div class="flex justify-end space-x-2">
+        <ElButton @click="approveDelayDrawerVisible = false">取消</ElButton>
+        <ElButton type="primary" @click="handleApproveDelaySubmit">
+          提交
+        </ElButton>
+      </div>
+    </div>
+  </ElDrawer>
 </template>

apps/web-ele/src/views/workflow/task/delayedReview.vue

@@ -0,0 +1,282 @@
+<!-- eslint-disable no-use-before-define -->
+<script setup lang="ts">
+import type { TaskInfo } from '#/api/workflow/task/model';
+
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Refresh, Search } from '@element-plus/icons-vue';
+import { ElButton, ElEmpty, ElInput, ElMessage, ElTooltip } from 'element-plus';
+import { cloneDeep, debounce } from 'lodash-es';
+
+import { getWorkOrderDetail, pageByDelay } from '#/api/workflow/instance';
+
+import { ApprovalCard, ApprovalPanel } from '../components';
+import { bottomOffset } from './constant';
+
+const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
+
+const taskList = ref<(TaskInfo & { active: boolean })[]>([]);
+const taskTotal = ref(0);
+const page = ref(1);
+const loading = ref(false);
+
+const defaultFormData = {
+  searchKeyword: '', // 通用搜索关键词
+  nodeName: '', // 任务名称
+  flowCode: '', // 流程定义编码
+  category: null as null | number, // 流程分类
+};
+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);
+  }
+
+  loading.value = true;
+  try {
+    // 根据搜索关键词类型动态决定搜索字段
+    const searchParams = { ...formData.value };
+    const { searchKeyword, ...otherParams } = searchParams;
+
+    // 如果有搜索关键词
+    if (searchKeyword) {
+      // 检查是否为数字
+      if (/^\d+$/.test(searchKeyword)) {
+        // 数字搜索orderNo
+        otherParams.orderNo = searchKeyword;
+      } else {
+        // 文字搜索content
+        otherParams.content = searchKeyword;
+      }
+    }
+
+    const resp = await pageByDelay({
+      pageSize: 10,
+      pageNum: page.value,
+      ...otherParams,
+    });
+    taskList.value = resp.rows.map((item) => ({
+      ...item,
+      active: false,
+      id: String(item.id),
+    }));
+    taskTotal.value = resp.total;
+  } catch {
+    ElMessage.error('加载任务列表失败');
+  } finally {
+    loading.value = false;
+  }
+
+  // 默认选中第一个
+  if (taskList.value.length > 0) {
+    const firstTask = taskList.value[0]!;
+    currentTask.value = firstTask;
+    currentTaskButtonData.value = firstTask.button;
+    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;
+
+  // 滚动到底部且没有加载完成
+  if (isBottom && !isLoadComplete.value) {
+    loading.value = true;
+    try {
+      page.value += 1;
+
+      // 根据搜索关键词类型动态决定搜索字段
+      const searchParams = { ...formData.value };
+      const { searchKeyword, ...otherParams } = searchParams;
+
+      // 如果有搜索关键词
+      if (searchKeyword) {
+        // 检查是否为数字
+        if (/^\d+$/.test(searchKeyword)) {
+          // 数字搜索orderNo
+          otherParams.orderNo = searchKeyword;
+        } else {
+          // 文字搜索content
+          otherParams.content = searchKeyword;
+        }
+      }
+
+      const resp = await pageByDelay({
+        pageSize: 10,
+        pageNum: page.value,
+        ...otherParams,
+      });
+      taskList.value.push(
+        ...resp.rows.map((item) => ({
+          ...item,
+          active: false,
+          id: String(item.id),
+        })),
+      );
+    } catch {
+      ElMessage.error('加载更多任务失败');
+    } finally {
+      loading.value = false;
+    }
+  }
+}, 200);
+
+const lastSelectId = ref('');
+const currentTask = ref<TaskInfo>();
+const currentWorkOrderDetail = ref<any>();
+const currentTaskButtonData = ref<any>('');
+async function handleCardClick(item: TaskInfo) {
+  const { taskId, orderId } = item;
+  // 点击的是同一个
+  if (lastSelectId.value === taskId) {
+    return;
+  }
+  currentTask.value = item;
+  currentTaskButtonData.value = item.button;
+  // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
+  taskList.value.forEach((item) => {
+    item.active = item.taskId === taskId;
+  });
+  lastSelectId.value = taskId;
+  // 调用获取工单详情的接口
+  try {
+    const detail = await getWorkOrderDetail(orderId);
+    // 保存工单详情
+    currentWorkOrderDetail.value = detail;
+  } catch (error) {
+    console.error('获取工单详情失败:', error);
+    ElMessage.error('获取工单详情失败');
+  }
+}
+
+const { refreshTab } = useTabs();
+
+// 按钮权限控制
+const currentTaskButtonPermissions = computed(() => {
+  // 如果没有当前任务，返回空对象
+  if (!currentTaskButtonData.value) {
+    return {};
+  }
+  // 初始化权限对象
+  const permissions: Record<string, boolean> = {};
+
+  permissions.approveDelay = true;
+  return permissions;
+});
+</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"
+        >
+          <div class="grid grid-cols-1 gap-2">
+            <div class="flex items-center gap-1">
+              <ElInput
+                v-model="formData.searchKeyword"
+                placeholder="输入数字搜索工单号，输入文字搜索内容"
+                clearable
+                class="w-full"
+                :suffix-icon="Search"
+                @keyup.enter="reload(false)"
+              />
+              <ElTooltip placement="top" content="重置">
+                <ElButton @click="reload(true)" :icon="Refresh" />
+              </ElTooltip>
+            </div>
+          </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.id"
+              :info="item"
+              class="mx-2"
+              @click="handleCardClick(item)"
+            />
+          </template>
+          <ElEmpty v-else :image="emptyImage" description="暂无数据" />
+          <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)]"
+          ></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"
+        :work-order-detail="currentWorkOrderDetail"
+        :button-permissions="currentTaskButtonPermissions"
+        type="delay"
+        @reload="refreshTab"
+      />
+    </div>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.thin-scrollbar {
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+}
+</style>

apps/web-ele/src/views/workflow/task/taskCopyList.vue

@@ -9,13 +9,12 @@ import { useTabs } from '@vben/hooks';
 
 import { Refresh, Search } from '@element-plus/icons-vue';
 import { ElButton, ElEmpty, ElInput, ElMessage, ElTooltip } from 'element-plus';
-
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { pageByCc, getWorkOrderDetail } from '#/api/workflow/instance';
+import { getWorkOrderDetail, pageByCc } from '#/api/workflow/instance';
 
-import { bottomOffset } from './constant';
 import { ApprovalCard, ApprovalPanel } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
@@ -63,7 +62,7 @@ async function reload(resetFields: boolean = false) {
     // 根据搜索关键词类型动态决定搜索字段
     const searchParams = { ...formData.value };
     const { searchKeyword, ...otherParams } = searchParams;
-    
+
     // 如果有搜索关键词
     if (searchKeyword) {
       // 检查是否为数字
@@ -75,13 +74,17 @@ async function reload(resetFields: boolean = false) {
         otherParams.content = searchKeyword;
       }
     }
-    
+
     const resp = await pageByCc({
       pageSize: 10,
       pageNum: page.value,
       ...otherParams,
     });
-    taskList.value = resp.rows.map((item) => ({ ...item, active: false, id: String(item.id) }));
+    taskList.value = resp.rows.map((item) => ({
+      ...item,
+      active: false,
+      id: String(item.id),
+    }));
     taskTotal.value = resp.total;
   } catch {
     ElMessage.error('加载任务列表失败');
@@ -93,6 +96,7 @@ async function reload(resetFields: boolean = false) {
   if (taskList.value.length > 0) {
     const firstTask = taskList.value[0]!;
     currentTask.value = firstTask;
+    currentTaskButtonData.value = firstTask.button;
     handleCardClick(firstTask);
   }
 }
@@ -115,11 +119,11 @@ const handleScroll = debounce(async (e: Event) => {
     loading.value = true;
     try {
       page.value += 1;
-      
+
       // 根据搜索关键词类型动态决定搜索字段
       const searchParams = { ...formData.value };
       const { searchKeyword, ...otherParams } = searchParams;
-      
+
       // 如果有搜索关键词
       if (searchKeyword) {
         // 检查是否为数字
@@ -131,14 +135,18 @@ const handleScroll = debounce(async (e: Event) => {
           otherParams.content = searchKeyword;
         }
       }
-      
+
       const resp = await pageByCc({
         pageSize: 10,
         pageNum: page.value,
         ...otherParams,
       });
       taskList.value.push(
-        ...resp.rows.map((item) => ({ ...item, active: false, id: String(item.id) })),
+        ...resp.rows.map((item) => ({
+          ...item,
+          active: false,
+          id: String(item.id),
+        })),
       );
     } catch {
       ElMessage.error('加载更多任务失败');
@@ -150,24 +158,26 @@ const handleScroll = debounce(async (e: Event) => {
 
 const lastSelectId = ref('');
 const currentTask = ref<TaskInfo>();
+const currentWorkOrderDetail = ref<any>();
+const currentTaskButtonData = ref<any>('');
 async function handleCardClick(item: TaskInfo) {
   const { taskId, orderId } = item;
   // 点击的是同一个
-  if (lastSelectId.value === orderId) {
+  if (lastSelectId.value === taskId) {
     return;
   }
   currentTask.value = item;
+  currentTaskButtonData.value = item.button;
   // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
   taskList.value.forEach((item) => {
     item.active = item.taskId === taskId;
   });
-  lastSelectId.value = orderId;
-  
+  lastSelectId.value = taskId;
   // 调用获取工单详情的接口
   try {
     const detail = await getWorkOrderDetail(orderId);
-    // 可以在这里使用获取到的工单详情数据
-    currentTask.value = detail;
+    // 保存工单详情
+    currentWorkOrderDetail.value = detail;
   } catch (error) {
     console.error('获取工单详情失败:', error);
     ElMessage.error('获取工单详情失败');
@@ -175,6 +185,31 @@ async function handleCardClick(item: TaskInfo) {
 }
 
 const { refreshTab } = useTabs();
+
+// 按钮权限控制
+const currentTaskButtonPermissions = computed(() => {
+  // 如果没有当前任务，返回空对象
+  if (!currentTaskButtonData.value) {
+    return {};
+  }
+  // 初始化权限对象
+  const permissions: Record<string, boolean> = {};
+
+  // 获取 button 字段
+  const button = currentTaskButtonData.value;
+  // 如果 button 字段存在，解析为数组
+  if (button) {
+    const buttonArray = button.split(',');
+    console.log('buttonArray', buttonArray);
+    // 设置对应按钮的权限
+    permissions.handle = buttonArray.includes('handle');
+    permissions.delay = buttonArray.includes('delay');
+    permissions.cc = buttonArray.includes('cc');
+    permissions.back = buttonArray.includes('back');
+  }
+  console.log('currentTaskButtonPermissions', permissions);
+  return permissions;
+});
 </script>
 
 <template>
@@ -197,7 +232,7 @@ const { refreshTab } = useTabs();
                 :suffix-icon="Search"
                 @keyup.enter="reload(false)"
               />
-               <ElTooltip placement="top" content="重置">
+              <ElTooltip placement="top" content="重置">
                 <ElButton @click="reload(true)" :icon="Refresh" />
               </ElTooltip>
             </div>
@@ -231,13 +266,21 @@ const { refreshTab } = useTabs();
           ></div>
         </div>
         <!-- total显示 -->
-        <div class="bg-background sticky bottom-0 w-full rounded-b-lg border-t-[1px] py-2">
+        <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="myself" @reload="refreshTab" />
+      <ApprovalPanel
+        :task="currentTask"
+        :work-order-detail="currentWorkOrderDetail"
+        :button-permissions="currentTaskButtonPermissions"
+        type="waiting"
+        @reload="refreshTab"
+      />
     </div>
   </Page>
 </template>
@@ -249,5 +292,3 @@ const { refreshTab } = useTabs();
   }
 }
 </style>
-
-

apps/web-ele/src/views/workflow/task/taskFinish.vue

@@ -9,13 +9,12 @@ import { useTabs } from '@vben/hooks';
 
 import { Refresh, Search } from '@element-plus/icons-vue';
 import { ElButton, ElEmpty, ElInput, ElMessage, ElTooltip } from 'element-plus';
-
 import { cloneDeep, debounce } from 'lodash-es';
 
-import { pageByCompleted, getWorkOrderDetail } from '#/api/workflow/instance';
+import { getWorkOrderDetail, pageByCompleted } from '#/api/workflow/instance';
 
-import { bottomOffset } from './constant';
 import { ApprovalCard, ApprovalPanel } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = ElEmpty.PRESENTED_IMAGE_SIMPLE;
 
@@ -63,7 +62,7 @@ async function reload(resetFields: boolean = false) {
     // 根据搜索关键词类型动态决定搜索字段
     const searchParams = { ...formData.value };
     const { searchKeyword, ...otherParams } = searchParams;
-    
+
     // 如果有搜索关键词
     if (searchKeyword) {
       // 检查是否为数字
@@ -75,13 +74,17 @@ async function reload(resetFields: boolean = false) {
         otherParams.content = searchKeyword;
       }
     }
-    
+
     const resp = await pageByCompleted({
       pageSize: 10,
       pageNum: page.value,
       ...otherParams,
     });
-    taskList.value = resp.rows.map((item) => ({ ...item, active: false, id: String(item.id) }));
+    taskList.value = resp.rows.map((item) => ({
+      ...item,
+      active: false,
+      id: String(item.id),
+    }));
     taskTotal.value = resp.total;
   } catch {
     ElMessage.error('加载任务列表失败');
@@ -93,6 +96,7 @@ async function reload(resetFields: boolean = false) {
   if (taskList.value.length > 0) {
     const firstTask = taskList.value[0]!;
     currentTask.value = firstTask;
+    currentTaskButtonData.value = firstTask.button;
     handleCardClick(firstTask);
   }
 }
@@ -115,11 +119,11 @@ const handleScroll = debounce(async (e: Event) => {
     loading.value = true;
     try {
       page.value += 1;
-      
+
       // 根据搜索关键词类型动态决定搜索字段
       const searchParams = { ...formData.value };
       const { searchKeyword, ...otherParams } = searchParams;
-      
+
       // 如果有搜索关键词
       if (searchKeyword) {
         // 检查是否为数字
@@ -131,14 +135,18 @@ const handleScroll = debounce(async (e: Event) => {
           otherParams.content = searchKeyword;
         }
       }
-      
+
       const resp = await pageByCompleted({
         pageSize: 10,
         pageNum: page.value,
         ...otherParams,
       });
       taskList.value.push(
-        ...resp.rows.map((item) => ({ ...item, active: false, id: String(item.id) })),
+        ...resp.rows.map((item) => ({
+          ...item,
+          active: false,
+          id: String(item.id),
+        })),
       );
     } catch {
       ElMessage.error('加载更多任务失败');
@@ -150,24 +158,26 @@ const handleScroll = debounce(async (e: Event) => {
 
 const lastSelectId = ref('');
 const currentTask = ref<TaskInfo>();
+const currentWorkOrderDetail = ref<any>();
+const currentTaskButtonData = ref<any>('');
 async function handleCardClick(item: TaskInfo) {
   const { taskId, orderId } = item;
   // 点击的是同一个
-  if (lastSelectId.value === orderId) {
+  if (lastSelectId.value === taskId) {
     return;
   }
   currentTask.value = item;
+  currentTaskButtonData.value = item.button;
   // 反选状态 & 如果已经点击了 不变 & 保持只能有一个选中
   taskList.value.forEach((item) => {
     item.active = item.taskId === taskId;
   });
-  lastSelectId.value = orderId;
-  
+  lastSelectId.value = taskId;
   // 调用获取工单详情的接口
   try {
     const detail = await getWorkOrderDetail(orderId);
-    // 可以在这里使用获取到的工单详情数据
-    currentTask.value = detail;
+    // 保存工单详情
+    currentWorkOrderDetail.value = detail;
   } catch (error) {
     console.error('获取工单详情失败:', error);
     ElMessage.error('获取工单详情失败');
@@ -175,6 +185,31 @@ async function handleCardClick(item: TaskInfo) {
 }
 
 const { refreshTab } = useTabs();
+
+// 按钮权限控制
+const currentTaskButtonPermissions = computed(() => {
+  // 如果没有当前任务，返回空对象
+  if (!currentTaskButtonData.value) {
+    return {};
+  }
+  // 初始化权限对象
+  const permissions: Record<string, boolean> = {};
+
+  // 获取 button 字段
+  const button = currentTaskButtonData.value;
+  // 如果 button 字段存在，解析为数组
+  if (button) {
+    const buttonArray = button.split(',');
+    console.log('buttonArray', buttonArray);
+    // 设置对应按钮的权限
+    permissions.handle = buttonArray.includes('handle');
+    permissions.delay = buttonArray.includes('delay');
+    permissions.cc = buttonArray.includes('cc');
+    permissions.back = buttonArray.includes('back');
+  }
+  console.log('currentTaskButtonPermissions', permissions);
+  return permissions;
+});
 </script>
 
 <template>
@@ -197,7 +232,7 @@ const { refreshTab } = useTabs();
                 :suffix-icon="Search"
                 @keyup.enter="reload(false)"
               />
-               <ElTooltip placement="top" content="重置">
+              <ElTooltip placement="top" content="重置">
                 <ElButton @click="reload(true)" :icon="Refresh" />
               </ElTooltip>
             </div>
@@ -231,13 +266,21 @@ const { refreshTab } = useTabs();
           ></div>
         </div>
         <!-- total显示 -->
-        <div class="bg-background sticky bottom-0 w-full rounded-b-lg border-t-[1px] py-2">
+        <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="myself" @reload="refreshTab" />
+      <ApprovalPanel
+        :task="currentTask"
+        :work-order-detail="currentWorkOrderDetail"
+        :button-permissions="currentTaskButtonPermissions"
+        type="waiting"
+        @reload="refreshTab"
+      />
     </div>
   </Page>
 </template>
@@ -249,4 +292,3 @@ const { refreshTab } = useTabs();
   }
 }
 </style>
-