shelfList.vue 5.8 KB

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