chore: 审批终止/驳回

This commit is contained in:
dap 2024-12-17 09:06:46 +08:00
parent 4b41f8d9dc
commit 06f76bea0a
5 changed files with 179 additions and 8 deletions

View File

@ -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}`,
);
}
/**

View File

@ -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>

View File

@ -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>

View File

@ -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';

View File

@ -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>