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

<script setup lang="ts">
import {ref, shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {
  Button,
  Checkbox,
  Descriptions,
  DescriptionsItem,
  Table,
} from 'ant-design-vue';
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 {
  infoCycleColumns,
  infoClockingColumns,
  infoNoClockingColumns,
  infoWeekdayColumns
} from "#/views/property/attendanceManagement/attendanceGroupSettings/data";
import holidayCalendar from './holiday-calendar.vue'

dayjs.extend(duration);
dayjs.extend(relativeTime);

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    groupDetail.value = null;
  },
});

const groupDetail = shallowRef<null | GroupVO>(null);

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 };
  groupDetail.value = await groupInfo(id);
  modalApi.modalLoading(false);
}

const [HolidayCalendar, holidayApi] = useVbenModal({
  connectedComponent: holidayCalendar,
});

/**
 * 查看法定节假日日历
 */
async function showHoliday() {
  holidayApi.open()
}

</script>

<template>
  <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'}">
        <DescriptionsItem label="考勤组名称">
          {{ groupDetail.groupName }}
        </DescriptionsItem>
        <DescriptionsItem label="考勤类型">
          <component
            :is="groupDetail.attendanceType ? renderDict(groupDetail.attendanceType,'wy_kqlx') : ''"
          />
        </DescriptionsItem>
        <DescriptionsItem label="状态">
          <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">
            </Table>
            <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>
                </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>
                </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'">
                <span>{{ '第' + (index + 1) + '天' }}</span>
              </template>
              <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>-->
              </template>
            </template>
          </Table>
        </DescriptionsItem>
      </Descriptions>
      <HolidayCalendar></HolidayCalendar>
    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.des-container {
  .item-font {
    font-size: 0.875rem;
  }

  .item-font-weight {
    font-weight: 500;
  }

  .item-font-color {
    color: red;
  }

  .item-padding-top {
    padding-top: 1.1rem;
  }

  .item-padding {
    padding: 1.1rem 0 0.5rem 0;
  }

  :deep(.ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-content) {
    display: block;
  }
}
</style>