chore: 审批改为description而非disabled的表单

apps/web-antd/src/views/workflow/leave/data.tsx

@@ -9,7 +9,7 @@ import dayjs from 'dayjs';
 import { OptionsTag } from '#/components/table';
 import { renderDict } from '#/utils/render';
 
-const leaveTypeOptions = [
+export const leaveTypeOptions = [
   { label: '病假', value: '1' },
   { label: '事假', value: '2' },
   { label: '年假', value: '3' },

apps/web-antd/src/views/workflow/leave/leave-description.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { LeaveVO } from './api/model';
+
+import { computed } from 'vue';
+
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { leaveTypeOptions } from './data';
+
+defineOptions({
+  name: 'LeaveDescription',
+  inheritAttrs: false,
+});
+
+const props = defineProps<{ data: LeaveVO }>();
+
+const leaveType = computed(() => {
+  return (
+    leaveTypeOptions.find((item) => item.value === props.data.leaveType)
+      ?.label ?? '未知'
+  );
+});
+
+function formatDate(date: string) {
+  return dayjs(date).format('YYYY-MM-DD');
+}
+</script>
+
+<template>
+  <Descriptions :column="1" bordered size="small">
+    <DescriptionsItem label="请假类型">
+      {{ leaveType }}
+    </DescriptionsItem>
+    <DescriptionsItem label="请假时间">
+      {{ formatDate(data.startDate) }} - {{ formatDate(data.endDate) }}
+    </DescriptionsItem>
+    <DescriptionsItem label="请假时长">
+      {{ data.leaveDays }}天
+    </DescriptionsItem>
+    <DescriptionsItem label="请假原因">
+      {{ data.remark }}
+    </DescriptionsItem>
+  </Descriptions>
+</template>

apps/web-antd/src/views/workflow/leave/leave-form.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { LeaveVO } from './api/model';
+
 import type { StartWorkFlowReqData } from '#/api/workflow/task/model';
 
-import { computed, onMounted, useTemplateRef } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -16,6 +18,7 @@ import { startWorkFlow } from '#/api/workflow/task';
 import { applyModal } from '../components';
 import { leaveAdd, leaveInfo, leaveUpdate } from './api';
 import { modalSchema } from './data';
+import LeaveDescription from './leave-description.vue';
 
 const route = useRoute();
 const readonly = route.query?.readonly === 'true';
@@ -45,11 +48,16 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
+const leaveDescription = ref<LeaveVO>();
+const showDescription = computed(() => {
+  return readonly && leaveDescription.value;
+});
 const cardRef = useTemplateRef('cardRef');
 onMounted(async () => {
   // 只读 获取信息赋值
   if (id) {
     const resp = await leaveInfo(id);
+    leaveDescription.value = resp;
     await formApi.setValues(resp);
     const dateRange = [dayjs(resp.startDate), dayjs(resp.endDate)];
     await formApi.setFieldValue('dateRange', dateRange);
@@ -153,7 +161,9 @@ function handleComplete() {
 <template>
   <Card ref="cardRef">
     <div id="leave-form">
-      <BasicForm />
+      <!-- 使用v-if会影响生命周期 -->
+      <BasicForm v-show="!showDescription" />
+      <LeaveDescription v-if="showDescription" :data="leaveDescription!" />
       <div v-if="showActionBtn" class="flex justify-end gap-2">
         <a-button @click="handleTempSave">暂存</a-button>
         <a-button type="primary" @click="handleStartWorkFlow">提交</a-button>