shelfList.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <view class="moreShelfPart flex flex_column">
  3. <view class="moreShelfPart-search">
  4. <u-search
  5. placeholder="请输入货架名称搜索"
  6. v-model="shelfName"
  7. :show-action="isGobleSearch"
  8. @input="change"
  9. @focus="isGobleSearch = true"
  10. @blur="isGobleSearch = false"
  11. @custom="getShelfList"
  12. @search="getShelfList"
  13. @clear="clearSearch"
  14. :action-style="{ color: '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', padding: '12upx 0' }"
  15. ></u-search>
  16. </view>
  17. <view class="moreShelfPart-body">
  18. <view class="nav-right">
  19. <view class="nav-right-item" v-for="(item, index) in shelfList" :key="item.id" @click="viewDetail(item)">
  20. <view class="item-info">
  21. <view class="item-name clearFix">
  22. <text class="barBox"></text>
  23. <text class="itemName">{{ item.shelfName }}</text>
  24. </view>
  25. <view class="item-detail">
  26. <view>
  27. 产品款数:
  28. <text class="item-detail-text">{{ item.shelfPlaceBindNum || 0 }}</text>
  29. </view>
  30. <view>
  31. 库存总量:
  32. <text class="item-detail-text">{{ item.qty || 0 }}</text>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view v-if="shelfList && shelfList.length == 0">
  38. <u-empty
  39. v-if="status != 'loading'"
  40. :src="`/static/${$config('themePath')}/def_no_data@3x.png`"
  41. icon-size="180"
  42. :text="noDataText"
  43. mode="list"
  44. :margin-top="100"
  45. ></u-empty>
  46. </view>
  47. <view style="padding: 20upx;" v-if="shelfList.length"><u-loadmore :status="status" /></view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import { getShelfList } from '@/api/shelf';
  54. import { clzConfirm } from '@/libs/tools';
  55. export default {
  56. data() {
  57. return {
  58. shelfName: '',
  59. isGobleSearch: false,
  60. shelfList: [],
  61. noDataText: '暂无货架',
  62. status: 'loading',
  63. tempData: null,
  64. pageNo: 1,
  65. pageSize: 20
  66. };
  67. },
  68. onLoad() {
  69. this.getShelfList();
  70. },
  71. methods: {
  72. clearSearch() {
  73. this.pageNo = 1;
  74. this.shelfName = '';
  75. this.shelfList = [];
  76. console.log('111:')
  77. this.$nextTick(() => {
  78. this.getShelfList();
  79. });
  80. },
  81. change(v) {
  82. if (v == '') {
  83. this.clearSearch();
  84. }else{
  85. this.pageNo = 1;
  86. }
  87. },
  88. // 获取数字货架列表
  89. getShelfList() {
  90. const _this = this;
  91. let params = {
  92. pageNo: _this.pageNo,
  93. pageSize: _this.pageSize,
  94. shelfName: _this.shelfName
  95. };
  96. _this.status = 'loading';
  97. getShelfList(params).then(res => {
  98. if (res.status == 200) {
  99. let list = res.data.list;
  100. if (list && list.length) {
  101. // 分页 拼接数据
  102. if (_this.pageNo > 1) {
  103. _this.shelfList = _this.shelfList.concat(res.data.list || []);
  104. } else {
  105. _this.shelfList = res.data.list;
  106. }
  107. _this.total = res.data.count;
  108. if (_this.shelfList.length == res.data.count) {
  109. //是否是最后一页
  110. _this.status = 'nomore';
  111. } else {
  112. _this.status = 'loadmore';
  113. }
  114. } else {
  115. _this.shelfList = list || [];
  116. _this.total = 0;
  117. _this.status = 'nomore';
  118. _this.noDataText = '没有查询到相关货架';
  119. }
  120. _this.noDataText = '暂无货架';
  121. } else {
  122. _this.status = 'loadmore';
  123. _this.shelfList = [];
  124. _this.total = 0;
  125. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试';
  126. }
  127. });
  128. },
  129. viewDetail(item) {
  130. uni.navigateTo({
  131. url: '/pages/shuntBackManage/addBackOrder?shelfSn='+ item.shelfSn+'&shelfName='+item.shelfName
  132. });
  133. }
  134. },
  135. // 上拉加载更多
  136. onReachBottom() {
  137. if (this.shelfList.length < this.total) {
  138. // if (this.isGobleSearch && this.shelfName == '') {
  139. // return;
  140. // }
  141. this.pageNo++;
  142. this.getShelfList();
  143. } else {
  144. this.status = 'nomore';
  145. }
  146. }
  147. };
  148. </script>
  149. <style lang="less">
  150. .moreShelfPart {
  151. width: 100%;
  152. height: 100vh;
  153. background-color: #f8f8f8;
  154. .moreShelfPart-search {
  155. padding: 20rpx;
  156. }
  157. .moreShelfPart-body {
  158. flex-grow: 1;
  159. }
  160. .nav-right {
  161. padding: 0 30upx;
  162. box-sizing: border-box;
  163. overflow: auto;
  164. .nav-right-item {
  165. padding: 20upx;
  166. border: 2rpx solid #f5f5f5;
  167. border-radius: 15upx;
  168. margin-bottom: 20upx;
  169. box-shadow: 3rpx 3rpx 8rpx #eee;
  170. background-color: #ffff;
  171. &:active {
  172. background: #f8f8f8;
  173. }
  174. .item-info {
  175. .item-name {
  176. font-size: 30upx;
  177. vertical-align: middle;
  178. .barBox {
  179. display: block;
  180. height: 30rpx;
  181. width: 6rpx;
  182. background: #9da8b5;
  183. margin-right: 10rpx;
  184. border-radius: 10rpx;
  185. float: left;
  186. margin-top: 9rpx;
  187. }
  188. .itemName {
  189. vertical-align: top;
  190. }
  191. }
  192. .clearFix::after {
  193. clear: both;
  194. content: '';
  195. display: block;
  196. visibility: hidden;
  197. }
  198. .item-detail {
  199. margin-top: 15rpx;
  200. display: flex;
  201. align-items: center;
  202. color: #9da8b5;
  203. font-size: 26upx;
  204. :nth-child(1) {
  205. margin-right: 50rpx;
  206. }
  207. .item-detail-text {
  208. font-size: 26upx;
  209. color: #333;
  210. }
  211. }
  212. }
  213. .button-box {
  214. display: flex;
  215. margin-top: 20upx;
  216. button {
  217. margin: 0 10upx;
  218. }
  219. > text {
  220. font-size: 24upx;
  221. color: #00aaff;
  222. }
  223. }
  224. }
  225. }
  226. }
  227. </style>