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 { isNull } from '@/utils/common';
defineOptions({ name: 'WorkflowCategorySelect' });
defineOptions({ name: 'FlowCategorySelect' });
interface Props {
[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';
defineOptions({
name: 'WorkflowTaskApplyModal'
name: 'FlowTaskApprovalModal'
});
interface Props {

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

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

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

@ -246,6 +246,9 @@ declare namespace Api {
/** 是否显示 */
show: boolean;
}>;
type TaskOrHisTask = Task | HisTask;
/** 任务详情 */
type Task = Common.CommonTenantRecord<{
/** 任务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']
ExceptionBase: typeof import('./../components/common/exception-base.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']
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']
FullScreen: typeof import('./../components/common/full-screen.vue')['default']
GroupTag: typeof import('./../components/custom/group-tag.vue')['default']
@ -85,7 +90,7 @@ declare module 'vue' {
NColorPicker: typeof import('naive-ui')['NColorPicker']
NDataTable: typeof import('naive-ui')['NDataTable']
NDatePicker: typeof import('naive-ui')['NDatePicker']
NDescription: typeof import('naive-ui')['NDescription']
NDescriptionItem: typeof import('naive-ui')['NDescriptionItem']
NDescriptions: typeof import('naive-ui')['NDescriptions']
NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@ -165,7 +170,5 @@ declare module 'vue' {
TinymceEditor: typeof import('./../components/custom/tinymce-editor.vue')['default']
UserSelect: typeof import('./../components/custom/user-select.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;
}
// Create a union type to handle both Task and HisTask
type TaskOrHisTask = Api.Workflow.Task | Api.Workflow.HisTask;
defineOptions({
name: 'ProcessInstanceList'
});
@ -30,7 +27,7 @@ useDict('wf_business_status');
useDict('wf_task_status');
const appStore = useAppStore();
const { bool: viewVisible, setTrue: showViewDrawer } = useBoolean(false);
const { bool: interveneVisible, setTrue: showInterveneDrawer } = useBoolean(false);
const dynamicComponent = shallowRef();
const waitingStatus = ref<boolean>(true);
@ -39,7 +36,7 @@ const waitingStatusOptions = ref<WaitingStatusOption[]>([
{ label: '已办任务', value: false }
]);
const commonColumns: NaiveUI.TableColumn<TaskOrHisTask>[] = [
const commonColumns: NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[] = [
{ type: 'selection', align: 'center', width: 50 },
{ key: 'flowName', 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>[]>([
...(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',
title: '任务状态',
@ -93,7 +96,7 @@ const finishColumns = ref<NaiveUI.TableColumn<Api.Workflow.HisTask>[]>([
{ key: 'createTime', title: '创建时间', align: 'center', width: 120 }
]);
const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.TaskOrHisTask>[]>([
{
key: 'operate',
title: $t('common.operate'),
@ -112,7 +115,15 @@ const operateColumns = ref<NaiveUI.TableColumn<TaskOrHisTask>[]>([
];
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 (
@ -149,7 +160,7 @@ const {
},
columns: () => {
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 businessId = ref<CommonType.IdType>();
async function handleView(row: TaskOrHisTask) {
async function handleView(row: Api.Workflow.TaskOrHisTask) {
businessId.value = row.businessId;
const formPath = row.formPath;
if (formPath) {
@ -208,6 +219,12 @@ async function handleView(row: TaskOrHisTask) {
showViewDrawer();
}
}
const interveneRowData = ref<Api.Workflow.TaskOrHisTask>();
function handleIntervene(row: Api.Workflow.TaskOrHisTask) {
interveneRowData.value = row;
showInterveneDrawer();
}
</script>
<template>
@ -284,8 +301,9 @@ async function handleView(row: TaskOrHisTask) {
:pagination="mobilePagination"
class="sm:h-full"
/>
<component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
<FlowInterveneModal v-model:visible="interveneVisible" :row-data="interveneRowData!" />
</NCard>
<component :is="dynamicComponent" :visible="viewVisible" operate-type="detail" :business-id="businessId" />
</div>
</TableSiderLayout>
</template>