人脸审批管理

src/components/processDrawer/agree.vue

@@ -1,14 +1,30 @@
+<template>
+	<el-dialog v-model="dialogVisible" title="提交审核" :width="400">
+		<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见..." show-word-limit />
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
 import { ref } from "vue"
 import { completeTask } from "/@/api/flow/task"
 import type { FlowFormItem, TaskData, TaskSubmitParam } from "./types"
 import { useMessage } from "/@/hooks/message"
+import { ElLoading } from "element-plus"
+
+const emit = defineEmits<{
+	(e: "taskSubmitEvent"): void
+}>()
 
 const dialogVisible = ref(false)
 const submitDesc = ref("")
 const currentData = ref<TaskData>()
 const currentOpenFlowForm = ref<FlowFormItem[]>()
-const loading = ref(false)
+const loading = ref()
 
 const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
@@ -18,9 +34,15 @@ const handle = (row: TaskData, formData: FlowFormItem[]) => {
 }
 
 defineExpose({ handle })
-const emit = defineEmits<{
-	(e: "taskSubmitEvent"): void
-}>()
+
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
 
 const submit = async () => {
 	if (!currentData.value || !currentOpenFlowForm.value) return
@@ -56,8 +78,8 @@ const submit = async () => {
 	}
 
 	try {
-		loading.value = true
-		const res = await completeTask(param).finally(() => (loading.value = false))
+		loadingStart()
+		const res = await completeTask(param).finally(() => loading.value.close())
 		if (res.code === 0) {
 			dialogVisible.value = false
 			emit("taskSubmitEvent")
@@ -66,31 +88,9 @@ const submit = async () => {
 		}
 		useMessage().error("通过失败")
 	} catch (error) {
-		loading.value = false
 		useMessage().error("错误")
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" title="提交审核" :width="400" class="rounded-lg shadow-xl">
-			<div class="p-4 space-y-4" v-loading="loading">
-				<el-input
-					v-model="submitDesc"
-					type="textarea"
-					maxlength="100"
-					:rows="5"
-					placeholder="请输入审核意见..."
-					show-word-limit
-					class="w-full transition-all duration-300 focus:ring-2 focus:ring-primary"
-				/>
-
-				<div class="flex justify-end pt-4 space-x-3">
-					<el-button @click="dialogVisible = false" class="hover:bg-gray-100 dark:hover:bg-gray-700" :disabled="loading"> 取消 </el-button>
-					<el-button type="primary" @click="submit" class="bg-primary hover:bg-primary-focus" :disabled="loading"> 确定 </el-button>
-				</div>
-			</div>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/index.vue

@@ -1,18 +1,13 @@
 <template>
-	<!--审批抽屉-->
-	<el-drawer v-model="taskDrawerVisible" direction="rtl" size="400px">
+	<!-- 流程审批抽屉 -->
+	<el-drawer v-model="processDrawerVisible" direction="rtl" size="400px">
 		<template #header>
 			<h3>{{ curAssignTask?.processName }}</h3>
 		</template>
 		<template #default>
 			<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 class="box-card" v-if="curAssignTask.taskId">
+					<form-render ref="formRenderRef" :form-list="currentOpenFlowForm" />
 				</el-card>
 				<flow-node-format
 					:disableSelect="true"
@@ -45,76 +40,44 @@
 </template>
 
 <script setup lang="ts">
+import { FlowFormItem } from "./types"
 import FormRender from "/@/views/flow/form/render/FormRender.vue"
 import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue"
 import AgreeHandle from "./agree.vue"
 import RefuseHandle from "./refuse.vue"
 import TransferHandle from "./transfer.vue"
-import other from "/@/utils/other"
-import { FlowFormItem } from "./types"
 import { queryAssignTaskOne, queryTask } from "/@/api/flow/task"
 
-const taskDrawerVisible = defineModel<boolean>()
-
-const props = withDefaults(
-	defineProps<{
-		processId: string
-	}>(),
-	{
-		processId: "",
-	},
-)
-
 const emit = defineEmits(["taskSubmitEvent"])
 
+const processDrawerVisible = ref<boolean>(false)
+const curAssignTask = ref<any>({})
+const currentOpenFlowForm = ref<FlowFormItem[]>([])
+const loading = ref(false)
 const agreeHandler = ref()
 const refuseHandler = ref()
 const transferHandler = ref()
-const currentOpenFlowForm = ref<FlowFormItem[]>([])
-const curAssignTask = ref<any>({})
-const loading = ref(false)
 
-watch(
-	() => taskDrawerVisible.value,
-	async (val) => {
-		if (val) {
-			loading.value = true
-			try {
-				const assignTask = await queryAssignTaskOne({ processInstanceId: props.processId })
-				if (assignTask.code === 0) {
-					curAssignTask.value = assignTask.data
-				}
+// 打开流程审批抽屉
+const openProcessDrawer = async (row: any) => {
+	processDrawerVisible.value = true
 
-				const res = await queryTask(curAssignTask.value.taskId, false).finally(() => (loading.value = false))
-				if (res.code === 0) {
-					currentOpenFlowForm.value = res.data.formItems
-				}
-			} catch (error) {
-				loading.value = false
-				currentOpenFlowForm.value = []
-				curAssignTask.value = {}
-			}
+	loading.value = true
+	try {
+		const assignTask = await queryAssignTaskOne({ processInstanceId: row.processId })
+		if (assignTask.code === 0) {
+			curAssignTask.value = assignTask.data
 		}
-	},
-)
 
-const addLayoutOneItem = (id: number | string) => {
-	for (const item of currentOpenFlowForm.value) {
-		if (item.id !== id) {
-			continue
+		const res = await queryTask(curAssignTask.value.taskId, false).finally(() => (loading.value = false))
+		if (res.code === 0) {
+			currentOpenFlowForm.value = res.data.formItems
 		}
-		let value = item.props.value
-		let oriForm = item.props.oriForm
-		value.push(other.deepClone(oriForm))
-		item.props.value = value
-	}
-}
-const deleteLayoutOneItem = (id: any, index: any) => {
-	for (const item of currentOpenFlowForm.value) {
-		if (item.id !== id) {
-			continue
-		}
-		item.props.value.splice(index, 1)
+	} catch (error) {
+		curAssignTask.value = {}
+		currentOpenFlowForm.value = []
+	} finally {
+		loading.value = false
 	}
 }
 
@@ -137,9 +100,13 @@ const taskSubmitEvent = () => emit("taskSubmitEvent")
 const formValue = computed(() => {
 	const obj: any = {}
 
-	for (var item of currentOpenFlowForm.value) {
+	for (let item of currentOpenFlowForm.value) {
 		obj[item.id] = item.props.value
 	}
 	return obj
 })
+
+defineExpose({
+	openProcessDrawer,
+})
 </script>

src/components/processDrawer/refuse.vue

@@ -1,29 +1,50 @@
+<template>
+	<el-dialog v-model="dialogVisible" title="拒绝审核" width="400px">
+		<el-input v-loading="loading" v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
 import { defineExpose } from "vue"
 import { completeTask } from "/@/api/flow/task"
 import { useMessage } from "/@/hooks/message"
+import type { FlowFormItem, TaskData, TaskSubmitParam } from "./types"
+import { ElLoading } from "element-plus"
+
+const emit = defineEmits(["taskSubmitEvent"])
 
 const dialogVisible = ref(false)
 const submitDesc = ref("")
 const currentData = ref()
 const currentOpenFlowForm = ref()
-const loading = ref(false)
+const loading = ref()
 
-const handle = (row, formData) => {
+const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
 	currentData.value = row
 	currentOpenFlowForm.value = formData
-
 	dialogVisible.value = true
 }
 
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
+
 defineExpose({ handle })
-const emit = defineEmits(["taskSubmitEvent"])
 
 const submit = async () => {
 	let value = currentOpenFlowForm.value
 
-	var formData = {}
+	let formData: any = {}
 	for (var item of value) {
 		formData[item.id] = item.props.value
 
@@ -53,8 +74,8 @@ const submit = async () => {
 		},
 	}
 	try {
-		loading.value = true
-		const res = await completeTask(param).finally(() => (loading.value = false))
+		loadingStart()
+		const res = await completeTask(param).finally(() => loading.value.close())
 		if (res.code === 0) {
 			useMessage().success("拒绝成功")
 			dialogVisible.value = false
@@ -64,21 +85,8 @@ const submit = async () => {
 		useMessage().error("拒绝失败")
 	} catch (error) {
 		useMessage().error("错误")
-		loading.value = false
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" title="拒绝审核" width="400px">
-			<el-input v-loading="loading" v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
-					<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/transfer.vue

@@ -1,8 +1,29 @@
+<template>
+	<el-dialog v-model="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<label class="block pb-2">
+			<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1">选择转办人员</span>
+		</label>
+		<select-show v-model:orgList="userList" type="user" :multiple="true" />
+
+		<label class="block pb-2">
+			<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1">审核意见</span>
+		</label>
+		<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见（2-100字）" show-word-limit />
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="submit">确定</el-button>
+		</template>
+	</el-dialog>
+</template>
+
 <script setup lang="ts">
-import { defineExpose, ref } from "vue"
+import { ref } from "vue"
 import { transferTask } from "/@/api/flow/task"
 import selectShow from "/@/components/OrgSelector/index.vue"
-import { ElMessage } from "element-plus"
+import { ElLoading, ElMessage } from "element-plus"
+
+const emit = defineEmits(["taskSubmitEvent"])
 
 interface FlowFormItem {
 	id: string
@@ -23,7 +44,16 @@ const submitDesc = ref("")
 const userList = ref<Array<{ id: string }>>([])
 const currentData = ref<TaskData>()
 const currentOpenFlowForm = ref<FlowFormItem[]>()
-const loading = ref(false)
+const loading = ref()
+
+// 全屏loading
+const loadingStart = () => {
+	loading.value = ElLoading.service({
+		lock: true,
+		text: "提交中...",
+		background: "rgba(0, 0, 0, 0.7)",
+	})
+}
 
 const handle = (row: TaskData, formData: FlowFormItem[]) => {
 	submitDesc.value = ""
@@ -33,7 +63,6 @@ const handle = (row: TaskData, formData: FlowFormItem[]) => {
 }
 
 defineExpose({ handle })
-const emit = defineEmits(["taskSubmitEvent"])
 
 const validateForm = (): boolean => {
 	if (userList.value.length === 0) {
@@ -91,8 +120,8 @@ const submit = async () => {
 		}
 
 		try {
-			loading.value = true
-			const res = await transferTask(param).finally(() => (loading.value = false))
+			loadingStart()
+			const res = await transferTask(param).finally(() => loading.value.close())
 			if (res.code === 0) {
 				ElMessage.success("转办成功")
 				dialogVisible.value = false
@@ -101,47 +130,15 @@ const submit = async () => {
 			}
 			ElMessage.error("转办失败")
 		} catch (error) {
-			loading.value = false
+			loading.value.close()
 			ElMessage.error("错误")
+		} finally {
+			loading.value.close()
 		}
 	} catch (error) {
 		ElMessage.error("转办失败，请重试")
+	} finally {
+		loading.value.close()
 	}
 }
 </script>
-
-<template>
-	<div>
-		<el-dialog v-model="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" class="transfer-dialog">
-			<div v-loading="loading" class="space-y-4">
-				<div class="w-full">
-					<label class="block pb-2">
-						<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 选择转办人员 </span>
-					</label>
-					<select-show v-model:orgList="userList" type="user" :multiple="true"></select-show>
-				</div>
-
-				<div class="w-full">
-					<label class="block pb-2">
-						<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 审核意见 </span>
-					</label>
-					<el-input
-						v-model="submitDesc"
-						type="textarea"
-						maxlength="100"
-						:rows="5"
-						placeholder="请输入审核意见（2-100字）"
-						show-word-limit
-					/>
-				</div>
-			</div>
-
-			<template #footer>
-				<span class="flex justify-end gap-2">
-					<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
-					<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>

src/components/processDrawer/types.ts

@@ -1,4 +1,3 @@
-// First let's create types for our form data
 export interface FlowFormItem {
 	id: string
 	type: string