hookehuyr

fix 重复提交表单问题处理

1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-03-29 17:57:51 4 + * @LastEditTime: 2023-04-28 13:13:13
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 :is="item.component" :item="item" @active="onActive" /> 28 :is="item.component" :item="item" @active="onActive" />
29 </van-cell-group> 29 </van-cell-group>
30 <div v-if="formData.length && PCommit.visible" style="margin: 16px"> 30 <div v-if="formData.length && PCommit.visible" style="margin: 16px">
31 - <van-button round block type="primary" native-type="submit"> 31 + <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
32 {{ PCommit.text ? PCommit.text : '提交' }} 32 {{ PCommit.text ? PCommit.text : '提交' }}
33 </van-button> 33 </van-button>
34 </div> 34 </div>
...@@ -502,6 +502,8 @@ const preValidData = (values) => { ...@@ -502,6 +502,8 @@ const preValidData = (values) => {
502 return _.assign(postData.value, rest_data); 502 return _.assign(postData.value, rest_data);
503 } 503 }
504 504
505 +const submitStatus = ref(false);
506 +
505 const onSubmit = async (values) => { 507 const onSubmit = async (values) => {
506 // 表单数据处理 508 // 表单数据处理
507 postData.value = preValidData(values); 509 postData.value = preValidData(values);
...@@ -514,12 +516,17 @@ const onSubmit = async (values) => { ...@@ -514,12 +516,17 @@ const onSubmit = async (values) => {
514 console.warn(postData.value); 516 console.warn(postData.value);
515 } 517 }
516 if (model === 'edit' || model === 'preview') return false; 518 if (model === 'edit' || model === 'preview') return false;
519 + // 提交按钮禁用
520 + submitStatus.value = true;
517 // 通过验证 521 // 通过验证
518 const result = await addFormDataAPI({ 522 const result = await addFormDataAPI({
519 form_code: $route.query.code, 523 form_code: $route.query.code,
520 data: postData.value, 524 data: postData.value,
521 }); 525 });
522 if (result.code) { 526 if (result.code) {
527 + // 提交按钮禁用状态
528 + submitStatus.value = false;
529 + //
523 showSuccessToast("提交成功"); 530 showSuccessToast("提交成功");
524 // 缓存表单返回值 531 // 缓存表单返回值
525 store.changeSuccessInfo(result.data); 532 store.changeSuccessInfo(result.data);
...@@ -532,8 +539,13 @@ const onSubmit = async (values) => { ...@@ -532,8 +539,13 @@ const onSubmit = async (values) => {
532 path: "/success", 539 path: "/success",
533 }); 540 });
534 } 541 }
542 + } else {
543 + // 提交按钮禁用状态
544 + submitStatus.value = false;
535 } 545 }
536 } else { 546 } else {
547 + // 提交按钮禁用状态
548 + submitStatus.value = false;
537 console.warn(validOther().key + "不通过验证"); 549 console.warn(validOther().key + "不通过验证");
538 // // 图片上传控件报错提示 550 // // 图片上传控件报错提示
539 // if (validOther().key === "image_uploader") { 551 // if (validOther().key === "image_uploader") {
......