fix(加班申请): 去掉撤销相关的状态和动作。

feat(工作报告): 开发工作报告功能

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

@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { 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';
+import { formatOvertimeDate, formatOvertimeDateTime } from './overtime-application-shared';
+import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
+import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
 
 defineOptions({ name: 'OvertimeApplicationDetailDialog' });
 
 interface Props {
   rowData?: Api.OvertimeApplication.OvertimeApplication | null;
+  showApprovalActions?: boolean;
+  actionLoading?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showApprovalActions: false,
+  actionLoading: false
+});
+
+const emit = defineEmits<{
+  approve: [];
+  reject: [];
+}>();
 
 const visible = defineModel<boolean>('visible', {
   default: false
@@ -25,11 +31,6 @@ const visible = defineModel<boolean>('visible', {
 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;
@@ -54,30 +55,96 @@ watch(
 </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="申请人">
+  <BusinessFormDialog
+    v-model="visible"
+    title="加班申请详情"
+    preset="md"
+    :loading="loading"
+    :show-footer="props.showApprovalActions"
+  >
+    <ElDescriptions v-if="detailData" class="overtime-application-detail-dialog__descriptions" :column="2" border>
+      <ElDescriptionsItem label="申请人" label-class-name="overtime-application-detail-dialog__label">
         {{ detailData.applicantName }}
       </ElDescriptionsItem>
-      <ElDescriptionsItem label="加班日期">{{ formatOvertimeDate(detailData.overtimeDate) }}</ElDescriptionsItem>
-      <ElDescriptionsItem label="加班时长">{{ detailData.overtimeDuration }}</ElDescriptionsItem>
-      <ElDescriptionsItem label="审核人">
-        {{ detailData.approverName }}
+      <ElDescriptionsItem label="加班日期" label-class-name="overtime-application-detail-dialog__label--compact">
+        {{ formatOvertimeDate(detailData.overtimeDate) }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="加班时长" label-class-name="overtime-application-detail-dialog__label">
+        {{ detailData.overtimeDuration }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="提交时间" label-class-name="overtime-application-detail-dialog__label--compact">
+        {{ formatOvertimeDateTime(detailData.submitTime) }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="加班原因" :span="2" label-class-name="overtime-application-detail-dialog__label">
+        {{ detailData.overtimeReason }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="加班内容" :span="2" label-class-name="overtime-application-detail-dialog__label">
+        {{ detailData.overtimeContent }}
       </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="未获取到加班申请详情" />
+
+    <template #footer>
+      <div class="overtime-application-detail-dialog__footer">
+        <ElButton
+          class="overtime-application-detail-dialog__approve-btn"
+          type="success"
+          :loading="props.actionLoading"
+          :disabled="props.actionLoading || !detailData"
+          @click="emit('approve')"
+        >
+          <template #icon>
+            <IconMdiCheckCircleOutline />
+          </template>
+          通过
+        </ElButton>
+        <ElButton type="danger" plain :disabled="props.actionLoading || !detailData" @click="emit('reject')">
+          <template #icon>
+            <IconMdiCloseCircleOutline />
+          </template>
+          退回
+        </ElButton>
+      </div>
+    </template>
   </BusinessFormDialog>
 </template>
 
 <style scoped>
+.overtime-application-detail-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.overtime-application-detail-dialog__approve-btn {
+  --el-button-bg-color: #0f766e;
+  --el-button-border-color: #0f766e;
+  --el-button-hover-bg-color: #115e59;
+  --el-button-hover-border-color: #115e59;
+  --el-button-active-bg-color: #134e4a;
+  --el-button-active-border-color: #134e4a;
+}
+
+:deep(.overtime-application-detail-dialog__descriptions .el-descriptions__cell) {
+  line-height: 1.7;
+}
+
+:deep(.overtime-application-detail-dialog__label),
+:deep(.overtime-application-detail-dialog__label--compact) {
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+:deep(.overtime-application-detail-dialog__label) {
+  width: 96px;
+  min-width: 96px;
+}
+
+:deep(.overtime-application-detail-dialog__label--compact) {
+  width: 86px;
+  min-width: 86px;
+}
+
 :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;