cn-rdms-web/src/views/personal-center/overtime-application/modules/overtime-application-detail-dialog.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { fetchGetOvertimeApplicationDetail } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import {
  formatEmptyText,
  formatOvertimeDate,
  formatOvertimeDateTime,
  getOvertimeApplicationStatusLabel,
  resolveOvertimeApplicationStatusTagType
} from './overtime-application-shared';

defineOptions({ name: 'OvertimeApplicationDetailDialog' });

interface Props {
  rowData?: Api.OvertimeApplication.OvertimeApplication | null;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const loading = ref(false);
const detailData = ref<Api.OvertimeApplication.OvertimeApplication | null>(null);

const statusTagType = computed(() => resolveOvertimeApplicationStatusTagType(detailData.value?.statusCode));
const statusLabel = computed(() =>
  getOvertimeApplicationStatusLabel(detailData.value?.statusCode, detailData.value?.statusName)
);

async function loadDetail() {
  if (!props.rowData?.id) {
    detailData.value = null;
    return;
  }

  loading.value = true;
  const { error, data } = await fetchGetOvertimeApplicationDetail(props.rowData.id);
  loading.value = false;

  detailData.value = error || !data ? props.rowData : data;
}

watch(
  () => visible.value,
  value => {
    if (value) {
      loadDetail();
    }
  }
);
</script>

<template>
  <BusinessFormDialog v-model="visible" title="加班申请详情" preset="md" :loading="loading" :show-footer="false">
    <ElDescriptions v-if="detailData" :column="2" border>
      <ElDescriptionsItem label="状态">
        <ElTag :type="statusTagType">{{ statusLabel }}</ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="申请人">
        {{ detailData.applicantName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="加班日期">{{ formatOvertimeDate(detailData.overtimeDate) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="加班时长">{{ detailData.overtimeDuration }}</ElDescriptionsItem>
      <ElDescriptionsItem label="审核人">
        {{ detailData.approverName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="提交时间">{{ formatOvertimeDateTime(detailData.submitTime) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="审核时间">{{ formatOvertimeDateTime(detailData.approvalTime) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="审核意见">{{ formatEmptyText(detailData.approvalComment) }}</ElDescriptionsItem>
      <ElDescriptionsItem label="加班原因" :span="2">{{ detailData.overtimeReason }}</ElDescriptionsItem>
      <ElDescriptionsItem label="加班内容" :span="2">{{ detailData.overtimeContent }}</ElDescriptionsItem>
    </ElDescriptions>
    <ElEmpty v-else description="未获取到加班申请详情" />
  </BusinessFormDialog>
</template>

<style scoped>
:deep(.overtime-application-detail-dialog__readonly-input .el-input__wrapper) {
  background: linear-gradient(180deg, rgb(241 245 249 / 98%), rgb(226 232 240 / 94%)), rgb(241 245 249);
  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
  cursor: default;
}

:deep(.overtime-application-detail-dialog__readonly-input .el-input__wrapper:hover),
:deep(.overtime-application-detail-dialog__readonly-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 1px rgb(203 213 225 / 96%) inset;
}

:deep(.overtime-application-detail-dialog__readonly-input .el-input__inner) {
  color: rgb(51 65 85 / 96%);
  cursor: default;
  -webkit-text-fill-color: rgb(51 65 85 / 96%);
}
</style>