修改

src/components/taskDrawer/index.vue

@@ -5,23 +5,25 @@
 			<h3>{{ currentData?.processName }}</h3>
 		</template>
 		<template #default>
-			<el-card class="box-card">
-				<form-render
-					@addLayoutOneItem="addLayoutOneItem"
-					@deleteLayoutOneItem="deleteLayoutOneItem"
-					ref="formRenderRef"
-					:form-list="currentOpenFlowForm"
+			<div class="w-full h-full" v-loading="loading">
+				<el-card class="box-card">
+					<form-render
+						@addLayoutOneItem="addLayoutOneItem"
+						@deleteLayoutOneItem="deleteLayoutOneItem"
+						ref="formRenderRef"
+						:form-list="currentOpenFlowForm"
+					/>
+				</el-card>
+				<flow-node-format
+					:disableSelect="true"
+					:formData="formValue"
+					:task-id="processId"
+					:processInstanceId="processInstanceId"
+					:flow-id="currentData.flowId"
+					ref="flowNodeFormatRef"
+					class="mt-4"
 				/>
-			</el-card>
-			<flow-node-format
-				:disableSelect="true"
-				:formData="formValue"
-				:task-id="currentData.taskId"
-				:processInstanceId="currentData.processInstanceId"
-				:flow-id="currentData.flowId"
-				ref="flowNodeFormatRef"
-				class="mt-4"
-			/>
+			</div>
 		</template>
 		<template #footer>
 			<div style="flex: auto">
@@ -49,23 +51,18 @@ import AgreeHandle from "./agree.vue"
 import RefuseHandle from "./refuse.vue"
 import TransferHandle from "./transfer.vue"
 import other from "/@/utils/other"
-import { FlowFormItem, TaskData } from "./types"
+import { FlowFormItem } from "./types"
+import { queryTask } from "/@/api/flow/task"
 
 const taskDrawerVisible = defineModel<boolean>()
 
 const props = withDefaults(
 	defineProps<{
-		currentData: TaskData
-		currentOpenFlowForm: FlowFormItem[]
+		processId: string
+		currentData: any
 	}>(),
 	{
-		currentData: (): TaskData => ({
-			processName: "",
-			taskId: "",
-			processInstanceId: "",
-			flowId: "",
-		}),
-		currentOpenFlowForm: () => [],
+		processId: "",
 	},
 )
 
@@ -74,9 +71,34 @@ const emit = defineEmits(["taskSubmitEvent"])
 const agreeHandler = ref()
 const refuseHandler = ref()
 const transferHandler = ref()
+const currentOpenFlowForm = ref<FlowFormItem[]>([])
+const processInstanceId = ref("")
+const loading = ref(false)
+
+watch(
+	() => taskDrawerVisible.value,
+	async (val) => {
+		if (val) {
+			loading.value = true
+			try {
+				const res = await queryTask(props.processId, false).finally(() => (loading.value = false))
+				if (res.code === 0) {
+					currentOpenFlowForm.value = res.data.formItems
+					processInstanceId.value = res.data.processInstanceId
+				}
+			} catch (error) {
+				loading.value = false
+				currentOpenFlowForm.value = []
+			}
+		}
+	},
+	{
+		deep: true,
+	},
+)
 
 const addLayoutOneItem = (id: number | string) => {
-	for (const item of props.currentOpenFlowForm) {
+	for (const item of currentOpenFlowForm.value) {
 		if (item.id !== id) {
 			continue
 		}
@@ -87,7 +109,7 @@ const addLayoutOneItem = (id: number | string) => {
 	}
 }
 const deleteLayoutOneItem = (id: any, index: any) => {
-	for (const item of props.currentOpenFlowForm) {
+	for (const item of currentOpenFlowForm.value) {
 		if (item.id !== id) {
 			continue
 		}
@@ -97,16 +119,15 @@ const deleteLayoutOneItem = (id: any, index: any) => {
 
 // 提交任务
 const submitTask = () => {
-	agreeHandler.value.handle(props.currentData, props.currentOpenFlowForm)
+	agreeHandler.value.handle({ ...props.currentData, taskId: props.processId }, currentOpenFlowForm.value)
 }
 // 拒绝任务
 const refuseTask = () => {
-	refuseHandler.value.handle(props.currentData, props.currentOpenFlowForm)
+	refuseHandler.value.handle({ ...props.currentData, taskId: props.processId }, currentOpenFlowForm.value)
 }
-
 // 转办任务
 const transferTask = () => {
-	transferHandler.value.handle(props.currentData, props.currentOpenFlowForm)
+	transferHandler.value.handle({ ...props.currentData, taskId: props.processId }, currentOpenFlowForm.value)
 }
 
 // 流程提交
@@ -115,7 +136,7 @@ const taskSubmitEvent = () => emit("taskSubmitEvent")
 const formValue = computed(() => {
 	const obj: any = {}
 
-	for (var item of props.currentOpenFlowForm) {
+	for (var item of currentOpenFlowForm.value) {
 		obj[item.id] = item.props.value
 	}
 	return obj

src/components/taskDrawer/refuse.vue

@@ -1,65 +1,63 @@
 <script setup lang="ts">
-import {defineExpose} from 'vue';
-import {completeTask} from '/@/api/flow/task';
+import { defineExpose } from "vue"
+import { completeTask } from "/@/api/flow/task"
 
-const dialogVisible = ref(false);
+const dialogVisible = ref(false)
 
-const submitDesc = ref('');
+const submitDesc = ref("")
 
-const currentData = ref();
-const currentProcessInstanceId = ref('')
-const currentOpenFlowForm = ref();
+const currentData = ref()
+const currentOpenFlowForm = ref()
 
 const handle = (row, formData) => {
-  submitDesc.value = '';
-  currentProcessInstanceId.value = row.processInstanceId;
-	currentData.value = row;
-	currentOpenFlowForm.value = formData;
+	submitDesc.value = ""
+	currentData.value = row
+	currentOpenFlowForm.value = formData
 
-	dialogVisible.value = true;
-};
+	dialogVisible.value = true
+}
 
-defineExpose({ handle });
-const emit = defineEmits(['taskSubmitEvent']);
+defineExpose({ handle })
+const emit = defineEmits(["taskSubmitEvent"])
 
 const submit = () => {
-	let value = currentOpenFlowForm.value;
+	let value = currentOpenFlowForm.value
 
-	var formData = {};
+	var formData = {}
 	for (var item of value) {
-		formData[item.id] = item.props.value;
+		formData[item.id] = item.props.value
 
-		if (item.type === 'Layout') {
-			let subList = item.props.value;
+		if (item.type === "Layout") {
+			let subList = item.props.value
 
-			var d = [];
+			var d = []
 			for (var array of subList) {
-				var v = {};
+				var v = {}
 
 				for (var subItem of array) {
-          v[subItem.id] = subItem.props.value;
+					v[subItem.id] = subItem.props.value
 				}
-				d.push(v);
+				d.push(v)
 			}
-			formData[item.id] = d;
+			formData[item.id] = d
 		}
 	}
 
-	formData[currentData.value.nodeId + '_approve_condition'] = false;
+	formData[currentData.value.nodeId + "_approve_condition"] = false
 
-  const param = {
-    paramMap: formData,
-    taskId: currentData.value.taskId,
-    taskLocalParamMap: {
-      approveDesc: '拒绝原因：' + submitDesc.value,
-    },
-  };
+	const param = {
+		paramMap: formData,
+		taskId: currentData.value.taskId,
+		taskLocalParamMap: {
+			approveDesc: "拒绝原因：" + submitDesc.value,
+		},
+	}
 
-  completeTask(param).then((res) => {
-		dialogVisible.value = false;
-    emit('taskSubmitEvent');
-	});
-};
+	completeTask(param).then((res) => {
+		dialogVisible.value = false
+		emit("taskSubmitEvent")
+	})
+}
 </script>
 
 <template>

src/views/flow/task/pending.vue

@@ -62,15 +62,15 @@
 			<!-- 右侧抽屉 -->
 			<taskDrawer
 				v-model="taskDrawerVisible"
+				:process-id="currentData?.taskId"
 				:current-data="currentData"
-				:current-open-flow-form="currentOpenFlowForm"
 				@task-submit-event="taskSubmitEvent"
 			/>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { queryMineTask, queryTask } from "/@/api/flow/task"
+import { queryMineTask } from "/@/api/flow/task"
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import taskDrawer from "/@/components/taskDrawer/index.vue"
 
@@ -79,7 +79,6 @@ const showSearch = ref(true)
 const loading = ref(false)
 const queryRef = ref()
 const currentData = ref()
-const currentOpenFlowForm = ref()
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: queryMineTask,
@@ -97,10 +96,7 @@ const { tableStyle, getDataList, currentChangeHandle, sizeChangeHandle } = useTa
  */
 const deal = (row: any) => {
 	currentData.value = row
-	queryTask(row.taskId, false).then((res) => {
-		currentOpenFlowForm.value = res.data.formItems
-		taskDrawerVisible.value = true
-	})
+	taskDrawerVisible.value = true
 }
 
 // 清空搜索条件
@@ -118,13 +114,4 @@ const taskSubmitEvent = () => {
 onMounted(() => {
 	getDataList()
 })
-
-const formValue = computed(() => {
-	const obj: any = {}
-
-	for (var item of currentOpenFlowForm.value) {
-		obj[item.id] = item.props.value
-	}
-	return obj
-})
 </script>

src/views/wallet/wallet-recharge-apply/index.vue

@@ -133,8 +133,8 @@
 		<!-- 右侧抽屉 -->
 		<taskDrawer
 			v-model="taskDrawerVisible"
+			:process-id="currentData?.processId"
 			:current-data="currentData"
-			:current-open-flow-form="currentOpenFlowForm"
 			@task-submit-event="taskSubmitEvent"
 		/>
 	</div>
@@ -146,7 +146,6 @@ import * as walletRechargeApplyApi from "/@/api/wallet/wallet-recharge-apply"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
 import { ElLoading } from "element-plus"
-import { queryTask } from "/@/api/flow/task"
 import taskDrawer from "/@/components/taskDrawer/index.vue"
 
 const { push } = useRouter()
@@ -166,7 +165,6 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 const taskDrawerVisible = ref<boolean>()
 const currentData = ref()
-const currentOpenFlowForm = ref()
 
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
@@ -244,10 +242,7 @@ const handleDelete = async (ids: string[]) => {
  */
 const deal = (row: any) => {
 	currentData.value = row
-	queryTask(row.processId, false).then((res) => {
-		currentOpenFlowForm.value = res.data.formItems
-		taskDrawerVisible.value = true
-	})
+	taskDrawerVisible.value = true
 }
 
 // 任务提交事件