feat(流程提交): 添加流程分类和发起流程选择表单，优化组件引用格式

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -13,9 +13,51 @@
   >
     <div style="display: flex; height: 100%; justify-content: space-between">
       <div class="form-box">
-        <!--        <div style="text-align: center; padding: 5px">-->
-        <!--          {{ form.name }}-->
-        <!--        </div>-->
+        <el-form
+          ref="form1"
+          :rules="rules"
+          class="el-form-box"
+          :model="form"
+          label-width="90px"
+          :label-position="'left'"
+          style="padding: 10px;"
+        >
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="流程分类">
+                <ele-tree-select
+                  @change="changeLCFL"
+                  clearable
+                  ref="processTypeRef"
+                  filterable
+                  :data="LCFLList"
+                  v-model="form.LCFL"
+                  childrenKey="children"
+                  valueKey="id"
+                  labelKey="name"
+                  placeholder="请选择"
+                  default-expand-all
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="发起流程">
+                <el-select
+                  filterable
+                  v-model="form.FQLC"
+                  @change="changeFQLC"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in processList"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col> </el-row
+        ></el-form>
         <fm-generate-form
           :preview="true"
           class="el-form-box"
@@ -62,48 +104,77 @@
               </div>
             </div>
           </template>
-          
+
           <!-- 客户名称 -->
           <template v-slot:eom_contact="scope">
             <div class="eom_contact">
               <el-input
-                  v-model="scope.model.eom_contact.name"
-                  style="width: 100%"
-                  @click.native="addContact('eom_contact')"
-                ></el-input>
+                v-model="scope.model.eom_contact.name"
+                style="width: 100%"
+                @click.native="addContact('eom_contact')"
+              ></el-input>
             </div>
           </template>
 
           <!-- 差旅交通 -->
           <template v-slot:blank_business_component="scope">
-            <businessComponent  ref="blank_business_component" id="blank_business_component" :generateForm="$refs.generateForm" :info="scope.model"></businessComponent>
+            <businessComponent
+              ref="blank_business_component"
+              id="blank_business_component"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></businessComponent>
           </template>
 
           <!-- 印章使用 -->
           <template v-slot:blank_use_seal="scope">
-            <useSealComponent  ref="blank_use_seal" id="blank_use_seal" :generateForm="$refs.generateForm" :info="scope.model"></useSealComponent>
+            <useSealComponent
+              ref="blank_use_seal"
+              id="blank_use_seal"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></useSealComponent>
           </template>
 
           <!-- 资质使用 -->
           <template v-slot:blank_use_qualification="scope">
-            <useQualificationComponent  ref="blank_use_qualification" id="blank_use_qualification" :generateForm="$refs.generateForm" :info="scope.model"></useQualificationComponent>
+            <useQualificationComponent
+              ref="blank_use_qualification"
+              id="blank_use_qualification"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></useQualificationComponent>
           </template>
 
           <!-- 产品规格 -->
           <template v-slot:blank_product_specification="scope">
-            <productSpecificationComponent  ref="blank_product_specification" id="blank_product_specification" :generateForm="$refs.generateForm" :info="scope.model"></productSpecificationComponent>
+            <productSpecificationComponent
+              ref="blank_product_specification"
+              id="blank_product_specification"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></productSpecificationComponent>
           </template>
 
           <!-- 事件 -->
           <template v-slot:blank_event_component="scope">
-            <eventComponent  ref="blank_event_component" id="blank_event_component" :generateForm="$refs.generateForm" :info="scope.model"></eventComponent>
+            <eventComponent
+              ref="blank_event_component"
+              id="blank_event_component"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></eventComponent>
           </template>
 
           <!-- 补发 -->
           <template v-slot:blank_reissue_component="scope">
-            <reissueComponent  ref="blank_reissue_component" id="blank_reissue_component" :generateForm="$refs.generateForm" :info="scope.model"></reissueComponent>
+            <reissueComponent
+              ref="blank_reissue_component"
+              id="blank_reissue_component"
+              :generateForm="$refs.generateForm"
+              :info="scope.model"
+            ></reissueComponent>
           </template>
-
         </fm-generate-form>
       </div>
       <div
@@ -225,7 +296,11 @@
 
                 <el-tag
                   size="medium"
-                  v-if="scope.row.type === 60 || scope.row.type === 70|| scope.row.type === 80"
+                  v-if="
+                    scope.row.type === 60 ||
+                    scope.row.type === 70 ||
+                    scope.row.type === 80
+                  "
                 >
                   {{ getAssignRuleOptionName(scope.row) }}
                 </el-tag>
@@ -352,7 +427,17 @@
   import reissueComponent from './components/reissueComponent.vue';
   export default {
     name: 'processSubmitDialog',
-    components: { visibilityRangeDialog, staffSelection, parentList, businessComponent, useSealComponent, useQualificationComponent, productSpecificationComponent, eventComponent, reissueComponent },
+    components: {
+      visibilityRangeDialog,
+      staffSelection,
+      parentList,
+      businessComponent,
+      useSealComponent,
+      useQualificationComponent,
+      productSpecificationComponent,
+      eventComponent,
+      reissueComponent
+    },
     mixins: [dictMixins],
     props: {
       processSubmitDialogFlag: {
@@ -407,17 +492,28 @@
           end: '',
           days: ''
         },
-        componentRef: ['blank_business_component', 'blank_use_seal', 'blank_use_qualification', 'blank_product_specification', 'blank_event_component', 'blank_reissue_component']
+        componentRef: [
+          'blank_business_component',
+          'blank_use_seal',
+          'blank_use_qualification',
+          'blank_product_specification',
+          'blank_event_component',
+          'blank_reissue_component'
+        ]
       };
     },
     computed: {
       ...mapGetters(['user']),
       modelWidth() {
-        let width = this.jsonData.config?.platform && this.jsonData.config.platform === 'pc' ? 1100 : 450;
-        if(this.isRight) {
-          return width + 350 + 'px'
+        let width =
+          this.jsonData.config?.platform &&
+          this.jsonData.config.platform === 'pc'
+            ? 1100
+            : 450;
+        if (this.isRight) {
+          return width + 350 + 'px';
         } else {
-          return width + 'px'
+          return width + 'px';
         }
       }
     },
@@ -499,16 +595,16 @@ this.postOptions.push(...response.data);
       // 获取组件的中文名称，用于错误提示
       getComponentName(componentKey) {
         const nameMap = {
-          'blank_business_component': '差旅交通',
-          'blank_use_seal': '印章使用',
-          'blank_use_qualification': '资质使用',
-          'blank_product_specification': '产品规格',
-          'blank_event_component': '事件',
-          'blank_reissue_component': '补发信息'
-        }
+          blank_business_component: '差旅交通',
+          blank_use_seal: '印章使用',
+          blank_use_qualification: '资质使用',
+          blank_product_specification: '产品规格',
+          blank_event_component: '事件',
+          blank_reissue_component: '补发信息'
+        };
         return nameMap[componentKey] || componentKey;
       },
-      
+
       async addContact(type) {
         console.log(type);
         let data = await this.$refs.generateForm.getData(false);
@@ -533,9 +629,9 @@ this.postOptions.push(...response.data);
         data['eom_contact'] = {
           id: item.id,
           name: item.name
-        }
+        };
         this.$refs.generateForm.setData({
-          'eom_contact': data['eom_contact']
+          eom_contact: data['eom_contact']
         });
         console.log('data~~~~', data);
       },
@@ -774,7 +870,7 @@ this.postOptions.push(...response.data);
       },
       async submit() {
         // console.log('this.form~~~', this.$refs.businessComponentRef.form);
-        
+
         // const businessComponentForm = this.$refs.businessComponentRef.form;
         let data = await this.$refs.generateForm.getData(false);
         // data['blank_business_component'] = businessComponentForm.blank_business_component;
@@ -782,30 +878,30 @@ this.postOptions.push(...response.data);
         //   'blank_business_component': data['blank_business_component']
         // });
         // 获取所有组件的引用
-        let validArr = []
+        let validArr = [];
         // 过滤出存在于componentRef中的键
         Object.keys(data).forEach((key) => {
           if (this.componentRef.includes(key)) {
-            validArr.push(key)
+            validArr.push(key);
           }
-        })
-        
+        });
+
         // 检查每个组件的数据是否为空数组
-        let emptyComponents = []
-        validArr.forEach(item => {
+        let emptyComponents = [];
+        validArr.forEach((item) => {
           // 检查data[item]是否存在且为数组，并且长度为0
           if (Array.isArray(data[item]) && data[item].length === 0) {
-            emptyComponents.push(item)
+            emptyComponents.push(item);
           }
-        })
-        
+        });
+
         // 如果有未填写的组件，显示提示信息
         if (emptyComponents.length > 0) {
           // this.$message.warning(`请填写完整信息：${emptyComponents.map(comp => this.getComponentName(comp)).join('、')}`);
           this.$message.warning(`请填写完整信息`);
           return false;
         }
-        
+
         // 使用Promise.all并行校验所有组件
         // try {
         //   await Promise.all(validArr.map(key => {
@@ -821,7 +917,7 @@ this.postOptions.push(...response.data);
         //   return false; // 任一组件校验失败则整体失败
         // }
         // console.log('data~~~~', data);
-        this.form.valueJson = await this.generateFormValid()
+        this.form.valueJson = await this.generateFormValid();
         this.form.processType = '1';
         console.log('formformformform', this.form);
         await processInstanceCreateAPI({