xiamen-sb-uniapp/pages/receive/receive-add.vue

<template>
    <view class="mx3">
        <my-add-button @handleClick="openSpare" />
        <view class="main-color-bg main-bg-future"></view>
        <view class="p3 bg-color-white form-view">
            <u-form :model="form" :error-type="['message']" ref="uForm" >
                <view class="main-color-text f-size-32 f-weight-6">领用信息</view>
                <u-form-item label="仓库名称" prop="storeId" required label-width="150">
                    <my-select
                        :list="storeList"
                        :value-name="'id'"
                        :label-name="'name'"
                        v-model="form.storeId"
                        placeholder="请选择仓库"
                        @selected="storeSelect"
                    />
                </u-form-item>

                <u-form-item label="备品用途" prop="type" required label-width="150">
                    <my-select
                        :list="reasonList"
                        v-model="form.reason"
                        @selected="typeSelect"
                        placeholder="请选择备品用途" />
                </u-form-item>

                <u-form-item label="领用说明" label-width="150">
                    <u-input type="textarea" v-model="form.remark" />
                </u-form-item>

            </u-form>
        </view>

        <!-- <view class="m3">
            <u-button @click="openSpare" type="primary" shape="circle">添加领用明细</u-button>
        </view> -->

        <view class="p3 bg-color-white form-view mt-3-imt" v-if="receiveDetailFormList && receiveDetailFormList.length>0">
            <!-- <view class="main-color-text f-size-32 f-weight-6">领用明细</view> -->

            <u-form
                :error-type="['message']"
                v-for="(item,index) in receiveDetailFormList"
                :key="index"
                :model="receiveDetailFormList[index]"
                :ref="item.formName"
                >
                <view class="main-color-text f-size-32 f-weight-6 d-flex j-between" @tap="del(index)">
                    领用明细
                    <u-icon name="close-circle" color="red"></u-icon>
                </view>
                <u-form-item label="名称" prop="spareId" required label-width="150">
<!--                    <my-select
                        :list="sbSpareList"
                        :value-name="'spareId'"
                        :label-name="'spareName'"
                        v-model="item.spareId"
                        @selected="spareSelect"
                        placeholder="请选择备品"
                    />-->
                    <u-input
                        v-model="item.spareName"
                        disabled
                        @click="handleSelect(item.formName)"
                        placeholder="请选择"
                        type="select"
                    />
                </u-form-item>

                <u-form-item label="数量" prop="num" required label-width="150">
                    <u-input type="number" v-model="item.num" />
                </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: {
                storeId: '',
                type: '',
                reason: '',
                storeName: null
            },
            receiveDetailFormList: [

            ],
            backSpareId: '',
            backSpareName: '',
            backFormName: '',
            backPrice: 0,
            isRefreshDetail: true,
            sbSpareList: [],
            storeList: [],
            reasonList: [
                {
                    label: '施工领用',
                    value: '施工领用'
                }, {
                    label: '办公领用',
                    value: '办公领用'
                }, {
                    label: '维修领用',
                    value: '维修领用'
                }, {
                    label: '其他领用',
                    value: '其他领用'
                }
            ],
            rules: {
                reason: [
                    {
                        required: true,
                        message: '请选择备品用途',
                        trigger: ['change']
                    }
                ],
                storeId: [
                    {
                        required: true,
                        message: '请选择仓库',
                        trigger: ['change']
                    }
                ]
            },
            detailFormRules: {
                spareId: [
                    {
                        required: true,
                        message: '请选择备品',
                        trigger: ['change']
                    }
                ],
                num: [
                    {
                        required: true,
                        message: '请填写数量',
                        trigger: ['change', 'blur']
                    }
                ]
            },
            id: '', // 列表 id
            aId: 0
        };
    },
    created () {
    },
    onShow() {
        // 获取设备与仓库
        this.initData();
        const pages = getCurrentPages();
        const currPage = pages[pages.length - 1];
        if(currPage.backSpareId != null ){
            this.backSpareId = currPage.backSpareId;
            this.backSpareName = currPage.backSpareName;
            this.backFormName = currPage.backFormName;
            this.receiveDetailFormList.forEach(spare => {
                if (spare.formName === currPage.backFormName) {
                    spare.spareId = currPage.backSpareId;
                    spare.spareName = currPage.backSpareName;
                    spare.price = currPage.backPrice;
                }
            })
        }
    },
    onLoad(options) {},

    methods: {
        del(index) {
            console.log(this.receiveDetailFormList);
            this.receiveDetailFormList.splice(index, 1)
            console.log(this.receiveDetailFormList);
        },
        handleSelect(formName) {
            console.log('formName:' + formName)
            uni.navigateTo({
                url: '/pages/search/spare-search?storeId=' + encodeURIComponent(JSON.stringify(this.form.storeId)) + '&formName=' + encodeURIComponent(JSON.stringify(formName))
            })
        },
        initData() {
            if(this.storeList.length == 0){
                this.$Http.getStorePage({ filter: 2, pageNum: 1, pageSize: 1000 })
                    .then(res => {
                        this.storeList = res.data.rows
                    })
            }
        },
        openSpare() {
            /* if (this.$BaseTool.Object.isBlank(this.form.type)) {
                uni.showToast({
                    title: '请先选择备品用途',
                    icon: 'none'
                });
                return
            } */
            if (this.$BaseTool.String.isBlank(this.form.storeId)) {
                uni.showToast({
                    title: '请先选择仓库',
                    icon: 'none'
                });
                return
            }
            this.aId++
            const detailForm = {
                spareId: '',
                num: '1',
                spareName: '',
                formName: 'form' + this.aId,
                price: '',
                item: null
            };
            if (!this.isRefreshDetail) {
                this.receiveDetailFormList.push(detailForm)
                this.$nextTick(() => {
                    this.$refs[detailForm.formName][0].setRules(this.detailFormRules);
                })
                return
            }

            if (!this.isRefreshDetail && this.sbSpareList != null && this.sbSpareList.length > 0) {
                return
            }
            this.$Http.getSpareStorePage({
                storeId: this.form.storeId,
                num: 0,
                pageNum: 1,
                pageSize: 10000,
                dataScope: {
                    sortBy: 'desc',
                    sortName: 'update_time'
                }
            }).then(res => {
                const sbSpareList = res.data.rows
                if (sbSpareList == null || sbSpareList.length === 0) {
                    this.isRefreshDetail = true;
                    uni.showToast({
                        title: '该仓库没有备品',
                        icon: 'none'
                    });
                    return
                }
                this.sbSpareList = res.data.rows
                this.receiveDetailFormList.push(detailForm)
                this.$nextTick(() => {
                    this.$refs[detailForm.formName][0].setRules(this.detailFormRules);
                })
                this.isRefreshDetail = false;
            })
        },
        storeSelect(value, item) {
            this.form.storeName = item.name;
            this.isRefreshDetail = true;
            this.receiveDetailFormList = []
        },
        typeSelect(value, item) {
            this.isRefreshDetail = true;
            //this.receiveDetailFormList = []
        },
        spareSelect(value, item) {
            this.receiveDetailFormList.forEach(spare => {
                if (spare.spareId === item.spareId) {
                    spare.item = item;
                } else {
                    console.log(2222, spare.spareId, item.id)
                }
            })
        },
        // 提交
        submit() {
            if (this.receiveDetailFormList == null || this.receiveDetailFormList.length === 0) {
                uni.showToast({
                    title: '请添加领用明细',
                    icon: 'none'
                });
                return
            }
            const promiseList = []
            promiseList.push(
                new Promise((resolve, reject) => {
                    this.$refs.uForm.validate().then(valid => {
                        if (valid) {
                            resolve(valid);
                        } else {
                            reject(valid);
                        }
                    })
                })
            );
            this.receiveDetailFormList.forEach(item => {
                promiseList.push(
                    new Promise((resolve, reject) => {
                        this.$refs[item.formName][0].validate(valid => {
                            if (valid) {
                                resolve(valid);
                            } else {
                                reject(valid);
                            }
                        })
                    })
                );
            })
            Promise.all(promiseList).then(res => {
                // 执行
                const params = { ...this.form }
                const detailList = []
                this.receiveDetailFormList.forEach(item => {
                    const space = item.item;
                    const detail = {
                        spareId: item.spareId,
                        num: item.num,
                        price: item.price,
                        spareName: item.spareName,
                        storeNum: item.num,
                        totalPrice: this.$BaseTool.Number.mul(item.num, item.price)
                    }
                    detailList.push(detail);
                })
                params.detailList = detailList;
                console.log(33, params)
                this.$Http.addSparePickForm(params).then(res => {
                    uni.redirectTo({
                        url: '/pages/receive/receive'
                    });
                })
            }, err => {
                console.log(err)
            })
        }
    },
    onReady() {
        console.log(4444, this.$refs.uForm)
        this.$refs.uForm.setRules(this.rules);
    }
};
</script>

<style lang="less">
    page {
        background-color: #f4f4f4;
    }
    .mt-3-imt {
        margin-top: 30rpx;
    }
</style>