fix: 点击多次重复提交问题处理

src/views/approve/components/addSignDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 加签审批弹窗 -->
-	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="审批加签" width="700" destroy-on-close>
+	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="审批加签" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="加签方式" prop="type">
 				<el-radio-group v-model="form.type">
@@ -41,8 +41,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -53,8 +53,8 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
 import { QuestionFilled } from '@element-plus/icons-vue'
 import user from '@/api/system/user'
-import { processAppendNodeApi } from '@/api/flow/processTask'
-import {ElMessage} from "element-plus";
+import { processAppendNodeApi, processTaskJumpApi } from '@/api/flow/processTask'
+import { ElMessage } from 'element-plus'
 
 const props = defineProps({
 	modelValue: {
@@ -110,7 +110,14 @@ const submitForm = () => {
 						formData.username = item.label
 					}
 				})
-				await processAppendNodeApi(formData)
+				const data = await processAppendNodeApi(formData)
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
+				}
 				$myEmit('successCb')
 				closeDialog()
 				btnDisabled.value = false
@@ -141,7 +148,7 @@ const reviewVisibleDialog = computed({
 const clearValidate = () => {}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -149,4 +156,22 @@ const clearValidate = () => {}
 .example-img-box .el-form-item__content {
 	display: block;
 }
+
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>

src/views/approve/components/approvedContent.vue

@@ -27,7 +27,7 @@
 					<div class="header-box">
 						<div class="summary-info">
 							<div class="title">{{ currentTaskRow.processName }}</div>
-							<FlowStatusTag :status="0" />
+							<FlowStatusTag :status="currentTaskRow.instanceState" />
 						</div>
 						<div class="initiator-info">
 							<FlowNodeAvatar :name="currentTaskRow.createBy" />
@@ -126,7 +126,7 @@
 										<el-icon><Plus /></el-icon>
 										加签
 									</el-dropdown-item>
-									<el-dropdown-item @click.native="openComment('loseSignVisible')">
+									<el-dropdown-item @click.native="openComment('loseSignVisible')" v-if="false">
 										<el-icon><Minus /></el-icon>
 										减签
 									</el-dropdown-item>

src/views/approve/components/consentOrRefuseDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 同意 拒绝 弹窗  同意/拒绝审批 -->
-	<el-dialog v-model="operaVisibleDialog" class="le-dialog" :title="currentTip + '审批'" width="700" destroy-on-close>
+	<el-dialog v-model="operaVisibleDialog" class="le-dialog" :title="currentTip + '审批'" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="审批意见" prop="content" :rules="[{ required: true, message: '审批意见不能为空' }]">
 				<el-input v-model="form.content" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
@@ -20,8 +20,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -66,20 +66,27 @@ const uploadLoading = ref(false)
 const $myEmit = defineEmits(['update:modelValue', 'successCb'])
 
 const submitForm = () => {
-	btnDisabled.value = true
 	const formData = { taskId: props.taskId, ...props.formData, ...form }
 	formRef.value
 		.validate()
 		.then(async valid => {
 			if (valid) {
+				btnDisabled.value = true
 				const isAgree = props.currentType === 'agree'
+				let data = null
 				if (isAgree) {
 					// 同意
-					await processConsentTaskApi(formData)
-					// ElMessage.success('执行成功')
+					data = await processConsentTaskApi(formData)
 				} else {
 					// 拒绝
-					await processRejectionTaskApi(formData)
+					data = await processRejectionTaskApi(formData)
+				}
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
 				}
 				$myEmit('successCb')
 				closeDialog()
@@ -111,7 +118,7 @@ const currentTip = computed(() => {
 const clearValidate = () => {}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -119,4 +126,21 @@ const clearValidate = () => {}
 .example-img-box .el-form-item__content {
 	display: block;
 }
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>

src/views/approve/components/deliverToReviewDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 转交审批弹窗 -->
-	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="转交审批" width="700" destroy-on-close>
+	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="转交审批" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="转交方式" prop="type">
 				<el-radio-group v-model="form.type">
@@ -41,8 +41,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -108,8 +108,14 @@ const submitForm = () => {
 						formData.username = item.label
 					}
 				})
-				console.log(formData, '===')
-				await processTransferApi(formData)
+				const data = await processTransferApi(formData)
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
+				}
 				$myEmit('successCb')
 				closeDialog()
 				btnDisabled.value = false
@@ -141,7 +147,7 @@ const reviewVisibleDialog = computed({
 const clearValidate = () => {}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -149,4 +155,22 @@ const clearValidate = () => {}
 .example-img-box .el-form-item__content {
 	display: block;
 }
+
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>

src/views/approve/components/loseSignDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 减签审批弹窗 -->
-	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="审批减签" width="700" destroy-on-close>
+	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="审批减签" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="给谁减签" prop="review" :rules="[{ required: true, message: '请选择减签人员' }]">
 				<el-select v-model="form.deliverTo" placeholder="请选择减签人员">
@@ -25,8 +25,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -114,7 +114,7 @@ const reviewVisibleDialog = computed({
 const clearValidate = () => {}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -122,4 +122,22 @@ const clearValidate = () => {}
 .example-img-box .el-form-item__content {
 	display: block;
 }
+
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>

src/views/approve/components/reviewDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 评论弹窗 -->
-	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" :title="currentTip + '内容'" width="700" destroy-on-close>
+	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" :title="currentTip + '内容'" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item :label="currentTip" prop="content" :rules="[{ required: true, message: '内容不能为空' }]">
 				<el-input v-model="form.content" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
@@ -20,8 +20,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -71,10 +71,18 @@ const submitForm = () => {
 		.then(async valid => {
 			if (valid) {
 				const flag = props.currentType === 'review'
+				let data = null
 				if (flag) {
-					await processReviewTaskApi(formData)
+					data = await processReviewTaskApi(formData)
 				} else {
-					await processRevokeTaskApi(formData)
+					data = await processRevokeTaskApi(formData)
+				}
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
 				}
 				$myEmit('successCb')
 				closeDialog()
@@ -106,7 +114,7 @@ const currentTip = computed(() => {
 const clearValidate = () => {}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -114,4 +122,22 @@ const clearValidate = () => {}
 .example-img-box .el-form-item__content {
 	display: block;
 }
+
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>

src/views/approve/components/rollbackDialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 回退审批弹窗 -->
-	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="回退审批" width="700" destroy-on-close>
+	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="回退审批" width="700" destroy-on-close :close-on-click-modal="false">
 		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="回退到" prop="nodeName" :rules="[{ required: true, message: '请选择回退节点' }]">
 				<el-select v-model="form.nodeName" placeholder="请选择回退节点">
@@ -25,8 +25,8 @@
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
-				<el-button :loading="btnDisabled" @click="closeDialog">取 消</el-button>
-				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
+				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -73,7 +73,14 @@ const submitForm = () => {
 		.validate()
 		.then(async valid => {
 			if (valid) {
-				await processTaskJumpApi(formData)
+				const data = await processTaskJumpApi(formData)
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
+				}
 				$myEmit('successCb')
 				closeDialog()
 				btnDisabled.value = false
@@ -104,7 +111,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .example-img-box {
 	width: 100% !important;
 }
@@ -112,4 +119,22 @@ onMounted(() => {
 .example-img-box .el-form-item__content {
 	display: block;
 }
+
+.dialog-footer {
+	.dialog-btn {
+		animation: throttle 2s step-end forwards;
+	}
+	.dialog-btn:active {
+		animation: none;
+	}
+}
+
+@keyframes throttle {
+	from {
+		pointer-events: none;
+	}
+	to {
+		pointer-events: all;
+	}
+}
 </style>