refactor(办公协同): 优化流程详情页布局并添加组件验证

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -407,7 +407,7 @@
           end: '',
           days: ''
         },
-        componentRef: ['blank_business_component']
+        componentRef: ['blank_business_component', 'blank_use_seal', 'blank_use_qualification', 'blank_product_specification', 'blank_event_component', 'blank_reissue_component']
       };
     },
     computed: {
@@ -496,6 +496,19 @@ 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': '补发信息'
+        }
+        return nameMap[componentKey] || componentKey;
+      },
+      
       async addContact(type) {
         console.log(type);
         let data = await this.$refs.generateForm.getData(false);
@@ -763,20 +776,35 @@ this.postOptions.push(...response.data);
         // console.log('this.form~~~', this.$refs.businessComponentRef.form);
         
         // const businessComponentForm = this.$refs.businessComponentRef.form;
-        // let data = await this.$refs.generateForm.getData(false);
+        let data = await this.$refs.generateForm.getData(false);
         // data['blank_business_component'] = businessComponentForm.blank_business_component;
         // this.$refs.generateForm.setData({
         //   'blank_business_component': data['blank_business_component']
         // });
         // 获取所有组件的引用
-        // let validArr = []
-        // // console.log('data~~~~', data);
-        // Object.keys(data).forEach((key) => {
-        //   if (this.componentRef.includes(key)) {
-        //     validArr.push(key)
-        //   }
-        // })
-        // console.log('validArr', validArr);
+        let validArr = []
+        // 过滤出存在于componentRef中的键
+        Object.keys(data).forEach((key) => {
+          if (this.componentRef.includes(key)) {
+            validArr.push(key)
+          }
+        })
+        
+        // 检查每个组件的数据是否为空数组
+        let emptyComponents = []
+        validArr.forEach(item => {
+          // 检查data[item]是否存在且为数组，并且长度为0
+          if (Array.isArray(data[item]) && data[item].length === 0) {
+            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 {
@@ -786,8 +814,10 @@ this.postOptions.push(...response.data);
         //     }
         //     return Promise.resolve(true); // 如果组件不存在或没有validateForm方法，默认通过
         //   }));
+        //   console.log('所有组件校验通过');
         // } catch (error) {
-        //   console.log('表单校验失败');
+        //   console.error('表单校验失败:', error);
+        //   this.$message.error('表单校验失败，请检查必填项');
         //   return false; // 任一组件校验失败则整体失败
         // }
         // console.log('data~~~~', data);

src/views/bpm/collaborative/detail.vue

@@ -25,76 +25,107 @@
         </el-tag>
       </div>
     </template>
-    <div class="eleModalBox">
-      <fm-generate-form
-        v-if="Object.keys(form?.formJson || {}).length !== 0"
-        :data="jsonData"
-        :value="form.valueJson"
-        :edit="false"
-        ref="generateForm"
-      >
-        <template v-slot:blank_adopzrdd="scope">
-          <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index">
-            <div class="blank_adopzrdd">
-              <span>{{ index + 1 }}报销事项：</span>
-              <el-input
-                v-model="scope.model.blank_adopzrdd[index].remark"
-                type="textarea"
-                style="width: calc(100% - 80px)"
-              ></el-input>
-            </div>
-            <div class="blank_adopzrdd">
-              <span>金额：</span>
-              <el-input
-                v-model="scope.model.blank_adopzrdd[index].price"
-                type="number"
-                style="width: calc(100% - 80px)"
-              ></el-input>
-            </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%"
+    <div style="display: flex; height: 100%; justify-content: space-between">
+      <div class="form-box">
+        <fm-generate-form
+          v-if="Object.keys(form?.formJson || {}).length !== 0"
+          :data="jsonData"
+          :value="form.valueJson"
+          :edit="false"
+          ref="generateForm"
+        >
+          <template v-slot:blank_adopzrdd="scope">
+            <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index">
+              <div class="blank_adopzrdd">
+                <span>{{ index + 1 }}报销事项：</span>
+                <el-input
+                  v-model="scope.model.blank_adopzrdd[index].remark"
+                  type="textarea"
+                  style="width: calc(100% - 80px)"
+                ></el-input>
+              </div>
+              <div class="blank_adopzrdd">
+                <span>金额：</span>
+                <el-input
+                  v-model="scope.model.blank_adopzrdd[index].price"
+                  type="number"
+                  style="width: calc(100% - 80px)"
                 ></el-input>
+              </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%"
+                  ></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" :view="view"></businessComponent>
-          </template>
+            <!-- 差旅 -->
+            <template v-slot:blank_business_component="scope">
+              <businessComponent  ref="blank_business_component" id="blank_business_component" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></businessComponent>
+            </template>
 
-          <!-- 印章使用 -->
-          <template v-slot:blank_use_seal="scope">
-            <useSealComponent  ref="blank_use_seal" id="blank_use_seal" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></useSealComponent>
-          </template>
+            <!-- 印章使用 -->
+            <template v-slot:blank_use_seal="scope">
+              <useSealComponent  ref="blank_use_seal" id="blank_use_seal" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></useSealComponent>
+            </template>
 
-          <!-- 资质使用 -->
-          <template v-slot:blank_use_qualification="scope">
-            <useQualificationComponent  ref="blank_use_qualification" id="blank_use_qualification" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></useQualificationComponent>
-          </template>
+            <!-- 资质使用 -->
+            <template v-slot:blank_use_qualification="scope">
+              <useQualificationComponent  ref="blank_use_qualification" id="blank_use_qualification" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></useQualificationComponent>
+            </template>
 
-          <!-- 产品规格 -->
-          <template v-slot:blank_product_specification="scope">
-            <productSpecificationComponent  ref="blank_product_specification" id="blank_product_specification" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></productSpecificationComponent>
-          </template>
+            <!-- 产品规格 -->
+            <template v-slot:blank_product_specification="scope">
+              <productSpecificationComponent  ref="blank_product_specification" id="blank_product_specification" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></productSpecificationComponent>
+            </template>
 
-          <!-- 事件 -->
-          <template v-slot:blank_event_component="scope">
-            <eventComponent  ref="blank_event_component" id="blank_event_component" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></eventComponent>
-          </template>
+            <!-- 事件 -->
+            <template v-slot:blank_event_component="scope">
+              <eventComponent  ref="blank_event_component" id="blank_event_component" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></eventComponent>
+            </template>
 
-          <!-- 补发 -->
-          <template v-slot:blank_reissue_component="scope">
-            <reissueComponent  ref="blank_reissue_component" id="blank_reissue_component" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></reissueComponent>
-          </template>
+            <!-- 补发 -->
+            <template v-slot:blank_reissue_component="scope">
+              <reissueComponent  ref="blank_reissue_component" id="blank_reissue_component" :generateForm="$refs.generateForm" :info="scope.model" :view="view"></reissueComponent>
+            </template>
 
-      </fm-generate-form>
+        </fm-generate-form>
+      </div>
+      <div
+        style="
+          align-self: center;
+          display: flex;
+          color: #1890ff;
+          cursor: pointer;
+          width: 15px;
+        "
+        @click="() => (isRight = !isRight)"
+      >
+        <span
+          style="
+            align-self: center;
+
+            transform: scale(1.5);
+          "
+          :class="isRight ? 'el-icon-caret-left' : 'el-icon-caret-right'"
+        >
+        </span>
+        <span style="writing-mode: vertical-rl">选择流程</span>
+      </div>
+      <div style="flex: 1" v-if="isRight">
+        <Detail
+          :view="true"
+          :id="form.id"
+          ref="formDetailDialogRef"
+        ></Detail>
+      </div>
     </div>
+    
     <outgoingDetails
       v-if="outgoingData.id"
       :business-id="outgoingData.id"
@@ -116,10 +147,11 @@
   import productSpecificationComponent from '@/BIZComponents/processSubmitDialog/components/productSpecificationComponent.vue';
   import eventComponent from '@/BIZComponents/processSubmitDialog/components/eventComponent.vue';
   import reissueComponent from '@/BIZComponents/processSubmitDialog/components/reissueComponent.vue';
+  import Detail from '@/views/bpm/processInstance/detailNew.vue';
 
   export default {
     name: 'formDetailDialog',
-    components: {outgoingDetails, businessComponent, useSealComponent, useQualificationComponent, productSpecificationComponent, eventComponent, reissueComponent},
+    components: {outgoingDetails, businessComponent, useSealComponent, useQualificationComponent, productSpecificationComponent, eventComponent, reissueComponent, Detail},
     props: {
       formDetailDialogFlag: {
         type: Boolean,
@@ -135,12 +167,21 @@
       return {
         form: {},
         jsonData: {},
-        outgoingData:{}
+        outgoingData:{},
+        isRight: false,
       };
     },
     computed: {
+      // modelWidth() {
+      //   return (this.outgoingData?.id || this.jsonData.config?.platform && this.jsonData.config.platform === 'pc') ? '80%' : '400px';
+      // }
       modelWidth() {
-        return (this.outgoingData?.id || this.jsonData.config?.platform && this.jsonData.config.platform === 'pc') ? '80%' : '400px';
+        let width = this.jsonData.config?.platform && this.jsonData.config.platform === 'pc' ? 1100 : 450;
+        if(this.isRight) {
+          return width + 750 + 'px'
+        } else {
+          return width + 'px'
+        }
       }
     },
     methods: {
@@ -189,6 +230,13 @@
     overflow: auto;
   }
 
+  .form-box {
+    // max-height: 500px;
+    min-width: 400px;
+    overflow: auto;
+    background: #4298fd0d;
+  }
+
   ::v-deep .el-dialog__header {
     display: flex;
     justify-content: space-between;

src/views/bpm/collaborative/index.vue

@@ -231,7 +231,7 @@
                     </div>
                   </template>
                   <!-- 操作列 -->
-                  <template v-slot:action="{ row }">
+                  <!-- <template v-slot:action="{ row }">
                     <el-button
                       size="mini"
                       type="text"
@@ -239,7 +239,7 @@
                       @click="handleAudit(row)"
                       >详情
                     </el-button>
-                  </template>
+                  </template> -->
                 </ele-pro-table>
               </el-tab-pane>
               <el-tab-pane label="部门记录" name="dept">
@@ -424,7 +424,7 @@
                     </el-link>
                   </template>
                   <!-- 操作列 -->
-                  <template v-slot:action="{ row }">
+                  <!-- <template v-slot:action="{ row }">
                     <el-button
                       size="mini"
                       type="text"
@@ -432,7 +432,7 @@
                       @click="handleAudit(row)"
                       >详情
                     </el-button>
-                  </template>
+                  </template> -->
                 </ele-pro-table>
               </el-tab-pane>
               <el-tab-pane label="通知我的记录" name="notice">
@@ -618,7 +618,7 @@
                   </template>
 
                   <!-- 操作列 -->
-                  <template v-slot:action="{ row }">
+                  <!-- <template v-slot:action="{ row }">
                     <el-button
                       size="mini"
                       type="text"
@@ -626,7 +626,7 @@
                       @click="handleAudit(row)"
                       >详情
                     </el-button>
-                  </template>
+                  </template> -->
                 </ele-pro-table>
               </el-tab-pane>
             </el-tabs>

src/views/bpm/processInstance/detailNew.vue

@@ -150,8 +150,21 @@
         tasks: []
       };
     },
-    created() {
-      this.getDetail();
+    watch: {
+      id: {
+        handler(newVal, oldVal) {
+          if (newVal) {
+            console.log(newVal,'watchnewVal')
+            this.getDetail();
+          }
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      // this.$nextTick(() => {
+      //   this.getDetail();
+      // })
     },
     methods: {
       getChildren(data) {
@@ -167,6 +180,7 @@
       getDetail() {
         // 获得流程实例相关
         this.processInstanceLoading = true;
+        console.log(this.id,'this.id')
         getProcessInstance(this.id).then((response) => {
           if (!response) {
             this.$message.error('查询不到流程信息！');