<template> <view class="content flex flex_column" v-if="nowData"> <view class="form-body"> <u-form :model="nowData" label-width="180rpx" :error-type="['toast']" ref="uForm"> <view style="padding: 20upx 0;" v-if="nowData.shelfProductApi" > <view class="placeCode"> {{nowData.shelfPlaceCode}} </view> <view class="flex flex_1 align_center"> <view class="pimgs"> <u-image :src="nowData.product.images?nowData.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo flex_1"> <view class="ptxt flex align_center justify_between"> <text>{{nowData.productCode}}</text> <text class="pkuc"> 可用库存:<text>{{nowData.shelfProductApi.qty}}</text>{{nowData.product.unit}} </text> </view> <view class="pname"> {{nowData.product.productName}} </view> </view> </view> </view> <view style="padding: 20upx 0;" v-else> <u-form-item label="货位号" required prop="shelfPlaceCode"> <u-input v-model="nowData.shelfPlaceCode" @input="placeCodeBlur" :maxlength="30" placeholder="请输入货位号(字母+数字的格式)"/> </u-form-item> <u-gap height="10" bg-color="#f8f8f8"></u-gap> <u-form-item label="绑定产品" required prop="productSn"> <view class="pinfo" style="width: 100%;"> <view class="ptxt flex align_center justify_between"> <text>{{nowData.productCode}}</text> <text class="pcode" @click="toBindProduct"> <u-icon name='reload'></u-icon> 更换产品 </text> </view> </view> </u-form-item> <u-form-item label=""> <view class="flex flex_1 align_center"> <view class="pimgs"> <u-image :src="nowData.product.images?nowData.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo flex_1"> <view class="pname"> {{nowData.product.productName}} </view> </view> </view> </u-form-item> </view> <u-gap height="10" bg-color="#f8f8f8"></u-gap> <u-form-item label="本次上架数量" required prop="qty"> <view style="width: 100%;" class="flex justify_end"> <view class="u-ninput"> <u-number-box :min="1" :max="999999" positive-integer v-model="nowData.qty" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="150"></u-number-box> </view> </view> </u-form-item> </u-form> </view> <view class="flex footer-btn"> <u-button class="delbtn" :loading='loading' @click="handleDel" type='primary' shape="circle" size="medium">删除</u-button> <u-button :style="{width:type=='bind'?'45%':'100%'}" class="newbtn" :loading='loading' @click="formSubmit" type='primary' shape="circle" size="medium">保存</u-button> </view> </view> </template> <script> import { clzConfirm, numberToFixed } from '@/libs/tools'; import { shelfCartSave, shelfCartDelete} from '@/api/shelfCart.js' export default { data() { return { nowData: { shelfPlaceCode: '', productSn: '', qty: '', }, rules: { shelfPlaceCode:[ { required: true, message: '请输入货位号', trigger: 'change' }, { pattern: /^[a-zA-Z]{1}[0-9]{1,29}$/g, message: '必须字母开头且后面紧跟数字' } ], productSn: [{ required: true, message: '请选择绑定产品', trigger: 'change' }], qty: [{ required: true,type:'number', message: '请输入上架数量', trigger: 'change' }], }, shelfSn: null, customerSn: '', shelfName: null, loading: false, type:"", } }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, onLoad(opts) { const _this = this this.nowData = JSON.parse(JSON.stringify(this.$store.state.vuex_tempData)); console.log(this.nowData) this.shelfName = opts.shelfName this.shelfSn = opts.shelfSn this.customerSn = opts.customerSn this.type = this.nowData.shelfProductApi ? 'edit' : 'new' // 选在产品 uni.$on('addProductToHw',function(data){ console.log(data) _this.nowData.product.images = data.productMsg _this.nowData.product.productName = data.name _this.nowData.product.unit = data.unit _this.nowData.price = Number(data.price) _this.nowData.cost = Number(data.cost) _this.nowData.productCode = data.code _this.nowData.productSn = data.productSn }) }, onUnload(){ uni.$off("addProductToHw") this.$store.state.vuex_tempData = null }, methods: { placeCodeBlur(v){ this.$nextTick(() => { this.nowData.shelfPlaceCode = this.nowData.shelfPlaceCode.toLocaleUpperCase() }) }, // 更换产品 toBindProduct(){ uni.navigateTo({ url: "/pages/shelfSetting/bindProduct?customerSn="+this.customerSn+"&shelfSn="+this.shelfSn }) }, // 删除 handleDel(){ const _this = this clzConfirm({ title: '提示', content: '确认删除此货位和产品吗?', success (ret) { if (ret.confirm || ret.index == 0) { uni.showLoading({ title: '正在删除...' }) shelfCartDelete({ shelfCartSn: _this.nowData.shelfCartSn }).then(res => { console.log(res) if (res.status == 200) { _this.toashMsg(res.message) uni.navigateBack() } uni.hideLoading() }) } } }) }, // 表单提交 formSubmit(){ const _this = this this.$refs.uForm.validate(valid => { if (valid) { const row = _this.nowData uni.showLoading({ title: '正在保存...' }) _this.loading = true const params = { shelfSn: this.shelfSn, shelfName: this.shelfName, shelfTierCode: row.shelfTierCode, shelfPlaceSn: row.shelfPlaceSn||undefined, shelfPlaceCode: row.shelfPlaceCode, productSn: row.productSn, productCode: row.productCode, qty: row.qty, price: row.price, cost: row.terminalPrice, shelfCartSn: row.shelfCartSn } console.log(params) shelfCartSave(params).then(res => { if(res.status == 200){ this.toashMsg(res.message) uni.navigateBack() } uni.hideLoading() _this.loading = false }) } else { console.log('验证失败'); } }); }, } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; .placeCode{ text-align: center; border-radius: 20rpx; background-color: #eee; padding: 10upx 20upx; margin-bottom: 15upx; } .form-body{ > view{ background-color: #fff; padding: 0 1.5rem; } .pimgs{ padding:0.1rem; background:#f8f8f8; border-radius:0.3rem; padding-right: 20rpx; } .pinfo{ line-height:normal; color: #666; padding-left: 15rpx; .pcode{ color:rgb(0, 170, 255); } .pname{ font-weight: bold; } .pkuc{ width: 200rpx; color: #999; text{ color: #333; } } } .noproduct{ padding: 40rpx 20rpx; text-align: center; color: #999; >view{ padding: 10rpx 0; } text{ color: #00aaff; margin-left: 10rpx; } } .u-ninput{ border: 2rpx solid #eee; border-radius: 50rpx; padding: 0 6rpx; } ::v-deep .u-icon-disabled{ background: #fff!important; } ::v-deep .u-number-input{ margin: 0 0; border: 2rpx solid #eee; border-top: 0; border-bottom: 0; } ::v-deep .u-icon-plus, ::v-deep .u-icon-minus{ border-radius: 50rpx; } } .footer-btn{ padding: 2.5rem 1rem 0.5rem; justify-content: space-between; button{ min-width: 45%; margin: 0 20upx; } .newbtn{ background-color: rgb(51, 95, 182); color: #fff; } .delbtn{ background-color: #fff; color: red; } } } </style>