|
@@ -1,22 +1,237 @@
|
|
<template>
|
|
<template>
|
|
- <view>
|
|
|
|
-
|
|
|
|
|
|
+ <view class="moreShelfPart flex flex_column">
|
|
|
|
+ <view class="moreShelfPart-search">
|
|
|
|
+ <u-search
|
|
|
|
+ placeholder="请输入货位号/产品编码/产品名称搜索"
|
|
|
|
+ v-model="queryWord"
|
|
|
|
+ :show-action="isGobleSearch"
|
|
|
|
+ @focus="isGobleSearch=true"
|
|
|
|
+ @custom="searchPart"
|
|
|
|
+ @search="searchPart"
|
|
|
|
+ @clear="searchPart"
|
|
|
|
+ :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 0'}">
|
|
|
|
+ </u-search>
|
|
|
|
+ <view class="p-title">
|
|
|
|
+ <text></text>
|
|
|
|
+ 西安车领主常青二路数字货架
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="moreShelfPart-body">
|
|
|
|
+ <scroll-view
|
|
|
|
+ class="nav-right"
|
|
|
|
+ scroll-y
|
|
|
|
+ @scrolltolower="onreachBottom">
|
|
|
|
+ <view class="partList-list-box" v-for="item in partList" :key="item.id">
|
|
|
|
+ <view class="product flex align_center">
|
|
|
|
+ <view class="flex align_center flex_1">
|
|
|
|
+ <view class="pimgs">
|
|
|
|
+ <u-image width="128" height="128" border-radius="10"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="pinfo">
|
|
|
|
+ <view class="pname">
|
|
|
|
+ 箭牌机油滤清器10款进口大众途锐 5.0L V10 TDI
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ptxt flex align_center justify_between">
|
|
|
|
+ <view>
|
|
|
|
+ <text class="pcode">JB-11066A</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ 库存数量:<text class="pnums">3个</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ptools flex align_center justify_between">
|
|
|
|
+ <view></view>
|
|
|
|
+ <view class="print" @click="print(item)">
|
|
|
|
+ <u-image :src="`/static/${$config('themePath')}/icon_printer@3x.png`" width="48" height="48"></u-image>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view v-if="partList&&partList.length==0">
|
|
|
|
+ <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="50"></u-empty>
|
|
|
|
+ </view>
|
|
|
|
+ <view style="padding: 20upx;" v-if="total>pageSize || status=='loading'">
|
|
|
|
+ <u-loadmore :status="status" />
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import { getShelfList } from '@/api/shelf'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
-
|
|
|
|
|
|
+ queryWord: '',
|
|
|
|
+ isGobleSearch: false,
|
|
|
|
+ partList: [],
|
|
|
|
+ pageNo:1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ total: 0, // 列表总数
|
|
|
|
+ noDataText: '暂无货架',
|
|
|
|
+ status: 'loading',
|
|
|
|
+ vinstatus: 'loading'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ onLoad(opts) {
|
|
|
|
+ this.getpartList()
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
-
|
|
|
|
|
|
+ clearSearch(){
|
|
|
|
+ this.queryWord = ''
|
|
|
|
+ this.pageNo = 1
|
|
|
|
+ this.partList = []
|
|
|
|
+ },
|
|
|
|
+ // 搜索配件
|
|
|
|
+ searchPart(){
|
|
|
|
+ if(this.queryWord != ''){
|
|
|
|
+ this.clearSearch()
|
|
|
|
+ this.getpartList()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 获取数字货架列表
|
|
|
|
+ getpartList(){
|
|
|
|
+ const _this = this
|
|
|
|
+ let params = {
|
|
|
|
+ pageNo: this.pageNo,
|
|
|
|
+ pageSize: this.pageSize,
|
|
|
|
+ queryWord: this.queryWord
|
|
|
|
+ }
|
|
|
|
+ _this.status = 'loading'
|
|
|
|
+ getShelfList(params).then(res => {
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ if(res.status == 200){
|
|
|
|
+ let list = res.data.list
|
|
|
|
+ if (list && list.length){
|
|
|
|
+ // 分页 拼接数据
|
|
|
|
+ if (_this.pageNo != 1) {
|
|
|
|
+ _this.partList = _this.partList ? _this.partList.concat(list) : list
|
|
|
|
+ } else {
|
|
|
|
+ _this.partList = list
|
|
|
|
+ }
|
|
|
|
+ this.total = res.data.count
|
|
|
|
+ if (_this.partList.length == res.data.count) {
|
|
|
|
+ _this.status = 'nomore'
|
|
|
|
+ } else {
|
|
|
|
+ _this.status = 'loadmore'
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ _this.partList = list || []
|
|
|
|
+ this.total = 0
|
|
|
|
+ _this.status = 'nomore'
|
|
|
|
+ }
|
|
|
|
+ _this.noDataText = '暂无配件'
|
|
|
|
+ }else{
|
|
|
|
+ _this.status = 'loadmore'
|
|
|
|
+ _this.partList = []
|
|
|
|
+ _this.total = 0
|
|
|
|
+ _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 加载更多
|
|
|
|
+ onreachBottom () {
|
|
|
|
+ if(this.partList.length < this.total ){
|
|
|
|
+ if(this.isGobleSearch&&this.queryWord==''){
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.pageNo++
|
|
|
|
+ this.getpartList()
|
|
|
|
+ }else{
|
|
|
|
+ this.status = "nomore"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ print(item){
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: "/pages/common/printTag/printTag?id="+item.id
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
-
|
|
|
|
|
|
+<style lang="less">
|
|
|
|
+ .moreShelfPart{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ .moreShelfPart-search{
|
|
|
|
+ padding: 20rpx 20rpx 0;
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ border-bottom: 2rpx solid #f5f5f5;
|
|
|
|
+ }
|
|
|
|
+ .p-title{
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #222;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ text{
|
|
|
|
+ display: block;
|
|
|
|
+ height: 32rpx;
|
|
|
|
+ width: 6rpx;
|
|
|
|
+ background: #0485F6;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .moreShelfPart-body{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+ .nav-right{
|
|
|
|
+ padding: 0 30upx;
|
|
|
|
+ height: calc(100vh - 180rpx);
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .partList-list-box{
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ border-bottom: 2rpx solid #f5f5f5;
|
|
|
|
+ &:last-child{
|
|
|
|
+ border:0;
|
|
|
|
+ }
|
|
|
|
+ .product{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ .checkbox{
|
|
|
|
+ width: 60rpx;
|
|
|
|
+ }
|
|
|
|
+ .pinfo{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ padding-left: 20rpx;
|
|
|
|
+ .pname{
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #191919;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .pno{
|
|
|
|
+ background-color: rgba(3, 54, 146, 0.15);
|
|
|
|
+ border-radius: 50rpx;
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
+ color: #033692;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .ptxt{
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #999;
|
|
|
|
+ .pnums{
|
|
|
|
+ color: #222;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .ptools{
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
+ .pcurnums{
|
|
|
|
+ > text{
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|