<template> <view class="content"> <u-navbar back-text="货架设置" :border-bottom="false" :background="{backgroundColor: $config('primaryColor')}" back-icon-color="#fff" :back-text-style="{ color: '#fff' }"> <view slot='right' style="padding: 0 30upx;color: #ffffff;" @click="toPlRacking" v-if="shelfPlaceList"> <u-icon name="piliangshangjia" custom-prefix="iscm-icon"></u-icon> <text style="margin-left: 6rpx;">批量上架</text> <u-badge v-if="showDot" :is-dot="true" size="mini" type="error"></u-badge> </view> </u-navbar> <view class="body-content flex flex_column"> <view class="card-box" v-if="detailData"> <view class="card-row flex align_center justify_between"> <view class="label">货架名称:</view> <view class="text flex align_center justify_end" @click="editShelf"> <text>{{detailData.shelfName}}</text> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view class="card-row flex align_center justify_between"> <view class="label">关联客户:</view> <view class="text flex align_center justify_end" @click="customeSet"> <text>{{ (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" @click="showTip(0)">价格权限设置 <u-icon color="#ffaa00" name="question-circle"></u-icon>:</view> <view class="text flex align_center justify_end" @click="openSetPriceShow"> <view style="flex-grow: 1;"> <view>货架产品:<text style="width: 80%;flex: 1;">{{showPriceStr.length ? showPriceStr.join("/") : '--'}}</text></view> <view>非货架产品:<text style="width: 80%;flex: 1;">{{showNonPriceStr.length ? showNonPriceStr.join("/") : '--'}}</text></view> </view> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view class="card-row align_center flex justify_between" v-if="showMore"> <view class="label">货架状态:</view> <view class="text flex align_center justify_end" @click="showEnableShelf=true"> <text v-if="detailData">{{detailData.state == 'ENABLE'?'启用':'停用'}}</text> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view class="card-row align_center flex justify_between" v-if="showMore"> <view class="label">货架注销:</view> <view class="text"> <u-button type="primary" size="mini" @click="showCancelShelf=true">注销</u-button> </view> </view> <view class="card-row align_center flex justify_between" v-if="showMore"> <view class="label" @click="showTip(1)">是否设置完成<u-icon color="#ffaa00" name="question-circle"></u-icon>: </view> <view class="text"><u-switch :size="40" v-model="switchVal" @change="switchChange"></u-switch></view> </view> <view class="moreSeting" @click="showMore=!showMore"> <text>{{!showMore?'更多设置':'收起'}}</text> <u-icon :name="showMore?'arrow-up':'arrow-down'"></u-icon> </view> </view> <!-- 货位信息 --> <view class="shelfPlace" :style="{height: scrollH+'px'}" v-if="shelfPlaceList"> <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"> <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="tapPopup(1)" size="medium">打印贴签</u-button> <u-button class="newbtn" @click="tapPopup(2)" type='primary' shape="circle" size="medium">快速补货</u-button> </view> </view> </view> </view> <view style="width: 100%;" v-else> <view class="nodata" v-if="!loading"> <view> <u-image :src="`../../static/${$config('themePath')}/def_no_data@3x.png`" width="180" height="180" border-radius="10"></u-image> </view> <view>暂无货位信息,请点击</view> <view class="flex"> <view> <text @click="toPlRacking">批量上架</text> <u-badge :offset="[-6,-10]" v-if="showDot" :is-dot="true" size="mini" type="error"></u-badge> </view> <view> <text></text>或 <text @click="toImportTpl">导入模板</text> </view> </view> </view> <view class="nodata" v-else> <u-loadmore :load-text="$config('loadText')" status="loading" /> </view> </view> </view> <!-- 设置价格显示弹框 --> <u-modal v-model="updateShowPrice" :show-cancel-button="true" title="价格权限设置" @confirm="savePriceSet"> <view class="slot-content" style="padding: 1rem 1rem 1.5rem;text-align: center;"> <view style="color: #999;font-size: 0.8rem;margin: 0.5rem;">提示:不勾选则不显示价格</view> <view style="text-align: left;font-size: 0.9rem;padding-left: 1rem;">货架产品:</view> <u-checkbox-group @change="priceSetChange"> <u-checkbox v-for="item in showPrice" :key="item.paramCode" v-model="item.checked" :name="item.paramCode">{{item.text}}</u-checkbox> </u-checkbox-group> <view style="text-align: left;font-size: 0.9rem;padding-left: 1rem;margin-top: 0.5rem;">非货架产品:</view> <u-checkbox-group @change="nonPriceSetChange"> <u-checkbox v-for="item in showNonPrice" :key="item.paramCode" v-model="item.checked" :name="item.paramCode">{{item.text}}</u-checkbox> </u-checkbox-group> </view> </u-modal> <!-- 启用禁用货架 --> <u-modal v-model="showEnableShelf" :show-cancel-button="true" title="货架状态" @confirm="enbaleShelf"> <view class="slot-content" style="padding: 1rem 1rem 1.5rem;text-align: center;"> <u-radio-group v-model="shelfStatus"> <u-radio name="ENABLE">启用</u-radio> <u-radio name="DISABLED">停用</u-radio> </u-radio-group> </view> </u-modal> <!-- 注销货架 --> <u-popup v-model="showCancelShelf" mode="center" border-radius="14" length="80%"> <view style="padding: 1rem;text-align: center;font-size: 1rem;">是否注销该数字货架?</view> <view class="slot-content" style="padding: 0 1rem 1rem;text-align: center;"> 点击确定,该数字货架就不可做任何操作,用户不可登陆。 </view> <view class="flex align_center justify_between" style="text-align: center;font-size: 1rem;"> <view @click="cancelShelf" style="border: 1px solid #eee;border-right:0;border-bottom:0;width: 50%;padding: 0.6rem 0;color: dodgerblue;">确定</view> <view @click="showCancelShelf=false" style="border: 1px solid #eee;border-bottom:0;width: 50%;padding: 0.6rem 0;">取消</view> </view> </u-popup> <!-- 导入模板 --> <u-popup v-model="showImportTpl" mode="center" border-radius="14" length="80%"> <view style="padding: 1rem;text-align: center;font-size: 1rem;">请选择货架模板</view> <scroll-view scroll-y class="slot-content" style="padding: 0 1rem 1rem;text-align: center;height: 30vh;"> <u-radio-group v-model="templateSn" :wrap="true"> <u-radio v-for="(item, index) in templateList" :key="item.id" :name="item.templateSn" > {{item.templateName}} </u-radio> </u-radio-group> </scroll-view> <view class="flex align_center justify_between" style="text-align: center;font-size: 1rem;"> <view @click="toImportTplOk" style="border: 1px solid #eee;border-right:0;border-bottom:0;width: 50%;padding: 0.6rem 0;color: dodgerblue;">确定</view> <view @click="toImportTpCancel" style="border: 1px solid #eee;border-bottom:0;width: 50%;padding: 0.6rem 0;">取消</view> </view> </u-popup> </view> </template> <script> import { shelfDetail, shelfSave, modifFinishFlag, getProductPlace, getShelfPriceShow, updateShelfPriceShow, shelfModifState, shelfTemplateList, importShelfTemplate } from '@/api/shelf' import { shelfCartNotEmpty } from '@/api/shelfCart' import { createShelfReplenishBill } from '@/api/shelfReplenish' export default { components: {}, data() { return { loading: false, shelfSn: null, detailData: null, switchVal: false, showMenus: false, scrollH: 400, showImportTpl: false, templateSn: null, templateList: [], popData: [{ title: '快速补货', val: '0' }, { title: '打印贴签', val: '1' }], pleft: 0, ptop: 0, shelfPlaceList: null, placeTab: [], curTab: '', isLoad: false, webView: null, showDot: false, showPrice: [], showNonPrice:[], showPriceStr: [], showNonPriceStr:[], updateShowPrice: false, showPriceBak: [], showMore: false, showEnableShelf: false, shelfStatus: undefined, showCancelShelf: false } }, watch: { showMore(a, b) { this.getScrollHeight(a) }, }, onLoad(option) { this.shelfSn = option.shelfSn // 获取货架详情 this.getShelfDetal() // 获取货物 this.getShelfPlace() this.isLoad = true // this.webView = this.$scope.$getAppWebview(); uni.$on("editCustome", (data) => { this.isLoad = true this.saveShelf(data, 0) }) uni.$on("editShelfName", (data) => { this.isLoad = true this.saveShelf(data, 1) }) // const win = uni.getWindowInfo() // this.pleft = Math.floor(win.windowWidth * 0.3) // this.ptop = Math.floor(win.windowHeight - 70) this.getScrollHeight(this.showMore) console.log(this.shelfSn) }, onUnload() { uni.$off("editCustome") uni.$off("editShelfName") }, onShow() { if (!this.isLoad) { this.updateHw() } }, methods: { getScrollHeight(a) { const sys = uni.getSystemInfoSync() const h = a ? 290 : 250 if (sys.platform == 'android') { this.scrollH = sys.windowHeight - h } else { if (sys.safeArea.top) { this.scrollH = sys.windowHeight - h + sys.statusBarHeight - 34 } else { this.scrollH = sys.windowHeight - h - 14 } } }, // 刷新货位 updateHw() { this.placeTab = [] this.shelfPlaceList = null this.getShelfPlace(true) }, // 导入模板弹框 toImportTpl(){ if(this.templateList.length == 0){ uni.showLoading({ mask: true, title: '加载中...' }) shelfTemplateList({pageNo:1,pageSize:100}).then(res=>{ this.templateList = res.data&&res.data.list||[] if(this.templateList.length){ this.showImportTpl = true uni.hideLoading() }else{ this.toashMsg(res.message) } }) }else{ this.showImportTpl = true } }, // 导入模板弹框确定 toImportTplOk(){ if(this.templateSn){ uni.showLoading({ mask: true, title: '导入模板弹...' }) importShelfTemplate({ shelfSn: this.shelfSn, templateSn: this.templateSn }).then(res => { if (res.status == 200) { this.toashMsg(res.message) this.toImportTpCancel() this.getShelfDetal() this.updateHw() } uni.hideLoading() }) }else{ this.toashMsg('请选择模板') } }, // 关闭模板导入 toImportTpCancel(){ this.showImportTpl = false this.templateSn = null }, // 批量上架 toPlRacking() { const url = this.showDot ? '/pages/batchShelves/cartList' : '/pages/batchShelves/index' uni.navigateTo({ url: url + "?shelfSn=" + this.shelfSn + '&shelfName=' + this.detailData.shelfName + '&customerSn=' + this.detailData.customerSn }) }, // 更多操作 tapPopup(e) { // 打印贴签 if (e == 1) { if (this.hasNoBindPro()) { uni.navigateTo({ url: "/pages/latePlay/chooseProduct?shelfSn=" + this.shelfSn + '&shelfName=' + this .detailData.shelfName }) } else { uni.showModal({ showCancel: false, confirmText: "好的", title: "提示", content: "所有货位都没有绑定产品,无法打印贴签!" }) } } // 快速补货 if (e == 2) { createShelfReplenishBill({ shelfSn: this.shelfSn, enableFlag: 1 }).then(res => { console.log(res.data) if (res.data && res.data.length) { const params = Object.assign(this.detailData, { list: res.data }) this.$store.state.vuex_tempData = params uni.navigateTo({ url: "/pages/shelfSetting/quickReplenish" }) } else { uni.showModal({ showCancel: false, confirmText: "好的", title: "提示", content: "没有需要补货的产品" }) } }) } }, showTip(type) { uni.showModal({ showCancel: false, confirmText: "好的", title: "提示", content: type ? "只有当数字货架的“是否设置完成”为“是”,系统才会自动对该货架生成补货单,修理厂才能正常下单。" : "不勾选则不显示价格,结算价:即易码通进货价" }) }, // 注销货架 cancelShelf(){ const params = { shelfSn: this.shelfSn, state: 'WRITE_OFF' } shelfModifState(params).then(res => { if(res.status == 200){ this.toashMsg(res.message) this.showCancelShelf = false if(res.status == 200){ uni.navigateBack() } } }) }, // 启用禁用货架 enbaleShelf(){ const params = { shelfSn: this.shelfSn, state: this.shelfStatus } shelfModifState(params).then(res => { this.toashMsg(res.message) this.showEnableShelf = false if(res.status == 200){ this.getShelfDetal() } }) }, // 设置完成是否 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 }) }, // 是否没有绑定任何产品 hasNoBindPro() { let noBindPro = null; for (let i = 0; i < this.placeTab.length; i++) { noBindPro = this.shelfPlaceList[this.placeTab[i]].find(item => item.shelfProductApiEntity && item .shelfProductApiEntity.productSn); if (!!noBindPro) { break } } return !!noBindPro }, // 按照产品搜索货位 toSearchHw() { if (this.hasNoBindPro()) { uni.navigateTo({ url: "/pages/shelfSetting/searchShelfHw?shelfName=" + this.detailData.shelfName + "&shelfSn=" + this.shelfSn }) } else { uni.showModal({ showCancel: false, confirmText: "好的", title: "提示", content: "所有货位都没有绑定产品,无法搜索!" }) } }, // 编辑货位 editHw(item) { const hasProduct = item.shelfProductApiEntity && item.shelfProductApiEntity.productSn const type = hasProduct ? 'edit' : 'bind' const params = Object.assign(this.detailData, item) this.$store.state.vuex_tempData = params uni.navigateTo({ url: "/pages/shelfSetting/editShelfHw?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, '') const nextNum = Number(num) + 1 shelfPlaceCode = this.curTab + (nextNum < 10 ? '0' : '') + nextNum } const params = { customerSn: this.detailData.customerSn, shelfSn: this.detailData.shelfSn, id: this.detailData.id } uni.navigateTo({ url: "/pages/shelfSetting/addShelfHw?detailData=" + encodeURIComponent(JSON.stringify( params)) + "&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) { this.toashMsg(res.message) this.getShelfDetal() } }) }, // 获取价格显示设置 getShelfPriceShow() { getShelfPriceShow({ shelfSn: this.shelfSn }).then(res => { if (res.status == 200) { const ret = res.data && res.data this.showPriceBak = ret console.log(ret) this.formatPriceShow() } }) }, // 格式化价格显示 checkPrice(item){ if(item.paramCode.indexOf("non_")>=0){ this.showNonPrice.push({ paramCode: item.paramCode, paramValue: item.paramValue, text: item.paramCode == 'non_shelf_price_show' ? '车主价' : '结算价', checked: item.paramValue == 1 }) }else{ this.showPrice.push({ paramCode: item.paramCode, paramValue: item.paramValue, text: item.paramCode == 'shelf_price_show' ? '车主价' : '结算价', checked: item.paramValue == 1 }) } }, formatPriceShow(){ this.showPrice = [] this.showPriceStr = [] this.showNonPrice = [] this.showNonPriceStr = [] const a = this.showPriceBak.filter(item => item.paramCode.indexOf('shelf_price_show')>=0) const b = this.showPriceBak.filter(item => item.paramCode.indexOf('shelf_cost_show')>=0) a.map(item => { if (item.paramCode == 'shelf_price_show' && item.paramValue == 1) { this.showPriceStr.push("车主价") } if (item.paramCode == 'non_shelf_price_show' && item.paramValue == 1) { this.showNonPriceStr.push("车主价") } this.checkPrice(item) }) b.map(item => { if (item.paramCode == 'shelf_cost_show' && item.paramValue == 1) { this.showPriceStr.push("结算价") } if (item.paramCode == 'non_shelf_cost_show' && item.paramValue == 1) { this.showNonPriceStr.push("结算价") } this.checkPrice(item) }) }, openSetPriceShow(){ this.formatPriceShow() this.updateShowPrice = true }, // 选择价格显示 priceSetChange(e) { console.log(e) this.showPrice.map(item => { item.paramValue = e.includes(item.paramCode) ? 1 : 0 }) }, nonPriceSetChange(e){ this.showNonPrice.map(item => { item.paramValue = e.includes(item.paramCode) ? 1 : 0 }) }, // 价格显示保存 savePriceSet() { uni.showLoading({ mask: true, title: '正在保存价格设置...' }) // 更新价格显示 updateShelfPriceShow({ shelfSn: this.shelfSn, paramValue: [...this.showPrice,...this.showNonPrice] }).then(res => { if (res.status == 200) { this.getShelfPriceShow() this.toashMsg(res.message) } uni.hideLoading() }) }, getShelfDetal() { shelfDetail({ sn: this.shelfSn }).then(res => { if (res.status == 200) { this.detailData = res.data this.switchVal = res.data.finishFlag == 1 this.shelfStatus = res.data.state // 价格设置 this.getShelfPriceShow() } else { this.detailData = null } }) }, getShelfPlace(flag) { this.loading = true getProductPlace({ shelfSn: this.shelfSn }).then(res => { if (res.status == 200 && res.data) { this.shelfPlaceList = res.data // 获取层 for (let a in res.data) { this.placeTab.push(a) } // 排序 this.placeTab.sort(function(a, b) { return (a + '').localeCompare(b + ''); }); console.log(this.placeTab) if (!flag || !this.curTab) { this.curTab = this.placeTab[0] } if (this.placeTab.length == 0) { this.shelfPlaceList = null } } else { this.shelfPlaceList = null this.placeTab = [] } // 是否有已录入的产品 this.getHasCartNotEmpty() this.isLoad = false this.loading = false }) }, tabChange(item) { this.curTab = item }, getHasCartNotEmpty() { shelfCartNotEmpty({ shelfSn: this.shelfSn }).then(res => { this.showDot = res.data == 1 }) } } } </script> <style lang="less"> .content { width: 100%; .nodata { padding: 100rpx 50rpx; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; >view { position: relative; padding: 10upx 0; text { color: #00aaff; margin-left: 10rpx; } } } .body-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: 1rpx solid #eee; padding: 10rpx 0; min-height: 80rpx; &:last-child { border-bottom: 0; } .label{ min-width: 30%; } .text { color: #666; flex-grow: 1; text-align: right; } } .moreSeting { text-align: center; color: #999; padding: 20upx; >text { margin-right: 10rpx; } } } .shelfPlace { height: calc(100% - 300rpx); .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: 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(100% - 85rpx); .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: 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: #ff5500; } .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>