xiamen-sb-uniapp/pages/oiling/my-oiling-add.vue

<template>
    <view class="mx3">
        <view class="main-color-bg main-bg-future"></view>
        <view class="p3 bg-color-white form-view">
            <u-form :model="form" ref="uForm" >
                <u-form-item label="设备名称" prop="sbId" required label-width="150">
                    <my-select
                        :list="sbList"
                        :value-name="'id'"
                        :label-name="'sbName'"
                        v-model="form.sbId"
                        placeholder="请选择设备"
                        @selected="sbSelect"
                    />
                </u-form-item>
                <u-form-item label="仓库名称" prop="storeId" required label-width="150">
                    <my-select
                        :list="storeList"
                        :value-name="'id'"
                        :label-name="'name'"
                        v-model="form.storeId"
                        @selected="storeSelect"
                        placeholder="请选择仓库" />
                </u-form-item>
                <u-form-item label="燃油类型" prop="spareStoreId" required label-width="150">
                    <my-select
                        :list="spareList"
                        :value-name="'id'"
                        :label-name="'spareName'"
                        v-model="form.spareStoreId"
                        placeholder="请选燃油类型" />
                </u-form-item>

                <u-form-item label="用途" prop="reason" required label-width="150">
                    <my-select
                        :list="reasonList"
                        :value-name="'name'"
                        :label-name="'name'"
                        v-model="form.reason"
                        placeholder="请选用途" />

                </u-form-item>

                <u-form-item label="申请油量" prop="applyOil" required label-width="150">
                    <u-input :text="'number'" v-model="form.applyOil" />
                    <view slot="right">L</view>
                </u-form-item>

                <u-form-item label="申请说明" label-width="150">
                    <u-input type="textarea" v-model="form.applyRemark" />
                </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: {
                sbId: '',
                storeId: '',
                spareStoreId: '',
                applyOil: '',
                reason: '',
                applyRemark: ''
            },
            sbNameState: false,
            sbList: [],
            storeNameState: false,
            storeList: [],
            spareList: [],
            reasonList: [
                {
                    name: '施工领用',
                    value: '施工领用'
                }, {
                    name: '办公领用',
                    value: '办公领用'
                }, {
                    name: '维修领用',
                    value: '维修领用'
                }, {
                    name: '其他领用',
                    value: '其他领用'
                }
            ],
            rules: {
                sbId: [
                    {
                        required: true,
                        message: '请选择设备',
                        trigger: ['change']
                    }
                ],
                storeId: [
                    {
                        required: true,
                        message: '请选择仓库',
                        trigger: ['change']
                    }
                ],
                spareStoreId: [
                    {
                        required: true,
                        message: '请选择燃油类型',
                        trigger: ['change']
                    }
                ],
                reason: [
                    {
                        required: true,
                        message: '请选择用途',
                        trigger: ['change']
                    }
                ],
                applyOil: [
                    {
                        required: true,
                        message: '请输入申请加油量',
                        trigger: ['blur', 'change']
                    }
                ]
            },
            id: '' // 列表 id
        };
    },
    onShow() {
        // 获取设备与仓库
        this.initData();
    },
    onLoad(options) {},

    methods: {
        initData() {
            this.$Http.queryPageByFilter({ filter: 1, pageNum: 1, pageSize: 1000 }).then(res => {
                const sbList = res.data.rows;
                sbList.forEach(item => {
                    item.sbName = item.name + '-' + item.no;
                })
                this.sbList = sbList;
            });
            this.$Http.getStorePage({ filter: 2, pageNum: 1, pageSize: 10000 })
                .then(res => {
                    this.storeList = res.data.rows
                })
        },
        sbSelect(value, data) {
            this.$Http.fetchSbOilBySbId({ sbId: value }).then(res => {
                const modelData = res.data
                if (this.$BaseTool.Object.isNotBlank(modelData)) {
                    if (this.$BaseTool.Object.isNotBlank(modelData.applyOil)) {
                        modelData.applyOil = modelData.applyOil + ''
                    }
                    this.form = modelData
                }
            })
        },
        storeSelect() {
            this.spareList = []
            this.form.spareStoreId = ''
            this.$Http.getSpareStorePage({ pageNum: 1,
                pageSize: 10000,
                storeId: this.form.storeId,
                num: 0,
                typeNameLike: '燃油' }).then(res => {
                this.spareList = res.data.rows
            })
        },
        // 提交
        submit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.$Http.addSbOilList([this.form]).then(res => {
                        uni.redirectTo({
                            url: '/pages/oiling/my-oiling'
                        });
                    }).catch(() => {

                    })
                }
            });
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    }
};
</script>

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