xiamen-sb-uniapp/pages/oiling/oiling-task.vue

<template>
    <view class="mx3">
        <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="150">
                <u-form-item label="设备名称">
                    <u-input :value="model.sbName" disabled />
                </u-form-item>
                <u-form-item label="设备编号">
                    <u-input :value="model.sbNo" disabled />
                </u-form-item>
                <u-form-item label="仓库名称">
                    <u-input :value="model.storeName" disabled />
                </u-form-item>
                <u-form-item label="申请油量">
                    <u-input :value="model.applyOil" disabled />
                    <view slot="right">L</view>
                </u-form-item>
                <u-form-item label="申请说明">
                    <u-input type="textarea" :value="model.applyRemark" disabled />
                </u-form-item>

                <u-form-item label="实际加油量" prop="realOil">
                    <u-input text="number" v-model="form.realOil" />
                    <view slot="right">L</view>
                </u-form-item>

                <u-form-item label="加油说明">
                    <u-input type="textarea" v-model="form.handleRemark" />
                </u-form-item>
            </u-form>
        </view>
        <view class="mt-3">
            <u-button @click="submit" type="primary" shape="circle">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: null,
                realOil: '',
                handleRemark: ''
            },
            model: {
                sbId: null,
                storeId: null,
                userId: null,
                userName: null,
                storeUserId: null,
                storeUserName: null,
                status: null,
                applyOil: null,
                realOil: null,
                applyRemark: null,
                handleRemark: null,
                remark: null,
                createdUserId: null,
                updateUserId: null,
                updateUserName: null,
                updateTime: null,
                isOiL: null,
                isAudit: null,
                isUpdate: null,
                auditType: null,
                auditUserName: null
            },

            rules: {
                realOil: [
                    {
                        required: true,
                        message: '请输入加油量',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            id: '' // 列表 id
        };
    },
    onLoad(options) {
        this.$Http.fetchSbOil({ id: options.id }).then(res => {
            this.model = res.data;
            this.form.handleRemark = this.model.handleRemark;
            this.form.realOil = this.model.realOil ? this.model.realOil + '' : this.model.applyOil + '';
        });
    },

    methods: {
        storeNameSubmit(data) {
            this.form.storeName = data[0].label;
        },
        sbNameSubmit(data) {
            this.form.sbName = data[0].label;
        },
        // 提交
        submit() {
            console.log(this.form);
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.form.id = this.model.id;
                    this.$Http.updateOilSbOil(this.form).then(res => {
                        uni.redirectTo({
                            url: '/pages/oiling/oiling'
                        });
                    }).catch(() => {

                    })
                } else {
                    console.log('验证失败');
                }
            });
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    }
};
</script>

<style>
page {
    background-color: #f4f4f4;
}
</style>