GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat-wip(projects): 新增流程干预，组件命名统一

Browse Source
This commit is contained in:
AN 2025-06-23 22:35:44 +08:00
parent 1c322e28ef
commit 81449ea77a
8 changed files with 232 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/custom/workflow/workflow-category-select.vue → src/components/custom/workflow/flow-category-select.vue
View File

@ -5,7 +5,7 @@ import { useLoading } from '@sa/hooks';
import { fetchGetCategoryTree } from '@/service/api/workflow'; import { fetchGetCategoryTree } from '@/service/api/workflow';
import { isNull } from '@/utils/common'; import { isNull } from '@/utils/common';
defineOptions({ name: 'WorkflowCategorySelect' }); defineOptions({ name: 'FlowCategorySelect' });
interface Props { interface Props {
[key: string]: any; [key: string]: any;

84
src/components/custom/workflow/flow-drawer.vue Normal file
View File

@ -0,0 +1,84 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
interface Props {
/** 抽屉是否可见 */
visible?: boolean;
/** 抽屉标题 */
title: string;
/** 是否显示加载状态 */
loading?: boolean;
/** 抽屉宽度 */
width?: number;
/** 是否为只读模式 */
readonly?: boolean;
/** 是否显示暂存按钮 */
showDraft?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
loading: false,
width: 1200,
readonly: false,
showDraft: true
});
interface Emits {
(e: 'update:visible', visible: boolean): void;
(e: 'close'): void;
(e: 'saveDraft'): void;
(e: 'submit'): void;
}
const emit = defineEmits<Emits>();
const visibleValue = computed({
get: () => props.visible,
set: value => {
emit('update:visible', value);
}
});
function handleClose() {
emit('close');
}
function handleSaveDraft() {
emit('saveDraft');
}
function handleSubmit() {
emit('submit');
}
defineExpose({
handleClose,
handleSaveDraft,
handleSubmit
});
</script>
<template>
<NDrawer v-model:show="visibleValue" :title="title" display-directive="show" :width="width" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable @close="handleClose">
<NSpin :show="loading">
<slot></slot>
</NSpin>
<template #footer>
<slot name="footer">
<div v-if="!readonly">
<NSpace :size="16">
<NButton @click="handleClose">{{ $t('common.cancel') }}</NButton>
<NButton v-if="showDraft" type="warning" @click="handleSaveDraft">暂存</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</div>
</slot>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>

40
src/components/custom/workflow/flow-intervene-modal.vue Normal file
View File

@ -0,0 +1,40 @@
<script lang="ts" setup>
defineOptions({
name: 'FlowInterveneModal'
});
interface Props {
rowData: Api.Workflow.TaskOrHisTask;
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
</script>
<template>
<NModal v-model:show="visible" class="max-h-520px max-w-90% w-700px" title="流程干预" preset="card" size="medium">
<NDescriptions label-placement="left" :column="2" size="small" bordered>
<NDescriptionsItem label="任务名称">
{{ props.rowData.nodeName }}
</NDescriptionsItem>
<NDescriptionsItem label="节点编码">
{{ props.rowData.nodeCode }}
</NDescriptionsItem>
<NDescriptionsItem label="开始时间">
{{ props.rowData.createTime }}
</NDescriptionsItem>
<NDescriptionsItem label="流程实例ID">
{{ props.rowData.instanceId }}
</NDescriptionsItem>
<NDescriptionsItem label="版本号">
{{ props.rowData.version }}
</NDescriptionsItem>
<NDescriptionsItem label="业务ID">
{{ props.rowData.businessId }}
</NDescriptionsItem>
</NDescriptions>
</NModal>
</template>

2
src/components/custom/workflow/workflow-task-apply-modal.vue → src/components/custom/workflow/flow-task-approval-modal.vue
View File

@ -6,7 +6,7 @@ import { fetchCompleteTask, fetchGetTask } from '@/service/api/workflow';
import FileUpload from '@/components/custom/file-upload.vue'; import FileUpload from '@/components/custom/file-upload.vue';
defineOptions({ defineOptions({
name: 'WorkflowTaskApplyModal' name: 'FlowTaskApprovalModal'
}); });
interface Props { interface Props {

141
src/components/custom/workflow/leave-edit/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'; import { computed, reactive, ref, watch } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useBoolean, useLoading } from '@sa/hooks'; import { useBoolean, useLoading } from '@sa/hooks';
import { flowCodeTypeOptions, flowCodeTypeRecord, leaveTypeOptions, leaveTypeRecord } from '@/constants/workflow'; import { flowCodeTypeOptions, flowCodeTypeRecord, leaveTypeOptions, leaveTypeRecord } from '@/constants/workflow';
@ -8,7 +8,8 @@ import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict'; import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales'; import { $t } from '@/locales';
import ApprovalInfoPanel from '@/components/custom/workflow/approval-info-panel.vue'; import ApprovalInfoPanel from '@/components/custom/workflow/approval-info-panel.vue';
import WorkflowTaskApplyModal from '@/components/custom/workflow/workflow-task-apply-modal.vue'; import FlowTaskApprovalModal from '@/components/custom/workflow/flow-task-approval-modal.vue';
import FlowDrawer from '@/components/custom/workflow/flow-drawer.vue';
defineOptions({ defineOptions({
name: 'LeaveEdit' name: 'LeaveEdit'
@ -188,12 +189,14 @@ async function handleSaveDraft() {
await handleOperate(); await handleOperate();
window.$message?.success($t('common.updateSuccess')); window.$message?.success($t('common.updateSuccess'));
closeDrawer(); closeDrawer();
emit('submitted');
} }
const taskVariables = ref<{ [key: string]: any }>({}); const taskVariables = ref<{ [key: string]: any }>({});
async function handleSubmit() { async function handleSubmit() {
await handleOperate(); await handleOperate();
window.$message?.success($t('common.updateSuccess'));
// 提交流程 // 提交流程
startWorkflowModel.businessId = respLeave.value?.id; startWorkflowModel.businessId = respLeave.value?.id;
startWorkflowModel.flowCode = model.flowCode; startWorkflowModel.flowCode = model.flowCode;
@ -205,7 +208,6 @@ async function handleSubmit() {
const { error, data } = await fetchStartWorkflow(startWorkflowModel); const { error, data } = await fetchStartWorkflow(startWorkflowModel);
if (error) return; if (error) return;
startWorkflowResult.value = data; startWorkflowResult.value = data;
window.$message?.success($t('common.updateSuccess'));
setTaskApplyVisible(); setTaskApplyVisible();
} }
@ -227,79 +229,72 @@ async function initializeData() {
} }
} }
watch(visible, initializeData); watch(visible, initializeData, { immediate: true });
onMounted(initializeData);
</script> </script>
<template> <template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1300" class="max-w-90%"> <FlowDrawer
<NDrawerContent :title="title" :native-scrollbar="false" closable> v-model:visible="visible"
<NSpin :show="loading"> :title="title"
<div :class="loading ? 'hidden' : ''"> :loading="loading"
<div v-if="!readonly" class="h-full"> :readonly="readonly"
<NForm ref="formRef" :model="model" :rules="rules"> @close="closeDrawer"
<NFormItem label="流程类型" path="flowCode"> @save-draft="handleSaveDraft"
<NSelect v-model:value="model.flowCode" placeholder="请输入流程类型" :options="flowCodeTypeOptions" /> @submit="handleSubmit"
</NFormItem> >
<NFormItem label="请假类型" path="leaveType"> <div :class="loading ? 'hidden' : ''">
<NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" /> <div v-if="!readonly" class="h-full">
</NFormItem> <NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="请假时间" path="startDate"> <NFormItem label="流程类型" path="flowCode">
<NDatePicker <NSelect v-model:value="model.flowCode" placeholder="请输入流程类型" :options="flowCodeTypeOptions" />
v-model:formatted-value="dateRange" </NFormItem>
class="w-full" <NFormItem label="请假类型" path="leaveType">
type="daterange" <NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" />
value-format="yyyy-MM-dd" </NFormItem>
clearable <NFormItem label="请假时间" path="startDate">
/> <NDatePicker
</NFormItem> v-model:formatted-value="dateRange"
<NFormItem label="请假天数" path="leaveDays"> class="w-full"
<NInputNumber v-model:value="model.leaveDays" class="w-full" disabled placeholder="请输入请假天数" /> type="daterange"
</NFormItem> value-format="yyyy-MM-dd"
<NFormItem label="请假原因" path="remark"> clearable
<NInput v-model:value="model.remark" placeholder="请输入请假原因" /> />
</NFormItem> </NFormItem>
</NForm> <NFormItem label="请假天数" path="leaveDays">
</div> <NInputNumber v-model:value="model.leaveDays" class="w-full" disabled placeholder="请输入请假天数" />
<div v-else> </NFormItem>
<NDescriptions bordered :column="2" label-placement="left"> <NFormItem label="请假原因" path="remark">
<NDescriptionsItem label="流程类型"> <NInput v-model:value="model.remark" placeholder="请输入请假原因" />
{{ flowCodeTypeRecord[modelDetail.flowCode] }} </NFormItem>
</NDescriptionsItem> </NForm>
<NDescriptionsItem label="请假类型"> </div>
<NTag type="info">{{ leaveTypeRecord[modelDetail.leaveType!] }}</NTag> <div v-else>
</NDescriptionsItem> <NDescriptions bordered :column="2" label-placement="left">
<NDescriptionsItem label="请假时间"> <NDescriptionsItem label="流程类型">
{{ `${modelDetail.startDate} 至 ${modelDetail.endDate}` }} {{ flowCodeTypeRecord[modelDetail.flowCode] }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem label="请假天数">{{ modelDetail.leaveDays }} 天</NDescriptionsItem> <NDescriptionsItem label="请假类型">
<NDescriptionsItem label="请假原因"> <NTag type="info">{{ leaveTypeRecord[modelDetail.leaveType!] }}</NTag>
{{ modelDetail.remark || '-' }} </NDescriptionsItem>
</NDescriptionsItem> <NDescriptionsItem label="请假时间">
</NDescriptions> {{ `${modelDetail.startDate} 至 ${modelDetail.endDate}` }}
<!-- 审批信息 --> </NDescriptionsItem>
<ApprovalInfoPanel v-if="showApprovalInfoPanel" ref="approvalInfoPanelRef" :business-id="modelDetail.id!" /> <NDescriptionsItem label="请假天数">{{ modelDetail.leaveDays }} 天</NDescriptionsItem>
</div> <NDescriptionsItem label="请假原因">
</div> {{ modelDetail.remark || '-' }}
</NSpin> </NDescriptionsItem>
<template #footer> </NDescriptions>
<div v-if="!readonly"> <!-- 审批信息 -->
<NSpace :size="16"> <ApprovalInfoPanel v-if="showApprovalInfoPanel" ref="approvalInfoPanelRef" :business-id="modelDetail.id!" />
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton> </div>
<NButton type="warning" @click="handleSaveDraft">暂存</NButton> </div>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton> </FlowDrawer>
</NSpace> <FlowTaskApprovalModal
</div> v-model:visible="taskApplyVisible"
</template> :task-id="startWorkflowResult?.taskId!"
</NDrawerContent> :task-variables="taskVariables"
<WorkflowTaskApplyModal @finished="handleTaskFinished"
v-model:visible="taskApplyVisible" />
:task-id="startWorkflowResult?.taskId!"
:task-variables="taskVariables"
@finished="handleTaskFinished"
/>
</NDrawer>
</template> </template>
<style scoped></style> <style scoped></style>

3
src/typings/api/workflow.api.d.ts vendored
View File

@ -246,6 +246,9 @@ declare namespace Api {
/** 是否显示 */ /** 是否显示 */
show: boolean; show: boolean;
}>; }>;
type TaskOrHisTask = Task | HisTask;
/** 任务详情 */ /** 任务详情 */
type Task = Common.CommonTenantRecord<{ type Task = Common.CommonTenantRecord<{
/** 任务ID */ /** 任务ID */

9
src/typings/components.d.ts vendored
View File

@ -24,7 +24,12 @@ declare module 'vue' {
DictTag: typeof import('./../components/custom/dict-tag.vue')['default'] DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
ExceptionBase: typeof import('./../components/common/exception-base.vue')['default'] ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
FileUpload: typeof import('./../components/custom/file-upload.vue')['default'] FileUpload: typeof import('./../components/custom/file-upload.vue')['default']
FlowCategorySelect: typeof import('./../components/custom/workflow/flow-category-select.vue')['default']
FlowDrawer: typeof import('./../components/custom/workflow/flow-drawer.vue')['default']
FlowInterveneModal: typeof import('./../components/custom/workflow/flow-intervene-modal.vue')['default']
FlowPreview: typeof import('./../components/custom/workflow/flow-preview.vue')['default'] FlowPreview: typeof import('./../components/custom/workflow/flow-preview.vue')['default']
FlowTaskApprovalModal: typeof import('./../components/custom/workflow/flow-task-approval-modal.vue')['default']
FlowTaskPassModal: typeof import('../components/custom/workflow/flow-task-approval-modal.vue')['default']
FormTip: typeof import('./../components/custom/form-tip.vue')['default'] FormTip: typeof import('./../components/custom/form-tip.vue')['default']
FullScreen: typeof import('./../components/common/full-screen.vue')['default'] FullScreen: typeof import('./../components/common/full-screen.vue')['default']
GroupTag: typeof import('./../components/custom/group-tag.vue')['default'] GroupTag: typeof import('./../components/custom/group-tag.vue')['default']
@ -85,7 +90,7 @@ declare module 'vue' {
NColorPicker: typeof import('naive-ui')['NColorPicker'] NColorPicker: typeof import('naive-ui')['NColorPicker']
NDataTable: typeof import('naive-ui')['NDataTable'] NDataTable: typeof import('naive-ui')['NDataTable']
NDatePicker: typeof import('naive-ui')['NDatePicker'] NDatePicker: typeof import('naive-ui')['NDatePicker']
NDescription: typeof import('naive-ui')['NDescription'] NDescriptionItem: typeof import('naive-ui')['NDescriptionItem']
NDescriptions: typeof import('naive-ui')['NDescriptions'] NDescriptions: typeof import('naive-ui')['NDescriptions']
NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem'] NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@ -165,7 +170,5 @@ declare module 'vue' {
TinymceEditor: typeof import('./../components/custom/tinymce-editor.vue')['default'] TinymceEditor: typeof import('./../components/custom/tinymce-editor.vue')['default']
UserSelect: typeof import('./../components/custom/user-select.vue')['default'] UserSelect: typeof import('./../components/custom/user-select.vue')['default']
WaveBg: typeof import('./../components/custom/wave-bg.vue')['default'] WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
WorkflowCategorySelect: typeof import('./../components/custom/workflow/workflow-category-select.vue')['default']
WorkflowTaskApplyModal: typeof import('./../components/custom/workflow/workflow-task-apply-modal.vue')['default']
} }
} }

40
src/views/workflow/task/all-task-waiting/index.vue
View File

@ -19,9 +19,6 @@ interface WaitingStatusOption {
value: boolean; value: boolean;
} }
// Create a union type to handle both Task and HisTask
type TaskOrHisTask = Api.Workflow.Task | Api.Workflow.HisTask;
defineOptions({ defineOptions({
name: 'ProcessInstanceList' name: 'ProcessInstanceList'
}); });
@ -30,7 +27,7 @@ useDict('wf_business_status');
useDict('wf_task_status'); useDict('wf_task_status');
const appStore = useAppStore(); const appStore = useAppStore();
const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean(false); const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean(false);
const { bool: interveneVisible, setTrue: showInterveneDrawer } = useBoolean(false);
const dynamicComponent = shallowRef(); const dynamicComponent = shallowRef();
const waitingStatus = ref<boolean>(true); const waitingStatus = ref<boolean>(true);
@ -39,7 +36,7 @@ const waitingStatusOptions = ref<WaitingStatusOption[]>([
{ label: '已办任务', value: false } { label: '已办任务', value: false }
]); ]);
const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [ const commonColumns: NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[] = [
{ type: 'selection', align: 'center', width: 50 }, { type: 'selection', align: 'center', width: 50 },
{ key: 'flowName', title: '流程定义名称', align: 'center', width: 120 }, { key: 'flowName', title: '流程定义名称', align: 'center', width: 120 },
{ key: 'flowCode', title: '流程定义编码', align: 'center', width: 120 }, { key: 'flowCode', title: '流程定义编码', align: 'center', width: 120 },
@ -82,7 +79,13 @@ const waitingColumns = ref<NaiveUI.TableColumn<Api.Workflow.Task>[]>([
const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([ const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
...(commonColumns as NaiveUI.TableColumn<Api.Workflow.HisTask>[]), ...(commonColumns as NaiveUI.TableColumn<Api.Workflow.HisTask>[]),
{ key: 'approveName', title: '办理人', align: 'center', width: 120 }, {
key: 'approveName',
title: '办理人',
align: 'center',
width: 120,
render: row => <NTag type="info">{row.approveName}</NTag>
},
{ {
key: 'flowTaskStatus', key: 'flowTaskStatus',
title: '任务状态', title: '任务状态',
@ -93,7 +96,7 @@ const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
{ key: 'createTime', title: '创建时间', align: 'center', width: 120 } { key: 'createTime', title: '创建时间', align: 'center', width: 120 }
]); ]);
const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[]>([
{ {
key: 'operate', key: 'operate',
title: $t('common.operate'), title: $t('common.operate'),
@ -112,7 +115,15 @@ const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
]; ];
if (waitingStatus.value) { if (waitingStatus.value) {
buttons.push(<ButtonIcon text type="info" icon="material-symbols:edit-document" tooltipContent="流程干预" />); buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:edit-document"
tooltipContent="流程干预"
onClick={() => handleIntervene(row)}
/>
);
} }
return ( return (
@ -149,7 +160,7 @@ const {
}, },
columns: () => { columns: () => {
const baseColumns = waitingStatus.value ? waitingColumns.value : finishColumns.value; const baseColumns = waitingStatus.value ? waitingColumns.value : finishColumns.value;
return [...baseColumns, ...operateColumns.value] as NaiveUI.TableColumn<TaskOrHisTask>[]; return [...baseColumns, ...operateColumns.value] as NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[];
} }
}); });
@ -200,7 +211,7 @@ function handleResetSearch() {
const modules = import.meta.glob('@/components/custom/workflow/**/*.vue'); const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
const businessId = ref<CommonType.IdType>(); const businessId = ref<CommonType.IdType>();
async function handleView(row: TaskOrHisTask) { async function handleView(row: Api.Workflow.TaskOrHisTask) {
businessId.value = row.businessId; businessId.value = row.businessId;
const formPath = row.formPath; const formPath = row.formPath;
if (formPath) { if (formPath) {
@ -208,6 +219,12 @@ async function handleView(row: TaskOrHisTask) {
showViewDrawer(); showViewDrawer();
} }
} }
const interveneRowData = ref<Api.Workflow.TaskOrHisTask>();
function handleIntervene(row: Api.Workflow.TaskOrHisTask) {
interveneRowData.value = row;
showInterveneDrawer();
}
</script> </script>
<template> <template>
@ -284,8 +301,9 @@ async function handleView(row: TaskOrHisTask) {
:pagination="mobilePagination" :pagination="mobilePagination"
class="sm:h-full" class="sm:h-full"
/> />
<component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
<FlowInterveneModal v-model:visible="interveneVisible" :row-data="interveneRowData!" />
</NCard> </NCard>
<component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
</div> </div>
</TableSiderLayout> </TableSiderLayout>
</template> </template>