feat: 修复Dialog 按钮样式

src/views/approve/components/addSignDialog.vue

@@ -59,6 +59,7 @@ import { QuestionFilled } from '@element-plus/icons-vue'
 import user from '@/api/system/user'
 import { processAppendNodeApi, processTaskJumpApi } from '@/api/flow/processTask'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 
 const props = defineProps({
 	modelValue: {
@@ -103,7 +104,7 @@ const getUserList = async () => {
 }
 
 // 加签
-const submitForm = () => {
+const submitForm = debounce(() => {
 	btnDisabled.value = true
 	const formData = { ...form, taskId: props.taskId }
 	formRef.value
@@ -131,7 +132,7 @@ const submitForm = () => {
 		.catch(err => {
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -161,22 +162,4 @@ 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/consentOrRefuseDialog.vue

@@ -35,6 +35,7 @@ import { computed, reactive, ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
 import { processConsentTaskApi, processRejectionTaskApi } from '@/api/flow/processTask'
 import { ElMessage } from 'element-plus'
+import {debounce} from "lodash-es";
 
 const props = defineProps({
 	// 弹窗是否显示
@@ -68,7 +69,7 @@ const uploadLoading = ref(false)
 
 const $myEmit = defineEmits(['update:modelValue', 'successCb'])
 
-const submitForm = () => {
+const submitForm = debounce(() => {
 	const formData = { taskId: props.taskId, ...props.formData, ...form }
 	formRef.value
 		.validate()
@@ -100,7 +101,7 @@ const submitForm = () => {
 		.catch(err => {
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -130,21 +131,4 @@ 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

@@ -55,6 +55,7 @@ import { QuestionFilled } from '@element-plus/icons-vue'
 import user from '@/api/system/user'
 import { processTransferApi } from '@/api/flow/processTask'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 
 const props = defineProps({
 	modelValue: {
@@ -96,7 +97,7 @@ const getUserList = async () => {
 	})
 }
 
-const submitForm = () => {
+const submitForm = debounce(() => {
 	btnDisabled.value = true
 	const formData = { ...form, taskId: props.taskId }
 	formRef.value
@@ -125,7 +126,7 @@ const submitForm = () => {
 			console.error('挂起订单表单拦截', err)
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -155,22 +156,4 @@ 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

@@ -36,6 +36,7 @@
 import { computed, reactive, ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 
 const props = defineProps({
 	modelValue: {
@@ -80,7 +81,7 @@ const options = [
 
 const $myEmit = defineEmits(['update:modelValue', 'successCb'])
 
-const submitForm = () => {
+const submitForm = debounce(() => {
 	btnDisabled.value = true
 	const formData = { ...form }
 	formRef.value
@@ -96,7 +97,7 @@ const submitForm = () => {
 			console.error('挂起订单表单拦截', err)
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -122,22 +123,4 @@ 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

@@ -32,6 +32,7 @@ import { computed, reactive, ref } from 'vue'
 import { processReviewTaskApi, processRevokeTaskApi } from '@/api/flow/processTask'
 import FileUpload from '@/components/FileUpload.vue'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 
 const props = defineProps({
 	modelValue: {
@@ -63,7 +64,7 @@ const uploadLoading = ref(false)
 const $myEmit = defineEmits(['update:modelValue', 'successCb'])
 
 // 提交
-const submitForm = () => {
+const submitForm = debounce(() => {
 	btnDisabled.value = true
 	const formData = { ...form, taskId: props.taskId, instanceId: props.instanceId }
 	formRef.value
@@ -92,7 +93,7 @@ const submitForm = () => {
 		.catch(err => {
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -123,21 +124,4 @@ const clearValidate = () => {}
 	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

@@ -37,6 +37,7 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
 import { processPreviousNodeNameApi, processTaskJumpApi } from '@/api/flow/processTask'
 import { ElMessage } from 'element-plus'
+import { debounce } from 'lodash-es'
 
 const props = defineProps({
 	modelValue: {
@@ -66,7 +67,7 @@ const getProcessPreviousNodeNameApi = async () => {
 	rollbackOptions.value = res || []
 }
 
-const submitForm = () => {
+const submitForm = debounce(() => {
 	btnDisabled.value = true
 	const formData = { ...form, taskId: props.taskId }
 	formRef.value
@@ -89,7 +90,7 @@ const submitForm = () => {
 		.catch(err => {
 			btnDisabled.value = false
 		})
-}
+})
 
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
@@ -119,22 +120,4 @@ 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>