<template> <view class="productList flex flex_column"> <view class="productList-search"> <view class="search flex align_center"> <view class="input"> <u-search focus v-model="queryWord" @input="$u.debounce(getProductList, 800)" @custom="$u.debounce(getProductList, 500)" @search="$u.debounce(getProductList, 500)" @clear="clearSearch" bg-color="#fff" :show-action="false" placeholder="请输入产品编码查询"></u-search> </view> <!-- <view class="icon" @click="toScan"> <u-icon name="scan"></u-icon> </view> --> </view> </view> <view class="productList-body"> <view class="partList-list-box" v-for="item in productList" :key="item.shelfCartSn"> <view class="flex align_center flex_1"> <view class="pimgs"> <u-image :src="item.images?item.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="pname"> <text v-if="item.shelfCartApi&&item.shelfCartApi.shelfPlaceCode">{{item.shelfCartApi.shelfPlaceCode}}</text> {{item.productName}} </view> <view class="ptxt flex justify_between"> <text>{{item.code}}</text> <view v-if="item.shelfProductApi"> 可用库存:<text>{{item.shelfProductApi.qty}}</text>{{item.unit}} </view> </view> </view> </view> <view class="ptools flex align_center justify_between"> <view></view> <view class="pcurnums flex align_center"> <view class="u-ninput" v-if="item.shelfCartApi"> <u-number-box :index="item.id" @blur="updateNums" @minus="updateNums" @plus="updateNums" color="#000" bg-color="#fff" v-model="item.shelfCartApi.qty" :min="0"></u-number-box> </view> <view v-else> <u-button @click="addItem(item)" plain style="width: 40rpx;height: 40rpx;line-height: 40rpx;" size="mini" shape="circle"> <u-icon name="plus"></u-icon> </u-button> </view> </view> </view> </view> <view v-if="productList&&productList.length==0"> <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty> </view> </view> </view> </template> <script> import { queryProduct, shelfCartSave } from '@/api/shelfCart' export default { data() { return { shelfSn: null, shelfName: '', layer:'', queryWord: '', productList: [], total: 0, // 列表总数 noDataText: '暂无产品', status: 'nomore', shelfPlaceCode: '' } }, onLoad(options) { this.shelfSn = options.shelfSn this.layer = options.layer this.shelfName = options.shelfName uni.setNavigationBarTitle({ title: '按产品编码搜索——' +this.layer+'层' }) }, onNavigationBarButtonTap(e) { this.scanProduct() }, methods: { scanProduct(){ uni.redirectTo({ url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName }) }, clearSearch(){ this.queryWord = '' this.productList = [] this.getProductList() }, getProductList(){ const _this = this if(this.queryWord == ''){ this.productList = [] return } uni.showLoading({ title: "正在查询..." }) let params = { code: this.queryWord, shelfSn: this.shelfSn, shelfTierCode: this.layer } console.log(params) queryProduct(params).then(res => { console.log(res) if(res.status == 200&&res.data){ this.productList = res.data.productList.slice(0,20) this.shelfPlaceCode = res.data.shelfTierCode this.total = res.data.productList.length }else{ this.noDataText = '查询最近20条数据,没有匹配到相关产品,请输入更多内容' } uni.hideLoading() }) }, // 新增 addItem(item){ this.saveData(item,1) }, // 修改数量 updateNums(e){ console.log(e) const row = this.productList.find(item => item.id == e.index) const nums = e.value this.saveData(row,nums) }, saveData(row,nums){ // 继续修改数量 uni.showLoading({ title: '正在保存...' }) const params = { shelfSn: this.shelfSn, shelfName: this.shelfName, shelfTierCode: row.shelfCartApi?row.shelfCartApi.shelfTierCode:this.layer, shelfPlaceSn: row.shelfCartApi?row.shelfCartApi.shelfPlaceSn:'', shelfPlaceCode: row.shelfCartApi?row.shelfCartApi.shelfPlaceCode:this.shelfPlaceCode, productSn: row.productSn, productCode: row.code, qty: nums, price: row.price, cost: row.cost, shelfCartSn: row.shelfCartApi?row.shelfCartApi.shelfCartSn:'' } console.log(params) shelfCartSave(params).then(res => { if(res.status == 200){ this.toashMsg(res.message) this.getProductList() } uni.hideLoading() }) } } } </script> <style lang="less"> .productList{ width: 100%; height: 100vh; .productList-search{ padding: 20rpx 30rpx; background-color: #FFFFFF; .search{ padding: 0.1rem; border-radius: 50rpx; border:0.1rpx solid #eee; .input{ flex-grow: 1; padding: 0.1rpx; } .icon{ width: 13%; text-align: center; font-size: 46rpx; color: #999; } } } .productList-body{ flex-grow: 1; background-color: #fff; padding: 0 40upx; overflow: auto; .partList-list-box{ padding: 10px 0; border-bottom: 2rpx solid #f5f5f5; .pinfo{ flex-grow: 1; padding-left: 20rpx; .pname{ color: #191919; font-size: 24rpx; text{ font-weight: normal; margin-right: 10rpx; padding: 0 10rpx; background: rgba(3, 54, 146, 0.15); border-radius: 30rpx; color: #033692; font-size: 24rpx; } } .ptxt{ color: #666; font-size: 24rpx; padding: 10upx 0; } } .ptools{ color: #666; font-size: 24rpx; .u-ninput{ border: 2rpx solid #eee; border-radius: 50rpx; padding: 0 6rpx; } /deep/ .u-icon-disabled{ background: #fff!important; } /deep/ .u-number-input{ margin: 0 0; border: 2rpx solid #eee; border-top: 0; border-bottom: 0; } /deep/ .u-icon-plus, /deep/ .u-icon-minus{ border-radius: 50rpx; } } } } } </style>