优化 OA 请假，create 和 detail 使用独立路由，可接入工作流

src/views/bpm/oa/leave/detail.vue

@@ -1,40 +1,48 @@
 <template>
-  <Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="200">
+  <ContentWrap>
     <el-descriptions border :column="1">
       <el-descriptions-item label="请假类型">
         <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type" />
       </el-descriptions-item>
       <el-descriptions-item label="开始时间">
-        {{ formatDate(detailData.startTime) }}
+        {{ formatDate(detailData.startTime, 'YYYY-MM-DD') }}
       </el-descriptions-item>
       <el-descriptions-item label="结束时间">
-        {{ formatDate(detailData.endTime) }}
+        {{ formatDate(detailData.endTime, 'YYYY-MM-DD') }}
       </el-descriptions-item>
       <el-descriptions-item label="原因">
         {{ detailData.reason }}
       </el-descriptions-item>
     </el-descriptions>
-  </Dialog>
+  </ContentWrap>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="OALeaveCreate">
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
 import * as LeaveApi from '@/api/bpm/leave'
+const { query } = useRoute() // 查询参数
 
-const dialogVisible = ref(false) // 弹窗的是否展示
+const props = defineProps({
+  id: propTypes.number.def(undefined)
+})
 const detailLoading = ref(false) // 表单的加载中
-const detailData = ref() // 详情数据
+const detailData = ref({}) // 详情数据
+const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
 
-/** 打开弹窗 */
-const open = async (data: LeaveApi.LeaveVO) => {
-  dialogVisible.value = true
-  // 设置数据
+/** 获得数据 */
+const getInfo = async () => {
   detailLoading.value = true
   try {
-    detailData.value = data
+    detailData.value = await LeaveApi.getLeave(queryId || props.id)
   } finally {
     detailLoading.value = false
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
+
+/** 初始化 **/
+onMounted(() => {
+  getInfo()
+})
 </script>