feat-wip(components): 审批信息流程图组件

src/components/custom/work-flow/approval-info-panel.vue

@@ -0,0 +1,114 @@
+<script setup lang="tsx">
+import { onMounted, ref } from 'vue';
+import type { DataTableColumns } from 'naive-ui';
+import { NTag } from 'naive-ui';
+import { fetchGetFlowHisTaskList } from '@/service/api/workflow/instance';
+import { useDict } from '@/hooks/business/dict';
+import DictTag from '@/components/custom/dict-tag.vue';
+
+interface Props {
+  /** 业务id */
+  businessId: CommonType.IdType;
+}
+useDict('wf_task_status');
+const props = defineProps<Props>();
+
+const activeTab = ref('info');
+
+const columns = ref<DataTableColumns<Api.Workflow.HisTask>>([
+  {
+    title: '任务名称',
+    key: 'nodeName',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '办理人',
+    key: 'approveName',
+    align: 'center',
+    width: 100,
+    render: row => {
+      return (
+        <NTag size="small" type="info">
+          {row.approveName}
+        </NTag>
+      );
+    }
+  },
+  {
+    title: '任务状态',
+    key: 'flowStatus',
+    align: 'center',
+    width: 100,
+    render: row => {
+      return <DictTag size="small" value={row.flowStatus} dict-code="wf_task_status" />;
+    }
+  },
+  {
+    title: '审批意见',
+    key: 'message',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '开始时间',
+    key: 'createTime',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '结束时间',
+    key: 'updateTime',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '运行时间',
+    key: 'runDuration',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '附件',
+    key: 'attachmentList',
+    align: 'center',
+    width: 100
+  }
+]);
+
+const instanceId = ref<CommonType.IdType>();
+
+const HisTask = ref<Api.Workflow.HisTask[]>([]);
+
+async function getData() {
+  const { error, data } = await fetchGetFlowHisTaskList(props.businessId);
+  if (error) {
+    window.$message?.error(error.message);
+  }
+  instanceId.value = data?.instanceId || '';
+  HisTask.value = data?.list || [];
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <NDivider />
+  <div>
+    <NTabs v-model:value="activeTab" type="segment" animated>
+      <NTabPane bar-width="100px" name="info" tab="审批信息">
+        <NDataTable class="max-h-500px" :columns="columns" :data="HisTask" />
+      </NTabPane>
+      <NTabPane bar-width="100px" name="image" tab="流程图">
+        “威尔！着火了！快来帮忙！”我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的 Amazon 服务，还是救公寓的火。
+        <br />
+        <br />
+        我的脑海中忽然出现了 Amazon
+        著名的领导力准则”客户至上“，有很多的客户还依赖我们的服务，我不能让他们失望！所以着火也不管了，女朋友喊我也无所谓，我开始
+        debug 这个线上问题。
+      </NTabPane>
+    </NTabs>
+  </div>
+</template>

src/components/custom/work-flow/leave-edit/index.vue

@@ -144,6 +144,7 @@ async function handleUpdateModelWhenEdit() {
 
   if (props.operateType === 'edit' || props.operateType === 'detail') {
     Object.assign(model, props.rowData);
+    Object.assign(modelDetail, props.rowData);
   } else {
     const { error, data } = await fetchGetLeaveDetail(props.businessId!);
     if (error) {
@@ -215,7 +216,7 @@ watch(visible, () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="1000" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <div v-if="!readonly">
         <NForm ref="formRef" :model="model" :rules="rules">
@@ -243,33 +244,24 @@ watch(visible, () => {
         </NForm>
       </div>
       <div v-else>
-        <NDescriptions bordered :column="1" label-placement="left">
+        <NDescriptions bordered :column="2" label-placement="left">
           <NDescriptionsItem label="流程类型">
-            {{ flowCodeTypeRecord[model.flowCode] || '-' }}
+            {{ flowCodeTypeRecord[model.flowCode] }}
           </NDescriptionsItem>
           <NDescriptionsItem label="请假类型">
-            <NTag type="info">{{ leaveTypeRecord[model.leaveType!] || '-' }}</NTag>
+            <NTag type="info">{{ leaveTypeRecord[model.leaveType!] }}</NTag>
           </NDescriptionsItem>
           <NDescriptionsItem label="请假时间">
-            {{ model.startDate ? `${model.startDate} 至 ${model.endDate}` : '-' }}
+            {{ `${model.startDate} 至 ${model.endDate}` }}
           </NDescriptionsItem>
-          <NDescriptionsItem label="请假天数">{{ model.leaveDays || '-' }} 天</NDescriptionsItem>
+          <NDescriptionsItem label="请假天数">{{ model.leaveDays }} 天</NDescriptionsItem>
           <NDescriptionsItem label="请假原因">
             {{ model.remark || '-' }}
           </NDescriptionsItem>
         </NDescriptions>
-        <div v-if="modelDetail.status !== 'draft'" class="mt-4">
-          <NTimeline horizontal>
-            <NTimelineItem content="啊" />
-            <NTimelineItem type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
-            <NTimelineItem type="error" content="哪里错误" time="2018-04-03 20:46" />
-            <NTimelineItem type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
-            <NTimelineItem type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
-            <NTimelineItem content="啊" />
-          </NTimeline>
-        </div>
+        <!--  -->
+        <ApprovalInfoPanel v-if="modelDetail.status !== 'draft'" :business-id="modelDetail.id!" />
       </div>
-
       <template #footer>
         <div v-if="!readonly">
           <NSpace :size="16">