jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-23 23:39:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(projects): 修改流程实例动态引入组件

Browse Source
This commit is contained in:
AN
2025-06-21 10:50:48 +08:00
parent 50e7b5158d
commit a3dcee4a11
7 changed files with 117 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/custom/work-flow/approval-info-panel.vue → src/components/custom/workflow/approval-info-panel.vue
View File

112
src/components/custom/work-flow/leave-edit/index.vue → src/components/custom/workflow/leave-edit/index.vue
View File

@ -1,13 +1,14 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import dayjs from 'dayjs';
import { useBoolean } from '@sa/hooks';
import { useBoolean, useLoading } from '@sa/hooks';
import { flowCodeTypeOptions, flowCodeTypeRecord, leaveTypeOptions, leaveTypeRecord } from '@/constants/workflow';
import { fetchCreateLeave, fetchGetLeaveDetail, fetchStartWorkflow, fetchUpdateLeave } from '@/service/api/workflow';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales';
import ApprovalInfoPanel from '@/components/custom/work-flow/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';
defineOptions({
name: 'LeaveEdit'
@ -40,9 +41,10 @@ const visible = defineModel<boolean>('visible', {
const approvalInfoPanelRef = ref<InstanceType<typeof ApprovalInfoPanel>>();
const { bool: taskApplyVisible, setTrue: setTaskApplyVisible } = useBoolean();
const { loading, startLoading, endLoading } = useLoading();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<CommonType.WorkflowTableOperateType, string> = {
add: '新增请假申请',
@ -212,65 +214,75 @@ function handleTaskFinished() {
emit('submitted');
}
watch(visible, async () => {
async function initializeData() {
if (visible.value) {
startLoading();
await handleUpdateModelWhenEdit();
restoreValidation();
if (showApprovalInfoPanel.value) {
approvalInfoPanelRef.value?.initData();
}
endLoading();
}
});
}
watch(visible, initializeData);
onMounted(initializeData);
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1100" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<div v-if="!readonly">
<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>
<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">

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

0
src/components/custom/work-flow/workflow-task-apply-modal.vue → src/components/custom/workflow/workflow-task-apply-modal.vue
View File

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

@ -9,7 +9,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
ApprovalInfoPanel: typeof import('./../components/custom/work-flow/approval-info-panel.vue')['default']
ApprovalInfoPanel: typeof import('./../components/custom/workflow/approval-info-panel.vue')['default']
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
@ -60,7 +60,7 @@ declare module 'vue' {
IconUilSearch: typeof import('~icons/uil/search')['default']
JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
LeaveEdit: typeof import('./../components/custom/work-flow/leave-edit/index.vue')['default']
LeaveEdit: typeof import('./../components/custom/workflow/leave-edit/index.vue')['default']
LeaveForm: typeof import('../components/custom/workflow-leave-form.vue')['default']
LookForward: typeof import('./../components/custom/look-forward.vue')['default']
MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
@ -76,6 +76,7 @@ declare module 'vue' {
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
NCode: typeof import('naive-ui')['NCode']
NCollapse: typeof import('naive-ui')['NCollapse']
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
@ -123,6 +124,7 @@ declare module 'vue' {
NRadioGroup: typeof import('naive-ui')['NRadioGroup']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect']
NSkeleton: typeof import('naive-ui')['NSkeleton']
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NStatistic: typeof import('naive-ui')['NStatistic']
@ -162,7 +164,7 @@ 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/work-flow/workflow-category-select.vue')['default']
WorkflowTaskApplyModal: typeof import('./../components/custom/work-flow/workflow-task-apply-modal.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']
}
}

2
src/views/workflow/leave/index.vue
View File

@ -12,7 +12,7 @@ import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales';
import DictTag from '@/components/custom/dict-tag.vue';
import ButtonIcon from '@/components/custom/button-icon.vue';
import LeaveEdit from '@/components/custom/work-flow/leave-edit/index.vue';
import LeaveEdit from '@/components/custom/workflow/leave-edit/index.vue';
import LeaveSearch from './modules/leave-search.vue';
defineOptions({

76
src/views/workflow/process-instance/index.vue
View File

@ -1,5 +1,6 @@
<script setup lang="tsx">
import { computed, reactive, ref, watch } from 'vue';
import type { AsyncComponentLoader } from 'vue';
import { computed, defineAsyncComponent, markRaw, reactive, ref, shallowRef, watch } from 'vue';
import { NButton, NDivider, NEmpty, NInput, NRadioButton, NRadioGroup, NSpin, NTag } from 'naive-ui';
import { useBoolean, useLoading } from '@sa/hooks';
import { workflowActivityStatusRecord } from '@/constants/workflow';
@ -13,12 +14,15 @@ import {
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { useDict } from '@/hooks/business/dict';
import { humpToLine } from '@/utils/common';
import DictTag from '@/components/custom/dict-tag.vue';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import ProcessInstanceSearch from './modules/process-instance-search.vue';
import ProcessInstanceVariableDrawer from './modules/process-instance-variable-drawer.vue';
const dynamicComponent = shallowRef();
interface RunningStatusOption {
label: string;
value: boolean;
@ -32,7 +36,7 @@ useDict('wf_business_status');
const appStore = useAppStore();
const { bool: variableVisible, setTrue: showVariableDrawer } = useBoolean(false);
const { bool: leaveEditVisible, setTrue: showLeaveEditDrawer } = useBoolean(false);
const { bool: previewVisible, setTrue: showPreviewDrawer } = useBoolean(false);
const runningStatus = ref<boolean>(true);
const runningStatusOptions = ref<RunningStatusOption[]>([
@ -155,7 +159,25 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
const id = row.id;
const showAll = runningStatus.value;
const buttons = [];
buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:visibility-outline"
tooltipContent="流程预览"
onClick={() => handlePreview(row)}
/>
);
buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:variable-insert"
tooltipContent="流程变量"
onClick={() => handleShowVariable(id)}
/>
);
if (showAll) {
buttons.push(
<ButtonIcon
@ -171,7 +193,6 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
/>
);
}
if (showAll) {
buttons.push(
<ButtonIcon
@ -185,26 +206,6 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
);
}
buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:visibility-outline"
tooltipContent="流程预览"
onClick={() => handleShowLeaveEdit(row.businessId)}
/>
);
buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:variable-insert"
tooltipContent="流程变量"
onClick={() => handleShowVariable(id)}
/>
);
const buttonWithDividers = buttons.flatMap((btn, index) => {
if (index === 0) return [btn];
return [<NDivider vertical />, btn];
@ -318,10 +319,29 @@ async function handleShowVariable(id: CommonType.IdType) {
showVariableDrawer();
}
const leaveEditBusinessId = ref<CommonType.IdType>();
async function handleShowLeaveEdit(businessId: CommonType.IdType) {
leaveEditBusinessId.value = businessId;
showLeaveEditDrawer();
const modules = import.meta.glob('@/components/custom/workflow/**/*.vue');
const businessId = ref<CommonType.IdType>();
async function handlePreview(row: Api.Workflow.ProcessInstance) {
businessId.value = row.businessId;
const formPath = row.formPath;
if (formPath) {
const url = `/src/components/custom${humpToLine(formPath)}.vue`;
const loader = modules[url];
if (!loader) {
window.$message?.error('组件不存在');
return;
}
dynamicComponent.value = markRaw(
defineAsyncComponent({
loader: async () => (await modules[url]()) as AsyncComponentLoader<any>,
delay: 200,
timeout: 3000
})
);
}
showPreviewDrawer();
}
</script>
@ -400,7 +420,7 @@ async function handleShowLeaveEdit(businessId: CommonType.IdType) {
:pagination="mobilePagination"
class="sm:h-full"
/>
<LeaveEdit v-model:visible="leaveEditVisible" operate-type="detail" :business-id="leaveEditBusinessId" />
<component :is="dynamicComponent" :visible="previewVisible" operate-type="detail" :business-id="businessId" />
<ProcessInstanceVariableDrawer v-model:visible="variableVisible" :row-data="editingData" />
</NCard>
</div>