From f8c9d4177679c0f82b8a5245c6d931fa61e91c09 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 25 Dec 2024 11:27:52 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=AE=A1=E6=89=B9=E6=94=B9=E4=B8=BAde?=
 =?UTF-8?q?scription=E8=80=8C=E9=9D=9Edisabled=E7=9A=84=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/workflow/leave/data.tsx         |  2 +-
 .../workflow/leave/leave-description.vue      | 45 +++++++++++++++++++
 .../src/views/workflow/leave/leave-form.vue   | 14 +++++-
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-antd/src/views/workflow/leave/leave-description.vue

diff --git a/apps/web-antd/src/views/workflow/leave/data.tsx b/apps/web-antd/src/views/workflow/leave/data.tsx
index bb3d8b9c..159bcc71 100644
--- a/apps/web-antd/src/views/workflow/leave/data.tsx
+++ b/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' },
diff --git a/apps/web-antd/src/views/workflow/leave/leave-description.vue b/apps/web-antd/src/views/workflow/leave/leave-description.vue
new file mode 100644
index 00000000..49915bc8
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/workflow/leave/leave-form.vue b/apps/web-antd/src/views/workflow/leave/leave-form.vue
index 4a73cc10..98371b71 100644
--- a/apps/web-antd/src/views/workflow/leave/leave-form.vue
+++ b/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>