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

feat-wip(components): 抽取leaveEdit组件，适配流程编辑和预览功能

Browse Source
This commit is contained in:
AN 2025-06-17 23:57:04 +08:00
parent 1cbeb59c0b
commit 85115ce327
10 changed files with 233 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

157
src/views/workflow/leave/modules/leave-operate-drawer.vue → src/components/custom/work-flow/leave-edit/index.vue
View File

@ -2,23 +2,30 @@
import { computed, reactive, ref, watch } from 'vue';
import dayjs from 'dayjs';
import { useBoolean } from '@sa/hooks';
import { flowCodeTypeOptions, leaveTypeOptions } from '@/constants/workflow';
import { fetchCreateLeave, fetchStartWorkflow, fetchUpdateLeave } from '@/service/api/workflow';
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';
defineOptions({
name: 'LeaveOperateDrawer'
name: 'LeaveEdit'
});
useDict('wf_task_status');
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
operateType: CommonType.WorkflowTableOperateType;
/** 业务ID */
businessId?: CommonType.IdType;
/** the edit row data */
rowData?: Api.Workflow.Leave | null;
}
const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
rowData: null,
businessId: undefined
});
interface Emits {
(e: 'submitted'): void;
@ -34,12 +41,17 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
const titles: Record<CommonType.WorkflowTableOperateType, string> = {
add: '新增请假申请',
edit: '编辑请假申请'
edit: '编辑请假申请',
detail: '查看请假申请',
approval: '审批请假申请'
};
return titles[props.operateType];
});
const readonly = computed(() => {
return props.operateType === 'detail' || props.operateType === 'approval';
});
const respLeave = ref<Api.Workflow.Leave>();
const startWorkflowResult = ref<Api.Workflow.StartWorkflowResult>();
@ -47,12 +59,9 @@ const startWorkflowResult = ref<Api.Workflow.StartWorkflowResult>();
type Model = Api.Workflow.LeaveOperateParams & {
flowCode: Api.Workflow.FlowCodeType;
};
type StartWorkflowModel = Api.Workflow.StartWorkflowOperateParams;
const model: Model = reactive(createDefaultModel());
const startWorkflowModel: StartWorkflowModel = reactive(createDefaultStartWorkflowModel());
function createDefaultModel(): Model {
return {
flowCode: 'leave1',
@ -64,6 +73,29 @@ function createDefaultModel(): Model {
};
}
type ModelDetail = Api.Workflow.LeaveDetail & {
flowCode: Api.Workflow.FlowCodeType;
};
const modelDetail: ModelDetail = reactive(createDefaultModelDetail());
function createDefaultModelDetail(): ModelDetail {
return {
flowCode: 'leave1',
status: null,
id: null,
leaveType: null,
startDate: null,
endDate: null,
leaveDays: null,
remark: ''
};
}
type StartWorkflowModel = Api.Workflow.StartWorkflowOperateParams;
const startWorkflowModel: StartWorkflowModel = reactive(createDefaultStartWorkflowModel());
function createDefaultStartWorkflowModel(): StartWorkflowModel {
return {
flowCode: null,
@ -81,7 +113,7 @@ const dateRange = computed<[string, string] | null>({
if (value) {
model.startDate = value[0];
model.endDate = value[1];
// Calculate leave days when date range changes
// 计算请假天数
const start = dayjs(value[0]);
const end = dayjs(value[1]);
model.leaveDays = end.diff(start, 'day') + 1;
@ -104,14 +136,21 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
leaveDays: createRequiredRule('请假天数不能为空')
};
function handleUpdateModelWhenEdit() {
async function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
Object.assign(model, createDefaultModel());
return;
}
if (props.operateType === 'edit' && props.rowData) {
if (props.operateType === 'edit' || props.operateType === 'detail') {
Object.assign(model, props.rowData);
} else {
const { error, data } = await fetchGetLeaveDetail(props.businessId!);
if (error) {
window.$message?.error(error.message);
return;
}
Object.assign(modelDetail, data);
}
}
@ -178,40 +217,72 @@ watch(visible, () => {
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<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 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="1" label-placement="left">
<NDescriptionsItem label="流程类型">
{{ flowCodeTypeRecord[model.flowCode] || '-' }}
</NDescriptionsItem>
<NDescriptionsItem label="请假类型">
<NTag type="info">{{ leaveTypeRecord[model.leaveType!] || '-' }}</NTag>
</NDescriptionsItem>
<NDescriptionsItem label="请假时间">
{{ model.startDate ? `${model.startDate} 至 ${model.endDate}` : '-' }}
</NDescriptionsItem>
<NDescriptionsItem label="请假天数">{{ model.leaveDays || '-' }} 天</NDescriptionsItem>
<NDescriptionsItem label="请假原因">
{{ model.remark || '-' }}
</NDescriptionsItem>
</NDescriptions>
<div v-if="modelDetail.status !== 'draft'" class="mt-4">
<NTimeline horizontal>
<NTimelineItem content="啊" />
<NTimelineItem type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
<NTimelineItem type="error" content="哪里错误" time="2018-04-03 20:46" />
<NTimelineItem type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
<NTimelineItem type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
<NTimelineItem content="啊" />
</NTimeline>
</div>
</div>
<template #footer>
<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 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-id="startWorkflowResult?.taskId!"
:task-variables="taskVariables"
@finished="handleTaskFinished"
/>

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

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

12
src/constants/workflow.ts
View File

@ -1,5 +1,17 @@
import { transformRecordToOption } from '@/utils/common';
export const businessStatusRecord: Record<Api.Workflow.BusinessStatus, string> = {
cancel: '已撤销',
draft: '草稿',
waiting: '待审批',
finish: '已完成',
invalid: '已作废',
back: '已退回',
termination: '已终止'
};
export const businessStatusOptions = transformRecordToOption(businessStatusRecord);
export const messageTypeRecord: Record<Api.Workflow.MessageType, string> = {
'1': '站内信',
'2': '邮件',

10
src/service/api/workflow/leave.ts
View File

@ -10,7 +10,7 @@ export function fetchGetLeaveList(params?: Api.Workflow.LeaveSearchParams) {
}
/** 获取请假申请详情 */
export function fetchGetLeaveDetail(id: CommonType.IdType) {
return request<Api.Workflow.LeaveOperateParams>({
return request<Api.Workflow.LeaveDetail>({
url: `/workflow/leave/${id}`,
method: 'get'
});
@ -41,3 +41,11 @@ export function fetchBatchDeleteLeave(ids: CommonType.IdType[]) {
method: 'delete'
});
}
/** 撤销请假申请 */
export function fetchCancelLeave(id: CommonType.IdType) {
return request<boolean>({
url: `/workflow/leave/cancel/${id}`,
method: 'put'
});
}

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

@ -10,10 +10,14 @@ declare namespace Api {
* backend api module: "Workflow"
*/
namespace Workflow {
/** 业务流程状态 */
type BusinessStatus = 'cancel' | 'draft' | 'waiting' | 'finish' | 'invalid' | 'back' | 'termination';
/** 流程类型 */
type FlowCodeType = 'leave1' | 'leave2' | 'leave3' | 'leave4' | 'leave5' | 'leave6';
/** 请假状态 */
type LeaveType = '1' | '2' | '3' | '4';
/** leave */
type Leave = Common.CommonRecord<{
/** id */
@ -31,7 +35,7 @@ declare namespace Api {
/** 请假原因 */
remark: string;
/** 状态 */
status: string;
status: BusinessStatus;
}>;
/** leave search params */
@ -44,6 +48,11 @@ declare namespace Api {
Pick<Api.Workflow.Leave, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays' | 'remark'>
>;
/** leave detail */
type LeaveDetail = CommonType.RecordNullable<
Pick<Api.Workflow.Leave, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays' | 'remark' | 'status'>
>;
/** leave list */
type LeaveList = Api.Common.PaginatingQueryRecord<Leave>;
/** 工作流分类 */

2
src/typings/common.d.ts vendored
View File

@ -43,4 +43,6 @@ declare namespace CommonType {
/** filter function */
filterFn?: (node: any) => boolean;
};
/** the type of workflow table operate */
type WorkflowTableOperateType = 'add' | 'edit' | 'detail' | 'approval';
}

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

@ -56,7 +56,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/leave-edit/index.vue')['default']
LeaveEdit: typeof import('./../components/custom/work-flow/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']
@ -79,6 +79,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']
NDescriptions: typeof import('naive-ui')['NDescriptions']
NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
@ -128,6 +129,8 @@ declare module 'vue' {
NTag: typeof import('naive-ui')['NTag']
NText: typeof import('naive-ui')['NText']
NThing: typeof import('naive-ui')['NThing']
NTimeline: typeof import('naive-ui')['NTimeline']
NTimelineItem: typeof import('naive-ui')['NTimelineItem']
NTooltip: typeof import('naive-ui')['NTooltip']
NTree: typeof import('naive-ui')['NTree']
NTreeSelect: typeof import('naive-ui')['NTreeSelect']
@ -154,7 +157,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/workflow-category-select.vue')['default']
WorkflowTaskApplyModal: typeof import('./../components/custom/workflow-task-apply-modal.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']
}
}

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

@ -1,5 +1,7 @@
<script setup lang="tsx">
import { ref } from 'vue';
import { NDivider, NTag } from 'naive-ui';
import { jsonClone } from '@sa/utils';
import { leaveTypeRecord } from '@/constants/workflow';
import { fetchBatchDeleteLeave, fetchGetLeaveList } from '@/service/api/workflow';
import { useAppStore } from '@/store/modules/app';
@ -10,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 LeaveOperateDrawer from './modules/leave-operate-drawer.vue';
import LeaveEdit from '@/components/custom/work-flow/leave-edit/index.vue';
import LeaveSearch from './modules/leave-search.vue';
defineOptions({
@ -23,6 +25,7 @@ const { hasAuth } = useAuth();
useDict('wf_business_status');
const workflowTableOperateType = ref<CommonType.WorkflowTableOperateType>('add');
const {
columns,
columnChecks,
@ -78,7 +81,10 @@ const {
key: 'leaveDays',
title: '请假天数',
align: 'center',
minWidth: 100
minWidth: 100,
render: row => {
return `${row.leaveDays} 天`;
}
},
{
key: 'remark',
@ -101,18 +107,31 @@ const {
align: 'center',
width: 130,
render: row => {
const divider = () => {
if (!hasAuth('workflow:leave:edit') || !hasAuth('workflow:leave:remove')) {
return null;
}
return <NDivider vertical />;
};
const buttons = [];
const editBtn = () => {
if (!hasAuth('workflow:leave:edit')) {
return null;
}
return (
const showEdit =
hasAuth('workflow:leave:edit') &&
(row.status === 'draft' || row.status === 'cancel' || row.status === 'back');
const showDelete =
hasAuth('workflow:leave:remove') &&
(row.status === 'draft' || row.status === 'cancel' || row.status === 'back');
const showCancel = row.status === 'waiting';
if (hasAuth('workflow:leave:query')) {
buttons.push(
<ButtonIcon
text
type="info"
icon="material-symbols:visibility-outline"
tooltipContent="查看"
onClick={() => view(row.id!)}
/>
);
}
if (showEdit) {
buttons.push(
<ButtonIcon
text
type="primary"
@ -121,13 +140,23 @@ const {
onClick={() => edit(row.id!)}
/>
);
};
}
const deleteBtn = () => {
if (!hasAuth('workflow:leave:remove')) {
return null;
}
return (
if (showCancel) {
buttons.push(
<ButtonIcon
text
type="warning"
icon="material-symbols:cancel-outline"
tooltipContent="撤销"
popconfirmContent="确定要撤销该申请吗？"
onPositiveClick={() => {}}
/>
);
}
if (showDelete) {
buttons.push(
<ButtonIcon
text
type="error"
@ -137,22 +166,24 @@ const {
onPositiveClick={() => handleDelete(row.id!)}
/>
);
};
}
return (
<div class="flex-center gap-8px">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);
// 插入分隔符（仅在前后两个按钮之间插入 Divider）
const buttonWithDividers = buttons.flatMap((btn, index) => {
if (index === 0) return [btn];
return [<NDivider vertical />, btn];
});
return <div class="flex-center gap-4px">{buttonWithDividers}</div>;
}
}
]
});
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
useTableOperate(data, getData);
const { drawerVisible, openDrawer, editingData, checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(
data,
getData
);
async function handleBatchDelete() {
// request
@ -168,8 +199,25 @@ async function handleDelete(id: CommonType.IdType) {
onDeleted();
}
function handleAdd() {
workflowTableOperateType.value = 'add';
openDrawer();
}
function cloneAndOpenDrawer(id: CommonType.IdType) {
const findItem = data.value.find(item => item.id === id) || null;
editingData.value = jsonClone(findItem);
openDrawer();
}
function edit(id: CommonType.IdType) {
handleEdit('id', id);
workflowTableOperateType.value = 'edit';
cloneAndOpenDrawer(id);
}
function view(id: CommonType.IdType) {
workflowTableOperateType.value = 'detail';
cloneAndOpenDrawer(id);
}
function handleExport() {
@ -208,9 +256,9 @@ function handleExport() {
:pagination="mobilePagination"
class="sm:h-full"
/>
<LeaveOperateDrawer
<LeaveEdit
v-model:visible="drawerVisible"
:operate-type="operateType"
:operate-type="workflowTableOperateType"
:row-data="editingData"
@submitted="getDataByPage"
/>