laboratory_maintenance_app/pages/submission/components/subForm.vue

<template>
    <view class="">
        <view class="container">
            <view v-for="(item, index) in breakdownInfo" :key="index">
                <betone-header-top :titleMin="'故障信息'" />
                <u-form labelPosition="top" :rules="rules" :ref="`breakdownForm${index}`" :model="item">
                    <u-form-item prop="businessName" :border-bottom="false" label="设备名称">
                        <view @click="itemIndexFn(index)" style="width: 100%">
                            <betone-new-input :disabled="formDisabled" v-model="item.deviceName" placeholder="请输入"
                                endIcon="scan" @scanSuccess="scanSuccess" :endScanIndex="index" />
                        </view>
                    </u-form-item>
                    <u-form-item prop="businessName" :border-bottom="false" label="故障位置">
                        <u-input v-model="item.faultLocation" :disabled="formDisabled" type="text" :border="true"
                            placeholder="请输入" />
                    </u-form-item>
                    <u-form-item prop="businessName" :border-bottom="false" label="故障专业类型">
                        <u-input v-model="item.faultType" :disabled="formDisabled" type="text" :border="true"
                            placeholder="请输入" />
                    </u-form-item>
                    <u-form-item prop="faultDescribe" :border-bottom="false" label="故障描述:" :required="true">
                        <u-input v-model="item.faultDescribe" :disabled="formDisabled" type="textarea" :border="true"
                            placeholder="请输入" :height="150" />
                    </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'" 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.BetLoading.show();
        //     setTimeout(() => {
        //        this.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.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.BetLoading.hide();
                            validator = false
                            return
                        } else {
                            // 判断是新提交还是修改 
                            this.submit()

                        }
                    })

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


        },
        // 新提交
        submit() {
            this.$u.api.workOrderSave(this.breakdownInfo).then(res => {
                this.BetLoading.hide();
                if (res.code == 200) {
                    uni.navigateTo({
                        url: "/pages/submission/records",
                    });
                }
            }).catch(err => {
                this.BetLoading.hide();
            })
        },
        // 修改
        updateInfo() {
            let query_ = {
                ...this.breakdownInfo[0],
                id: this.pageId
            }
            this.$u.api.workOrderupdate(query_).then(res => {
                this.BetLoading.hide();
                if (res.code == 200) {
                    uni.redirectTo({
                        url: "/pages/submission/records",
                    });
                }
            }).catch(err => {
                this.BetLoading.hide();
            })
        },
        // 扫码成功
        scanSuccess(e, index) {
            // 扫码返回  设备id  
            let id_ = e.toString()
            this.$u.api.getDeviceDetail({ id: id_ }).then(res => {
                console.log(6666666, res)
                if (res.code == 200) {
                    this.breakdownInfo[index].deviceName = res.data.name
                    this.breakdownInfo[index].faultType = res.data.type
                }
            })
        }
    },

};
</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>