<template> <view class="content flex flex_column"> <view class="searchBar"> <view class="p-title flex align_center"> <text></text> <view class="shelfName"> <view>{{nowData.shelfName}}</view> </view> <view class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view> </view> <view class="search flex align_center"> <view class="input"> <u-search v-model="queryWord" @custom="getpartList" @search="getpartList" @clear="clearSearch" @input="$u.debounce(changeSearch, 800)" 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="check-list"> <productList ref="productList" noDataText="暂无产品" @updateNums="updateNums" @allChecked="allCheckedCallback"></productList> </view> <!-- 底部栏 --> <view class="footer-bar flex align_center" v-if="partList.length"> <view class="f-left"> <u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox> </view> <view class="f-mid"> <view v-if="totalCategory"> 已选<text>{{totalCategory}}</text>款产品 </view> </view> <view class="f-btns"> <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >确定选择</u-button> </view> </view> <!-- 筛选项 --> <u-popup v-model="showTab" mode="right" width="70%"> <view class="tabBox flex flex_column"> <view class="tabs"> <u-checkbox-group wrap @change="checkboxGroupChange"> <u-checkbox v-model="item.checked" v-for="(item, index) in queryKeys" :key="index" :name="item.code" >{{item.name}}</u-checkbox> </u-checkbox-group> </view> <view class="btns"> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="changeSearch">查询</u-button> </view> </view> </u-popup> </view> </template> <script> import { queryProductListForReplenish } from '@/api/shelf' import { saveMainAndDetail } from '@/api/shelfReplenish' import productList from './productList.vue' import { clzConfirm } from '@/libs/tools' export default { components: { productList }, data() { return { queryWord: '', nowData:null, detail:null, pageNo:1, pageSize: 20, total: 0, // 列表总数 noDataText: '暂无产品', status: 'loading', partList: [], allChecked: false, showTab: false, customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, orderTotal: 0, chooseList: [], tempData: null, queryKeys: [ { name: '库存充足', code: 'stockEnough', checked: false }, { name: '部分缺货', code: 'portionStockout', checked: false }, { name: '全部缺货', code: 'allStockout', checked: false } ], stockStateList:[] } }, onNavigationBarButtonTap(e) { if(e.index == 0){ uni.navigateTo({ url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn }) } }, onBackPress(e) { if(this.showTab) { this.showTab = false; return true; } }, onLoad(opts) { this.nowData = JSON.parse(decodeURIComponent(opts.data)); this.getpartList() }, computed: { totalCategory () { return this.chooseList.length }, }, methods: { checkboxGroupChange(e) { console.log(e); this.stockStateList = e }, // 全选 allCheckeChange(e){ this.$refs.productList.allSelect(e.value) this.chooseList = this.$refs.productList.getAllChecked() }, allCheckedCallback(val){ this.allChecked = val this.chooseList = this.$refs.productList.getAllChecked() }, // 创建补货单 creatOrder(data){ uni.showLoading({ title:"正在保存.." }) stockCheckSave({ shelfSn: this.nowData.shelfSn, totalCategory: this.nowData.totalCategory, totalStockQty: this.nowData.totalStockQty, totalFreezeQty: this.nowData.totalFreezeQty }).then(res => { if(res.status == 200){ this.detail = res.data || null this.stockCheckSn = res.data.stockCheckSn }else{ uni.hideLoading() } }) }, // 清空已选数据 clearChoose(){ this.chooseList = [] this.allChecked = false if(this.$refs.productList){ this.$refs.productList.allSelect(false) } }, updateNums(){ this.chooseList = this.$refs.productList.getAllChecked() }, clearSearch(){ this.queryWord = '' this.changeSearch() }, handleClear(){ this.stockStateList = [] this.queryKeys.map(item => item.checked = false) this.changeSearch() }, changeSearch(){ this.pageNo = 1 this.partList = [] this.getpartList() }, // 获取数字货架列表 getpartList(){ const _this = this let params = { shelfSn: this.nowData.shelfSn, queryWord: this.queryWord, stockStateList: this.stockStateList } _this.clearChoose() _this.partList = [] _this.$refs.productList && _this.$refs.productList.setData(_this.partList) _this.status = 'loading' uni.showLoading({ mask:true, title:"正在加载..." }) queryProductListForReplenish(params).then(res => { if(res.status == 200){ let list = res.data if (list && list.length){ _this.partList = list } else { _this.partList = list || [] } }else{ _this.partList = [] } this.showTab = false // 赋值 if(_this.nowData.chooseKey.length){ _this.partList = _this.partList.filter(item => { const row = _this.nowData.chooseKey.findIndex(k => k == item.id) return !(row>=0) }) } this.$refs.productList.setData(_this.partList) setTimeout(()=>{ uni.hideLoading() },_this.partList.length*40) }) }, // 提交 submitOrder(){ if(this.totalCategory){ uni.$emit("chooseDbhProduct",this.chooseList) uni.navigateBack() }else{ uni.showToast({ icon: 'none', title: '请选择产品' }) } }, // 扫描 toScan(){ this.mpaasScanModule = uni.requireNativePlugin("wss-scan") this.mpaasScanModule.scan( { "scanMode":"Customized", "scanStyle":{ "scanFrameSizePlus":{"width":250,"height":250}, "scanFrameSize":200, "scanLight":"visible", "scanText":"对准条形码/二维码进行识别", "scanTitle":"扫码搜索货位产品", } }, (result) => { if(result.scanStatus == 1){ this.scanResult(result) } }) }, // 扫描结果 scanResult(data){ // 二维码 if(data.scanType == 'QRCODE'){ const ret = data.scanValue.split("&") this.queryWord = ret[1] // 产品编码 }else{ this.queryWord = data.scanValue } this.stockStateList = [] this.getpartList() } } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; background: #fff; .searchBar{ padding: 0 0.8rem 0.3rem; .p-title{ padding: 0 15rpx; display: flex; align-items: center; color: #222; font-size: 30rpx; > text{ display: block; height: 30rpx; width: 6rpx; background: #0485F6; margin-right: 10rpx; border-radius: 10rpx; } .shelfName{ flex-grow: 1; font-weight: bold; width: 80%; > view{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .btns{ width:100rpx; text-align: right; font-size: 28rpx; color: #0485F6; } } .search{ margin-top: 15upx; padding: 0.1rem; border-radius: 50rpx; border:1rpx solid #eee; .input{ flex-grow: 1; padding: 4rpx; } .icon{ width: 13%; text-align: center; font-size: 46rpx; color: #999; } } } .check-list{ padding: 0 0.8rem; flex-grow: 1; overflow: auto; } .footer-bar{ background-color: #f8f8f8; padding: 20upx; .f-left{ color: #fff; } .active{ background-color: #0485F6; } .f-mid{ flex-grow: 1; color: #666; > view{ padding: 0 5upx; &:first-child{ text{ color: red; } } &:last-child{ font-size: 0.8rem; } } } .f-btns{ button{ width: 200upx; } } } // 筛选 .tabBox{ height: 100vh; .tabs{ overflow: auto; padding: 20rpx; > view{ flex-wrap: wrap; justify-content: space-between; > view{ width: 98%; border: 1rpx solid #eee; padding: 15rpx; border-radius: 50rpx; text-align: center; margin-bottom: 15rpx; /deep/ .u-checkbox__label{ flex-grow: 1; } } &:first-child{ > view{ width: 100%; } } } } .btns{ display: flex; padding: 40upx 20upx 20upx; justify-content: space-between; .handle-btn { font-size: 28upx; } } } } </style>