考勤

apps/web-antd/src/views/property/attendanceManagement/shiftSetting/shift-modal.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-
+import dayjs from 'dayjs';
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
-import { shiftAdd, shiftInfo, shiftUpdate } from '#/api/Property/attendanceManagement/shiftSetting';
+import { shiftAdd, shiftInfo, shiftUpdate } from '#/api/property/attendanceManagement/shiftSetting';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
+import {TimeRangePicker} from "ant-design-vue";
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -23,7 +24,7 @@ const [BasicForm, formApi] = useVbenForm({
     // 默认占满两列
     formItemClass: 'col-span-2',
     // 默认label宽度 px
-    labelWidth: 80,
+    labelWidth: 100,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
@@ -76,6 +77,12 @@ async function handleConfirm() {
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
+    data.startTime = dayjs(data.attendanceTimeRange[0]).format('HH:mm:ss');
+    data.endTime = dayjs(data.attendanceTimeRange[1]).format('HH:mm:ss');
+    data.restStartTime = dayjs(data.restTimeRange[0]).format('HH:mm:ss');
+    data.restEndTime = dayjs(data.restTimeRange[1]).format('HH:mm:ss');
+    delete data.attendanceTimeRange;
+    delete data.restTimeRange;
     await (isUpdate.value ? shiftUpdate(data) : shiftAdd(data));
     resetInitialized();
     emit('reload');
@@ -95,7 +102,14 @@ async function handleClosed() {
 
 <template>
   <BasicModal :title="title">
-    <BasicForm />
+    <BasicForm>
+      <template #attendanceTimeRange="slotProps">
+        <TimeRangePicker format="HH:mm:ss" v-bind="slotProps"></TimeRangePicker>
+      </template>
+      <template #restTimeRange="slotProps">
+        <TimeRangePicker format="HH:mm:ss" v-bind="slotProps"></TimeRangePicker>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>