feat: 完成考勤排版管理页面交互

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {ref, shallowRef} from 'vue';
-import {useVbenModal} from '@vben/common-ui';
+import { ref, shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
 import {
   Button,
   Checkbox,
@@ -11,16 +11,16 @@ import {
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import {renderDict} from "#/utils/render";
-import {groupInfo} from "#/api/property/attendanceManagement/attendanceGroupSettings";
-import type {GroupVO} from "#/api/property/attendanceManagement/attendanceGroupSettings/model";
+import { renderDict } from '#/utils/render';
+import { groupInfo } from '#/api/property/attendanceManagement/attendanceGroupSettings';
+import type { GroupVO } from '#/api/property/attendanceManagement/attendanceGroupSettings/model';
 import {
   infoCycleColumns,
   infoClockingColumns,
   infoNoClockingColumns,
-  infoWeekdayColumns
-} from "#/views/property/attendanceManagement/attendanceGroupSettings/data";
-import holidayCalendar from './holiday-calendar.vue'
+  infoWeekdayColumns,
+} from '#/views/property/attendanceManagement/attendanceGroupSettings/data';
+import holidayCalendar from './holiday-calendar.vue';
 
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
@@ -34,17 +34,17 @@ const [BasicModal, modalApi] = useVbenModal({
 
 const groupDetail = shallowRef<null | GroupVO>(null);
 
-const weekdayData = ref<any[]>([])
-const cycleData = ref<any[]>([])
-const unCheckInData = ref<any[]>([])
-const checkInData = ref<any[]>([])
+const weekdayData = ref<any[]>([]);
+const cycleData = ref<any[]>([]);
+const unCheckInData = ref<any[]>([]);
+const checkInData = ref<any[]>([]);
 
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
   modalApi.modalLoading(true);
-  const {id} = modalApi.getData() as { id: number | string };
+  const { id } = modalApi.getData() as { id: number | string };
   groupDetail.value = await groupInfo(id);
   modalApi.modalLoading(false);
 }
@@ -57,74 +57,122 @@ const [HolidayCalendar, holidayApi] = useVbenModal({
  * 查看法定节假日日历
  */
 async function showHoliday() {
-  holidayApi.open()
+  holidayApi.open();
 }
-
 </script>
 
 <template>
-  <BasicModal :footer="false" :fullscreen-button="false" title="考勤组信息" class="w-[70%]">
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="考勤组信息"
+    class="w-[70%]"
+  >
     <div v-if="groupDetail" class="des-container">
-      <Descriptions size="small" :column="1" :labelStyle="{width:'100px'}">
+      <Descriptions size="small" :column="1" :labelStyle="{ width: '100px' }">
         <DescriptionsItem label="考勤组名称">
           {{ groupDetail.groupName }}
         </DescriptionsItem>
         <DescriptionsItem label="考勤类型">
           <component
-            :is="groupDetail.attendanceType ? renderDict(groupDetail.attendanceType,'wy_kqlx') : ''"
+            :is="
+              groupDetail.attendanceType
+                ? renderDict(groupDetail.attendanceType, 'wy_kqlx')
+                : ''
+            "
           />
         </DescriptionsItem>
         <DescriptionsItem label="状态">
-          <component
-            :is="renderDict(groupDetail.status,'wy_state')"
-          />
+          <component :is="renderDict(groupDetail.status, 'wy_state')" />
         </DescriptionsItem>
-        <DescriptionsItem label="工作日设置" v-if="groupDetail.attendanceType==0">
-          <div class="item-font" style="width: 100%;">
-            <Table style="width: 90%" bordered :columns="infoWeekdayColumns"
-                   :data-source="weekdayData"
-                   size="small" :pagination="false">
+        <DescriptionsItem
+          label="工作日设置"
+          v-if="groupDetail.attendanceType == 0"
+        >
+          <div class="item-font" style="width: 100%">
+            <Table
+              style="width: 90%"
+              bordered
+              :columns="infoWeekdayColumns"
+              :data-source="weekdayData"
+              size="small"
+              :pagination="false"
+            >
             </Table>
-            <Checkbox class="item-padding-top" v-model:checked="groupDetail.isAutomatic">
+            <Checkbox
+              class="item-padding-top"
+              v-model:checked="groupDetail.isAutomatic"
+            >
               法定节假日自动排休
             </Checkbox>
             <Button type="link" @click="showHoliday">查看法定节假日日历</Button>
             <p class="item-padding-top item-font-weight">特殊日期：</p>
             <p class="item-padding">无需打卡日期：</p>
-            <Table style="width: 75%" bordered :columns="infoNoClockingColumns"
-                   :data-source="unCheckInData"
-                   size="small" :pagination="false">
-              <template #bodyCell="{ column,record,index }">
-                <template v-if="column.dataIndex==='dateTime'">
-                  <span v-if="record.dateType==0">{{ record.startDate }}</span>
-                  <span v-else>{{ record.startDate + '~' + record.endDate }}</span>
+            <Table
+              style="width: 75%"
+              bordered
+              :columns="infoNoClockingColumns"
+              :data-source="unCheckInData"
+              size="small"
+              :pagination="false"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.dataIndex === 'dateTime'">
+                  <span v-if="record.dateType == 0">{{
+                    record.startDate
+                  }}</span>
+                  <span v-else>{{
+                    record.startDate + '~' + record.endDate
+                  }}</span>
                 </template>
               </template>
             </Table>
             <p class="item-padding">必须打卡日期：</p>
-            <Table style="width: 75%" bordered :columns="infoClockingColumns"
-                   :data-source="checkInData"
-                   size="small" :pagination="false">
-              <template #bodyCell="{ column,record,index }">
-                <template v-if="column.dataIndex==='dateTime'">
-                  <span v-if="record.dateType==0">{{ record.startDate }}</span>
-                  <span v-else>{{ record.startDate + '~' + record.endDate }}</span>
+            <Table
+              style="width: 75%"
+              bordered
+              :columns="infoClockingColumns"
+              :data-source="checkInData"
+              size="small"
+              :pagination="false"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.dataIndex === 'dateTime'">
+                  <span v-if="record.dateType == 0">{{
+                    record.startDate
+                  }}</span>
+                  <span v-else>{{
+                    record.startDate + '~' + record.endDate
+                  }}</span>
                 </template>
               </template>
             </Table>
           </div>
         </DescriptionsItem>
-        <DescriptionsItem label="排班周期" v-if="groupDetail.attendanceType==1">
-          <p class="item-font">周期天数
-            <span class="item-font-weight item-font-color">{{ cycleData.length }}</span>
-            天</p>
-          <Table style="width: 80%;margin-top: 5px" bordered :columns="infoCycleColumns" :data-source="cycleData"
-                 size="small" :pagination="false">
-            <template #bodyCell="{ column,record,index }">
-              <template v-if="column.dataIndex==='day'">
+        <DescriptionsItem
+          label="排班周期"
+          v-if="groupDetail.attendanceType == 1"
+        >
+          <p class="item-font">
+            周期天数
+            <span class="item-font-weight item-font-color">{{
+              cycleData.length
+            }}</span>
+            天
+          </p>
+          <Table
+            style="width: 80%; margin-top: 5px"
+            bordered
+            :columns="infoCycleColumns"
+            :data-source="cycleData"
+            size="small"
+            :pagination="false"
+          >
+            <template #bodyCell="{ column, record, index }">
+              <template v-if="column.dataIndex === 'day'">
                 <span>{{ '第' + (index + 1) + '天' }}</span>
               </template>
-              <template v-if="column.dataIndex==='shiftId'">
+              <template v-if="column.dataIndex === 'shiftId'">
                 <!--                    {{item.name+'\xa0'}}-->
                 <!--                    <span v-if="item.isRest">{{item.startTime+'~'+item.restStartTime+'\xa0'+item.restEndTime+'~'+item.endTime}}</span>-->
                 <!--                    <span v-else>{{item.startTime+'~'+item.endTime}}</span>-->
@@ -159,7 +207,11 @@ async function showHoliday() {
     padding: 1.1rem 0 0.5rem 0;
   }
 
-  :deep(.ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-content) {
+  :deep(
+    .ant-descriptions
+      .ant-descriptions-item-container
+      .ant-descriptions-item-content
+  ) {
     display: block;
   }
 }