feat(projects): 优化组件，完成流程实例-流程预览

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

@@ -147,7 +147,7 @@ async function handleUpdateModelWhenEdit() {
     return;
   }
 
-  if (props.operateType === 'edit' || props.operateType === 'detail') {
+  if (props.operateType === 'edit' || (props.operateType === 'detail' && props.rowData)) {
     Object.assign(model, props.rowData);
     Object.assign(modelDetail, props.rowData);
   } else {
@@ -255,17 +255,17 @@ watch(visible, async () => {
       <div v-else>
         <NDescriptions bordered :column="2" label-placement="left">
           <NDescriptionsItem label="流程类型">
-            {{ flowCodeTypeRecord[model.flowCode] }}
+            {{ flowCodeTypeRecord[modelDetail.flowCode] }}
           </NDescriptionsItem>
           <NDescriptionsItem label="请假类型">
-            <NTag type="info">{{ leaveTypeRecord[model.leaveType!] }}</NTag>
+            <NTag type="info">{{ leaveTypeRecord[modelDetail.leaveType!] }}</NTag>
           </NDescriptionsItem>
           <NDescriptionsItem label="请假时间">
-            {{ `${model.startDate} 至 ${model.endDate}` }}
+            {{ `${modelDetail.startDate} 至 ${modelDetail.endDate}` }}
           </NDescriptionsItem>
-          <NDescriptionsItem label="请假天数">{{ model.leaveDays }} 天</NDescriptionsItem>
+          <NDescriptionsItem label="请假天数">{{ modelDetail.leaveDays }} 天</NDescriptionsItem>
           <NDescriptionsItem label="请假原因">
-            {{ model.remark || '-' }}
+            {{ modelDetail.remark || '-' }}
           </NDescriptionsItem>
         </NDescriptions>
         <!-- 审批信息 -->

src/views/workflow/process-instance/index.vue

@@ -32,6 +32,7 @@ useDict('wf_business_status');
 const appStore = useAppStore();
 
 const { bool: variableVisible, setTrue: showVariableDrawer } = useBoolean(false);
+const { bool: leaveEditVisible, setTrue: showLeaveEditDrawer } = useBoolean(false);
 
 const runningStatus = ref<boolean>(true);
 const runningStatusOptions = ref<RunningStatusOption[]>([
@@ -185,7 +186,13 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
       }
 
       buttons.push(
-        <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
+        <ButtonIcon
+          text
+          type="info"
+          icon="material-symbols:visibility-outline"
+          tooltipContent="流程预览"
+          onClick={() => handleShowLeaveEdit(row.businessId)}
+        />
       );
 
       buttons.push(
@@ -310,6 +317,12 @@ async function handleShowVariable(id: CommonType.IdType) {
   handleEdit('id', id);
   showVariableDrawer();
 }
+
+const leaveEditBusinessId = ref<CommonType.IdType>();
+async function handleShowLeaveEdit(businessId: CommonType.IdType) {
+  leaveEditBusinessId.value = businessId;
+  showLeaveEditDrawer();
+}
 </script>
 
 <template>
@@ -387,6 +400,7 @@ async function handleShowVariable(id: CommonType.IdType) {
           :pagination="mobilePagination"
           class="sm:h-full"
         />
+        <LeaveEdit v-model:visible="leaveEditVisible" operate-type="detail" :business-id="leaveEditBusinessId" />
         <ProcessInstanceVariableDrawer v-model:visible="variableVisible" :row-data="editingData" />
       </NCard>
     </div>