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>