项目审核 重复提交

src/directives.js

@@ -0,0 +1,35 @@
+import Vue from 'vue';
+
+// 定义全局自定义指令
+Vue.directive('submit-once', {
+  inserted(el, binding) {
+    const [fn, ...args] = binding.value;
+
+    console.log(fn, args);
+
+    if (typeof fn !== 'function') {
+      console.error('v-submit-once 指令需要传入一个函数');
+      return;
+    }
+
+    el.addEventListener('click', async () => {
+      console.log(el);
+      if (el.disabled) return;
+      // 禁用按钮并显示加载状态
+      el.disabled = true;
+      const originalText = el.innerHTML;
+      el.innerHTML = '<i class="el-icon-loading"></i> 处理中...';
+      try {
+        // 调用传入的提交方法
+        await fn(...args);
+      } catch (error) {
+        console.error('提交出错:', error);
+      } finally {
+        console.log('fn调用完了');
+        // 恢复按钮状态
+        el.disabled = false;
+        el.innerHTML = originalText;
+      }
+    });
+  }
+});

src/main.js

@@ -36,6 +36,8 @@ import FormMaking from '../lib/vue-form-making/src/index';
 import '@/assets/font_icon/iconfont.css';
 import fileMain from '@/components/addDoc/index.vue';
 
+import './directives';
+
 Vue.use(elTableInfiniteScroll);
 
 Vue.component('HeaderTitle', HeaderTitle);

src/views/bpm/handleTask/components/project-manage/plan-manage/submit.vue

@@ -3,7 +3,6 @@
     <el-form label-width="100px" ref="formRef" :model="form">
       <el-form-item
         label="审批建议"
-  
         style="margin-bottom: 20px"
         :rules="{
           required: true,
@@ -20,6 +19,7 @@
     </el-form>
     <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
       <el-button
+        ref="passBtn"
         icon="el-icon-edit-outline"
         type="success"
         size="mini"
@@ -36,7 +36,10 @@
         >驳回
       </el-button>
 
-      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
+      <el-dropdown
+        @command="(command) => handleCommand(command)"
+        style="margin-left: 30px"
+      >
         <span class="el-dropdown-link">
           更多<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
@@ -49,9 +52,15 @@
 </template>
 
 <script>
-
-import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
-  import {projectsPlanUpdateAPI,cancel} from "@/api/bpm/components/project-manage/plan";
+  import {
+    approveTaskWithVariables,
+    cancelTask,
+    rejectTask
+  } from '@/api/bpm/task';
+  import {
+    projectsPlanUpdateAPI,
+    cancel
+  } from '@/api/bpm/components/project-manage/plan';
 
   // 流程实例的详情页，可用于审批
   export default {
@@ -95,6 +104,10 @@ import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
       },
 
       async handleAudit(status) {
+        if (!this.form.reason && status == 1) {
+          this.$message.warning(`请填写审批意见！`);
+          return;
+        }
         // //发起人
         // if (this.taskDefinitionKey === 'starter') {
         //   let arr = await this.getTableValue();
@@ -106,13 +119,19 @@ import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
         //     return;
         //   }
         // }
-      await  this._approveTaskWithVariables(status);
+        await this._approveTaskWithVariables(status);
       },
       async _approveTaskWithVariables(status) {
+        const el = this.$refs.passBtn.$el;
+        if (el.disabled) return;
+        el.disabled = true;
+        const originalText = el.innerHTML;
+        el.innerHTML = '<i class="el-icon-loading"></i> 处理中...';
+        console.log('api');
         let variables = {
           pass: !!status
         };
-        let API = !!status ? approveTaskWithVariables : rejectTask
+        let API = !!status ? approveTaskWithVariables : rejectTask;
         API({
           id: this.taskId,
           reason: this.form.reason,
@@ -124,6 +143,8 @@ import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
               title: status === 0 ? '驳回' : ''
             });
           }
+          el.innerHTML = originalText;
+          el.disabled = false;
         });
       },
 
@@ -138,25 +159,28 @@ import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
       //更多
       handleCommand(command) {
         if (command === 'cancel') {
-          this.$confirm("是否确认作废？", {
+          this.$confirm('是否确认作废？', {
             type: 'warning',
             cancelButtonText: '取消',
             confirmButtonText: '确定'
-          }).then(() => {
-            cancelTask({
-              taskId: this.taskId,
-              id: this.id,
-              reason: this.form.reason,
-              businessId: this.businessId,
-            }).then(() => {
-              this.$emit('handleClose');
-            }).catch(() => {
-              this.$message.error("流程作废失败");
-            });
-          }).catch(() => {});
+          })
+            .then(() => {
+              cancelTask({
+                taskId: this.taskId,
+                id: this.id,
+                reason: this.form.reason,
+                businessId: this.businessId
+              })
+                .then(() => {
+                  this.$emit('handleClose');
+                })
+                .catch(() => {
+                  this.$message.error('流程作废失败');
+                });
+            })
+            .catch(() => {});
         }
-      },
-
+      }
     }
   };
 </script>

src/views/bpm/handleTask/components/project-manage/project-initiation/submit.vue

@@ -3,7 +3,6 @@
     <el-form label-width="100px" ref="formRef" :model="form">
       <el-form-item
         label="审批建议"
-
         style="margin-bottom: 20px"
         :rules="{
           required: true,
@@ -20,23 +19,27 @@
     </el-form>
     <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
       <el-button
+        ref="passBtn"
         icon="el-icon-edit-outline"
         type="success"
         size="mini"
-        @click="handleAudit(1)"
-      >通过
+        @click.native="handleAudit(1)"
+        >通过
       </el-button>
 
       <el-button
         icon="el-icon-circle-close"
         type="danger"
         size="mini"
-        @click="handleAudit(0)"
+        @click="handleAudit(0, $event)"
         v-if="!['starter'].includes(taskDefinitionKey)"
-      >驳回
+        >驳回
       </el-button>
 
-      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
+      <el-dropdown
+        @command="(command) => handleCommand(command)"
+        style="margin-left: 30px"
+      >
         <span class="el-dropdown-link">
           更多<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
@@ -49,120 +52,139 @@
 </template>
 
 <script>
-import {approveTaskWithVariables, cancelTask, rejectTask} from '@/api/bpm/task';
-import {projectsUpdateAPI, cancel} from "@/api/bpm/components/project-manage";
+  import {
+    approveTaskWithVariables,
+    cancelTask,
+    rejectTask
+  } from '@/api/bpm/task';
+  import {
+    projectsUpdateAPI,
+    cancel
+  } from '@/api/bpm/components/project-manage';
 
-// 流程实例的详情页，可用于审批
-export default {
-  name: '',
-  components: {
-    //   Parser
-  },
-  props: {
-    businessId: {
-      default: ''
-    },
-    taskId: {
-      default: ''
+  // 流程实例的详情页，可用于审批
+  export default {
+    name: '',
+    components: {
+      //   Parser
     },
-    id: {
-      default: ''
-    },
-    taskDefinitionKey: {
-      default: ''
-    }
-  },
-  data() {
-    return {
-      form: {
-        reason: ''
+    props: {
+      businessId: {
+        default: ''
+      },
+      taskId: {
+        default: ''
+      },
+      id: {
+        default: ''
+      },
+      taskDefinitionKey: {
+        default: ''
       }
-    };
-  },
-  created() {
-  },
-  methods: {
-    /** 处理转办审批人 */
-    handleUpdateAssignee() {
-      this.$emit('handleUpdateAssignee');
     },
-    /** 退回 */
-    handleBackList() {
-      this.$emit('handleBackList');
+    data() {
+      return {
+        form: {
+          reason: ''
+        }
+      };
     },
+    created() {},
+    methods: {
+      /** 处理转办审批人 */
+      handleUpdateAssignee() {
+        this.$emit('handleUpdateAssignee');
+      },
+      /** 退回 */
+      handleBackList() {
+        this.$emit('handleBackList');
+      },
 
-    async handleAudit(status) {
-      if (!this.form.reason && status == 1) {
-        this.$message.warning(`请填写审批意见！`);
-        return;
-      }
-      //发起人
-      console.log(this.taskDefinitionKey);
-      if (this.taskDefinitionKey === 'starter') {
-        let arr = await this.getTableValue();
-        console.log(arr, '======11');
-        if (!arr) {
-          return;
-        }
-        let data = await projectsUpdateAPI(arr);
-        if (data.code != '0') {
+      async handleAudit(status) {
+        if (!this.form.reason && status == 1) {
+          this.$message.warning(`请填写审批意见！`);
           return;
         }
-      }
-      await this._approveTaskWithVariables(status);
-    },
-    async _approveTaskWithVariables(status) {
-      let variables = {
-        pass: !!status
-      };
-      let API = !!status ? approveTaskWithVariables : rejectTask
-      API({
-        id: this.taskId,
-        reason: this.form.reason,
-        variables
-      }).then((res) => {
-        if (res.data.code != '-1') {
-          this.$emit('handleAudit', {
-            status,
-            title: status === 0 ? '驳回' : ''
-          });
+        console.log(this.taskDefinitionKey);
+
+        if (this.taskDefinitionKey === 'starter') {
+          let arr = await this.getTableValue();
+          console.log(arr, '======11');
+          if (!arr) {
+            return;
+          }
+          let data = await projectsUpdateAPI(arr);
+          if (data.code != '0') {
+            return;
+          }
         }
-      });
-    },
+        await this._approveTaskWithVariables(status);
+      },
+      async _approveTaskWithVariables(status) {
+        const el = this.$refs.passBtn.$el;
+        if (el.disabled) return;
+        el.disabled = true;
+        const originalText = el.innerHTML;
+        el.innerHTML = '<i class="el-icon-loading"></i> 处理中...';
+
+        // console.log(originalText);
+        
+        let variables = {
+          pass: !!status
+        };
+        let API = !!status ? approveTaskWithVariables : rejectTask;
+        API({
+          id: this.taskId,
+          reason: this.form.reason,
+          variables
+        }).then((res) => {
+          if (res.data.code != '-1') {
+            this.$emit('handleAudit', {
+              status,
+              title: status === 0 ? '驳回' : ''
+            });
+          }
 
-    getTableValue() {
-      return new Promise((resolve, reject) => {
-        this.$emit('getTableValue', async (data) => {
-          resolve(await data);
+          el.innerHTML = originalText;
+          el.disabled = false;
         });
-      });
-    },
+      },
 
-    //更多
-    handleCommand(command) {
-      if (command === 'cancel') {
-        this.$confirm("是否确认作废？", {
-          type: 'warning',
-          cancelButtonText: '取消',
-          confirmButtonText: '确定'
-        }).then(() => {
-          cancelTask({
-            taskId: this.taskId,
-            id: this.id,
-            reason: this.form.reason,
-            businessId: this.businessId,
-          }).then(() => {
-            this.$emit('handleClose');
-          }).catch(() => {
-            this.$message.error("流程作废失败");
+      getTableValue() {
+        return new Promise((resolve, reject) => {
+          this.$emit('getTableValue', async (data) => {
+            resolve(await data);
           });
-        }).catch(() => {
         });
-      }
-    },
+      },
 
-  }
-};
+      //更多
+      handleCommand(command) {
+        if (command === 'cancel') {
+          this.$confirm('是否确认作废？', {
+            type: 'warning',
+            cancelButtonText: '取消',
+            confirmButtonText: '确定'
+          })
+            .then(() => {
+              cancelTask({
+                taskId: this.taskId,
+                id: this.id,
+                reason: this.form.reason,
+                businessId: this.businessId
+              })
+                .then(() => {
+                  this.$emit('handleClose');
+                })
+                .catch(() => {
+                  this.$message.error('流程作废失败');
+                });
+            })
+            .catch(() => {});
+        }
+      }
+    }
+  };
 </script>
 
 <style lang="scss"></style>