1、考勤组

apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/change-shift-schedule.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+
+import {useVbenModal} from '@vben/common-ui';
+import {shiftColumns} from './data';
+import {shiftList} from "#/api/property/attendanceManagement/shiftSetting";
+import {Table, Form, FormItem, Button, Input} from 'ant-design-vue';
+import {reactive, ref} from 'vue'
+import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+  },
+  onConfirm: handleConfirm,
+});
+
+const emit = defineEmits<{ shiftInfo: [info: ShiftVO], shiftList: [list: ShiftVO[]] }>();
+const handleType = ref<number>(1);
+const tableLoading = ref<boolean>(true);
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    if (state.selectedRowKeys.length) {
+      let arr = shiftData.value.filter(item => state.selectedRowKeys.includes(item.id))
+      if (handleType.value == 1 && arr.length) {
+        await emit('shiftInfo', arr[0]);
+      } else if (handleType.value == 2 && arr.length) {
+        await emit('shiftList', arr);
+      }
+    }
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  state.selectedRowKeys = []
+  handleType.value = modalApi.getData()?.type;
+  await queryShiftData()
+  modalApi.modalLoading(true);
+  modalApi.modalLoading(false);
+}
+
+const shiftData = ref<ShiftVO[]>([])
+const shiftName = ref<string>('')
+
+async function queryShiftData() {
+  tableLoading.value = true
+  let params = {
+    name: shiftName.value,
+    pageNum: 1,
+    pageSize: 1000
+  }
+  const res = await shiftList(params)
+  shiftData.value = res.rows
+  tableLoading.value = false
+}
+
+// 行勾选状态
+const state = reactive({
+  selectedRowKeys: [],
+});
+
+// 勾选变化时的回调
+const onSelectChange = (selectedRowKeys: string[]) => {
+  if (selectedRowKeys.length > 1 && handleType.value == 1) {
+    state.selectedRowKeys = selectedRowKeys.slice(-1);
+  } else {
+    state.selectedRowKeys = selectedRowKeys;
+  }
+};
+//重置操作
+const resetHandle = () => {
+  shiftName.value = ''
+  queryShiftData()
+}
+</script>
+
+<template>
+  <BasicModal :fullscreen-button="false" title="选择班次" class="w-[70%]">
+    <Form
+      class="form-container"
+      layout="inline"
+    >
+      <FormItem
+        label="班次名称"
+        name="username">
+        <Input v-model:value="shiftName"></Input>
+      </FormItem>
+
+      <FormItem>
+        <Button @click="resetHandle">重置</Button>
+        <Button type="primary" style="margin-left: 20px" @click="queryShiftData">搜索</Button>
+      </FormItem>
+    </Form>
+    <Table
+      class="table-container"
+      bordered
+      :columns="shiftColumns"
+      :data-source="shiftData"
+      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange  }"
+      size="small"
+      :pagination="false"
+      rowKey="id"
+      :scroll="{ y: 350 }"
+      :loading="tableLoading"
+    >
+      <template #bodyCell="{ column, record,index }">
+        <template v-if="column.dataIndex==='id'">
+          {{ index + 1 }}
+        </template>
+        <template v-if="column.dataIndex==='attendanceTime'">
+          <span v-if="record.isRest">
+            {{ record.startTime + '~' + record.restStartTime }}&nbsp;
+            {{ record.restEndTime + '~' + record.endTime }}
+          </span>
+          <span v-else>
+            {{ record.startTime + '~' + record.endTime }}
+          </span>
+        </template>
+      </template>
+    </Table>
+  </BasicModal>
+</template>
+
+<style scoped>
+.table-container {
+  min-height: 400px;
+}
+
+.form-container {
+  padding: 10px 0 20px 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+</style>

apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/check-in-date.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+import { useVbenForm } from '#/adapter/form';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {clockInModalSchema} from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+const  isClockIn = ref(false);
+
+const title = computed(() => {
+  return  isClockIn.value ? '必须打卡日期' : '无需打卡日期';
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: clockInModalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { type } = modalApi.getData() as { type?: number };
+     isClockIn.value = !!type;
+    await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    resetInitialized();
+    await modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm/>
+  </BasicModal>
+</template>
+

apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/data.ts

@@ -1,8 +1,8 @@
-import type { FormSchemaGetter } from '#/adapter/form';
+import type {FormSchemaGetter} from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {VxeGridProps} from '#/adapter/vxe-table';
 import {getDictOptions} from "#/utils/dict";
 import {renderDict} from "#/utils/render";
-import type { TableColumnsType } from 'ant-design-vue';
+import type {TableColumnsType} from 'ant-design-vue';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -13,7 +13,7 @@ export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Select',
     componentProps: {
-      options:getDictOptions('wy_kqlx')
+      options: getDictOptions('wy_kqlx')
     },
     fieldName: 'attendanceType',
     label: '考勤类型',
@@ -23,35 +23,35 @@ export const querySchema: FormSchemaGetter = () => [
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
+  {type: 'checkbox', width: 60},
   {
     title: '考勤组名称',
     field: 'groupName',
-    minWidth:180,
+    minWidth: 180,
   },
 
   {
     title: '考勤类型',
     field: 'attendanceType',
-    slots:{
+    slots: {
-      default: ({row})=>{
+      default: ({row}) => {
-        return renderDict(row.attendanceType,'wy_kqlx')
+        return renderDict(row.attendanceType, 'wy_kqlx')
       }
     },
-    width:150
+    width: 150
   },
   {
     title: '状态',
     field: 'status',
-    slots:{
+    slots: {
       default: 'status'
     },
-    width:180
+    width: 180
   },
   {
     field: 'action',
     fixed: 'right',
-    slots: { default: 'action' },
+    slots: {default: 'action'},
     title: '操作',
     width: 180,
   },
@@ -82,32 +82,32 @@ export const modalSchema: FormSchemaGetter = () => [
       options: getDictOptions('wy_kqlx'),
     },
     rules: 'selectRequired',
-    defaultValue:'0'
+    defaultValue: '0'
   },
   {
     label: '工作日设置',
     fieldName: 'weekdaySetting',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='0',
+      show: (formValue) => formValue.attendanceType == '0',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'weekdaySetting'
+      default: 'weekdaySetting'
     },
-    rules:'required',
+    rules: 'required',
-    defaultValue:'1',
+    defaultValue: '1',
   },
   {
     label: '',
     fieldName: 'settingItem',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='0',
+      show: (formValue) => formValue.attendanceType == '0',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'settingItem'
+      default: 'settingItem'
     },
   },
   {
@@ -115,25 +115,25 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'attendanceShift',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='1',
+      show: (formValue) => formValue.attendanceType == '1',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'attendanceShift'
+      default: 'attendanceShift'
     },
-    rules:'required',
+    rules: 'required',
-    defaultValue:'1',
+    defaultValue: '1',
   },
   {
     label: '',
     fieldName: 'shiftData',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='1',
+      show: (formValue) => formValue.attendanceType == '1',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'shiftData'
+      default: 'shiftData'
     },
   },
   {
@@ -141,25 +141,25 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'schedulingCycle',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='1',
+      show: (formValue) => formValue.attendanceType == '1',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'schedulingCycle'
+      default: 'schedulingCycle'
     },
-    defaultValue:'1',
+    defaultValue: '1',
-    rules:'required'
+    rules: 'required'
   },
   {
     label: '',
     fieldName: 'cycleData',
     component: 'Input',
     dependencies: {
-      show: (formValue) => formValue.attendanceType=='1',
+      show: (formValue) => formValue.attendanceType == '1',
       triggerFields: ['attendanceType'],
     },
-    slots:{
+    slots: {
-      default:'cycleData'
+      default: 'cycleData'
     },
   },
 ];
@@ -168,23 +168,23 @@ export const weekdayColumns: TableColumnsType = [
   {
     title: '工作日',
     key: 'label',
-    width:180,
+    width: 120,
-    align:'center',
+    align: 'center',
-    dataIndex:'label'
+    dataIndex: 'label'
   },
   {
     title: '班次',
     key: 'shift',
-    minWidth:180,
+    minWidth: 180,
-    align:'center',
+    align: 'center',
-    dataIndex:'shift'
+    dataIndex: 'shift'
   },
   {
     title: '操作',
     key: 'action',
-    dataIndex:'action',
+    dataIndex: 'action',
-    width:180,
+    width: 180,
-    align:'center',
+    align: 'center',
   },
 ]
 
@@ -192,16 +192,16 @@ export const noClockingColumns: TableColumnsType = [
   {
     title: '无需打卡日期',
     key: 'label',
-    width:180,
+    minWidth: 180,
-    align:'center',
+    align: 'center',
-    dataIndex:'label'
+    dataIndex: 'label'
   },
   {
     title: '操作',
     key: 'action',
-    dataIndex:'action',
+    dataIndex: 'action',
-    width:180,
+    width: 150,
-    align:'center',
+    align: 'center',
   },
 ]
 
@@ -209,16 +209,16 @@ export const clockingColumns: TableColumnsType = [
   {
     title: '必须打卡日期',
     key: 'label',
-    width:180,
+    minWidth: 180,
-    align:'center',
+    align: 'center',
-    dataIndex:'label'
+    dataIndex: 'label'
   },
   {
     title: '操作',
     key: 'action',
-    dataIndex:'action',
+    dataIndex: 'action',
-    width:180,
+    width: 150,
-    align:'center',
+    align: 'center',
   },
 ]
 
@@ -226,23 +226,94 @@ export const cycleColumns: TableColumnsType = [
   {
     title: '天数',
     key: 'label',
-    width:180,
+    width: 150,
-    align:'center',
+    align: 'center',
-    dataIndex:'label'
+    dataIndex: 'label'
   },
   {
     title: '班次',
     key: 'label',
-    width:180,
+    minWidth: 180,
-    align:'center',
+    align: 'center',
-    dataIndex:'label'
+    dataIndex: 'label'
   },
   {
     title: '操作',
     key: 'action',
-    dataIndex:'action',
+    dataIndex: 'action',
-    width:180,
+    width: 150,
-    align:'center',
+    align: 'center',
   },
 ]
 
+export const shiftColumns = [
+  {
+    title: '序号',
+    dataIndex: 'id',
+    key: 'id',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '班次名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 180,
+    align: 'center',
+  },
+  {
+    title: '考勤时间',
+    dataIndex: 'attendanceTime',
+    key: 'attendanceTime',
+    minWidth: 180,
+    align: 'center',
+  },
+];
+
+const typeOptions = [
+  {label: '单个日期', value: 1},
+  {label: '时间段', value: 2},
+];
+export const clockInModalSchema: FormSchemaGetter = () => [
+  {
+    label: '添加方式',
+    fieldName: 'type',
+    component: 'RadioGroup',
+    componentProps: {
+      options: typeOptions,
+      buttonStyle: 'solid',
+    },
+    defaultValue:1,
+    rules: 'required',
+  },
+  {
+    label: '日期',
+    fieldName: 'singleTime',
+    component: 'DatePicker',
+    rules: 'required',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    dependencies: {
+      show: (formValue) => formValue.type==1,
+      triggerFields: ['type'],
+    },
+  },
+  {
+    label: '日期',
+    fieldName: 'timeSlot',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    rules: 'required',
+    dependencies: {
+      show: (formValue) => formValue.type==2,
+      triggerFields: ['type'],
+    },
+  },
+]
+
+

apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/group-modal.vue

@@ -23,6 +23,11 @@ import {
 import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
 import {getDictOptions} from "#/utils/dict";
 import holidayCalendar from './holiday-calendar.vue'
+import changeShiftSchedule from './change-shift-schedule.vue'
+import checkInDate from './check-in-date.vue'
+import {h} from 'vue';
+import {PlusOutlined, MinusOutlined} from '@ant-design/icons-vue';
+import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -58,10 +63,9 @@ const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
 );
 
 const [BasicModal, modalApi] = useVbenModal({
-  // 在这里更改宽度
-  class: 'w-[80%]',
   fullscreenButton: false,
-  maskClosable:false,
+  fullscreen: true,
+  // class:'w-[80%]',
   onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
@@ -119,6 +123,13 @@ async function handleClosed() {
 const [HolidayCalendar, holidayApi] = useVbenModal({
   connectedComponent: holidayCalendar,
 });
+const [ChangeShiftSchedule, shiftApi] = useVbenModal({
+  connectedComponent: changeShiftSchedule,
+});
+
+const [CheckInDate, checkInDateApi] = useVbenModal({
+  connectedComponent: checkInDate,
+});
 
 /**
  * 查看法定节假日日历
@@ -127,66 +138,184 @@ async function showHoliday() {
   holidayApi.open()
 }
 
+/**
+ * 更改班次
+ * @param type 1.设置班次 2.选择班次
+ */
+async function shiftScheduleHandle(type) {
+  await shiftApi.open()
+  await shiftApi.setData({type})
+}
+
+async function changeShiftHandle(type, index) {
+  await shiftApi.open()
+  await shiftApi.setData({type})//3.更改班次
+}
+
+async function selectDateHandle(type) {
+  checkInDateApi.open()
+  checkInDateApi.setData({type})
+}
+
+const shiftInfo = ref<ShiftVO>()
+const shiftList = ref<ShiftVO[]>([])
+const handleShiftInfo = (info) => {
+  shiftInfo.value = info;
+};
+
+const handleShiftList = (list) => {
+  shiftList.value = list;
+};
+
+const handleAfterValue = (val) => {
+  console.log(val, '===val')
+};
+
+const cycleData = ref<any[]>([])
+const unCheckInData = ref<any[]>([])
+const checkInData = ref<any[]>([])
+
+async function addCycleHandle() {
+  cycleData.value.push({
+    shiftId: '',
+  })
+}
+
+async function deleteCycleHandle(index) {
+  cycleData.value.splice(index, 1)
+}
+
+async function deleteUnCheckInHandle(index) {
+  unCheckInData.value.splice(index, 1)
+}
+
+async function deleteCheckInHandle(index) {
+  checkInData.value.splice(index, 1)
+}
+
+async function restHandle(index){
+
+}
+
 </script>
 
 <template>
-  <BasicModal :title="title">
+  <BasicModal :title="title+'考勤组'">
     <BasicForm>
       <template #weekdaySetting>
         <div class="item-font">
           <span>快捷设置班次：</span>
-          <Tag color="processing">常规班次：08:00:00~12:00:00 14:00:00~17:00:00</Tag>
+          <Tag color="processing" v-if="shiftInfo">
-          <Button type="link">更改班次</Button>
+            <span>{{ shiftInfo.name }}</span>&nbsp;
+            <span v-if="shiftInfo.isRest">
+              {{ shiftInfo.startTime + '~' + shiftInfo.restStartTime }}&nbsp;
+              {{ shiftInfo.restEndTime + '~' + shiftInfo.endTime }}
+            </span>
+            <span v-else>
+              {{ shiftInfo.startTime + '~' + shiftInfo.endTime }}
+            </span>
+          </Tag>
+          <Button type="link" @click="shiftScheduleHandle(1)">设置班次</Button>
         </div>
       </template>
       <template #settingItem>
         <div class="item-font" style="width: 100%;">
-          <Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
+          <Table style="width: 90%" bordered :columns="weekdayColumns" :data-source="weekdayData"
                  size="small" :pagination="false">
-            <!--          <template #headerCell="{ column }">-->
+            <template #bodyCell="{ column, record,index }">
-            <!--          </template>-->
+              <template v-if="column.dataIndex==='action'">
-            <!--          <template #bodyCell="{ column, record }">-->
+                <Button type="link" size="small" @click="changeShiftHandle(3)">更改班次</Button>
-            <!--            <template>-->
+                <Button type="link" size="small" @click="restHandle(index)">休息</Button>
-            <!--              {{ record[column.field] }}-->
+              </template>
-            <!--            </template>-->
+            </template>
-            <!--          </template>-->
-            <!--          <template #action="{row}">-->
-            <!--            <Button type="link">更改班次</Button>-->
-            <!--            <Button type="link">休息</Button>-->
-            <!--          </template>-->
           </Table>
           <Checkbox class="item-padding-top" v-model:checked="settingData.isAutomatic">
             法定节假日自动排休
           </Checkbox>
-          <!--     https://timor.tech/api/holiday/year/2024 国务院节假日安排API-->
           <Button type="link" @click="showHoliday">查看法定节假日日历</Button>
           <p class="item-padding-top item-font-weight">特殊日期：</p>
           <p class="item-padding">无需打卡日期：</p>
-          <Table style="width: 80%" bordered :columns="noClockingColumns" :data-source="[]"
+          <Table style="width: 75%" bordered :columns="noClockingColumns"
+                 :data-source="unCheckInData"
                  size="small" :pagination="false">
+            <template #headerCell="{ column }">
+              <template v-if="column.dataIndex === 'action'">
+                <Button size="small" type="primary" shape="circle"
+                        @click="selectDateHandle"
+                        :icon="h(PlusOutlined)">
+                </Button>
+              </template>
+            </template>
+            <template #bodyCell="{ column, record,index }">
+              <template v-if="column.dataIndex==='action'">
+                <Button size="small" type="primary" shape="circle"
+                        danger :icon="h(MinusOutlined)" @click="deleteUnCheckInHandle(index)">
+                </Button>
+              </template>
+            </template>
           </Table>
           <p class="item-padding">必须打卡日期：</p>
-          <Table style="width: 80%" bordered :columns="clockingColumns" :data-source="[]"
+          <Table style="width: 75%" bordered :columns="clockingColumns" :data-source="checkInData"
                  size="small" :pagination="false">
+            <template #headerCell="{ column }">
+              <template v-if="column.dataIndex === 'action'">
+                <Button size="small" type="primary" shape="circle"
+                        @click="selectDateHandle"
+                        :icon="h(PlusOutlined)">
+                </Button>
+              </template>
+            </template>
+            <template #bodyCell="{ column, record,index }">
+              <template v-if="column.dataIndex==='action'">
+                <Button size="small" type="primary" shape="circle"
+                        danger :icon="h(MinusOutlined)" @click="deleteCheckInHandle(index)">
+                </Button>
+              </template>
+            </template>
           </Table>
         </div>
       </template>
       <template #attendanceShift>
-        <Button size="small">选择班次</Button>
+        <Button size="small" @click="shiftScheduleHandle(2)" type="primary">选择班次</Button>
       </template>
       <template #shiftData>
-        <Tag closable color="processing">早班</Tag>
+        <div v-if="shiftList">
+          <Tag closable color="processing" v-for="(item,index) in shiftList">
+            {{ item.name }}
+          </Tag>
+        </div>
       </template>
       <template #schedulingCycle>
-        <span class="item-font">周期天数4天</span>
+        <span class="item-font">周期天数
+          <span style="font-weight: 500;color: red">{{ cycleData.length }}</span>
+          天</span>
       </template>
       <template #cycleData>
-        <Table style="width: 100%" bordered :columns="cycleColumns" :data-source="[]"
+        <Table style="width: 80%" bordered :columns="cycleColumns" :data-source="cycleData"
                size="small" :pagination="false">
+          <template #headerCell="{ column }">
+            <template v-if="column.dataIndex === 'action'">
+              <Button size="small" type="primary" shape="circle"
+                      :icon="h(PlusOutlined)" @click="addCycleHandle">
+              </Button>
+            </template>
+          </template>
+          <template #bodyCell="{ column, record,index }">
+            <template v-if="column.dataIndex==='action'">
+              <Button size="small" type="primary" shape="circle"
+                      danger :icon="h(MinusOutlined)" @click="deleteCycleHandle(index)">
+              </Button>
+            </template>
+          </template>
         </Table>
       </template>
     </BasicForm>
     <HolidayCalendar></HolidayCalendar>
+    <ChangeShiftSchedule @shiftInfo="handleShiftInfo"
+                         @shiftList="handleShiftList"
+                         @afterValue="handleAfterValue"
+    ></ChangeShiftSchedule>
+    <CheckInDate></CheckInDate>
   </BasicModal>
 </template>
 <style lang="scss" scoped>

apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/holiday-calendar.vue

@@ -25,54 +25,76 @@ const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
 
 const holidayData = ref<any>({})
 
+const year = ref<string>(new Date().getFullYear())
+
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
+  await getHolidayData(year.value)
   modalApi.modalLoading(true);
-  const res = await getHoliday(new Date().getFullYear());
-  holidayData.value = res.holiday
   modalApi.modalLoading(false);
 }
 
-const day = ref<Holiday>();
+async function getHolidayData(date: string) {
-const getListData = (value: Dayjs) => {
+  const res = await getHoliday(date);
+  holidayData.value = res.holiday
+}
+
+const holidayInfo = (value: Dayjs) => {
   const date = value.format('MM-DD');
-  day.value = holidayData.value?.[date] ?? null;
+  return holidayData.value[date] ?? null;
-  return !!day.value;
 };
 
-const getMonthData = (value: Dayjs) => {
+const selectDate = (date: Dayjs) => {
-  if (value.month() === 8) {
+  const yearVal = date.format('YYYY');
-    return 1394;
+  if (yearVal != year.value.toString()) {
+    year.value = yearVal
+    getHolidayData(yearVal)
   }
-};
+}
 </script>
 
 <template>
   <BasicModal :footer="false" :fullscreen-button="false" title="法定节假日日历" class="w-[40%]">
-    <Calendar>
+    <div class="modal-content">
+      <Calendar @select="selectDate">
         <template #dateCellRender="{ current }">
-        <div v-if="getListData(current)" style="height: 50px">
+          <div v-if="holidayInfo(current)" style="height: 50px">
-          <Tag v-if="day.holiday" color="blue">
+            <div v-if="holidayInfo(current).holiday">
-            <span style="padding: 0 10px">休</span>
+              <Tag color="blue">
-          </Tag>
+                <span class="tag-padding">休</span>
-          <Tag v-else color="red">
-            <span style="padding: 0 10px">班</span>
               </Tag>
+              <p class="info-text">{{ holidayInfo(current).name }}</p>
             </div>
-      </template>
+
-      <template #monthCellRender="{ current }">
+            <Tag v-else color="red">
-        <div v-if="getMonthData(current)" class="notes-month">
+              <span class="tag-padding">班</span>
-          <span>Backlog number</span>
+            </Tag>
           </div>
         </template>
       </Calendar>
+    </div>
   </BasicModal>
 </template>
 <style scoped lang="scss">
-:deep(.ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content) {
+.modal-content{
-  height: 46px !important;
+  :deep(.ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content) {
+    height: 50px !important;
+  }
+  :deep(.ant-picker-calendar .ant-picker-calendar-header .ant-picker-calendar-mode-switch) {
+    display: none !important;
+  }
+  .tag-padding {
+    padding: 0 10px
+  }
+
+  .info-text {
+    font-size: 11px;
+    color: #c2bfbf;
+    overflow: hidden;
+    text-align: center;
+  }
 }
 
 </style>