laboratory_maintenance_app/pages/submission/components/subForm.vue

<template>
    <view class="page-css">
        <view class="container">
            <view v-for="(item, index) in breakdownInfo" :key="index">
                <betone-header-top :titleMin="'故障信息'" />
                <u-form labelPosition="left" :rules="rules" :ref="`breakdownForm${index}`" :model="item">
                    <u-form-item label="" prop="businessName" :border-bottom="false">
                        <view @click="itemIndexFn(index)" style="width: 100%">

                            <betone-new-input :disabled="formDisabled" label="设备名称:" v-model="item.deviceName"
                                placeholder="请输入" endIcon="scan" />
                        </view>
                    </u-form-item>
                    <u-form-item label="" prop="businessName" :border-bottom="false">
                        <betone-new-input :disabled="formDisabled" label="故障位置:" v-model="item.faultLocation"
                            placeholder="请输入" />
                    </u-form-item>
                    <u-form-item label="" prop="businessName" :border-bottom="false">
                        <betone-new-input :disabled="formDisabled" label="故障专业类型:" v-model="item.faultType"
                            placeholder="请输入" />
                    </u-form-item>
                    <u-form-item label="" prop="faultDescribe" :border-bottom="false" label-width="0">
                        <betone-new-input :disabled="formDisabled" label="故障描述:" v-model="item.faultDescribe"
                            placeholder="请输入" type="textarea" :height="150" :isRequire="true" />
                    </u-form-item>
                    <u-form-item label="故障视频:" prop="businessName" :border-bottom="false" label-position="top">
                        <betone-upload :disabled="formDisabled" :type="'video'" v-model="item.videoAttaches"
                            @changeFile="changeVideo" :formIndex="index">
                        </betone-upload>
                    </u-form-item>
                    <u-form-item label="故障图片:" prop="businessName" :border-bottom="false" label-width="180"
                        label-position="top">
                        <betone-upload :disabled="formDisabled" :type="'images'" v-model="item.picAttaches"
                            @changeFile="changePic" :formIndex="index">
                        </betone-upload>
                    </u-form-item>
                </u-form>
            </view>

            <u-button v-if="type == 'add' || type == 'breakdownUpdate'" plain style="margin-bottom: 64rpx"
                @click="addBreakdownInfo">新增</u-button>
        </view>
        <view class="sub-btn" v-if="type == 'add' || type == 'breakdownUpdate'">
            <u-button type="primary" @click="submitBreakdown()">提交</u-button>
        </view>
        <betone-loading ref="BetLoading"></betone-loading>
    </view>
</template>
<script>
export default {
    props: {
        type: {
            type: String,
            default: ''
        },
        pageId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            breakdownInfo: [
                {
                    faultLocation: "", //故障位置
                    faultType: "", //故障专业类别
                    deviceName: "", //设备id
                    deviceName: "", //设备名称
                    faultDescribe: "", //描述
                    videoAttaches: [],//视频列表
                    picAttaches: [],//图片列表
                    submitType: 1,
                },
            ],
            rules: {
                faultDescribe: [{
                    required: true,
                    message: '请输入故障描述',
                    // 可以单个或者同时写两个触发验证方式 
                    trigger: ['change', 'blur'],
                }]
            },
            // deviceList: [], //设备列表
            breakdownInfoIndex: null,
            formDisabled: false,
        };
    },
    onLoad(options) {

    },
    onShow() {
        this.$nextTick(() => {
            this.$refs.BetLoading.show();
            setTimeout(() => {
                this.$refs.BetLoading.hide();
            }, 1000);

        });
    },
    mounted() {
        if (this.type == 'breakdownView') {
            this.formDisabled = true
            this.getBreakdownInfo()
        }
        if (this.type == 'breakdownUpdate') {
            this.getBreakdownInfo()
        }
    },
    methods: {
        // 根据id获取故障详情
        getBreakdownInfo() {
            let query_ = {
                id: this.pageId
            }
            this.$u.api.getBreakdownInfo(query_).then(res => {
                this.breakdownInfo[0] = res.data
                this.$set(this.breakdownInfo, 0, res.data)
            })
        },
        itemIndexFn(index) {
            this.breakdownInfoIndex = index;
        },

        // 新增设备选择
        addBreakdownInfo() {
            this.breakdownInfo.push({
                faultLocation: "", //故障位置
                faultType: "", //故障专业类别
                deviceName: "", //设备id
                deviceName: "", //设备名称
                faultDescribe: "", //描述
                videoAttaches: [],//视频列表
                picAttaches: [],//图片列表
                submitType: 1,
            });
        },
        // 修改视频
        changeVideo(file, index) {
            this.breakdownInfo[index].videoAttaches = file
        },
        // 修改图片
        changePic(file, index) {
            this.breakdownInfo[index].picAttaches = file
        },
        // 报送提交 
        async submitBreakdown() {
            // this.$refs.BetLoading.show();
            try {
                this.breakdownInfo.forEach((i, index) => {
                    this.$refs[`breakdownForm${index}`][0].setRules(this.rules)
                    this.$refs[`breakdownForm${index}`][0].validate(valid => {
                        if (!valid) {
                            this.$refs.BetLoading.hide();
                            validator = false
                            return
                        } else {
                            // 判断是新提交还是修改 

                            if (this.type == 'breakdownUpdate') {
                                this.updateInfo()
                            }
                            if (this.type == 'add') {
                                this.submit()
                            }

                        }
                    })

                })
            } catch (error) {
                console.error('表单验证过程中出现错误：', error);
            }


        },
        // 新提交
        submit() {
            this.$u.api.workOrderSave(this.breakdownInfo).then(res => {
                this.$refs.BetLoading.hide();
                if (res.code == 200) {
                    uni.navigateTo({
                        url: "/pages/submission/records",
                    });
                }
            }).catch(err => {
                this.$refs.BetLoading.hide();
            })
        },
        // 修改
        updateInfo() {
            let query_ = {
                ...this.breakdownInfo[0],
                id: this.pageId
            }
            this.$u.api.workOrderupdate(query_).then(res => {
                this.$refs.BetLoading.hide();
                if (res.code == 200) {
                    uni.redirectTo({
                        url: "/pages/submission/records",
                    });
                }
            }).catch(err => {
                this.$refs.BetLoading.hide();
            })
        }
    },

};
</script>

<style lang="scss" scoped>
.page-css {
    background: #efefef;
    display: flex;
    flex-direction: column;

    .container {
        flex: 1;
        border-radius: 16rpx;
        background: #fff;
        padding: 28rpx 32rpx 28rpx;

    }

    .sub-btn {
        width: 100%;
        margin-top: 32rpx;
        margin-bottom: 32rpx;
    }

    /deep/.u-form-item--left__content__label {
        font-size: 30rpx;
        color: #000000;
    }
}
</style>