index.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
  3. <cus-header title='库存统计' bgColor='transparent'></cus-header>
  4. <image class="topbg" :src="imgBase+'storage/home_bg.png'" mode="widthFix"></image>
  5. <div class="search">
  6. <u--input
  7. placeholder="请输入商品名称"
  8. border="none"
  9. prefixIcon="search"
  10. prefixIconStyle="font-size: 24px;color: #86909C"
  11. v-model="params.itemName"
  12. ></u--input>
  13. <div class="btn" @tap="search">搜索</div>
  14. </div>
  15. <div class="select">
  16. <div class="left">选择仓库</div>
  17. <div class="right" @tap="selectWarehouse">
  18. <text v-if="warehouseName">{{warehouseName}} ></text>
  19. <div class="tip" v-else>请选择仓库<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon></div>
  20. </div>
  21. </div>
  22. <div class="list" :style="{'height':'calc(100vh - '+(mt+125)+'px)'}">
  23. <template v-if="list.length">
  24. <u-list @scrolltolower="scrolltolower">
  25. <u-list-item v-for="(good, index) in list" :key="good.id">
  26. <div class="item">
  27. <div class="title">{{good.item.itemName}}</div>
  28. <div class="info">
  29. <div>
  30. 规格信息:<span v-if="good.itemSku.skuCode">{{good.itemSku.skuCode+'/'}}</span>
  31. <span v-if="good.itemSku.skuName">{{good.itemSku.skuName}}</span>
  32. </div>
  33. <div>库存:<span :class="{'zero':good.quantity=='0'}" style="font-size: 28rpx;font-weight: bold;">{{good.quantity||''}}</span></div>
  34. </div>
  35. </div>
  36. </u-list-item>
  37. </u-list>
  38. </template>
  39. <template v-else>
  40. <page-empty :height="'calc(100vh - 200px)'"></page-empty>
  41. </template>
  42. </div>
  43. <u-picker title="仓库" :show="warehouseShow" :columns="warehouseList" keyName="warehouseName"
  44. @cancel="warehouseShow=false" @confirm="warehouseConfirm">
  45. </u-picker>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. data(){
  51. return {
  52. params:{
  53. page:1,
  54. limit:10,
  55. itemName:'',
  56. warehouseId:'',
  57. },
  58. list:[],
  59. warehouseName:'',
  60. warehouseShow:false,
  61. warehouseList:[],
  62. isOver:false
  63. }
  64. },
  65. onLoad() {
  66. this.getList();
  67. },
  68. methods:{
  69. selectWarehouse(){
  70. this.warehouseShow = true;
  71. this.$nextTick(()=>{
  72. this.$api.get('/wms/warehouse/page').then(res=>{
  73. if(res.data.code===0){
  74. this.warehouseList = [res.data.data.list];
  75. }else this.$showToast(res.data.msg)
  76. })
  77. })
  78. },
  79. warehouseConfirm(e){
  80. this.params.warehouseId = e.value[0].id;
  81. this.warehouseName = e.value[0].warehouseName;
  82. this.warehouseShow = false;
  83. this.initList();
  84. },
  85. getList(){
  86. this.$api.get('/wms/inventory/boardList/warehouse',this.params).then(res=>{
  87. if(res.data.code===0){
  88. if(this.list.length<res.data.data.total){
  89. this.params.page++;
  90. this.list = [...this.list,...res.data.data.list];
  91. }else this.isOver = true
  92. }else this.$showModal(res.data.msg)
  93. });
  94. },
  95. search(){
  96. this.initList();
  97. },
  98. initList(){
  99. this.params.page = 1;
  100. this.list = [];
  101. this.isOver = false;
  102. this.getList();
  103. },
  104. scrolltolower(){
  105. if(this.isOver) return
  106. this.getList();
  107. },
  108. }
  109. }
  110. </script>
  111. <style scoped lang="less">
  112. .page{
  113. padding: 0 24rpx 20rpx;
  114. background: #F4F8FB;
  115. box-sizing: border-box;
  116. .topbg{
  117. width: 100%;
  118. position: fixed;
  119. top: 0;
  120. left: 0;
  121. z-index: 0;
  122. }
  123. .search{
  124. width: 100%;
  125. height: 84rpx;
  126. padding: 6rpx 6rpx 6rpx 30rpx;
  127. box-sizing: border-box;
  128. background: #FFFFFF;
  129. border-radius: 40rpx;
  130. border: 1rpx solid #198CFF;
  131. position: relative;
  132. display: flex;
  133. align-items: center;
  134. justify-content: space-between;
  135. .btn{
  136. width: 118rpx;
  137. height: 68rpx;
  138. background: #198CFF;
  139. border-radius: 40rpx;
  140. border: 1rpx solid #198CFF;
  141. font-family: PingFangSC, PingFang SC;
  142. font-weight: 400;
  143. font-size: 28rpx;
  144. color: #FFFFFF;
  145. line-height: 68rpx;
  146. text-align: center;
  147. letter-spacing: 2rpx;
  148. }
  149. }
  150. .select{
  151. width: 100%;
  152. background: #FFFFFF;
  153. border-radius: 16rpx;
  154. padding: 24rpx;
  155. box-sizing: border-box;
  156. display: flex;
  157. align-items: center;
  158. justify-content: space-between;
  159. position: relative;
  160. margin-top: 20rpx;
  161. .left{
  162. font-family: PingFang-SC, PingFang-SC;
  163. font-weight: bold;
  164. font-size: 30rpx;
  165. color: #1D2129;
  166. line-height: 42rpx;
  167. }
  168. .right{
  169. font-family: PingFangSC, PingFang SC;
  170. font-weight: 400;
  171. font-size: 30rpx;
  172. color: #4E5969;
  173. line-height: 42rpx;
  174. text-align: right;
  175. .tip{
  176. display: flex;
  177. align-items: center;
  178. }
  179. }
  180. }
  181. .list{
  182. width: 100%;
  183. margin-top: 20rpx;
  184. background: #FFFFFF;
  185. position: relative;
  186. border-radius: 16rpx 16rpx 0rpx 0rpx;
  187. ::v-deep .u-list{
  188. width: 100%;
  189. height: 100% !important;
  190. }
  191. ::v-deep .u-list-item{
  192. width: 100%;
  193. }
  194. .item{
  195. width: 100%;
  196. padding: 36rpx 24rpx;
  197. box-sizing: border-box;
  198. box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
  199. .title{
  200. font-family: PingFang-SC, PingFang-SC;
  201. font-weight: bold;
  202. font-size: 30rpx;
  203. color: #1D2129;
  204. line-height: 30rpx;
  205. text-align: left;
  206. text-overflow: ellipsis;
  207. overflow: hidden;
  208. white-space: nowrap;
  209. }
  210. .info{
  211. width: 100%;
  212. display: flex;
  213. align-items: center;
  214. justify-content: space-between;
  215. margin-top: 28rpx;
  216. &>div{
  217. font-family: PingFangSC, PingFang SC;
  218. font-weight: 400;
  219. font-size: 24rpx;
  220. color: #86909C;
  221. line-height: 24rpx;
  222. text-align: left;
  223. span{
  224. color: #4E5969;
  225. &.zero{
  226. color: #FA415E;
  227. }
  228. }
  229. }
  230. }
  231. }
  232. }
  233. }
  234. </style>