123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641 |
- <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="暂无待补货产品" @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" @click="openCart">
- <view>
- 已选<text>{{totalCategory}}</text>款产品
- </view>
- <view v-if="!showCart">
- 查看明细 <u-icon name="arrow-up"></u-icon>
- </view>
- <view v-else>
- 关闭明细 <u-icon name="arrow-down"></u-icon>
- </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>
- <!-- 已选配件 购物车 -->
- <div class="cpb_cart-mask" v-if="showCart">
- <div class="cpb_cart-box">
- <div class="cpb_close flex align-center justify_center" @click="showCart=false">
- <u-icon name="close"></u-icon>
- </div>
- <div class="cpb_cart-tit">
- <view>已选配件</view>
- <view class="cpb_heji flex align_center justify_between">
- <text @click="clearDetail">清空列表</text>
- </view>
- </div>
- <div class="cpb_cart-list">
- <view
- v-for="(item, index) in chooseList"
- :key="'cpb_'+item.id"
- >
- <view class="nav-right-item 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="uni-col-9 flex">
- <view class="uni-col-2">
- <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="item-info uni-col-8">
- <view class="item-name">
- <text>{{item.shelfPlaceCode}}</text>
- {{item.productCode}}
- </view>
- <view class="item-name ellipsis-two">
- {{item.productName}}
- </view>
- </view>
- </view>
- </view>
- <view class="nav-right-item">
- <view class="item-detail">
- <view class="item-detail-info align_center flex justify_between">
- <view></view>
- <view class="flex justify_end">
- <view class="item-detail-text">
- 最大库容:<text class="pnums">{{item.maxQty||0}}</text>
- 货架库存:<text class="pnums">{{item.qty||0}}</text>
- 门店库存:<text class="pnums">{{item.qplsStockQty||0}}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="item-detail">
- <view class="item-detail-info">
- <view class="flex justify_end">
- <view class="item-detail-text flex">
- <view v-if="item.replenishBillQty">补货在途:<text class="pnums1">{{item.replenishBillQty||0}}</text></view>
- <view v-if="item.recallBillQty">调回在途:<text class="pnums1">{{item.recallBillQty||0}}</text></view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </div>
- </div>
- </div>
- <!-- 筛选项 -->
- <u-popup v-model="showTab" mode="right" closeable 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,
- showCart: 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) {
- console.log(e)
- if((this.showTab || this.showCart)&&e.from != 'navigateBack') {
- this.showTab = false;
- this.showCart = false;
- return true;
- }
- },
- onLoad(opts) {
- this.nowData = JSON.parse(decodeURIComponent(opts.data));
- this.getpartList()
- },
- onReady() {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$config('primaryColor')
- })
- },
- computed: {
- totalCategory () {
- return this.chooseList.length
- },
- },
- methods: {
- checkboxGroupChange(e) {
- this.stockStateList = e
- },
- // 单击全选
- allCheckeChange(e){
- this.$refs.productList.allSelect(e.value)
- const list = this.$refs.productList.getAllData()
- list.map(item => {
- this.allCheckedCallback(true,item)
- })
- if(!e.value && this.showCart){
- this.showCart = false
- }
- },
- // 选中事件
- allCheckedCallback(isAllChecked,row){
- console.log(isAllChecked,row)
- const has = this.chooseList.findIndex(k => k.id == row.id)
- // 在已选列表中
- if(has>=0){
- // 取消选中
- if(!row.checked){
- this.chooseList.splice(has,1)
- }
- }else{
- // 不在已选列表中,添加
- if(row.checked){
- this.chooseList.push(row)
- }
- }
- // 是否全选
- this.allChecked = isAllChecked
- },
- // 打开购物车
- openCart(){
- if(this.totalCategory){
- this.showCart = !this.showCart
- }else{
- uni.showToast({
- icon: 'none',
- title: '请先添加产品'
- })
- }
- },
- // 删除购物车产品
- delDetail(item,i){
- console.log(item.id,i)
- this.$refs.productList.setChecked(item.id,false)
- const index = this.chooseList.findIndex(k => k.id == item.id)
- this.chooseList.splice(index,1)
- this.allChecked = false
- // 全部清空
- if(this.chooseList.length==0){
- this.clearChoose()
- }
- },
- // 空列表
- clearDetail(){
- const _this = this
- clzConfirm({
- title: '提示',
- content: '确认要清空列表吗?',
- success (ret) {
- if (ret.confirm || ret.index == 0) {
- _this.clearChoose()
- }
- }
- })
- },
- // 清空已选数据
- clearChoose(){
- this.chooseList = []
- this.showCart = false
- this.allChecked = false
- if(this.$refs.productList){
- this.$refs.productList.allSelect(false)
- }
- },
- 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,
- enableFlag: 1
- }
- 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.partList.map(item => {
- const row = _this.chooseList.find(k => k.id == item.id)
- item.checked = !!row
- })
- this.$refs.productList.setData(_this.partList)
- setTimeout(()=>{
- uni.hideLoading()
- },_this.partList.length*30)
- })
- },
- // 提交
- submitOrder(){
- if(this.totalCategory){
- if(this.nowData.chooseKey.length){
- uni.$emit("chooseDbhProduct",this.chooseList)
- uni.navigateBack()
- }else{
- this.$store.state.vuex_tempData = this.chooseList
- uni.redirectTo({
- url: "/pages/soldOut/creatOrder?data="+encodeURIComponent(JSON.stringify(this.nowData))
- })
- }
- }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.3rem 0.8rem;
- .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;
- flex-basis: 0;
- 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;
- margin: 0 5upx;
- }
- }
- &:last-child{
- font-size: 0.8rem;
- color: #0485F6;
- }
- }
- }
- .f-btns{
- button{
- width: 200upx;
- }
- }
- }
- // 筛选
- .tabBox{
- height: 100vh;
- .tabs{
- margin-top: 100rpx;
- 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;
- }
- }
- }
- // 购物车
- .cpb_cart-mask{
- position: fixed;
- width: 100%;
- background: rgba(0,0,0,0.5);
- z-index: 900;
- bottom: 100rpx;
- top: 0;
- }
- .cpb_cart-box{
- background-color: #fff;
- position: absolute;
- width: 100%;
- z-index: 1000;
- bottom: 0;
- border-radius: 30rpx 30rpx 0 0;
- max-height: 70vh;
- display: flex;
- flex-direction: column;
- .cpb_close{
- position: absolute;
- top: 10rpx;
- right: 20rpx;
- width: 70rpx;
- height: 70rpx;
- font-size: 32rpx;
- color: #999;
- }
- .cpb_cart-tit{
- text-align: center;
- padding: 20rpx;
- font-size: 32rpx;
- border-bottom: 2rpx solid #eee;
- .cpb_heji{
- padding-top: 20rpx;
- font-size: 26upx;
- > text{
- color: #ff5500;
- }
- > view{
- color: #999;
- > text{
- color: #333;
- &:first-child{
- margin-right: 20upx;
- }
- }
- }
- }
- }
- .cpb_cart-list{
- padding: 20rpx 0;
- overflow: auto;
- flex-grow: 1;
- > view{
- margin-bottom: 20rpx;
- }
- .nav-right-item{
- padding: 0 30upx;
- &:last-child{
- border-bottom:2rpx solid #eee;
- }
- }
- .item-name{
- font-size: 26rpx;
- text{
- background: rgba(3, 54, 146, 0.15);
- color: #1c588a;
- border-radius: 1em;
- font-size: 0.8em;
- padding: 0 0.5em;
- margin-right: 10upx;
- }
- margin-top: 10upx;
- }
- .item-info{
- flex-grow: 1;
- padding-left: 0.8em;
- }
- .item-detail{
- .item-detail-info{
- padding: 5upx 0;
- font-size: 24upx;
- .pnums{
- margin-right: 10rpx;
- color: #333;
- }
- .pnums1{
- margin-right: 10rpx;
- color: red;
- }
- > view{
- padding-bottom: 10rpx;
- align-items: center;
- .item-detail-text{
- color: #999;
- }
- }
- }
- }
- }
- }
- }
- </style>
|