addStock.vue 12.8 KB
<template>
    <div class="inStockAdd">
        <div style="height: 100vh;margin: 0 auto;padding: 16px">
            <div style="margin: 30px 0px">
                <div class="divider_my"><span class="midText">叶酸库存录入</span></div>
            </div>
            <div style="margin-top: 20px">
                <a-form-model ref="formRef" :model="formData" :rules="formRules"
                              :labelCol="{span: 6}"
                              :wrapperCol="{span: 16}"
                >
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="供应商" prop="supplierId">
                                <a-select v-model="formData.supplierId"
                                          placeholder="请选择供应商"
                                          :dropdownMatchSelectWidth="false"
                                          @click.native="getAllSupply"
                                >
                                    <a-select-option v-for="item in allSupplyInfo" :key="item.id"
                                                     :value="item.id">{{item.supplierName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="品牌" prop="brandId">
                                <a-select v-model="formData.brandId"
                                          placeholder="请选择叶酸品牌"
                                          :dropdownMatchSelectWidth="false"
                                >
                                    <a-select-option v-for="item in brandNameList" :key="item.enumValue"
                                                     :value="item.enumValue">{{item.enumName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="批次号" prop="batchNumber">
                                <a-input
                                        v-toInputNum="{num:10}"
                                        v-model="formData.batchNumber"
                                         placeholder="请输入批次号,最多可输入10个字"></a-input>
                            </a-form-model-item>

                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="生产日期" prop="produceDate">
                                <a-date-picker v-model="formData.produceDate" format="YYYY-MM-DD" style="width: 100%"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="有效期至" prop="expireDate">
                                <a-date-picker v-model="formData.expireDate" format="YYYY-MM-DD" style="width: 100%"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                           <!-- @change="changeUnitPrice({digit:2, maxNum: 10000})"-->
                            <a-form-model-item label="单价" prop="unitPrice">
                                <a-input
                                         v-price="{digit:2, maxNum:10000}"
                                         v-model="formData.unitPrice"
                                         placeholder="0~10000,最多保留2位小数"

                                >
                                    <span slot="addonAfter"></span>
                                </a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="采购日期" prop="purchDate">
                                <a-date-picker v-model="formData.purchDate" format="YYYY-MM-DD" style="width: 100%"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="数量" prop="number">
                                <a-input v-toInt="{maxNum:10000000}"
                                         v-model="formData.number"
                                         placeholder="0~10000000">
                                    <a-select slot="addonAfter" v-model="formData.specs" default-value="瓶"
                                              style="width: 60px">
                                        <a-select-option value="瓶">

                                        </a-select-option>
                                        <a-select-option value="盒">

                                        </a-select-option>

                                    </a-select>
                                </a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="入库时间" prop="enterDate">
                                <a-date-picker v-model="formData.enterDate" format="YYYY-MM-DD" style="width: 100%"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="入库经手人" prop="handler">
                                <a-input
                                        v-toInputNum="{num:15}"
                                        v-model="formData.handler"
                                        placeholder="请输入入库经手人,最多可输入15个字"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="备注"
                                               prop="remarks"
                                               :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-textarea
                                        :rows="6"
                                        :maxLength="500"
                                        v-model="formData.remarks"
                                        placeholder="请输入备注,最多500个字"></a-textarea>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
            <div style="text-align: center">
                <a-button class="search_btn btn_space ant-table-btn" @click="goBack">取消</a-button>
                <a-button type="primary" class="search_btn btn_space" :loading="subLoad" style="margin-left: 10px"
                          @click="submitForm">库存录入
                </a-button>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment'
    import {closedDetail, getEnumByFlag} from "../../../utils/common";
    import commonCode from "../../../commonCode";

    export default {
        components: {},
        data() {
            return {
                brandNameList: [],
                subLoad: false,
                // form表单
                formData: {
                    brandId: undefined,
                    batchNumber: undefined,
                    supplierId: undefined,
                    unitPrice: undefined,
                    produceDate: undefined,
                    expireDate: undefined,
                    purchDate: undefined,
                    enterDate: undefined,
                    handler: undefined,
                    number: undefined,
                    specs: '瓶',
                    remarks: undefined
                },
                formRules: {
                    brandId: [
                        {required: true, message: '请选择品牌'}
                    ],
                    batchNumber: [
                        {required: true, message: '请输入批次号'}
                    ],
                    supplierId: [
                        {required: true, message: '请选择供应商'}
                    ],
                    number: [
                        {required: true, message: '请输入数量'}
                    ],
                    produceDate: [
                        {required: true, message: '请选择日期'}
                    ],
                    expireDate: [
                        {required: true, message: '请选择日期'}
                    ],
                    purchDate: [
                        {required: true, message: '请选择日期'}
                    ],
                    enterDate: [
                        {required: true, message: '请选择日期'}
                    ],
                    unitPrice: [
                        {required: true, message: '请输入单价'}
                    ],
                    handler:[
                        {required: true, message: '请输入入库经手人'}
                    ],
                    remarks: [
                        {required: false, message: '请输入备注'}
                    ],
                },
                allSupplyInfo: []
            }
        },
        created() {
            this.brandNameList = getEnumByFlag('folacin_stock_record_brand_id')
        },
        methods: {
            getAllSupply() {
                let par = {}
                this.$api.common.fetchAllSupply(par).then(({data = []}) => {
                    this.allSupplyInfo = data
                })
            },
            // 弹窗确定按钮
            submitForm() {
                let vm = this;
                this.$refs.formRef.validate(valid => {
                    if (valid) {
                        this.subLoad = true;
                        let pars = {};
                        Object.assign(pars, vm.formData);
                        console.log(pars);
                        pars.unitPrice = Number(pars.unitPrice).toFixed(2);
                        pars.produceDate = moment(vm.formData.produceDate).format('YYYY-MM-DD');
                        pars.expireDate = moment(vm.formData.expireDate).format('YYYY-MM-DD');
                        pars.purchDate = moment(vm.formData.purchDate).format('YYYY-MM-DD');
                        pars.enterDate = moment(vm.formData.enterDate).format('YYYY-MM-DD');
                        let par = {
                            ...pars
                        };
                        vm.$api.stockManage.addHistoryStock(par).then(res => {
                            if (res.code === 'SUCCESS') {
                                vm.subLoad = false;
                                vm.$message.success('录入成功!')
                                vm.goBack();
                            } else {
                                vm.subLoad = false
                            }
                        }).catch(() => {
                            vm.subLoad = false
                        })
                    }
                });
            },
            changeUnitPrice(val) {
                if (val.maxNum && this.formData.unitPrice > val.maxNum) {
                    this.formData.unitPrice = val.maxNum
                }
                let num = new RegExp(`(^[\\-0-9][0-9]*(.[0-9]+)?)$`) // 是否为数字
                let littleNum = new RegExp(`^(0|[1-9]\\d{0,${val.digit}})(\\.\\d{1,${val.digit}})?$`)//自定义小数位数
                if (this.formData.unitPrice &&!num.test(+this.formData.unitPrice)) {
                    this.formData.unitPrice = this.formData.unitPrice.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
                }
                if (this.formData.unitPrice && !littleNum.test(+this.formData.unitPrice)) {
                    this.formData.unitPrice = this.formData.unitPrice.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
                    this.formData.unitPrice = this.formData.unitPrice.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                    this.formData.unitPrice = this.formData.unitPrice.replace(new RegExp(`^(.*\\..{${defu}}).*$`), "$1");//只能输入自定义个小数
                }
            },
            goBack() {
                closedDetail('/inStock/add', '/Home/inStock')
            }
        },
    }
</script>
<style lang="less" scoped>

</style>