<template> <view class="content flex flex_column"> <u-navbar back-text="新增调回单" :border-bottom="false" :background="{backgroundColor: $config('primaryColor')}" back-icon-color="#fff" :back-text-style="{ color: '#fff' }"> <template v-slot:right> <view style="padding: 0 30upx;color: #ffffff;" v-if="recallBillList.length" @click="toChooseProduct"> <u-icon name="chuangjiandingdan" custom-prefix="iscm-icon"></u-icon> <text style="margin-left: 6rpx;">选择产品</text> </view> </template> </u-navbar> <view class="headerName u-flex"> <text class="barBox"></text> <view class="shelfName u-line-1">{{ shelfName }}</view> <!-- <view class="screeningBox" @click="chooseShow = true"> <text>滞销天数</text> <u-icon color="#666666" size="36" name="shaixuan" custom-prefix="iscm-icon"></u-icon> </view> --> </view> <view class="backOrderCon"> <view v-if="recallBillList && recallBillList.length>0"> <view class="partList-list-box" v-for="(item,index) in recallBillList" :key="item.id"> <view class="product flex align_center"> <view class="uni-col-1" @click="delDetail(item,index)"> <u-icon name="close-circle" color="#ff5500" size="35"></u-icon> </view> <view class="flex flex_1"> <view class="pimgs"> <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="pname item-name"> <text>{{item.shelfPlaceCode}}</text> {{item.productCode}} </view> <view class="productName u-line-2"> {{item.productName}} </view> <view class="ptxt flex align_center"> <view> 最大库容 <text class="pnums">{{item.maxQty}}</text> </view> <view> /货架库存 <text class="pnums">{{item.qty}}</text> </view> <view> /滞销 <text class="pnums">{{!item.unsalableDays || (item.unsalableDays&&item.unsalableDays) == 0 ?'--天':item.unsalableDays}}</text> </view> </view> </view> </view> </view> <view class="ptools flex align_center u-row-between"> <view class="ptools_l u-flex"> <view v-if="item.replenishBillQty && item.replenishBillQty!=0"> 补货在途 <text class="pnums">{{item.replenishBillQty}}</text> </view> <view v-if="item.recallBillQty && item.recallBillQty!=0"> {{item.replenishBillQty && item.replenishBillQty!=0 ? '/':''}}调回在途 <text class="pnums">{{item.recallBillQty}}</text> </view> </view> <view class="pcurnums flex align_center"> <text>调回数量</text> <view class="u-ninput"><u-number-box color="#000" bg-color="#fff" :input-height="60" v-model="item.confirmQty" :min="item.recallBillQty?item.qty - item.recallBillQty>0 ?1 :0 :1" :max="item.recallBillQty?item.qty - item.recallBillQty>0 ?item.qty - item.recallBillQty :0 :item.qty"></u-number-box></view> </view> </view> </view> </view> <view class="nodata" v-else> <image :src="`/static/${$config('themePath')}/def_no_data@3x.png`"></image> <view class="nodataTip"> 暂无产品,请点击 <text @click="toChooseProduct">选择产品</text> </view> </view> </view> <view class="backOrderFooter u-flex" :style="{zIndex:(detailFlag? 99999:11)}"> <view class="footerBox u-flex u-row-between"> <view class="footerBox_m u-flex"> <view class="middle_l"> 已选 <text>{{totalCategory}}</text> 款/<text>{{totalQty}}</text>件 </view> <view class="middle_r" @click="clearList" v-if="recallBillList && recallBillList.length>0"> 清空列表 </view> </view> <view class="footerBox_r"><u-button size="medium" @click="addBackOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >新增调回单</u-button></view> </view> </view> </view> </template> <script> import { reportPage } from '@/api/vinLog'; import { controlQueryList,insert } from '@/api/shelf'; import productList from './productList.vue' import { clzConfirm } from '@/libs/tools' export default { components: { productList }, data() { return { shelfSn: '', shelfName: '', recallBillList:[],//回调单列表 chooseArr:[], noDataText: '暂无产品,请点击选择产品', totalNum: 0, detailFlag:false,//查看详情 chooseShow: false,//滞销天数弹窗 theme: '', customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, allChecked: false, keyword: '',//搜索 queryParam: { // 查询条件 shelfSn:undefined, productCode: undefined, productName: undefined, unsalableDaysBegin: undefined, unsalableDaysEnd: undefined, queryWord:undefined }, }; }, onLoad(options) { const _this = this _this.theme = getApp({ allowDefault: true }).globalData.theme; _this.shelfSn = options.shelfSn; _this.shelfName = options.shelfName; _this.recallBillList=_this.$store.state.vuex_shuntBackList || [] uni.$on("chooseBackProduct",function(data){ _this.recallBillList = _this.recallBillList.concat(data).sort(function(a,b){ return (a.shelfPlaceCode+'').localeCompare(b.shelfPlaceCode+''); }); }) }, onBackPress(e) { if (this.sortShow && e.from == "backbutton") { this.chooseShow = false; this.detailPopup = false; return true; } }, computed: { totalCategory () { return this.recallBillList.length }, totalQty () { let ret = 0 this.recallBillList.map(item => { ret = ret + item.confirmQty }) return ret }, chooseKey(){ let ret = [] this.recallBillList.map(item => { ret.push(item.id) }) return ret }, }, methods: { toChooseProduct(){ let nowData={ shelfSn:this.shelfSn, shelfName:this.shelfName, chooseKey :this.chooseKey } uni.navigateTo({ url: "/pages/shuntBackManage/chooseProduct?data="+encodeURIComponent(JSON.stringify(nowData)) }) }, //清空列表 clearList(){ const _this = this clzConfirm({ title: '提示', content: '确认要清空列表吗?', success (ret) { if (ret.confirm || ret.index == 0) { _this.clearChoose() } } }) }, clearChoose(){ this.recallBillList = [] }, //删除调回单列表 delDetail(item,i){ const index = this.recallBillList.findIndex(k => k.id == item.id) this.recallBillList.splice(index,1) // 全部清空 if(this.recallBillList.length==0){ this.clearChoose() } }, addBackOrder(){ const arr = [] const arrInd = [] if(this.recallBillList.length == 0){ uni.showToast({ title:'请先选择调回产品', icon:'none' }) return; } this.recallBillList.forEach((item, index) => { if (item.confirmQty * 1>0) { arr.push({ shelfSn: item.shelfSn, shelfPlaceSn: item.shelfPlaceSn, shelfPlaceCode: item.shelfPlaceCode, productSn: item.productSn, productCode: item.productCode, productName: item.productName, qty: item.confirmQty }) } else { arrInd.push(index + 1) } }) if (arrInd.length > 0) { uni.showToast({ title:'调回数量不能为空或0,请移除后提交', icon:'none' }) return } uni.showLoading({ title: '保存中...' }); const params = { shelfSn: this.shelfSn, detailList: arr } insert(params).then(res => { if (res.status == 200) { uni.showToast({ title:res.message }) setTimeout(()=>{ uni.redirectTo({ url:'/pages/shuntBackManage/cancellingStocks?sn='+res.data }) },800) } uni.hideLoading() }); }, // 校验滞销天数数值范围 checkValueRange () { const isONull = this.queryParam.unsalableDaysBegin === null || this.queryParam.unsalableDaysBegin === undefined const isOEmpty = this.queryParam.unsalableDaysBegin === '' const isOZero = this.queryParam.unsalableDaysBegin === 0 const isTNull = this.queryParam.unsalableDaysEnd === null || this.queryParam.unsalableDaysEnd === undefined const isTEmpty = this.queryParam.unsalableDaysEnd === '' const isTZero = this.queryParam.unsalableDaysEnd === 0 // 第一个为空(可为null可为空字符)第二个不为空 // 第一个不为空第二个为空(可为null可为空字符) // 第一个大于第二个 if ((isONull || isOEmpty) && (this.queryParam.unsalableDaysEnd || isTZero)) { uni.showToast({ title:'请输入正确的滞销天数查询范围!', icon:'none' }) return false } if ((this.queryParam.unsalableDaysBegin || isOZero) && (isTNull || isTEmpty)) { uni.showToast({ title:'请输入正确的滞销天数查询范围!', icon:'none' }) return false } if (this.queryParam.unsalableDaysBegin*1 > this.queryParam.unsalableDaysEnd *1) { uni.showToast({ title:'请输入正确的滞销天数查询范围!', icon:'none' }) return false } this.queryParam.unsalableDaysBegin = this.queryParam.unsalableDaysBegin > 999999999 ? 999999999 : this.queryParam.unsalableDaysBegin this.queryParam.unsalableDaysEnd = this.queryParam.unsalableDaysEnd > 999999999 ? 999999999 : this.queryParam.unsalableDaysEnd return true } } }; </script> <style lang="less" scoped> .content { background: #ffffff; width: 100%; height: 100vh; .headerName { padding:20rpx 20rpx 16rpx; color: #222; font-size: 30rpx; .barBox { display: block; height: 30rpx; width: 6rpx; background: #0485f6; margin-right: 10rpx; border-radius: 10rpx; } .shelfName { font-weight: bold; width: calc(100% - 16rpx); } .screeningBox { font-size: 26rpx; width: 150rpx; text-align: right; text { vertical-align: top; } } } .backOrderCon { width: 100%; flex-grow:1; overflow: auto; .partList-list-box { width: 100%; padding: 10px 20rpx; box-sizing: border-box; border-bottom: 2rpx solid #f5f5f5; &:last-child { border: 0; } .product { flex-grow: 1; .checkbox { width: 60rpx; } .pinfo { flex-grow: 1; padding-left: 20rpx; .pname { font-size: 26rpx; color:#222; 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; } } .productName{ width: 100%; font-size: 26rpx; margin:6rpx 0; } .pno { background-color: rgba(3, 54, 146, 0.15); border-radius: 50rpx; padding: 0 20rpx; color: #033692; font-size: 24rpx; margin-right: 10rpx; } .ptxt { font-size: 24rpx; color: #999; .pnums { color: #222; padding: 0 4upx; } } } } .ptools { margin-top: 30rpx; margin-left: 60rpx; .ptools_l{ font-size: 24rpx; color: #999; view{ :nth-child(2)::before{ content: '/'; } } .pnums { color: #ff5500; padding: 0 4rpx; } } .pcurnums { > text { font-size: 24rpx; color: #999; margin-right: 20rpx; } } .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; } } } .nodata{ text-align: center; image{ width: 180rpx; height: 180rpx; margin-top: 200rpx; } .nodataTip{ text{ color: #00aaff; margin-left: 10rpx; margin-top: 20rpx; } } } } .backOrderFooter { height: 98rpx; box-sizing: border-box; padding: 10rpx 20rpx; position: relative; background-color: #f8f8f8; .footerBox { width: 100%; .footerBox_m { .middle_l { text { color: red; margin: 0 6rpx; } } .middle_r { font-size: 24rpx; color: #999; margin-left: 10rpx; color: red; } } .footerBox_r { width: 200rpx; button { width: 100%; font-size: 26rpx; } } } } } </style>