From 89a2a6cbf43c48167535a1db38a473fb498ecb15 Mon Sep 17 00:00:00 2001
From: AN <1983933789@qq.com>
Date: Thu, 29 May 2025 22:35:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=AF=B7=E5=81=87?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9=E5=92=8C?=
 =?UTF-8?q?=E8=AF=B7=E5=81=87=E5=A4=A9=E6=95=B0=E8=87=AA=E5=8A=A8=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../leave/modules/leave-operate-drawer.vue    | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/views/workflow/leave/modules/leave-operate-drawer.vue b/src/views/workflow/leave/modules/leave-operate-drawer.vue
index fc3623c0..da2a8335 100644
--- a/src/views/workflow/leave/modules/leave-operate-drawer.vue
+++ b/src/views/workflow/leave/modules/leave-operate-drawer.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import dayjs from 'dayjs';
 import { leaveTypeOptions } from '@/constants/workflow';
 import { fetchCreateLeave, fetchUpdateLeave } from '@/service/api/workflow';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
+
 defineOptions({
   name: 'LeaveOperateDrawer'
 });
@@ -51,13 +53,33 @@ function createDefaultModel(): Model {
     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> = {
   id: createRequiredRule('id不能为空'),
   leaveType: createRequiredRule('请假类型不能为空'),
-  startDate: createRequiredRule('开始时间不能为空'),
+  startDate: createRequiredRule('请假时间不能为空'),
   endDate: createRequiredRule('结束时间不能为空'),
   leaveDays: createRequiredRule('请假天数不能为空')
 };
@@ -113,14 +135,11 @@ watch(visible, () => {
         <NFormItem label="请假类型" path="leaveType">
           <NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" />
         </NFormItem>
-        <NFormItem label="开始时间" path="startDate">
-          <NDatePicker v-model:formatted-value="model.startDate" type="date" 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 label="请假时间" path="startDate">
+          <NDatePicker v-model:formatted-value="dateRange" type="daterange" value-format="yyyy-MM-dd" clearable />
         </NFormItem>
         <NFormItem label="请假天数" path="leaveDays">
-          <NInputNumber v-model:value="model.leaveDays" placeholder="请输入请假天数" />
+          <NInputNumber v-model:value="model.leaveDays" disabled placeholder="请输入请假天数" />
         </NFormItem>
         <NFormItem label="请假原因" path="remark">
           <NInput v-model:value="model.remark" placeholder="请输入请假原因" />