chore: 审批终止/驳回

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

@@ -95,7 +95,7 @@ export function getTaskByTaskId(taskId: string) {
  * 终止任务
  * @param data
  */
-export function terminationTask(data: any) {
+export function terminationTask(data: { taskId: string }) {
   return requestClient.postWithMsg<void>(
     '/workflow/task/terminationTask',
     data,
@@ -142,7 +142,9 @@ export function backProcess(data: any) {
  * @param instanceId 实例id
  */
 export function getBackTaskNode(instanceId: string) {
-  return requestClient.get(`/workflow/task/getBackTaskNode/${instanceId}`);
+  return requestClient.get<{ nodeCode: string; nodeName: string }[]>(
+    `/workflow/task/getBackTaskNode/${instanceId}`,
+  );
 }
 
 /**

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

@@ -4,12 +4,13 @@ import type { TaskInfo } from '#/api/workflow/task/model';
 
 import { computed, onUnmounted, ref, watch } from 'vue';
 
-import { Fallback, VbenAvatar } from '@vben/common-ui';
+import { Fallback, useVbenModal, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
 import {
   Card,
   Divider,
+  Modal,
   Popconfirm,
   Space,
   TabPane,
@@ -17,9 +18,10 @@ import {
 } from 'ant-design-vue';
 
 import { flowInfo } from '#/api/workflow/instance';
+import { terminationTask } from '#/api/workflow/task';
 import { renderDict } from '#/utils/render';
 
-import { ApprovalTimeline } from '.';
+import { approvalRejectionModal, ApprovalTimeline } from '.';
 
 defineOptions({
   name: 'ApprovalPanel',
@@ -32,8 +34,9 @@ const props = defineProps<{ task?: TaskInfo; type: ApprovalType }>();
 /**
  * myself 我发起的
  * readonly 只读 只用于查看
+ * approve 审批
  */
-type ApprovalType = 'myself' | 'readonly';
+type ApprovalType = 'approve' | 'myself' | 'readonly';
 const showFooter = computed(() => {
   if (props.type === 'readonly') {
     return false;
@@ -74,6 +77,35 @@ onUnmounted(() => (currentFlowInfo.value = undefined));
 async function handleCancel() {
   // await cancelProcessApply()
 }
+
+/**
+ * 审批驳回
+ */
+const [RejectionModal, rejectionModalApi] = useVbenModal({
+  connectedComponent: approvalRejectionModal,
+});
+function handleRejection() {
+  rejectionModalApi.setData({
+    taskId: props.task?.id,
+    instanceId: props.task?.instanceId,
+  });
+  rejectionModalApi.open();
+}
+
+/**
+ * 审批终止
+ */
+function handleTermination() {
+  Modal.confirm({
+    title: '审批终止',
+    content: '确定终止当前审批流程吗？',
+    centered: true,
+    okButtonProps: { danger: true },
+    onOk: async () => {
+      await terminationTask({ taskId: props.task!.id });
+    },
+  });
+}
 </script>
 
 <template>
@@ -152,10 +184,16 @@ async function handleCancel() {
             <a-button danger type="primary">撤销申请</a-button>
           </Popconfirm>
         </Space>
-        <Space v-if="false">
+        <Space v-if="type === 'approve'">
           <a-button type="primary">通过</a-button>
-          <a-button danger type="primary">驳回</a-button>
+          <a-button danger type="primary" @click="handleTermination">
+            终止
+          </a-button>
+          <a-button danger type="primary" @click="handleRejection">
+            驳回
+          </a-button>
           <a-button>其他</a-button>
+          <RejectionModal />
         </Space>
       </div>
     </div>

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

@@ -0,0 +1,130 @@
+<!-- 审批驳回窗口 -->
+<script setup lang="ts">
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { backProcess, getBackTaskNode } 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: 'nodeCode',
+      component: 'Select',
+      componentProps: {
+        getPopupContainer,
+      },
+      label: '驳回节点',
+    },
+    {
+      fieldName: 'message',
+      component: 'Textarea',
+      label: '审批意见',
+      formItemClass: 'items-baseline',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+interface ModalProps {
+  taskId: string;
+  instanceId: 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, instanceId } = modalApi.getData() as ModalProps;
+    await formApi.setFieldValue('taskId', taskId);
+
+    const resp = await getBackTaskNode(instanceId);
+    const options = resp.map((item) => ({
+      label: item.nodeName,
+      value: item.nodeCode,
+    }));
+    formApi.updateSchema([
+      {
+        fieldName: 'nodeCode',
+        componentProps: {
+          options,
+        },
+      },
+    ]);
+    // 默认选中第一个节点
+    if (options.length > 0) {
+      formApi.setFieldValue('nodeCode', options[0]?.value);
+    }
+
+    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);
+    await backProcess(data);
+    emit('complete');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+</script>
+
+<template>
+  <BasicModal>
+    <BasicForm />
+  </BasicModal>
+</template>

apps/web-antd/src/views/workflow/components/index.ts

@@ -1,5 +1,6 @@
 export { default as applyModal } from './apply-modal.vue';
 export { default as ApprovalCard } from './approval-card.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';

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

@@ -116,7 +116,7 @@ async function handleCardClick(item: TaskInfo) {
           </div>
         </div>
       </div>
-      <ApprovalPanel :task="currentTask" type="readonly" />
+      <ApprovalPanel :task="currentTask" type="approve" />
     </div>
   </Page>
 </template>