xiamen-sb-uniapp/pages/repair-reason/repair-reason-form.vue

<template>
    <view class="mx3" style="padding-bottom: 100rpx">
        <view class="main-color-bg" style="height: 100rpx; margin: 0 -30rpx"></view>
        <view
            class="p3 bg-color-white"
            style="margin-top: -50rpx; border-radius: 20rpx"
        >
            <u-form :model="form" ref="uForm" :label-width="180">
                <u-form-item label="编号" >
                    <u-input disabled v-model="form.no" />
                </u-form-item>
                <u-form-item label="分析时间" required prop="analyzeTime">
                    <my-calendar v-model="form.analyzeTime" />
                </u-form-item>
                <u-form-item label="故障部位">
                    <view class="d-flex a-center j-between" style="width: 100%">
                        <text>{{ form.sbPartName }}</text>
                        <u-button
                            @click="selectProject"
                            type="primary"
                            size="mini"
                        >选择</u-button>
                    </view>
                </u-form-item>
                <u-form-item label="故障现象" required prop="problemDesc">
                    <u-input type="textarea" v-model="form.problemDesc" />
                </u-form-item>
                <u-form-item label="检查处理过程" required prop="checkProcess">
                    <u-input type="textarea" v-model="form.checkProcess" />
                </u-form-item>
                <u-form-item label="原因分析" required prop="reasonAnalysis">
                    <u-input type="textarea" v-model="form.reasonAnalysis" />
                </u-form-item>
            </u-form>

            <view class="p-fixed d-flex j-around a-center footer">
                <view
                    class="main-color-bg text-color-white common"
                    :loading="confirmLoading"
                    @tap="submit"
                >提交</view
                >
            </view>
        </view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: '',
                sbId: '',
                repairId: '',
                sbPartId: '',
                no: '',
                analyzeTime: '',
                sbPartName: '',
                problemDesc: '',
                checkProcess: '',
                reasonAnalysis: ''
            },
            rules: {
                analyzeTime: [
                    {
                        required: true,
                        message: '分析时间不能为空',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: ['change', 'blur']
                    }
                ],
                problemDesc: [
                    {
                        required: true,
                        message: '故障现象不能为空',
                        trigger: 'blur'
                    }
                ],
                checkProcess: [
                    {
                        required: true,
                        message: '检查处理过程不能为空',
                        trigger: 'blur'
                    }
                ],
                reasonAnalysis: [
                    {
                        required: true,
                        message: '原因分析不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            confirmLoading: false
        };
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onShow() {
        const pages = getCurrentPages();
        const currPage = pages[pages.length - 1];
        if (currPage.bom) {
            this.form.sbPartId = currPage.bom.sbPartId;
            this.form.sbPartName = currPage.bom.sbPartName;
        }
    },
    onLoad(options) {
        if (options.id) {
            this.getInfo(options.id)
        } else {
            this.form = {
                ...this.form,
                ...options
            }
        }
    },
    methods: {
        // 提交
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    if (!this.form.id) {
                        this.$Http.addRepairReason(this.form)
                            .then((res) => {
                                this.confirmLoading = false
                                	this.$refs.uToast.show({
					title: '提交成功！',
					type: 'success',
					back : true
				})
                            }).catch(() => {
                                this.confirmLoading = false
                            })
                    } else {
                        this.$Http.updateRepairReason(this.form)
                            .then(() => {
                                this.confirmLoading = false

                                  	this.$refs.uToast.show({
					title: '提交成功！',
					type: 'success',
					back : true
				})
                            }).catch(() => {
                                this.confirmLoading = false
                            })
                    }
                } else {
                    console.log('验证失败');
                }
            });
        },
        getInfo(id) {
            this.$Http.finishRepairReason({ id })
                .then((res) => {
                    this.form = res.data
                })
        },
        selectProject() {
            uni.navigateTo({
                url: '/pages/repair-reason/repair-reason-select?sbId=' + this.form.sbId
            });
        }
    }
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.footer {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10000;
  border-top: 1rpx solid #f4f4f4;
  height: 100rpx;

  .common {
    padding: 15rpx 200rpx;
    border-radius: 30rpx;
    background-color: #0082ff;
    color: #fff;
  }
}
</style>