审批抽屉修改

src/views/flow/task/pending.vue

@@ -52,34 +52,73 @@
 				<el-table-column label="任务时间" prop="taskCreateTime" />
 				<el-table-column fixed="right" label="操作" width="200">
 					<template #default="scope">
-						<el-button type="primary" size="small" link icon="VideoPlay" @click="deal(scope.row)">开始处理</el-button>
+						<el-button type="primary" size="small" link icon="VideoPlay" @click="deal(scope.row)"> 开始处理 </el-button>
 					</template>
 				</el-table-column>
 			</el-table>
 
 			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"></pagination>
 
-			<!-- 右侧抽屉 -->
-			<taskDrawer
-				v-model="taskDrawerVisible"
-				:process-id="currentData?.taskId"
-				:current-data="currentData"
-				@task-submit-event="taskSubmitEvent"
-			/>
+			<!--右侧抽屉-->
+			<el-drawer v-model="rightDrawerVisible" direction="rtl" size="400px">
+				<template #header>
+					<h3>{{ currentData?.processName }}</h3>
+				</template>
+				<template #default>
+					<el-card class="box-card">
+						<form-render
+							@addLayoutOneItem="addLayoutOneItem"
+							@deleteLayoutOneItem="deleteLayoutOneItem"
+							ref="formRenderRef"
+							:form-list="currentOpenFlowForm"
+						></form-render>
+					</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"
+					/>
+				</template>
+				<template #footer>
+					<div style="flex: auto">
+						<el-button size="large" type="danger" icon="Close" @click="refuseTask">拒绝</el-button>
+						<el-button size="large" type="primary" icon="Check" @click="submitTask">提交</el-button>
+						<el-button size="large" type="info" icon="Share" @click="transferTask">转办</el-button>
+					</div>
+				</template>
+			</el-drawer>
+
+			<!--同意提交处理-->
+			<agree-handle @taskSubmitEvent="taskSubmitEvent" ref="agreeHandler"></agree-handle>
+
+			<!--拒绝审核处理-->
+			<refuse-handle @taskSubmitEvent="taskSubmitEvent" ref="refuseHandler"></refuse-handle>
+
+			<!--转办处理-->
+			<transfer-handle @taskSubmitEvent="taskSubmitEvent" ref="transferHandler"></transfer-handle>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
-import { queryMineTask } from "/@/api/flow/task"
+import FormRender from "/@/views/flow/form/render/FormRender.vue"
+import AgreeHandle from "./handler/agree.vue"
+import RefuseHandle from "./handler/refuse.vue"
+import TransferHandle from "./handler/transfer.vue"
+import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue"
+import other from "/@/utils/other"
+import { queryMineTask, queryTask } from "/@/api/flow/task"
 import { BasicTableProps, useTable } from "/@/hooks/table"
-import taskDrawer from "/@/components/taskDrawer/index.vue"
 
-const taskDrawerVisible = ref(false)
+const rightDrawerVisible = ref(false)
 const showSearch = ref(true)
 const loading = ref(false)
 const queryRef = ref()
-const currentData = ref()
 
+const currentData = ref()
 const state: BasicTableProps = reactive<BasicTableProps>({
 	pageList: queryMineTask,
 	queryForm: {
@@ -96,8 +135,35 @@ const { tableStyle, getDataList, currentChangeHandle, sizeChangeHandle } = useTa
  */
 const deal = (row: any) => {
 	currentData.value = row
-	taskDrawerVisible.value = true
+	queryTask(row.taskId, false).then((res) => {
+		currentOpenFlowForm.value = res.data.formItems
+		rightDrawerVisible.value = true
+	})
 }
+const currentOpenFlowForm = ref()
+const addLayoutOneItem = (id: Number) => {
+	for (const item of currentOpenFlowForm.value) {
+		if (item.id !== id) {
+			continue
+		}
+		let value = item.props.value
+		let oriForm = item.props.oriForm
+		value.push(other.deepClone(oriForm))
+		item.props.value = value
+	}
+}
+const deleteLayoutOneItem = (id, index) => {
+	for (const item of currentOpenFlowForm.value) {
+		if (item.id !== id) {
+			continue
+		}
+		item.props.value.splice(index, 1)
+	}
+}
+
+const agreeHandler = ref()
+const refuseHandler = ref()
+const transferHandler = ref()
 
 // 清空搜索条件
 const resetQuery = () => {
@@ -105,13 +171,41 @@ const resetQuery = () => {
 	getDataList()
 }
 
-// 任务提交事件
 const taskSubmitEvent = () => {
-	taskDrawerVisible.value = false
+	rightDrawerVisible.value = false
 	getDataList()
 }
 
+/**
+ * 提交任务
+ */
+const submitTask = () => {
+	agreeHandler.value.handle(currentData.value, currentOpenFlowForm.value)
+}
+/**
+ * 拒绝任务
+ */
+const refuseTask = () => {
+	refuseHandler.value.handle(currentData.value, currentOpenFlowForm.value)
+}
+
+/**
+ * 转办任务
+ */
+const transferTask = () => {
+	transferHandler.value.handle(currentData.value, currentOpenFlowForm.value)
+}
+
 onMounted(() => {
 	getDataList()
 })
+
+const formValue = computed(() => {
+	const obj = {}
+
+	for (var item of currentOpenFlowForm.value) {
+		obj[item.id] = item.props.value
+	}
+	return obj
+})
 </script>