123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- <template>
- <view class="moreShelfPart flex flex_column">
- <view class="moreShelfPart-search">
- <u-search ref="searchBox"
- placeholder="请输入货架名称搜索"
- v-model="shelfName"
- :show-action="isGobleSearch"
- @input="change"
- @focus="isGobleSearch = true"
- @blur="isGobleSearch = false"
- @custom="getShelfList"
- @search="getShelfList"
- @clear="clearSearch"
- :action-style="{ color: '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', padding: '12upx 0' }"
- ></u-search>
- </view>
- <view class="moreShelfPart-body">
- <view class="nav-right">
- <view class="nav-right-item" v-for="(item, index) in shelfList" :key="item.id" @click="viewDetail(item)">
- <view class="item-info">
- <view class="item-name clearFix">
- <text class="barBox"></text>
- <text class="itemName">
- <text style="margin-right: 0.5rem;">{{item.shelfName}}</text>
- <u-tag size='mini' type="info" shape="circle" v-if="item.state=='SUSPEND'" text="已暂停"></u-tag>
- <u-tag size='mini' type="info" shape="circle" v-if="item.state=='DISABLED'" text="已停用"></u-tag>
- </text>
- </view>
- <view class="item-detail">
- <view>
- 产品款数:
- <text class="item-detail-text">{{ item.shelfPlaceBindNum || 0 }}</text>
- </view>
- <view>
- 库存总量:
- <text class="item-detail-text">{{ item.qty || 0 }}</text>
- </view>
- </view>
- </view>
- </view>
- <view v-if="shelfList && shelfList.length == 0">
- <u-empty
- v-if="status != 'loading'"
- :src="`/static/${$config('themePath')}/def_no_data@3x.png`"
- icon-size="180"
- :text="noDataText"
- mode="list"
- :margin-top="100"
- ></u-empty>
- </view>
- <view style="padding: 20upx;" v-if="shelfList.length"><u-loadmore :status="status" /></view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getShelfList } from '@/api/shelf';
- import { clzConfirm } from '@/libs/tools';
- export default {
- data() {
- return {
- shelfName: '',
- isGobleSearch: false,
- shelfList: [],
- noDataText: '暂无货架',
- status: 'loading',
- tempData: null,
- pageNo: 1,
- pageSize: 20
- };
- },
- onReady() {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$config('primaryColor')
- })
- },
- onLoad() {
- this.getShelfList();
- },
- methods: {
- clearSearch() {
- this.pageNo = 1;
- this.shelfName = '';
- this.shelfList = [];
- this.$nextTick(() => {
- this.getShelfList();
- });
- },
- change(v) {
- if (v == '') {
- this.clearSearch();
- }else{
- this.pageNo = 1;
- }
- },
- // 获取数字货架列表
- getShelfList() {
- const _this = this;
- let params = {
- pageNo: _this.pageNo,
- pageSize: _this.pageSize,
- shelfName: _this.shelfName,
- stateSet: [ 'ENABLE', 'SUSPEND', 'DISABLED' ]
- };
- _this.status = 'loading';
- getShelfList(params).then(res => {
- if (res.status == 200) {
- let list = res.data.list;
- if (list && list.length) {
- // 分页 拼接数据
- if (_this.pageNo > 1) {
- _this.shelfList = _this.shelfList.concat(res.data.list || []);
- } else {
- _this.shelfList = res.data.list;
- }
- _this.total = res.data.count;
- if (_this.shelfList.length == res.data.count) {
- //是否是最后一页
- _this.status = 'nomore';
- } else {
- _this.status = 'loadmore';
- }
- } else {
- _this.shelfList = list || [];
- _this.total = 0;
- _this.status = 'nomore';
- _this.noDataText = '没有查询到相关货架';
- }
- _this.noDataText = '暂无货架';
- } else {
- _this.status = 'loadmore';
- _this.shelfList = [];
- _this.total = 0;
- _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试';
- }
-
- });
- },
- viewDetail(item) {
- let nowData={
- shelfSn:item.shelfSn,
- shelfName:item.shelfName
- }
- uni.navigateTo({
- url: "/pages/shuntBackManage/chooseProduct?data="+encodeURIComponent(JSON.stringify(nowData))
- })
- }
- },
- onHide() {
- this.$nextTick(()=>{
- this.$refs.searchBox.blur();
- this.isGobleSearch=false
- uni.hideKeyboard()
- })
-
- },
- // 上拉加载更多
- onReachBottom() {
- if (this.shelfList.length < this.total) {
- // if (this.isGobleSearch && this.shelfName == '') {
- // return;
- // }
- this.pageNo++;
- this.getShelfList();
- } else {
- this.status = 'nomore';
- }
- }
- };
- </script>
- <style lang="less">
- .moreShelfPart {
- width: 100%;
- height: 100vh;
- background-color: #f8f8f8;
- .moreShelfPart-search {
- padding: 20rpx;
- }
- .moreShelfPart-body {
- flex-grow: 1;
- }
- .nav-right {
- padding: 0 30upx;
- box-sizing: border-box;
- overflow: auto;
- .nav-right-item {
- padding: 20upx;
- border: 2rpx solid #f5f5f5;
- border-radius: 15upx;
- margin-bottom: 20upx;
- box-shadow: 3rpx 3rpx 8rpx #eee;
- background-color: #ffff;
- &:active {
- background: #f8f8f8;
- }
- .item-info {
- .item-name {
- font-size: 30upx;
- vertical-align: middle;
- .barBox {
- display: block;
- height: 30rpx;
- width: 6rpx;
- background: #9da8b5;
- margin-right: 10rpx;
- border-radius: 10rpx;
- float: left;
- margin-top: 9rpx;
- }
- .itemName {
- vertical-align: top;
- }
- }
- .clearFix::after {
- clear: both;
- content: '';
- display: block;
- visibility: hidden;
- }
- .item-detail {
- margin-top: 15rpx;
- display: flex;
- align-items: center;
- color: #9da8b5;
- font-size: 26upx;
- :nth-child(1) {
- margin-right: 50rpx;
- }
- .item-detail-text {
- font-size: 26upx;
- color: #333;
- }
- }
- }
- .button-box {
- display: flex;
- margin-top: 20upx;
- button {
- margin: 0 10upx;
- }
- > text {
- font-size: 24upx;
- color: #00aaff;
- }
- }
- }
- }
- }
- </style>
|