feat(processSubmitDialog): 添加业务组件表单并集成到提交流程

src/BIZComponents/processSubmitDialog/components/businessComponent.vue

@@ -0,0 +1,298 @@
+<template>
+    <div>
+        <!-- <div
+            v-for="(item, index) in form.blank_business_component"
+            :key="index"
+        >
+            <div class="blank_business_component">
+                <span>事项{{ index + 1 }}：</span>
+                <span>删除</span>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">出发日期：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">到达日期：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">出发地：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">目的地：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">交通工具 ：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+            <div class="blank_business_component">
+                <span class="label">交通费用 ：</span>
+                <el-input
+                    class="value"
+                    v-model="form.blank_business_component[index].price"
+                    type="number"
+                ></el-input>
+            </div>
+        </div> -->
+        
+        <el-form ref="form" :model="form">
+            <div v-for="(row, $index) in form.blank_business_component" :key="$index">
+                <el-form-item>
+                    <span>事项{{ $index + 1 }}：</span>  <span>删除</span>
+                </el-form-item>
+                <el-form-item
+                    label="出发日期"
+                    label-width="80px"
+                    :prop="'blank_business_component.' + $index + '.startDate'"
+                    :rules="{
+                        required: true,
+                        message: '选择出发日期',
+                        trigger: 'change'
+                    }"
+                >
+                    <el-date-picker
+                        style="width: 100%"
+                        v-model="row.startDate"
+                        value-format="yyyy-MM-dd"
+                        type="datetime"
+                        placeholder="选择日期"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item
+                    label="到达日期"
+                    label-width="80px"
+                    :prop="'blank_business_component.' + $index + '.endDate'"
+                    :rules="{
+                        required: true,
+                        message: '选择到达日期',
+                        trigger: 'change'
+                    }"
+                >
+                    <el-date-picker
+                        style="width: 100%"
+                        v-model="row.endDate"
+                        value-format="yyyy-MM-dd"
+                        type="datetime"
+                        placeholder="选择日期"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item
+                    label="出发地"
+                    label-width="80px"
+                    :prop="'blank_business_component.' + $index + '.startPlace'"
+                    :rules="{
+                        required: true,
+                        message: '输入出发地',
+                        trigger: 'change'
+                    }"
+                >
+                    <el-input
+                        v-model="row.startPlace"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item
+                    label="目的地"
+                    label-width="80px"
+                    :prop="'blank_business_component.' + $index + '.endPlace'"
+                    :rules="{
+                        required: true,
+                        message: '输入目的地',
+                        trigger: 'change'
+                    }"
+                >
+                    <el-input
+                        v-model="row.endPlace"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item 
+                    label="交通方式" 
+                    label-width="80px" 
+                    :prop="'blank_business_component.' + $index + '.transportationWay'"
+                    :rules="{
+                            required: true,
+                            message: '请选择交通方式',
+                            trigger: 'change'
+                        }"
+                >
+                    <el-select
+                        v-model="row.transportationWay"
+                        placeholder="请选择"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in transportationWayList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        >
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item
+                    label="交通费用"
+                    label-width="80px"
+                    :prop="'blank_business_component.' + $index + '.price'"
+                    :rules="{
+                        required: true,
+                        message: '输入交通费用',
+                        trigger: 'change'
+                    }"
+                >
+                    <el-input
+                        v-model="row.price"
+                        type="number"
+                    ></el-input>
+                </el-form-item>
+            </div>
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    size="small"
+                    @click="addNewRow('blank_business_component')"
+                    style="margin-bottom: 10px"
+                    >添加</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {}
+        },
+        generateForm: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        info: {
+            handler(newVal, oldVal) {
+                console.log('info', newVal);
+                // this.form = JSON.parse(JSON.stringify(newVal));
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    data() {
+        const formItem = {
+            startDate: '',
+            endDate: '',
+            startPlace: '',
+            endPlace: '',
+            transportationWay: '',
+            price: '',
+            remark: ''
+        }
+        return {
+            form: {
+                blank_business_component: [formItem]
+            },
+            transportationWayList: [
+                {
+                    value: '火车',
+                    label: '火车'
+                },
+                {
+                    value: '飞机',
+                    label: '飞机'
+                },
+                {
+                    value: '高铁',
+                    label: '高铁'
+                },
+                {
+                    value: '公车',
+                    label: '公车'
+                },
+                {
+                    value: '私车',
+                    label: '私车'
+                },
+                {
+                    value: '大巴',
+                    label: '大巴'
+                },
+                {
+                    value: '顺风车',
+                    label: '顺风车'
+                },
+                {
+                    value: '滴滴',
+                    label: '滴滴'
+                }
+            ]
+        }
+    },
+    mounted() {
+        console.log('info~~~', this.info);
+    },
+    methods: {
+        async addNewRow(key) {
+            console.log(key);
+            console.log('addNewRow', this.form);
+            // Ensure the array exists before pushing
+            if (!this.form[key]) {
+                this.form[key] = [];
+            }
+            this.form[key].push(formItem);
+        },
+        async delNewRow(key, index) {
+            // Ensure the array exists before filtering
+            if (this.form[key] && Array.isArray(this.form[key])) {
+                this.form[key] = this.form[key].filter((item, index1) => index1 !== index);
+            }
+        },
+        // changePrice(arr) {
+        //     let total = 0;
+        //     arr.forEach(item => {
+        //         total += Number(item.price || 0);
+        //     });
+        //     this.form.blank_adopzrdd_total_price = total;
+        // }
+    }
+}
+</script>
+<style scoped>
+.blank_business_component {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.label {
+    width: 80px;
+}
+.value {
+    flex: 1;
+    width: calc(100% - 80px);
+}
+</style>

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -73,6 +73,11 @@
                 ></el-input>
             </div>
           </template>
+
+          <template v-slot:blank_business_component="scope">
+            <businessComponent  ref="businessComponentRef" :info="scope.model"></businessComponent>
+          </template>
+
         </fm-generate-form>
       </div>
       <div
@@ -313,9 +318,10 @@
   import parentList from './components/parentList.vue';
   import { number } from 'echarts';
   import { del } from 'vue';
+  import businessComponent from './components/businessComponent.vue';
   export default {
     name: 'processSubmitDialog',
-    components: { visibilityRangeDialog, staffSelection, parentList },
+    components: { visibilityRangeDialog, staffSelection, parentList, businessComponent },
     mixins: [dictMixins],
     props: {
       processSubmitDialogFlag: {
@@ -722,9 +728,20 @@ this.postOptions.push(...response.data);
         });
       },
       async submit() {
-        this.form.valueJson = await this.generateFormValid();
-        this.form.processType = '1';
+        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;
+        this.$refs.generateForm.setData({
+          'blank_business_component': data['blank_business_component']
+        });
+        console.log('data~~~~', data);
+        this.form.valueJson = {...await this.generateFormValid(), blank_business_component: businessComponentForm.blank_business_component};
 
+        this.form.processType = '1';
+        console.log('formformformform', this.form);
+        // return false
         await processInstanceCreateAPI({
           ...this.form,
           variables: { ...this.form.valueJson }