<template> <view class="p-content"> <view class="u-forms"> <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" errorType="toast" labelWidth="auto" > <u-form-item label="供应商" prop="supplierSn" borderBottom @click="showSupplier = true;" ref="item1" required > <u--input v-model="supplierName" disabled inputAlign="right" disabledColor="#ffffff" placeholder="请选择供应商" border="none" ></u--input> <u-icon slot="right" name="arrow-right" ></u-icon> </u-form-item> <u-form-item label="散件入库类型" prop="sparePartsType" borderBottom @click="showSparePartsType = true;" ref="item2" required > <u--input v-model="sparePartsType" disabled inputAlign="right" disabledColor="#ffffff" placeholder="请选择散件入库类型" border="none" ></u--input> <u-icon slot="right" name="arrow-right" ></u-icon> </u-form-item> <u-form-item label="备注" ref="item3" > <u--textarea v-model="form.remarks" :maxlength="200" border="bottom" placeholder="请输入备注(最多200字符)" count></u--textarea> </u-form-item> </u--form> </view> <view class="f-button"> <u-button @click="cansel" hairline>取消</u-button> <u-button type="primary" :loading="spinning" @click="submit" hairline>提交</u-button> </view> <!-- 选择供应商 --> <u-picker title="请选择供应商" :show="showSupplier" @cancel="showSupplier = false" @close="showSupplier = false" @confirm="supplierSelect" :columns="supplierList" :closeOnClickOverlay="true" keyName="supplierName"> </u-picker> <!-- 选择散件入库类型 --> <u-picker :show="showSparePartsType" :columns="sparePartsTypeList" title="请选择散件入库类型" keyName="name" @cancel="showSparePartsType = false" @close="showSparePartsType = false" @confirm="sparePartsTypeSelect" :closeOnClickOverlay="true" > </u-picker> </view> </template> <script> import {sparePartsPurSave} from '@/config/api.js' export default { data() { return { spinning: false, showSupplier: false, supplierList: [], showSparePartsType: false, sparePartsTypeList:[], form:{ supplierSn: undefined, sparePartsType: undefined, remarks: '' }, supplierName:'', sparePartsType:'', rules: { 'supplierSn': { type: 'string', required: true, message: '请选择供应商', trigger: ['blur', 'change'] }, 'sparePartsType': { type: 'string', required: true, message: '请选择散件入库类型', trigger: ['blur', 'change'] }, } }; }, methods: { // 选择供应商 supplierSelect(e) { console.log(e) this.form.supplierSn = e.value[0].supplierSn this.supplierName = e.value[0].supplierName this.$refs.uForm.validateField('supplierSn') this.showSupplier = false }, // 选择散件入库类型 sparePartsTypeSelect(e) { console.log(e) this.form.sparePartsType = e.value[0].sparePartsPutTypeSn this.sparePartsType = e.value[0].name this.$refs.uForm.validateField('sparePartsType') this.showSparePartsType = false }, // 保存 submit() { this.$refs.uForm.validate().then(res => { this.spinning = true this.form.sourceType = 'HAND' sparePartsPurSave(this.form,{custom:{catch:true}}).then(res => { console.log(res) if(res.status == 200){ uni.redirectTo({ url:"/pages/stockIn/index?sn="+res.data.sparePartsPurchaseSn+"&id="+res.data.id }) } this.spinning = false }).catch(res => { this.spinning = false }) }).catch(errors => { console.log('校验失败') }) }, cansel(){ uni.navigateBack() } }, onLoad() { this.supplierList = [this.$store.state.vuex_supplierList] this.sparePartsTypeList = [this.$store.state.vuex_sparePartsTypeList] console.log(this.supplierList) }, onBackPress(e) { if(this.showSupplier||this.showSparePartsType){ this.showSupplier = false this.showSparePartsType = false return true } }, onReady() { //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。 this.$refs.uForm.setRules(this.rules) }, }; </script> <style lang="scss"> .p-content{ .u-forms{ flex-grow: 1; height: 100%; overflow: auto; padding: 0 50upx; } .f-button{ display: flex; justify-content: space-around; padding: 60upx 40upx; button{ width: 40%; } } } </style>