diff --git a/apps/web-antd/src/api/workflow/task/model.d.ts b/apps/web-antd/src/api/workflow/task/model.d.ts
index cf32df16..cbbb6b19 100644
--- a/apps/web-antd/src/api/workflow/task/model.d.ts
+++ b/apps/web-antd/src/api/workflow/task/model.d.ts
@@ -34,6 +34,8 @@ export interface CompleteTaskReqData {
   taskId: ID;
   taskVariables: Record<string, any>;
   variables: any;
+  // 附件ID 1,2,3,4形式
+  fileId?: string;
 }
 
 export interface StartWorkFlowReqData {
diff --git a/apps/web-antd/src/views/workflow/components/approval-modal.vue b/apps/web-antd/src/views/workflow/components/approval-modal.vue
new file mode 100644
index 00000000..aea9453d
--- /dev/null
+++ b/apps/web-antd/src/views/workflow/components/approval-modal.vue
@@ -0,0 +1,147 @@
+<!-- 审批同意的弹窗 -->
+<!-- 审批驳回窗口 -->
+<script setup lang="ts">
+import type { CompleteTaskReqData } from '#/api/workflow/task/model';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { omit } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { completeTask } from '#/api/workflow/task';
+
+const emit = defineEmits<{ complete: [] }>();
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 100,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [
+    {
+      fieldName: 'taskId',
+      component: 'Input',
+      label: '任务ID',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'messageType',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: [
+          { label: '站内信', value: '1', disabled: true },
+          { label: '邮件', value: '2' },
+          { label: '短信', value: '3' },
+        ],
+      },
+      label: '通知方式',
+      defaultValue: ['1'],
+    },
+    {
+      fieldName: 'attachment',
+      component: 'FileUpload',
+      componentProps: {
+        resultField: 'ossId',
+        maxNumber: 10,
+        maxSize: 20,
+        accept: [
+          'png',
+          'jpg',
+          'jpeg',
+          'doc',
+          'docx',
+          'xlsx',
+          'xls',
+          'ppt',
+          'pdf',
+        ],
+      },
+      defaultValue: [],
+      label: '附件上传',
+      formItemClass: 'items-baseline',
+    },
+    {
+      fieldName: 'flowCopyList',
+      component: 'Input',
+      defaultValue: [],
+      label: '抄送人',
+    },
+    {
+      fieldName: 'message',
+      component: 'Textarea',
+      label: '审批意见',
+      formItemClass: 'items-baseline',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+interface ModalProps {
+  taskId: string;
+}
+
+const [BasicModal, modalApi] = useVbenModal({
+  title: '审批驳回',
+  fullscreenButton: false,
+  class: 'min-h-[365px]',
+  onConfirm: handleSubmit,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await formApi.resetForm();
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { taskId } = modalApi.getData() as ModalProps;
+    await formApi.setFieldValue('taskId', taskId);
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    console.log(data);
+    const requestData = {
+      ...omit(data, ['attachment']),
+      fileId: data.attachment.join(','),
+      taskVariables: {},
+      variables: {},
+    } as CompleteTaskReqData;
+    await completeTask(requestData);
+    emit('complete');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+</script>
+
+<template>
+  <BasicModal>
+    <BasicForm>
+      <template #flowCopyList>
+        <span>抄送待开发</span>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
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 a1e75251..dce66ddb 100644
--- a/apps/web-antd/src/views/workflow/components/approval-panel.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-panel.vue
@@ -23,7 +23,7 @@ import { flowInfo } from '#/api/workflow/instance';
 import { terminationTask } from '#/api/workflow/task';
 import { renderDict } from '#/utils/render';
 
-import { approvalRejectionModal, ApprovalTimeline } from '.';
+import { approvalModal, approvalRejectionModal, ApprovalTimeline } from '.';
 
 defineOptions({
   name: 'ApprovalPanel',
@@ -118,6 +118,17 @@ function handleTermination() {
     },
   });
 }
+
+/**
+ * 审批通过
+ */
+const [ApprovalModal, approvalModalApi] = useVbenModal({
+  connectedComponent: approvalModal,
+});
+function handleApproval() {
+  approvalModalApi.setData({ taskId: props.task?.id });
+  approvalModalApi.open();
+}
 </script>
 
 <template>
@@ -199,7 +210,7 @@ function handleTermination() {
           </Popconfirm>
         </Space>
         <Space v-if="type === 'approve'">
-          <a-button type="primary">通过</a-button>
+          <a-button type="primary" @click="handleApproval">通过</a-button>
           <a-button danger type="primary" @click="handleTermination">
             终止
           </a-button>
@@ -207,6 +218,7 @@ function handleTermination() {
             驳回
           </a-button>
           <a-button>其他</a-button>
+          <ApprovalModal />
           <RejectionModal />
         </Space>
       </div>
diff --git a/apps/web-antd/src/views/workflow/components/index.ts b/apps/web-antd/src/views/workflow/components/index.ts
index 11ba5407..ce141301 100644
--- a/apps/web-antd/src/views/workflow/components/index.ts
+++ b/apps/web-antd/src/views/workflow/components/index.ts
@@ -1,6 +1,13 @@
 export { default as applyModal } from './apply-modal.vue';
 export { default as ApprovalCard } from './approval-card.vue';
+/**
+ * 审批同意
+ */
+export { default as approvalModal } from './approval-modal.vue';
 export { default as ApprovalPanel } from './approval-panel.vue';
+/**
+ * 审批驳回
+ */
 export { default as approvalRejectionModal } from './approval-rejection-modal.vue';
 export { default as ApprovalTimeline } from './approval-timeline.vue';
 export { default as UserSelectModal } from './user-select-modal.vue';