Merge branch 'feat-business'

src/BIZComponents/processSubmitDialog/components/businessComponent copy.vue

@@ -0,0 +1,268 @@
+<template>
+    <div>
+        <el-form ref="form" :model="info">
+            <div v-for="(row, $index) in info.blank_business_component" :key="$index">
+                <el-form-item>
+                    <div class="header">
+                        <span>事项{{ $index + 1 }}：</span>
+                        <el-button v-if="$index !== 0" type="danger" size="mini" icon="el-icon-delete" @click="delNewRow($index)">删除</el-button>
+                    </div>
+                </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 style="text-align: right;">
+                <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: () => {}
+        },
+        id: {
+            type: String,
+            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]
+            },
+            formItem,
+            transportationWayList: [
+                {
+                    value: '火车',
+                    label: '火车'
+                },
+                {
+                    value: '飞机',
+                    label: '飞机'
+                },
+                {
+                    value: '高铁',
+                    label: '高铁'
+                },
+                {
+                    value: '公车',
+                    label: '公车'
+                },
+                {
+                    value: '私车',
+                    label: '私车'
+                },
+                {
+                    value: '大巴',
+                    label: '大巴'
+                },
+                {
+                    value: '顺风车',
+                    label: '顺风车'
+                },
+                {
+                    value: '滴滴',
+                    label: '滴滴'
+                }
+            ]
+        }
+    },
+    mounted() {
+        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() {
+            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]
+            });
+        },
+        validateForm() {
+            //开始表单校验
+            return new Promise((resolve, reject) => {
+                this.$refs.form.validate((valid) => {
+                    if (!valid) {
+                        reject(false);
+                    } else {
+                        resolve(true);
+                    }
+                });
+            });
+        },
+    }
+}
+</script>
+<style scoped>
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+.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/components/businessComponent.vue

@@ -0,0 +1,517 @@
+<template>
+    <div>
+        <el-table
+            :data="tableData"
+            style="width: 100%"
+            size="mini"
+            border>
+            <el-table-column
+                prop="startDate"
+                align="center"
+                label="出发日期">
+            </el-table-column>
+            <el-table-column
+                prop="endDate"
+                align="center"
+                label="到达日期">
+            </el-table-column>
+            <el-table-column
+                prop="startPlace"
+                align="center"
+                label="出发地">
+            </el-table-column>
+            <el-table-column
+                prop="endPlace" 
+                align="center"
+                label="到达地">
+            </el-table-column>
+            <el-table-column
+                prop="transportationWay"
+                align="center"
+                label="交通方式">
+            </el-table-column>
+            <el-table-column
+                prop="price"
+                align="center"
+                label="交通费用">
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                align="center"
+                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 v-if="!view" @click="addRow" style="text-align: center;">
+            <el-button type="text" icon="el-icon-plus">添加</el-button>
+        </div>
+        <ele-modal
+            title="明细"
+            custom-class="ele-dialog-form long-dialog-form"
+            :visible.sync="visible"
+            :before-close="handleClose"
+            :close-on-click-modal="false"
+            top="5vh"
+            :close-on-press-escape="false"
+            append-to-body
+            width="70%"
+            :maxable="true"
+        >
+            <el-card shadow="never">
+                <el-form ref="form" :model="form">
+                    <el-form-item
+                        label="出发日期"
+                        label-width="80px"
+                        prop="startDate"
+                        :rules="{
+                            required: true,
+                            message: '选择出发日期',
+                            trigger: 'change'
+                        }"
+                    >
+                        <el-date-picker
+                            style="width: 100%"
+                            v-model="form.startDate"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="datetime"
+                            placeholder="选择日期"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item
+                        label="到达日期"
+                        label-width="80px"
+                        prop="endDate"
+                        :rules="{
+                            required: true,
+                            message: '选择到达日期',
+                            trigger: 'change'
+                        }"
+                    >
+                        <el-date-picker
+                            style="width: 100%"
+                            v-model="form.endDate"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            type="datetime"
+                            placeholder="选择日期"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item
+                        label="出发地"
+                        label-width="80px"
+                        prop="startPlace"
+                        :rules="{
+                            required: true,
+                            message: '输入出发地',
+                            trigger: 'change'
+                        }"
+                    >
+                        <el-input
+                            v-model="form.startPlace"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item
+                        label="目的地"
+                        label-width="80px"
+                        prop="endPlace"
+                        :rules="{
+                            required: true,
+                            message: '输入目的地',
+                            trigger: 'change'
+                        }"
+                    >
+                        <el-input
+                            v-model="form.endPlace"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item 
+                        label="交通方式" 
+                        label-width="80px" 
+                        prop="transportationWay"
+                        :rules="{
+                                required: true,
+                                message: '请选择交通方式',
+                                trigger: 'change'
+                            }"
+                    >
+                        <el-select
+                            v-model="form.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="price"
+                        :rules="{
+                            required: true,
+                            message: '输入交通费用',
+                            trigger: 'change'
+                        }"
+                    >
+                        <el-input
+                            v-model="form.price"
+                            type="number"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-card>
+
+            <div slot="footer">
+                <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">
+            <div v-for="(row, $index) in info.blank_business_component" :key="$index">
+                <el-form-item>
+                    <div class="header">
+                        <span>事项{{ $index + 1 }}：</span>
+                        <el-button v-if="$index !== 0" type="danger" size="mini" icon="el-icon-delete" @click="delNewRow($index)">删除</el-button>
+                    </div>
+                </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 style="text-align: right;">
+                <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: () => {}
+        },
+        id: {
+            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 = {
+            startDate: '',
+            endDate: '',
+            startPlace: '',
+            endPlace: '',
+            transportationWay: '',
+            price: '',
+            remark: ''
+        }
+        return {
+            form: {},
+            formItem,
+            transportationWayList: [
+                {
+                    value: '火车',
+                    label: '火车'
+                },
+                {
+                    value: '飞机',
+                    label: '飞机'
+                },
+                {
+                    value: '高铁',
+                    label: '高铁'
+                },
+                {
+                    value: '公车',
+                    label: '公车'
+                },
+                {
+                    value: '私车',
+                    label: '私车'
+                },
+                {
+                    value: '大巴',
+                    label: '大巴'
+                },
+                {
+                    value: '顺风车',
+                    label: '顺风车'
+                },
+                {
+                    value: '滴滴',
+                    label: '滴滴'
+                }
+            ],
+            tableData: [],
+            visible: false,
+            currentItem: {},
+            currentIndex: null,
+            type: 'add'
+        }
+    },
+    mounted() {
+        // 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() {
+        //     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);
+            this.generateForm.setData({
+                'blank_business_component': this.tableData
+            });
+            console.log('updateRowInfo', this.tableData, data);
+        },
+        validateForm() {
+            //开始表单校验
+            return new Promise((resolve, reject) => {
+                this.$refs.form.validate((valid) => {
+                    if (!valid) {
+                        reject(false);
+                    } else {
+                        resolve(true);
+                    }
+                });
+            });
+        },
+        addRow() {
+            this.type = 'add';
+            this.visible = true;
+
+        },
+        handleClose() {
+            this.visible = false;
+        },
+        editRow(row, index) {
+            this.type = 'edit';
+            console.log('编辑行', row, index);
+            this.currentItem = row;
+            this.currentIndex = index;
+            this.visible = true;
+            this.form = JSON.parse(JSON.stringify(row));
+        },
+        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 {
+                await this.validateForm();
+                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 = {};
+            } catch (error) {
+                console.log('表单验证失败', error);
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+.blank_business_component {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+.label {
+    width: 80px;
+}
+.value {
+    flex: 1;
+    width: calc(100% - 80px);
+}
+:deep(.el-form-box .el-table .el-table__row .el-table__cell .cell) {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+</style>

src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

@@ -73,6 +73,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"></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: {
@@ -369,7 +375,8 @@
           start: '',
           end: '',
           days: ''
-        }
+        },
+        componentRef: ['blank_business_component']
       };
     },
     computed: {
@@ -722,9 +729,40 @@ this.postOptions.push(...response.data);
         });
       },
       async submit() {
-        this.form.valueJson = await this.generateFormValid();
+        // 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']
+        // });
+        // 获取所有组件的引用
+        // 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; // 任一组件校验失败则整体失败
+        // }
+        // console.log('data~~~~', data);
+        this.form.valueJson = await this.generateFormValid()
         this.form.processType = '1';
-
+        console.log('formformformform', this.form);
         await processInstanceCreateAPI({
           ...this.form,
           variables: { ...this.form.valueJson }

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() {