index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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="80">
  6. <u-form-item label="条形码"><u-input v-model.trim="form.productQrCode" placeholder="请扫描或输入条形码" input-align="left" /></u-form-item>
  7. <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" placeholder="请输入产品编码" input-align="left" /></u-form-item>
  8. <u-form-item label="产品名称"><u-input v-model.trim="form.productName" placeholder="请输入产品名称" input-align="left" /></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="25%" align="center">产品编码</uni-td>
  20. <uni-td width="25%" align="center">可用库存</uni-td>
  21. <uni-td width="25%" 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="25%" align="center">{{item.productCode||'-'}}</uni-td>
  27. <uni-td width="25%" align="center">{{item.currentQty}}</uni-td>
  28. <uni-td width="25%" align="center">{{item.freezeQty}}</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 { playAudio, toThousands } from '@/libs/tools.js'
  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. playAudio('error')
  73. }
  74. })
  75. },
  76. onUnload() {
  77. uni.$off('scancodedate')
  78. },
  79. methods: {
  80. $message(msg){
  81. uni.showToast({
  82. icon: 'none',
  83. title: msg
  84. })
  85. },
  86. // 表单清空
  87. handleClean(){
  88. this.form.productCode = ''
  89. this.form.productQrCode = ''
  90. this.form.productName = ''
  91. this.listData = []
  92. },
  93. // 查询
  94. handleSearch(){
  95. if(this.form.productQrCode||this.form.productCode||this.form.productName){
  96. let params = {
  97. minCurrentQty:1,
  98. dealerProduct: {
  99. "qrCode": this.form.productQrCode,
  100. "code": this.form.productCode,
  101. "name": this.form.productName
  102. },
  103. pageNo: 1,
  104. pageSize: 100
  105. }
  106. console.log(params)
  107. this.loading = true
  108. stockDetailList(params).then(res => {
  109. console.log(res)
  110. if(res.status == 200){
  111. this.listData = res.data.list
  112. }else{
  113. this.listData = []
  114. }
  115. if(this.listData.length==0){
  116. this.$message('没有查询到商品')
  117. }
  118. this.loading = false
  119. })
  120. }else{
  121. this.$message("请输入查询条件")
  122. playAudio('warn')
  123. }
  124. },
  125. toDetail(item){
  126. this.$store.state.vuex_tempData = item
  127. uni.navigateTo({
  128. url: "/pages/stock/stockDetail"
  129. })
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss">
  135. page{
  136. background: #f8f8f8;
  137. }
  138. .stock-wrap{
  139. .stock-con{
  140. background-color: #ffffff;
  141. padding: 20upx;
  142. border-radius: 20upx;
  143. .stock-tit{
  144. font-weight: bold;
  145. .u-line{
  146. display: inline-block;
  147. width: 6upx;
  148. height: 30upx;
  149. vertical-align: bottom;
  150. margin: 0 10upx;
  151. border-radius: 5upx;
  152. }
  153. border-bottom: 1px solid #eee;
  154. }
  155. .form-footer-btn{
  156. margin: 20upx 30upx;
  157. display: flex;
  158. justify-content: space-between;
  159. }
  160. .form-footer-btn uni-button{
  161. width: 40%;
  162. margin: 0 auto;
  163. font-size: 30upx;
  164. }
  165. }
  166. .p-body{
  167. background-color: #ffffff;
  168. padding: 10upx 20upx;
  169. border-radius: 20upx;
  170. margin-top: 20upx;
  171. height: 60vh;
  172. overflow: auto;
  173. }
  174. }
  175. </style>