1、考勤组排班

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

@@ -13,9 +13,16 @@ import {
 } from '#/api/property/attendanceManagement/attendanceGroupSettings';
 import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
 
-import {modalSchema, weekdayColumns} from './data';
-import {Tag, Button, Table} from 'ant-design-vue'
+import {
+  clockingColumns,
+  cycleColumns,
+  modalSchema,
+  noClockingColumns,
+  weekdayColumns
+} from './data';
+import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
 import {getDictOptions} from "#/utils/dict";
+import holidayCalendar from './holiday-calendar.vue'
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -24,7 +31,9 @@ const weekdayData = ref<any[]>([])
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
-
+const settingData = ref<any>({
+  isAutomatic: true,
+})
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
@@ -50,8 +59,9 @@ const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[70%]',
+  class: 'w-[80%]',
   fullscreenButton: false,
+  maskClosable:false,
   onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
@@ -66,18 +76,17 @@ const [BasicModal, modalApi] = useVbenModal({
     if (isUpdate.value && id) {
       const record = await groupInfo(id);
       await formApi.setValues(record);
-    }else {
-      weekdayData.value=[]
-      getDictOptions('wy_kqgzr').forEach(item=>{
-      weekdayData.value.push({
-        dayOfWeek:item.value,
-        label:item.label,
-        shift:item.value=='6'||item.value=='7'?'休息':'常规班次：08:00:00~12:00:00    14:00:00~17:00:00'
-      })
+    } else {
+      weekdayData.value = []
+      getDictOptions('wy_kqgzr').forEach(item => {
+        weekdayData.value.push({
+          dayOfWeek: item.value,
+          label: item.label,
+          shift: item.value == '6' || item.value == '7' ? '休息' : '常规班次：08:00:00~12:00:00    14:00:00~17:00:00'
+        })
       })
     }
     await markInitialized();
-
     modalApi.modalLoading(false);
   },
 });
@@ -106,41 +115,95 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+
+const [HolidayCalendar, holidayApi] = useVbenModal({
+  connectedComponent: holidayCalendar,
+});
+
+/**
+ * 查看法定节假日日历
+ */
+async function showHoliday() {
+  holidayApi.open()
+}
+
 </script>
 
 <template>
   <BasicModal :title="title">
     <BasicForm>
       <template #weekdaySetting>
-        <div style="font-size: 0.875rem;">
+        <div class="item-font">
           <span>快捷设置班次：</span>
           <Tag color="processing">常规班次：08:00:00~12:00:00 14:00:00~17:00:00</Tag>
           <Button type="link">更改班次</Button>
         </div>
       </template>
       <template #settingItem>
-        <Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
-               size="small" :pagination="false">
-<!--          <template #headerCell="{ column }">-->
-<!--          </template>-->
-<!--          <template #bodyCell="{ column, record }">-->
-<!--            <template>-->
-<!--              {{ record[column.field] }}-->
-<!--            </template>-->
-<!--          </template>-->
-<!--          <template #action="{row}">-->
-<!--            <Button type="link">更改班次</Button>-->
-<!--            <Button type="link">休息</Button>-->
-<!--          </template>-->
-        </Table>
+        <div class="item-font" style="width: 100%;">
+          <Table style="width: 100%" bordered :columns="weekdayColumns" :data-source="weekdayData"
+                 size="small" :pagination="false">
+            <!--          <template #headerCell="{ column }">-->
+            <!--          </template>-->
+            <!--          <template #bodyCell="{ column, record }">-->
+            <!--            <template>-->
+            <!--              {{ record[column.field] }}-->
+            <!--            </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="[]"
+                 size="small" :pagination="false">
+          </Table>
+          <p class="item-padding">必须打卡日期：</p>
+          <Table style="width: 80%" bordered :columns="clockingColumns" :data-source="[]"
+                 size="small" :pagination="false">
+          </Table>
+        </div>
       </template>
       <template #attendanceShift>
-        班次
+        <Button size="small">选择班次</Button>
+      </template>
+      <template #shiftData>
+        <Tag closable color="processing">早班</Tag>
       </template>
       <template #schedulingCycle>
-        周期
+        <span class="item-font">周期天数4天</span>
+      </template>
+      <template #cycleData>
+        <Table style="width: 100%" bordered :columns="cycleColumns" :data-source="[]"
+               size="small" :pagination="false">
+        </Table>
       </template>
     </BasicForm>
+    <HolidayCalendar></HolidayCalendar>
   </BasicModal>
 </template>
+<style lang="scss" scoped>
+.item-font {
+  font-size: 0.875rem;
+}
+
+.item-font-weight {
+  font-weight: 500;
+}
+
+.item-padding-top {
+  padding-top: 1.1rem;
+}
+
+.item-padding {
+  padding: 1.1rem 0 0.5rem 0;
+}
+</style>