bpm：增加 OA 请假的详情

yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts

@@ -135,7 +135,15 @@ VXETable.setup({
 })
 // 自定义全局的格式化处理函数
 VXETable.formats.mixin({
-  // 格式日期，默认 yyyy-MM-dd HH:mm:ss
+  // 格式精简日期，默认 yyyy-MM-dd HH:mm:ss
+  formatDay({ cellValue }, format) {
+    if (cellValue != null) {
+      return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd')
+    } else {
+      return ''
+    }
+  },
+  // 格式完整日期，默认 yyyy-MM-dd HH:mm:ss
   formatDate({ cellValue }, format) {
     if (cellValue != null) {
       return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')

yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue

@@ -1,54 +1,37 @@
 <template>
-  <div class="app-container">
-    <!-- 对话框(添加 / 修改) -->
-    <el-form ref="form" :model="form" label-width="100px">
-      <el-form-item label="开始时间：" prop="startTime">
-        {{ formatDate(form.startTime, '{y}-{m}-{d}') }}
-      </el-form-item>
-      <el-form-item label="结束时间：" prop="endTime">
-        {{ formatDate(form.endTime, '{y}-{m}-{d}') }}
-      </el-form-item>
-      <el-form-item label="请假类型：" prop="type">
-        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type" />
-      </el-form-item>
-      <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
-    </el-form>
-  </div>
+  <ContentWrap>
+    <!-- 详情 -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="formData" />
+  </ContentWrap>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+// 业务相关的 import
+import * as LeaveApi from '@/api/bpm/leave'
+import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
 
-import { getLeaveApi } from '@/api/bpm/leave'
-import { DICT_TYPE } from '@/utils/dict'
-import { formatDate } from '@/utils/formatTime'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-// 请假编号
-const id = ref()
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
+
+const id = ref() // 请假编号
 // 表单参数
-const form = ref({
+const formData = ref({
   startTime: undefined,
   endTime: undefined,
   type: undefined,
   reason: undefined
 })
-/** 获得请假信息 */
-const getDetail = () => {
-  getLeaveApi(id.value).then((response) => {
-    form.value = response.data
-  })
-}
+
 onMounted(() => {
-  id.value = router.currentRoute.value.query.id
+  id.value = query.id
   if (!id.value) {
-    ElMessage({
-      type: 'error',
-      message: '未传递 id 参数，无法查看 OA 请假信息'
-    })
+    message.error('未传递 id 参数，无法查看 OA 请假信息')
     return
   }
-  getDetail()
+  // 获得请假信息
+  LeaveApi.getLeaveApi(id.value).then((data) => {
+    formData.value = data
+  })
 })
 </script>

yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue

@@ -1,24 +1,26 @@
 <template>
-  <XTable @register="registerTable">
-    <template #toolbar_buttons>
-      <!-- 操作：发起请假 -->
-      <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
-    </template>
-    <template #actionbtns_default="{ row }">
-      <!-- 操作: 取消请假 -->
-      <XTextButton
-        preIcon="ep:delete"
-        title="取消请假"
-        v-hasPermi="['bpm:oa-leave:create']"
-        v-if="row.result === 1"
-        @click="cancelLeave(row)"
-      />
-      <!-- 操作: 详情 -->
-      <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
-      <!-- 操作: 审批进度 -->
-      <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
-    </template>
-  </XTable>
+  <ContentWrap>
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：发起请假 -->
+        <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作: 取消请假 -->
+        <XTextButton
+          preIcon="ep:delete"
+          title="取消请假"
+          v-hasPermi="['bpm:oa-leave:create']"
+          v-if="row.result === 1"
+          @click="cancelLeave(row)"
+        />
+        <!-- 操作: 详情 -->
+        <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" />
+        <!-- 操作: 审批进度 -->
+        <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" />
+      </template>
+    </XTable>
+  </ContentWrap>
 </template>
 
 <script setup lang="ts">

yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts

@@ -29,17 +29,23 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: t('common.startTimeText'),
       field: 'startTime',
-      formatter: 'formatDate',
+      formatter: 'formatDay',
       table: {
         width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
       }
     },
     {
       title: t('common.endTimeText'),
       field: 'endTime',
-      formatter: 'formatDate',
+      formatter: 'formatDay',
       table: {
         width: 180
+      },
+      detail: {
+        dateFormat: 'YYYY-MM-DD'
       }
     },
     {