bug

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -140,273 +140,275 @@
         size="small"
         v-if="active == 0"
         @click="() => (active = 1)"
-      >下一步
+        >下一步
       </el-button>
       <el-button
         type="primary"
         size="small"
         v-if="active == 1"
         @click="() => (active = 0)"
-      >上一步
+        >上一步
       </el-button>
-      <el-button type="primary" size="small" @click="submit">完成</el-button>
+      <el-button type="primary" size="small" v-submit-once="submit"
+        >完成</el-button
+      >
       <el-button size="small" @click="cancel">关闭</el-button>
     </div>
   </ele-modal>
 </template>
 <script>
-import {
-  getModelPage,
-  getProcessDefinitionBpmnXML,
-  getProcessDefinitionInfo,
-  getTaskAssignRuleList,
-  processInstanceCreateAPI,
-  listAllUserBind,
-  listSimpleUserGroups
-} from './api';
-import { treeClassifyCodeEnum } from '@/enum/dict';
-import { listRoles } from '@/api/system/role';
-import { listOrganizations } from '@/api/system/organization';
-import dictMixins from '@/mixins/dictMixins';
-import { getByCode } from '@/api/system/dictionary-data';
-import {getProduceTreeByCode} from "@/api/main";
-
-export default {
-  name: 'processSubmitDialog',
-  mixins: [dictMixins],
-  props: {
-    processSubmitDialogFlag: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      form: {
-        LCFL: '',
-        FQLC: '',
-        processDefinitionId: '',
-        name: '',
-        businessId: '',
-        noticeScope: [],
-        businessKey: '',
-        formCreateUserId: ''
-      },
-      active: 0,
-      bpmnXML: null,
-      LCFLList: [],
-      processList: [],
-      datasource: [],
-      roleOptions: [],
-      deptOptions: [],
-      deptTreeOptions: [],
-      postOptions: [],
-      userOptions: [],
-      userGroupOptions: [],
-      dictList: {},
-      rules: {}
-    };
-  },
-  async created() {
-    let typeObj = await getProduceTreeByCode(
-      treeClassifyCodeEnum['PROCESSTYPE']
-    );
-    this.LCFLList = typeObj[0].children;
-
-    // 获得角色列表
-    this.roleOptions = [];
-    listRoles({
-      current: 1,
-      size: 9999
-    }).then((data) => {
-      this.roleOptions.push(...data.list);
-    });
-    // 获得部门列表
-    this.deptOptions = [];
-    this.deptTreeOptions = [];
-    listOrganizations().then((data) => {
-      this.deptOptions.push(...data);
-      this.deptTreeOptions.push(...this.handleTree(data, 'id'));
-    });
-    // 获得岗位列表 暂无岗位概念
-    this.postOptions = [];
-    /*listSimplePosts().then(response => {
-  this.postOptions.push(...response.data);
-});*/
-    // 获得用户列表
-    this.userOptions = [];
-    listAllUserBind().then((data) => {
-      this.userOptions.push(...data);
-    });
-    // 获得用户组列表
-    this.userGroupOptions = [];
-    listSimpleUserGroups().then((response) => {
-      this.userGroupOptions.push(...response);
-    });
+  import {
+    getModelPage,
+    getProcessDefinitionBpmnXML,
+    getProcessDefinitionInfo,
+    getTaskAssignRuleList,
+    processInstanceCreateAPI,
+    listAllUserBind,
+    listSimpleUserGroups
+  } from './api';
+  import { treeClassifyCodeEnum } from '@/enum/dict';
+  import { listRoles } from '@/api/system/role';
+  import { listOrganizations } from '@/api/system/organization';
+  import dictMixins from '@/mixins/dictMixins';
+  import { getByCode } from '@/api/system/dictionary-data';
+  import { getProduceTreeByCode } from '@/api/main';
 
-    //this.dictEnum['工作流任务分配自定义脚本']
-    await this.getDictList(this.dictEnum['工作流任务分配自定义脚本']);
-    await this.getDictList(this.dictEnum['工种类型']);
-  },
-  methods: {
-    init(row = {}) {
-      this.form = { ...this.form, ...row };
-      // this.form.businessId = row.id;
-      // this.form.businessKey = row.businessKey;
-      // this.form.formCreateUserId = row.createUserId;
-      this.getDefaultInfo(row.businessKey);
-    },
-    async getDefaultInfo(businessKey) {
-      let info = await getProcessDefinitionInfo({code: businessKey});
-      this.form.LCFL = info?.category;
-      this.form.FQLC = info?.modelId;
-      this.form.name = info?.name;
-      this.form.key = info?.key;
-      this.form.processDefinitionId = info?.id;
-      if (this.form.LCFL) await this.getProcessList(this.form.LCFL);
-      if (this.form.FQLC) {
-        await this.getProcessDefinitionBpmnXMLInfo(info.id);
-        await this.getTaskAssignRuleListInfo({
-          modelId: info.modelId,
-          processDefinitionId: info.id
-        });
+  export default {
+    name: 'processSubmitDialog',
+    mixins: [dictMixins],
+    props: {
+      processSubmitDialogFlag: {
+        type: Boolean,
+        default: false
       }
     },
-    async changeLCFL(val) {
-      this.bpmnXML = null;
-      this.form.processDefinitionId = null;
-      this.form.FQLC = null;
-      await this.getProcessList(val);
-    },
-    async getProcessList(val) {
-      let params = {
-        pageNo: 1,
-        pageSize: 999,
-        processTypeId: val
+    data() {
+      return {
+        form: {
+          LCFL: '',
+          FQLC: '',
+          processDefinitionId: '',
+          name: '',
+          businessId: '',
+          noticeScope: [],
+          businessKey: '',
+          formCreateUserId: ''
+        },
+        active: 0,
+        bpmnXML: null,
+        LCFLList: [],
+        processList: [],
+        datasource: [],
+        roleOptions: [],
+        deptOptions: [],
+        deptTreeOptions: [],
+        postOptions: [],
+        userOptions: [],
+        userGroupOptions: [],
+        dictList: {},
+        rules: {}
       };
-      const {list} = await getModelPage(params);
-      this.processList = list.filter((item) => item.processDefinition);
     },
-    async changeFQLC(val) {
-      if (!val) return;
-      let find = this.processList.find((item) => item.id === val) || {};
-      this.form.name = find.name;
-      this.form.key = find.key;
-      this.form.processDefinitionId = find.processDefinition.id;
-      await this.getProcessDefinitionBpmnXMLInfo(find.processDefinition.id);
-      await this.getTaskAssignRuleListInfo({
-        modelId: find.id,
-        processDefinitionId: find.processDefinition.id
+    async created() {
+      let typeObj = await getProduceTreeByCode(
+        treeClassifyCodeEnum['PROCESSTYPE']
+      );
+      this.LCFLList = typeObj[0].children;
+
+      // 获得角色列表
+      this.roleOptions = [];
+      listRoles({
+        current: 1,
+        size: 9999
+      }).then((data) => {
+        this.roleOptions.push(...data.list);
       });
-    },
-    async getProcessDefinitionBpmnXMLInfo(val) {
-      // 加载流程图
-      this.bpmnXML = await getProcessDefinitionBpmnXML(val);
-    },
-    async getTaskAssignRuleListInfo(find) {
-      this.datasource = await getTaskAssignRuleList({
-        modelId: find.modelId,
-        processDefinitionId: find.processDefinitionId
+      // 获得部门列表
+      this.deptOptions = [];
+      this.deptTreeOptions = [];
+      listOrganizations().then((data) => {
+        this.deptOptions.push(...data);
+        this.deptTreeOptions.push(...this.handleTree(data, 'id'));
+      });
+      // 获得岗位列表 暂无岗位概念
+      this.postOptions = [];
+      /*listSimplePosts().then(response => {
+  this.postOptions.push(...response.data);
+});*/
+      // 获得用户列表
+      this.userOptions = [];
+      listAllUserBind().then((data) => {
+        this.userOptions.push(...data);
+      });
+      // 获得用户组列表
+      this.userGroupOptions = [];
+      listSimpleUserGroups().then((response) => {
+        this.userGroupOptions.push(...response);
       });
+
+      //this.dictEnum['工作流任务分配自定义脚本']
+      await this.getDictList(this.dictEnum['工作流任务分配自定义脚本']);
+      await this.getDictList(this.dictEnum['工种类型']);
     },
-    getAssignRuleOptionName(row, option) {
-      if (row.type == 10) {
-        for (const roleOption of this.roleOptions) {
-          if (roleOption.id === option) {
-            return roleOption.name;
-          }
+    methods: {
+      init(row = {}) {
+        this.form = { ...this.form, ...row };
+        // this.form.businessId = row.id;
+        // this.form.businessKey = row.businessKey;
+        // this.form.formCreateUserId = row.createUserId;
+        this.getDefaultInfo(row.businessKey);
+      },
+      async getDefaultInfo(businessKey) {
+        let info = await getProcessDefinitionInfo({ code: businessKey });
+        this.form.LCFL = info?.category;
+        this.form.FQLC = info?.modelId;
+        this.form.name = info?.name;
+        this.form.key = info?.key;
+        this.form.processDefinitionId = info?.id;
+        if (this.form.LCFL) await this.getProcessList(this.form.LCFL);
+        if (this.form.FQLC) {
+          await this.getProcessDefinitionBpmnXMLInfo(info.id);
+          await this.getTaskAssignRuleListInfo({
+            modelId: info.modelId,
+            processDefinitionId: info.id
+          });
         }
-      } else if (row.type === 20 || row.type === 21) {
-        for (const deptOption of this.deptOptions) {
-          if (deptOption.id === option) {
-            return deptOption.name;
+      },
+      async changeLCFL(val) {
+        this.bpmnXML = null;
+        this.form.processDefinitionId = null;
+        this.form.FQLC = null;
+        await this.getProcessList(val);
+      },
+      async getProcessList(val) {
+        let params = {
+          pageNo: 1,
+          pageSize: 999,
+          processTypeId: val
+        };
+        const { list } = await getModelPage(params);
+        this.processList = list.filter((item) => item.processDefinition);
+      },
+      async changeFQLC(val) {
+        if (!val) return;
+        let find = this.processList.find((item) => item.id === val) || {};
+        this.form.name = find.name;
+        this.form.key = find.key;
+        this.form.processDefinitionId = find.processDefinition.id;
+        await this.getProcessDefinitionBpmnXMLInfo(find.processDefinition.id);
+        await this.getTaskAssignRuleListInfo({
+          modelId: find.id,
+          processDefinitionId: find.processDefinition.id
+        });
+      },
+      async getProcessDefinitionBpmnXMLInfo(val) {
+        // 加载流程图
+        this.bpmnXML = await getProcessDefinitionBpmnXML(val);
+      },
+      async getTaskAssignRuleListInfo(find) {
+        this.datasource = await getTaskAssignRuleList({
+          modelId: find.modelId,
+          processDefinitionId: find.processDefinitionId
+        });
+      },
+      getAssignRuleOptionName(row, option) {
+        if (row.type == 10) {
+          for (const roleOption of this.roleOptions) {
+            if (roleOption.id === option) {
+              return roleOption.name;
+            }
           }
-        }
-      } else if (row.type === 22) {
-        option = option + ''; // 转换成 string
-        return this.getDictV(this.dictEnum['工种类型'], option);
-      } else if (row.type === 30 || row.type === 31 || row.type === 32) {
-        for (const userOption of this.userOptions) {
-          if (userOption.id === option) {
-            return userOption.nickname || userOption.name;
+        } else if (row.type === 20 || row.type === 21) {
+          for (const deptOption of this.deptOptions) {
+            if (deptOption.id === option) {
+              return deptOption.name;
+            }
           }
-        }
-      } else if (row.type === 40) {
-        for (const userGroupOption of this.userGroupOptions) {
-          if (userGroupOption.id === option) {
-            return userGroupOption.name;
+        } else if (row.type === 22) {
+          option = option + ''; // 转换成 string
+          return this.getDictV(this.dictEnum['工种类型'], option);
+        } else if (row.type === 30 || row.type === 31 || row.type === 32) {
+          for (const userOption of this.userOptions) {
+            if (userOption.id === option) {
+              return userOption.nickname || userOption.name;
+            }
+          }
+        } else if (row.type === 40) {
+          for (const userGroupOption of this.userGroupOptions) {
+            if (userGroupOption.id === option) {
+              return userGroupOption.name;
+            }
           }
+        } else if (row.type === 50) {
+          option = option + ''; // 转换成 string
+          return this.getDictV(
+            this.dictEnum['工作流任务分配自定义脚本'],
+            option
+          );
+        } else if (row.type === 60) {
+          return row.variableName;
         }
-      } else if (row.type === 50) {
-        option = option + ''; // 转换成 string
-        return this.getDictV(
-          this.dictEnum['工作流任务分配自定义脚本'],
-          option
-        );
-      } else if (row.type === 60) {
-        return row.variableName;
-      }
-      return '未知(' + option + ')';
-    },
-    /**
-     * 构造树型结构数据
-     * @param {*} data 数据源
-     * @param {*} id id字段 默认 'id'
-     * @param {*} parentId 父节点字段 默认 'parentId'
-     * @param {*} children 孩子节点字段 默认 'children'
-     * @param {*} rootId 根Id 默认 0
-     */
-    handleTree(data, id, parentId, children, rootId) {
-      id = id || 'id';
-      parentId = parentId || 'parentId';
-      children = children || 'children';
-      rootId =
-        rootId ||
-        Math.min.apply(
-          Math,
-          data.map((item) => {
-            return item[parentId];
-          })
-        ) ||
-        0;
-      //对源数据深度克隆
-      const cloneData = JSON.parse(JSON.stringify(data));
-      //循环所有项
-      const treeData = cloneData.filter((father) => {
-        let branchArr = cloneData.filter((child) => {
-          //返回每一项的子级数组
-          return father[id] == child[parentId];
+        return '未知(' + option + ')';
+      },
+      /**
+       * 构造树型结构数据
+       * @param {*} data 数据源
+       * @param {*} id id字段 默认 'id'
+       * @param {*} parentId 父节点字段 默认 'parentId'
+       * @param {*} children 孩子节点字段 默认 'children'
+       * @param {*} rootId 根Id 默认 0
+       */
+      handleTree(data, id, parentId, children, rootId) {
+        id = id || 'id';
+        parentId = parentId || 'parentId';
+        children = children || 'children';
+        rootId =
+          rootId ||
+          Math.min.apply(
+            Math,
+            data.map((item) => {
+              return item[parentId];
+            })
+          ) ||
+          0;
+        //对源数据深度克隆
+        const cloneData = JSON.parse(JSON.stringify(data));
+        //循环所有项
+        const treeData = cloneData.filter((father) => {
+          let branchArr = cloneData.filter((child) => {
+            //返回每一项的子级数组
+            return father[id] == child[parentId];
+          });
+          branchArr.length > 0 ? (father.children = branchArr) : '';
+          //返回第一层
+          return father[parentId] == rootId;
         });
-        branchArr.length > 0 ? (father.children = branchArr) : '';
-        //返回第一层
-        return father[parentId] == rootId;
-      });
-      return treeData !== '' ? treeData : data;
-    },
-    getDictV(code, val) {
-      if (!this.dictList[code]) return '';
-      return this.dictList[code].find((item) => item.value == val)?.label;
-    },
-    async getDictList(code) {
-      let {data: res} = await getByCode(code);
-      this.dictList[code] = res.map((item) => {
-        let values = Object.keys(item);
-        return {
-          value: values[0],
-          label: item[values[0]]
-        };
-      });
-    },
-    async submit() {
-      await processInstanceCreateAPI(this.form);
-      this.$message('提交审核成功');
-      this.$emit('reload');
-      this.cancel();
-    },
-    cancel() {
-      this.$emit('update:processSubmitDialogFlag', false);
+        return treeData !== '' ? treeData : data;
+      },
+      getDictV(code, val) {
+        if (!this.dictList[code]) return '';
+        return this.dictList[code].find((item) => item.value == val)?.label;
+      },
+      async getDictList(code) {
+        let { data: res } = await getByCode(code);
+        this.dictList[code] = res.map((item) => {
+          let values = Object.keys(item);
+          return {
+            value: values[0],
+            label: item[values[0]]
+          };
+        });
+      },
+      async submit() {
+        await processInstanceCreateAPI(this.form);
+        this.$message('提交审核成功');
+        this.$emit('reload');
+        this.cancel();
+      },
+      cancel() {
+        this.$emit('update:processSubmitDialogFlag', false);
+      }
     }
-  }
-};
+  };
 </script>
 <style scoped lang="scss"></style>

src/directives.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+// 定义全局自定义指令
+Vue.directive('submit-once', {
+  bind(el, binding, vnode) {
+    el.addEventListener('click', async () => {
+      if (el.disabled) return;
+      // 禁用按钮并显示加载状态
+      el.disabled = true;
+      const originalText = el.innerHTML;
+      el.innerHTML = '<i class="el-icon-loading"></i> 提交中...';
+
+      try {
+        // 调用传入的提交方法
+        if (typeof binding.value === 'function') {
+          await binding.value();
+        }
+      } catch (error) {
+        console.error('提交出错:', error);
+      } finally {
+        // 恢复按钮状态
+        el.disabled = false;
+        el.innerHTML = originalText;
+      }
+    });
+  }
+});

src/main.js

@@ -14,6 +14,7 @@ import DictSelection from '@/components/Dict/DictSelection';
 import HeaderTitle from '@/components/header-title';
 import authSelection from '@/components/authSelection';
 import vueContextMenu from 'vue-contextmenu';
+import './directives';
 
 import dataV from '@jiaminghi/data-view';
 Vue.component('HeaderTitle', HeaderTitle);