feat: 【BPM 工作流】新增OA请假示例详情页面，完善请假信息展示和数据获取逻辑

apps/web-antd/src/views/bpm/oa/leave/detail.vue

@@ -1,11 +1,54 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+<script setup lang="ts">
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { getLeave } from '#/api/bpm/oa/leave';
+import { ContentWrap } from '#/components/content-wrap';
+import { Description } from '#/components/description';
+
+import { useDetailFormSchema } from './data';
+
+const props = defineProps<{
+  id: string;
+}>();
+const datailLoading = ref(false);
+const detailData = ref<BpmOALeaveApi.LeaveVO>();
+
+const { query } = useRoute();
+const queryId = computed(() => query.id as string);
+
+const getDetailData = async () => {
+  try {
+    datailLoading.value = true;
+    detailData.value = await getLeave(Number(props.id || queryId.value));
+  } finally {
+    datailLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  getDetailData();
+});
 </script>
 
 <template>
-  <Page>
-    <div>
-      <h1>请假详情</h1>
-    </div>
-  </Page>
+  <ContentWrap class="m-2">
+    <Description
+      :data="detailData"
+      :schema="useDetailFormSchema()"
+      :component-props="{
+        column: 1,
+        bordered: true,
+        size: 'small',
+      }"
+    />
+  </ContentWrap>
 </template>
+
+<style lang="scss" scoped>
+:deep(.ant-descriptions-item-label) {
+  width: 150px;
+}
+</style>