From fd6eabc4d8c7843244cab62c2b9e1a38f0b3295d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 17 Oct 2025 15:41:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=8A=BD=E5=B1=89=E7=BB=84=E4=BB=B6=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E4=B8=8E=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 ApprovalType 类型替代内联联合类型，提升代码可维护性
- 使用 computed 计算属性 showFooter 控制底部操作栏显隐逻辑
- 移除原先通过 drawerApi 动态设置 footer 的方式，改用条件渲染
- 修复 footer 插槽在只读模式下仍渲染内容的问题
- 添加 TODO 注释说明当前 footer 插槽存在的设计问题
---
 .../components/approval-panel-drawer.vue      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/approval-panel-drawer.vue b/apps/web-antd/src/views/workflow/components/approval-panel-drawer.vue
index 592993ba..80f7bbc6 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel-drawer.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel-drawer.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ApprovalType } from './type';
+
 import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenDrawer, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
@@ -22,7 +24,7 @@ const emit = defineEmits<{ reload: [] }>();
 
 interface DrawerProps {
   task: TaskInfo;
-  type: 'admin' | 'approve' | 'myself' | 'readonly';
+  type: ApprovalType;
 }
 
 const currentTask = ref<null | TaskInfo>(null);
@@ -31,8 +33,6 @@ const currentType = ref<DrawerProps['type'] | null>(null);
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   title: '流程',
-  // 默认不显示footer
-  footer: false,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
       return null;
@@ -62,10 +62,10 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       }
       // 最后赋值type
       currentType.value = type;
-      // 设置是否显示footer
-      drawerApi.setState({
-        footer: type !== 'readonly',
-      });
+      // // 设置是否显示footer
+      // drawerApi.setState({
+      //   footer: type !== 'readonly',
+      // });
     } catch (error) {
       console.error(error);
     } finally {
@@ -88,6 +88,10 @@ async function handleAfterAction() {
   emit('reload');
   drawerApi.close();
 }
+
+const showFooter = computed(() => {
+  return ![null, 'readonly'].includes(currentType.value);
+});
 </script>
 
 <template>
@@ -152,12 +156,14 @@ async function handleAfterAction() {
     </div>
 
     <template #footer>
+      <!-- TODO: 暂时只能这样处理 footer常驻但不显示内容 这个插槽有点迷 -->
       <FlowActions
-        v-if="currentTask && currentType"
+        v-if="showFooter && currentTask && currentType"
         :task="currentTask"
         :type="currentType"
         @reload="handleAfterAction"
       />
+      <div v-else></div>
     </template>
   </BasicDrawer>
 </template>