feat: 流程设计从列表带入详情

src/api/flow/processTask.ts

@@ -8,10 +8,11 @@ const api = {
 	pageMyReceived: '/v1/process-task/page-my-received',
 	pageMyApplication: '/v1/process-task/page-my-application',
 	pageApproved: '/v1/process-task/page-approved',
-	listHisTask: '/v1/process-task/list-his-task',
+	listHisTask: '/v1/process-task/list-his-task', // todo废弃了
 	consentTask: '/v1/process-task/approval-consent', // 审批同意
 	rejectionTask: '/v1/process-task/approval-rejection', // 审批拒绝
-	reviewTask: '/v1/process-task/approval-comment' // 评论审批
+	reviewTask: '/v1/process-task/approval-comment', // 评论审批
+	approvalInfo: '/v1/process-task/approval-info' // 审批详情
 }
 
 // 待认领任务分页列表
@@ -59,6 +60,7 @@ export function processTaskPageApprovedApi(data: any): AxiosPromise {
 	})
 }
 
+// todo废弃了
 export function processTaskListHisTaskApi(instanceId: string): AxiosPromise {
 	return request({
 		url: `${api.listHisTask}/${instanceId}`,
@@ -93,11 +95,20 @@ export function processReviewTaskApi(data: any): AxiosPromise {
 	})
 }
 
+// 审批详情
+export function processApprovalInfoApi(taskId: string): AxiosPromise {
+	return request({
+		url: `${api.approvalInfo}-${taskId}`,
+		method: 'post'
+	})
+}
+
 export default {
 	processTaskPageMyApplicationApi,
 	processTaskPageApprovedApi,
 	processTaskListHisTaskApi,
 	processConsentTaskApi,
 	processRejectionTaskApi,
-	processReviewTaskApi
+	processReviewTaskApi,
+	processApprovalInfoApi
 }

src/views/approve/pendingApproval/detail.vue

@@ -3,7 +3,7 @@
 		<el-drawer v-model="visibleDialog" class="custom-adrawer" direction="rtl" size="900" @close="handleCancel">
 			<template #header>
 				<div class="flow-header-box">
-					<div class="flow-no">编号：12138</div>
+					<div class="flow-no">编号：{{ taskId }}</div>
 				</div>
 			</template>
 			<div class="flow-detail-container">
@@ -15,12 +15,12 @@
 					<!--头部-->
 					<div class="header-box">
 						<div class="summary-info">
-							<div class="title">名片申请</div>
+							<div class="title">{{ taskObj.processName }}</div>
 							<FlowStatusTag :status="0" />
 						</div>
 						<div class="initiator-info">
 							<FlowNodeAvatar id="1" />
-							<div class="begin-time">2023-11-01 12:00:17 提交</div>
+							<div class="begin-time">{{ taskObj.createTime }} 提交</div>
 						</div>
 					</div>
 					<div class="area-divider"></div>
@@ -96,7 +96,12 @@
 		<add-sign-dialog v-if="addSignVisible" v-model="addSignVisible" :task-id="taskId"></add-sign-dialog>
 
 		<!-- 同意或拒绝弹窗 -->
-		<consent-or-refuse-dialog v-if="consentOrRefuseVisible" v-model="consentOrRefuseVisible" :task-id="taskId" :current-type="currentDialog"></consent-or-refuse-dialog>
+		<consent-or-refuse-dialog
+			v-if="consentOrRefuseVisible"
+			v-model="consentOrRefuseVisible"
+			:task-id="taskId"
+			:current-type="currentDialog"
+		></consent-or-refuse-dialog>
 
 		<!-- 转交审批弹窗 -->
 		<deliver-to-review-dialog v-if="deliverToReviewVisible" v-model="deliverToReviewVisible" :task-id="taskId"></deliver-to-review-dialog>
@@ -110,13 +115,13 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, nextTick } from 'vue'
 import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
 import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import FlowTypeDot from '@/components/Flow/FlowTypeDot.vue'
 import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More } from '@element-plus/icons-vue'
-import { processTaskListHisTaskApi } from '@/api/flow/processTask'
+import { processApprovalInfoApi } from '@/api/flow/processTask'
 import { formatTimestamp } from '@/utils/datetime'
 import ReviewDialog from '../components/reviewDialog'
 import AddSignDialog from '../components/addSignDialog'
@@ -130,27 +135,37 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
-	messageId: {
-		type: String,
-		default: undefined
-	},
-	taskId: {
-		type: String,
-		default: undefined
+	taskObj: {
+		type: Object,
+		default: () => {}
 	}
 })
 const emit = defineEmits(['update:modelValue', 'successFn'])
 
-// 各种操作弹窗显示隐藏
+// 各种操作弹窗显示隐藏 start
 const reviewVisible = ref(false)
 const addSignVisible = ref(false)
 const consentOrRefuseVisible = ref(false)
 const deliverToReviewVisible = ref(false)
 const loseSignVisible = ref(false)
 const rollbackVisible = ref(false)
+// 各种操作弹窗显示隐藏 end
 const activeData = ref([])
 const currentDialog = ref(null)
 
+const visibleDialog = computed({
+	get() {
+		return props.modelValue
+	},
+	set(val) {
+		emit('update:modelValue', val)
+	}
+})
+
+const taskId = computed(() => {
+	return props.taskObj.taskId || ''
+})
+
 // 关闭按钮
 const closeDrawer = () => {
 	emit('successFn')
@@ -161,15 +176,6 @@ const handleCancel = () => {
 	closeDrawer()
 }
 
-const visibleDialog = computed({
-	get() {
-		return props.modelValue
-	},
-	set(val) {
-		emit('update:modelValue', val)
-	}
-})
-
 // 操作按钮
 const openComment = (type, item) => {
 	switch (type) {
@@ -196,8 +202,11 @@ const openComment = (type, item) => {
 }
 
 onMounted(() => {
-	processTaskListHisTaskApi(props.messageId).then(data => {
-		activeData.value = data
+	nextTick(() => {
+		processApprovalInfoApi(props.taskObj.taskId).then(data => {
+			console.log(JSON.stringify(data))
+			activeData.value = data
+		})
 	})
 })
 </script>

src/views/approve/pendingApproval/index.vue

@@ -36,7 +36,7 @@
 			</LeTable>
 		</div>
 
-		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" :task-id="taskId" @closed="visibleDetail = false"> </message-detail>
+		<message-detail v-if="visibleDetail" v-model="visibleDetail" :task-obj="taskRow" @closed="visibleDetail = false"> </message-detail>
 	</div>
 </template>
 <script lang="tsx" setup>
@@ -48,8 +48,7 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
-const currentId = ref(null)
-const taskId = ref(null) // 当前任务id
+const taskRow = ref({}) // 当前这条数据详情
 
 // 表格搜索条件
 const forms = ref([
@@ -155,8 +154,7 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 )
 
 const openDetail = (row: any) => {
-	currentId.value = row.instanceId
-	taskId.value = row.taskId
+	taskRow.value = row || {}
 	visibleDetail.value = true
 }