123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412 |
- <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>
|