index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="stock-wrap">
  3. <!-- 库存查询 -->
  4. <view class="stock-con" v-if="$hasPermissions('M_stockQuery_mobile')">
  5. <u-form :model="form" ref="uForm" label-width="100">
  6. <u-form-item label="条形码"><u-input v-model.trim="form.productQrCode" placeholder="请输入条形码" input-align="right" /></u-form-item>
  7. <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="right" /></u-form-item>
  8. <u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="right" /></u-form-item>
  9. </u-form>
  10. <view class="form-footer-btn">
  11. <u-button size="medium" shape="circle" hover-class="none" @click="handleClean">清空</u-button>
  12. <u-button size="medium" hover-class="none" shape="circle" :loading="loading" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  13. </view>
  14. </view>
  15. <view class="p-body" v-if="listData.length">
  16. <uni-table border emptyText="暂无数据" :loading="loading" >
  17. <!-- 表头行 -->
  18. <uni-tr>
  19. <uni-td width="30%" align="center">产品编码</uni-td>
  20. <uni-td width="30%" align="center">条形码</uni-td>
  21. <uni-td width="15%" align="center">库存</uni-td>
  22. <uni-td width="25%" align="center">仓库/仓位</uni-td>
  23. </uni-tr>
  24. <!-- 表格数据行 -->
  25. <uni-tr v-for="item in listData" :key="item.productSn" @click="toDetail(item)">
  26. <uni-td width="30%" align="center">{{item.productCode||'-'}}</uni-td>
  27. <uni-td width="30%" align="center">{{item.dealerProductEntity.qrCode||'-'}}</uni-td>
  28. <uni-td width="15%" align="center">{{item.currentQty}}</uni-td>
  29. <uni-td width="25%" align="center">{{item.warehouseName}}/<view>{{item.warehouseLocationName}}</view></uni-td>
  30. </uni-tr>
  31. </uni-table>
  32. </view>
  33. <scanCode></scanCode>
  34. </view>
  35. </template>
  36. <script>
  37. import scanCode from '@/libs/scan-code.vue';
  38. import { dealerProductTypeList , stockDetailList } from '@/config/api'
  39. import { toThousands } from '@/libs/tools'
  40. export default{
  41. components: { scanCode },
  42. data(){
  43. return {
  44. form: {
  45. productCode: '', // 产品编码
  46. productQrCode: '', // 条形码
  47. productName: '', // 产品名称
  48. enableFlag: true,
  49. zeroQtyFlag: false,
  50. minCurrentQty: 1
  51. },
  52. customBtnStyle: { // 自定义按钮样式
  53. backgroundColor: '#335fb6',
  54. color: '#fff'
  55. },
  56. listData: [],
  57. toThousands,
  58. loading: false
  59. }
  60. },
  61. onLoad() {
  62. var _this = this
  63. uni.$on('scancodedate', function(content) {
  64. console.log("扫描到的内容为:", content)
  65. _this.form.productQrCode = content||''
  66. if(content){
  67. _this.form.productCode = ''
  68. _this.form.productName = ''
  69. _this.handleSearch()
  70. }else{
  71. _this.$message("扫描失败,请重试!")
  72. }
  73. })
  74. },
  75. onUnload() {
  76. uni.$off('scancodedate')
  77. },
  78. methods: {
  79. $message(msg){
  80. uni.showToast({
  81. icon: 'none',
  82. title: msg
  83. })
  84. },
  85. // 表单清空
  86. handleClean(){
  87. this.form.productCode = ''
  88. this.form.productQrCode = ''
  89. this.form.productName = ''
  90. this.listData = []
  91. },
  92. // 查询
  93. handleSearch(){
  94. if(this.form.productQrCode||this.form.productCode||this.form.productName){
  95. let params = {
  96. minCurrentQty:1,
  97. dealerProduct: {
  98. "qrCode": this.form.productQrCode,
  99. "code": this.form.productCode,
  100. "name": this.form.productName
  101. },
  102. pageNo: 1,
  103. pageSize: 100
  104. }
  105. console.log(params)
  106. this.loading = true
  107. stockDetailList(params).then(res => {
  108. console.log(res)
  109. if(res.status == 200){
  110. this.listData = res.data.list
  111. }else{
  112. this.listData = []
  113. this.$message(res.message)
  114. }
  115. this.loading = false
  116. })
  117. }else{
  118. this.$message("请输入查询条件")
  119. }
  120. },
  121. toDetail(item){
  122. this.$store.state.vuex_tempData = item
  123. uni.navigateTo({
  124. url: "/pages/stock/stockDetail"
  125. })
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="scss">
  131. page{
  132. background: #f8f8f8;
  133. }
  134. .stock-wrap{
  135. .stock-con{
  136. background-color: #ffffff;
  137. padding: 20upx;
  138. border-radius: 20upx;
  139. .stock-tit{
  140. font-weight: bold;
  141. .u-line{
  142. display: inline-block;
  143. width: 6upx;
  144. height: 30upx;
  145. vertical-align: bottom;
  146. margin: 0 10upx;
  147. border-radius: 5upx;
  148. }
  149. border-bottom: 1px solid #eee;
  150. }
  151. .form-footer-btn{
  152. margin: 30upx;
  153. display: flex;
  154. justify-content: space-between;
  155. }
  156. .form-footer-btn uni-button{
  157. width: 40%;
  158. margin: 0 auto;
  159. font-size: 30upx;
  160. }
  161. }
  162. .p-body{
  163. background-color: #ffffff;
  164. padding: 10upx 20upx;
  165. border-radius: 20upx;
  166. margin-top: 20upx;
  167. }
  168. }
  169. </style>