<template> <view class="content"> <view class="card-box" v-if="detailData"> <view class="card-row flex justify_between"> <view class="label">货架名称</view> <view class="text flex align_center" @click="editShelf"> <text style="width: 80%;flex: 1;">{{detailData.shelfName}}</text> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view class="card-row flex justify_between"> <view class="label">关联客户</view> <view class="text flex align_center" @click="customeSet"> <text style="width: 80%;flex: 1;">{{ (detailData&&detailData.customerEntity&&detailData.customerEntity.customerName) || '--' }}</text> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view class="card-row align_center flex justify_between"> <view class="label" style="width: 50%;" @click="showTip">是否设置完成 <u-icon color="#2979ff" name="question-circle"></u-icon></view> <view class="text" style="width: 50%;text-align: right;"><u-switch v-model="switchVal" @change="switchChange"></u-switch></view> </view> </view> <!-- 货位信息 --> <view class="shelfPlace"> <view class="flex align_center shelfPlaceHead"> <view class="lt"><text>□</text>表示没有绑定产品</view> <view class="search-btn flex align_center" @click="toSearchHw"> <view><u-icon name="search"></u-icon><text>按产品搜索</text></view> <u-icon name="scan"></u-icon> </view> </view> <view class="flex shelfTabs" v-if="shelfPlaceList"> <view class="leftTabs"> <view v-for="item in placeTab" :key="item" :class="curTab==item?'active':''" @click="tabChange(item)">{{item}}层</view> </view> <view class="rightCons flex flex_column"> <view class="hwList flex_1"> <text @click="editHw(item)" v-for="item in shelfPlaceList[curTab]" :key="item.shelfPlaceCode" :class="item.shelfProductApiEntity && item.shelfProductApiEntity.productSn?'':'red'"> {{item.shelfPlaceCode}} </text> <text class="add" @click="addHw('add',1)"><u-icon name="plus"></u-icon></text> </view> <view class="hwAction flex justify_between"> <u-button shape="circle" @click="showMenus=true" size="medium">更多功能</u-button> <u-button class="newbtn" @click="addHw('add',0)" type='primary' shape="circle" size="medium">新增货位</u-button> </view> </view> </view> </view> <chunLeiPopups v-model="showMenus" theme="dark" :popData="popData" @tapPopup="tapPopup" :x="pleft" :y="ptop" placement="bottom-start"></chunLeiPopups> </view> </template> <script> import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue"; import { shelfDetail, shelfSave, modifFinishFlag, getProductPlace } from '@/api/shelf' export default { components:{chunLeiPopups}, data() { return { shelfSn: null, detailData: null, switchVal: false, showMenus:false, popData:[{title:'快速补货',val:'0'},{title:'打印贴签',val:'1'}], pleft:0, ptop:0, shelfPlaceList: null, placeTab: [], curTab: '' } }, onLoad(option) { this.shelfSn = option.shelfSn // 获取货架详情 this.getShelfDetal() // 获取货物 this.getShelfPlace() uni.$on("editCustome",(data)=>{ this.saveShelf(data,0) }) uni.$on("editShelfName",(data)=>{ this.saveShelf(data,1) }) uni.$on("updateHw",()=>{ this.placeTab = [] this.getShelfPlace(true) }) const win = uni.getWindowInfo() this.pleft = Math.floor(win.windowWidth * 0.3) this.ptop = Math.floor(win.windowHeight - 70) }, onUnload() { uni.$off("editCustome") uni.$off("editShelfName") uni.$off("updateHw") }, methods: { // 更多操作 tapPopup(e){ console.log(e) // 打印贴签 if(e.val == 1){ uni.navigateTo({ url: "/pages/latePlay/chooseProduct?shelfSn="+this.shelfSn+'&shelfName='+this.detailData.shelfName }) } // 快速补货 if(e.val == 0){ } }, showTip(){ uni.showModal({ showCancel:false, confirmText:"好的", title: "提示", content: "只有当数字货架的“是否设置完成”为“是”,系统才会自动对该货架生成补货单,修理厂才能正常下单。" }) }, // 设置完成是否 switchChange(v){ const params = { shelfSn: this.shelfSn, finishFlag: v ? '1' : '0' } modifFinishFlag(params).then(res => { if (res.status == 200) { uni.showToast({ icon: 'none', title: res.message }) } }) }, // 关联客户 customeSet(){ uni.navigateTo({ url: "/pages/sales/chooseCustomer?backPage=shelfEdit&shelfName="+this.detailData.shelfName }) }, // 修改货架名称 editShelf(){ uni.navigateTo({ url: "/pages/shelfSetting/editShelf?shelfName="+this.detailData.shelfName }) }, // 按照产品搜索货位 toSearchHw(){ uni.navigateTo({ url: "/pages/shelfSetting/searchShelfHw?shelfName="+this.detailData.shelfName+"&shelfSn="+this.shelfSn }) }, // 编辑货位 editHw(item){ const hasProduct = item.shelfProductApiEntity && item.shelfProductApiEntity.productSn const type = hasProduct ? 'edit':'bind' const params = Object.assign(this.detailData,item) uni.navigateTo({ url: "/pages/shelfSetting/editShelfHw?detailData="+encodeURIComponent(JSON.stringify(params))+"&type=" + type }) }, // 新增货位 addHw(type,flag){ let shelfPlaceCode = '' if(type=='edit'){ shelfPlaceCode = flag } if(type=='add'&&flag==1){ const row = this.shelfPlaceList[this.curTab] const num = row[row.length-1].shelfPlaceCode.replace(this.curTab,'') shelfPlaceCode = this.curTab + (Number(num) + 1) } uni.navigateTo({ url: "/pages/shelfSetting/addShelfHw?detailData="+encodeURIComponent(JSON.stringify(this.detailData))+"&type="+type+"&shelfPlaceCode="+shelfPlaceCode }) }, // 保存数字货架基本信息 saveShelf(data,type){ const params = { shelfSn: this.shelfSn } if(type == 1){ params.customerSn = this.detailData.customerSn params.shelfName = data.shelfName }else{ params.customerSn = data.customerSn } shelfSave(params).then(res => { if (res.status == 200) { uni.showToast({ icon: 'none', title: res.message }) this.getShelfDetal() } }) }, getShelfDetal(){ shelfDetail({ sn: this.shelfSn }).then(res => { if (res.status == 200) { this.detailData = res.data this.switchVal = res.data.finishFlag == 1 } else { this.detailData = null } }) }, getShelfPlace(flag){ getProductPlace({ shelfSn: this.shelfSn }).then(res => { if (res.status == 200) { this.shelfPlaceList = res.data for(let a in res.data){ this.placeTab.push(a) } if(!flag){ this.curTab = this.placeTab[0] } } else { this.shelfPlaceList = null } }) }, tabChange(item){ this.curTab = item } } } </script> <style lang="less"> .content{ width:100%; } .card-box{ background-color: #fff; border-radius: 0.5rem; box-shadow: 0.1rem 0.2rem 0.3rem #eee; padding: 0 1rem; margin: 0.5rem; .card-row{ border-bottom: 0.1rpx solid #eee; padding: 20rpx 0; min-height: 90rpx; &:last-child{ border-bottom: 0; } .label{ flex: 1; width: 20%; } .text{ width: 80%; color: #666; } } } .shelfPlace{ .shelfPlaceHead{ padding: 0.2rem 0.5rem 0.5rem; justify-content: space-between; .lt{ font-size: 0.9rem; color: #999; text{ color: #ff5500; font-size: 1rem; } } .search-btn{ border:0.1rpx solid #eee; border-radius: 50rpx; width: 50%; justify-content: space-between; padding:0.3rem 0.5rem; color: #999; background-color: #fff; font-size: 0.9rem; &:active{ opacity: 0.6; } } } .shelfTabs{ height: calc(100vh - 150rpx); .leftTabs{ width: 20%; overflow: auto; > view{ padding: 0.8rem 0.5rem; border-left: 0.2rem solid #f8f8f8; text-align: center; } .active{ border-color: rgb(47, 126, 209); background-color: #fff; } } .rightCons{ width: 80%; background-color: #fff; position: relative; .hwList{ overflow: auto; padding: 0.5rem; padding-bottom: 105rpx; > text{ border: 0.1rpx solid #eee; padding: 0.2rem 0.8rem; border-radius: 0.3rem; margin: 0.5rem 2%; float: left; width: 20%; text-align: center; } .red{ border-color: orangered; } .add{ border-style: dashed; border-color: #999; color: #999; } } .hwAction{ padding: 0.5rem; position: fixed; bottom: 0; right: 0; width: 80%; background-color: #fff; button{ width: 240rpx; } .newbtn{ background-color: rgb(51, 95, 182); color: #fff; } } } } } </style>