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

feat: 更新请假申请功能，添加日期范围选择和请假天数自动计算

Browse Source
This commit is contained in:
AN
2025-05-29 22:35:29 +08:00
parent d7e0516cfb
commit 89a2a6cbf4
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/workflow/leave/modules/leave-operate-drawer.vue
View File

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, reactive, watch } from 'vue'; import { computed, reactive, watch } from 'vue';
import dayjs from 'dayjs';
import { leaveTypeOptions } from '@/constants/workflow'; import { leaveTypeOptions } from '@/constants/workflow';
import { fetchCreateLeave, fetchUpdateLeave } from '@/service/api/workflow'; import { fetchCreateLeave, fetchUpdateLeave } from '@/service/api/workflow';
import { useFormRules, useNaiveForm } from '@/hooks/common/form'; import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales'; import { $t } from '@/locales';
defineOptions({ defineOptions({
name: 'LeaveOperateDrawer' name: 'LeaveOperateDrawer'
}); });
@ -51,13 +53,33 @@ function createDefaultModel(): Model {
remark: '' remark: ''
}; };
} }
const dateRange = computed<[string, string] | null>({
get: () => {
if (!model.startDate || !model.endDate) return null;
return [model.startDate, model.endDate] as [string, string];
},
set: (value: [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;
} else {
model.startDate = null;
model.endDate = null;
model.leaveDays = null;
}
}
});
type RuleKey = Extract<keyof Model, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays'>; type RuleKey = Extract<keyof Model, 'id' | 'leaveType' | 'leaveDays' | 'startDate' | 'endDate'>;
const rules: Record<RuleKey, App.Global.FormRule> = { const rules: Record<RuleKey, App.Global.FormRule> = {
id: createRequiredRule('id不能为空'), id: createRequiredRule('id不能为空'),
leaveType: createRequiredRule('请假类型不能为空'), leaveType: createRequiredRule('请假类型不能为空'),
startDate: createRequiredRule('开始时间不能为空'), startDate: createRequiredRule('请假时间不能为空'),
endDate: createRequiredRule('结束时间不能为空'), endDate: createRequiredRule('结束时间不能为空'),
leaveDays: createRequiredRule('请假天数不能为空') leaveDays: createRequiredRule('请假天数不能为空')
}; };
@ -113,14 +135,11 @@ watch(visible, () => {
<NFormItem label="请假类型" path="leaveType"> <NFormItem label="请假类型" path="leaveType">
<NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" /> <NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" />
</NFormItem> </NFormItem>
<NFormItem label="开始时间" path="startDate"> <NFormItem label="请假时间" path="startDate">
<NDatePicker v-model:formatted-value="model.startDate" type="date" value-format="yyyy-MM-dd" clearable /> <NDatePicker v-model:formatted-value="dateRange" type="daterange" value-format="yyyy-MM-dd" clearable />
</NFormItem>
<NFormItem label="结束时间" path="endDate">
<NDatePicker v-model:formatted-value="model.endDate" type="date" value-format="yyyy-MM-dd" clearable />
</NFormItem> </NFormItem>
<NFormItem label="请假天数" path="leaveDays"> <NFormItem label="请假天数" path="leaveDays">
<NInputNumber v-model:value="model.leaveDays" placeholder="请输入请假天数" /> <NInputNumber v-model:value="model.leaveDays" disabled placeholder="请输入请假天数" />
</NFormItem> </NFormItem>
<NFormItem label="请假原因" path="remark"> <NFormItem label="请假原因" path="remark">
<NInput v-model:value="model.remark" placeholder="请输入请假原因" /> <NInput v-model:value="model.remark" placeholder="请输入请假原因" />