<template> <view class="partList-box flex flex_column"> <view class="partList-list"> <view class="partList-list-box" v-for="item in partList" :key="item.productSn"> <view class="product flex align_center"> <view class="checkbox"> <u-checkbox v-model="item.checked" :name="item.productSn" @change="checkChange" size="40" shape="circle"></u-checkbox> </view> <view class="flex align_center flex_1" @click="checkChange({name:item.productSn})"> <view class="pimgs"> <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="pname"> <text>{{item.shelfPlaceCode}}</text> {{item.productCode}} </view> <view class="pname pname1"> {{item.productName}} </view> </view> </view> </view> <view class="ptxt flex align_center justify_end"> <view> 最大库容:<text class="pnums">{{item.maxQty}}</text> 当前库存:<text class="pnums">{{item.qty}}</text> 补货在途:<text class="pnums">{{item.afloatQty||0}}</text> </view> </view> <view class="ptools flex align_center justify_between"> <view></view> <view class="pcurnums flex align_center"> <text>补货数量</text> <view class="u-ninput"> <u-number-box color="#000" :long-press="false" :input-height="60" bg-color="#fff" v-model="item.printQty" :min="0" :max="999999"></u-number-box> </view> </view> </view> </view> <view class="nodata" v-if="partList.length==0"> <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="120" :text="noDataText" img-width="120" mode="list"></u-empty> </view> </view> </view> </template> <script> export default { props: { list: { type: Array, default: function(){ return [] } }, noDataText: { type: String, default: '暂无产品' }, title: { type: String, default: '列表' }, // model: checkbox 可选择模式,view 只显示 model: { type: String, default: 'checkbox' }, }, data() { return { partList: [], } }, methods: { setData(list){ const _this = this list.map(item => { item.printQty = item.replenishBillQty item.checked = false }) this.partList = list }, // 全选 allSelect(val){ this.partList.map(item => { item.checked = val }) this.partList.splice() }, checkChange(e){ const row = this.partList.find(item => item.productSn == e.name) if(row){ row.checked = !row.checked this.partList.splice() } // 判断是否全选 const isAllNoChecked = this.partList.filter(item => !item.checked) this.$emit('allChecked',isAllNoChecked.length == 0) }, // 获取所有选择的 getAllChecked(){ return this.partList.filter(item => item.checked && item.printQty) }, // 获取所有数据 getAllData(){ return this.partList }, // 数量 change numberChange(value, index){ this.$emit('numberChange', value, index) } } } </script> <style lang="less" scoped> .partList-box{ height: 100%; position: relative; .nodata{ padding: 10vh 0; } .partList-list{ flex-grow: 1; } .partList-list-box{ padding: 10px 0; border-bottom: 2rpx solid #f5f5f5; .product{ flex-grow: 1; .checkbox{ width: 60rpx; } .pinfo{ flex-grow: 1; padding-left: 20rpx; .pname{ color: #191919; margin-bottom: 5rpx; 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{ font-size: 28rpx; color: #999; .pnums{ color: #222; margin-right: 20upx; } } .ptools{ margin-top: 20rpx; .pcurnums{ > text{ margin-right: 20rpx; } } .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>