feat(办公协同): 差旅费报销表单配置

src/BIZComponents/processSubmitDialog/components/businessComponent.vue

@@ -38,14 +38,15 @@
             <el-table-column
                 label="操作"
                 align="center"
-                width="100">
+                width="100"
+                 v-if="!view">
                 <template slot-scope="scope">
                     <el-button @click="editRow(scope.row, index)" type="text" size="mini">编辑</el-button>
                     <el-button @click="deleteRow(index)" type="text" size="mini">删除</el-button>
                 </template>
                 </el-table-column>
         </el-table>
-        <div @click="addRow" style="text-align: center;">
+        <div v-if="!view" @click="addRow" style="text-align: center;">
             <el-button type="text" icon="el-icon-plus">添加</el-button>
         </div>
         <ele-modal
@@ -171,8 +172,8 @@
             </el-card>
 
             <div slot="footer">
-            <el-button type="primary" size="small" @click="save">保存</el-button>
-            <el-button size="small" @click="handleClose">关闭</el-button>
+                <el-button type="primary" size="small" @click="save">保存</el-button>
+                <el-button size="small" @click="handleClose">关闭</el-button>
             </div>
         </ele-modal>
         <!-- <el-form ref="form" :model="info">
@@ -316,16 +317,21 @@ export default {
             type: String,
             default: ''
         },
+        view: {
+            type: Boolean,
+            default: false
+        },
     },
     watch: {
         info: {
             handler(newVal, oldVal) {
                 console.log('info', newVal);
                 // this.form = JSON.parse(JSON.stringify(newVal));
+                this.tableData = newVal.blank_business_component || [];
             },
             deep: true,
             immediate: true
-        }
+        },
     },
     data() {
         const formItem = {
@@ -335,8 +341,7 @@ export default {
             endPlace: '',
             transportationWay: '',
             price: '',
-            remark: '',
-            type: 'add'
+            remark: ''
         }
         return {
             form: {},
@@ -379,35 +384,43 @@ export default {
             visible: false,
             currentItem: {},
             currentIndex: null,
+            type: 'add'
         }
     },
     mounted() {
-        console.log('info~~~', this.info);
-        this.initForm();
+        // console.log('info~~~', this.info);
+        // this.initForm();
     },
     methods: {
-        async initForm() {
-            let data = await this.generateForm.getData(false);
-            console.log('generateForm~~~', data);
-            data[this.id] = [this.formItem];
-            this.generateForm.setData({
-                [this.id]: data[this.id]
-            });
-        },
-        async addNewRow() {
+        // async initForm() {
+        //     let data = await this.generateForm.getData(false);
+        //     console.log('generateForm~~~', data);
+        //     data[this.id] = [this.formItem];
+        //     this.generateForm.setData({
+        //         [this.id]: data[this.id]
+        //     });
+        // },
+        // async addNewRow() {
+        //     let data = await this.generateForm.getData(false);
+        //     console.log(this.id, data[this.id]);
+        //     data[this.id].push(this.formItem);
+        //     this.generateForm.setData({
+        //         [this.id]: data[this.id]
+        //     });
+        // },
+        // async delNewRow(index) {
+        //     let data = await this.generateForm.getData(false);
+        //     data[this.id] = data[this.id].filter((item, index1) => index1 != index);
+        //     this.generateForm.setData({
+        //         [this.id]: data[this.id]
+        //     });
+        // },
+        async updateRowInfo() {
             let data = await this.generateForm.getData(false);
-            console.log(this.id, data[this.id]);
-            data[this.id].push(this.formItem);
             this.generateForm.setData({
-                [this.id]: data[this.id]
-            });
-        },
-        async delNewRow(index) {
-            let data = await this.generateForm.getData(false);
-            data[this.id] = data[this.id].filter((item, index1) => index1 != index);
-            this.generateForm.setData({
-                [this.id]: data[this.id]
+                'blank_business_component': this.tableData
             });
+            console.log('updateRowInfo', this.tableData, data);
         },
         validateForm() {
             //开始表单校验
@@ -439,6 +452,19 @@ export default {
         },
         delRow(index) {
             this.tableData.splice(index, 1);
+            this.updateRowInfo();
+            this.calculateTotalPrice();
+        },
+        async calculateTotalPrice() {
+            let data = await this.generateForm.getData(false);
+            let totalPrice = 0;
+            this.tableData.forEach(item => {
+                totalPrice += Number(item.price);
+            });
+            const price = Number(data.input_t2qmoggj);
+            this.generateForm.setData({
+                input_a1cnspuk: totalPrice + price
+            });
         },
         async save() {
             try {
@@ -446,12 +472,15 @@ export default {
                 console.log('表单验证通过');
                 // 深拷贝form对象，避免引用问题
                 const newForm = JSON.parse(JSON.stringify(this.form));
+                console.log('newForm', newForm);
                 if(this.type === 'add') {
                     this.tableData.push(newForm);
                 } else {
                     this.tableData[this.currentIndex] = newForm;
                 }
-                
+                console.log('this.tableData', this.tableData);
+                this.updateRowInfo()
+                this.calculateTotalPrice()
                 this.handleClose(); // 保存后关闭弹窗
                 // 重置form
                 this.form = {};

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -732,32 +732,33 @@ 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 = []
+        // // console.log('data~~~~', data);
+        // Object.keys(data).forEach((key) => {
+        //   if (this.componentRef.includes(key)) {
+        //     validArr.push(key)
+        //   }
+        // })
+        // console.log('validArr', validArr);
         
         // 使用Promise.all并行校验所有组件
-        try {
-          await Promise.all(validArr.map(key => {
-            if (this.$refs[key] && typeof this.$refs[key].validateForm === 'function') {
-              return this.$refs[key].validateForm();
-            }
-            return Promise.resolve(true); // 如果组件不存在或没有validateForm方法，默认通过
-          }));
-        } catch (error) {
-          console.log('表单校验失败');
-          return false; // 任一组件校验失败则整体失败
-        }
+        // try {
+        //   await Promise.all(validArr.map(key => {
+        //     if (this.$refs[key] && typeof this.$refs[key].validateForm === 'function') {
+        //       return this.$refs[key].validateForm();
+        //     }
+        //     return Promise.resolve(true); // 如果组件不存在或没有validateForm方法，默认通过
+        //   }));
+        // } catch (error) {
+        //   console.log('表单校验失败');
+        //   return false; // 任一组件校验失败则整体失败
+        // }
         // console.log('data~~~~', data);
         this.form.valueJson = await this.generateFormValid()
         this.form.processType = '1';

src/views/bpm/collaborative/detail.vue

@@ -62,6 +62,11 @@
                 ></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>
+
       </fm-generate-form>
     </div>
     <outgoingDetails
@@ -79,15 +84,20 @@
   import { getToken } from '@/utils/token-util';
   import outgoingDetails from '@/views/bpm/outgoingManagement/details.vue';
   import storageApi from '@/api/warehouseManagement';
+  import businessComponent from '@/BIZComponents/processSubmitDialog/components/businessComponent.vue';
 
   export default {
     name: 'formDetailDialog',
-    components: {outgoingDetails},
+    components: {outgoingDetails, businessComponent},
     props: {
       formDetailDialogFlag: {
         type: Boolean,
         default: false
-      }
+      },
+      view: {
+        type: Boolean,
+        default: false
+      },
     },
     mixins: [dictMixins],
     data() {

src/views/bpm/collaborative/index.vue

@@ -644,6 +644,7 @@
     <detail ref="detailRef"></detail>
     <formDetail
       v-if="formDetailDialogFlag"
+      :view="true"
       ref="formDetailDialogRef"
       :form-detail-dialog-flag.sync="formDetailDialogFlag"
     ></formDetail>