index.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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" border="bottom" placeholder="请输入条形码" input-align="right" /></u-form-item>
  7. <u-form-item label="产品编码"><u-input v-model.trim="form.productCode" border="bottom" placeholder="请输入产品编码" input-align="right" /></u-form-item>
  8. <u-form-item label="产品名称"><u-input v-model.trim="form.productName" border="bottom" 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" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  13. </view>
  14. </view>
  15. <!-- 查询结果 -->
  16. <view class="stockDetail-info" v-if="listData">
  17. <view class="info-item flex align_center justify_between">
  18. <view class="info-name">产品编码</view>
  19. <view>{{listData && listData.productCode || '--'}} <copyText :text="listData.productCode" label="产品编码"></copyText></view>
  20. </view>
  21. <view class="info-item flex align_center justify_between">
  22. <view class="info-name">产品名称</view>
  23. <view>{{listData && listData.productName || '--'}} <copyText :text="listData.productName" label="产品名称"></copyText></view>
  24. </view>
  25. <view class="info-item flex align_center justify_between">
  26. <view class="info-name">条形码</view>
  27. <view>{{listData && listData.productQrCode || '--'}} <copyText :text="listData.productQrCode" label="条形码"></copyText></view>
  28. </view>
  29. <view class="info-item flex align_center justify_between">
  30. <view class="info-name">库存数量</view>
  31. <view>{{toThousands(listData.currentStockQty||0)}}{{listData.productUnit}}</view>
  32. </view>
  33. <view class="info-item flex align_center justify_between">
  34. <view class="info-name">仓库/仓位</view>
  35. <view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
  36. </view>
  37. <view class="info-item flex align_center justify_between">
  38. <view class="info-name">产品分类</view>
  39. <view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
  40. </view>
  41. <view class="info-item flex align_center justify_between">
  42. <view class="info-name">单位</view>
  43. <view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
  44. </view>
  45. <view class="info-item flex align_center justify_between">
  46. <view class="info-name">产品图片</view>
  47. <view>{{listData && listData.putBizTypeDictValue || '--'}}</view>
  48. </view>
  49. </view>
  50. <scanCode></scanCode>
  51. </view>
  52. </template>
  53. <script>
  54. import scanCode from '@/libs/scan-code.vue';
  55. import { dealerProductTypeList , stockList } from '@/config/api'
  56. import copyText from '@/pages/common/copyText.vue'
  57. import { toThousands } from '@/libs/tools'
  58. export default{
  59. components: { scanCode, copyText },
  60. data(){
  61. return {
  62. form: {
  63. productCode: '', // 产品编码
  64. productQrCode: '', // 挑选码
  65. productName: '', // 产品名称
  66. productOrigCode: '', // 原厂编码
  67. productBrandSn: undefined, // 产品品牌
  68. productTypeSn1: undefined, // 产品分类1
  69. productTypeSn2: undefined, // 产品分类2
  70. productTypeSn3: undefined, // 产品分类3
  71. zeroQtyFlag: false ,// 库存情况
  72. enableFlag: true, // 显示禁用产品
  73. minUnsalableDays: undefined, // 滞销天数最小值
  74. maxUnsalableDays: undefined // 滞销天数最大值
  75. },
  76. customBtnStyle: { // 自定义按钮样式
  77. backgroundColor: '#335fb6',
  78. color: '#fff'
  79. },
  80. listData: null,
  81. toThousands
  82. }
  83. },
  84. onLoad() {
  85. var _this = this
  86. uni.$on('scancodedate', function(content) {
  87. console.log("扫描到的内容为:", content)
  88. _this.form.productQrCode = content||''
  89. _this.handleSearch()
  90. })
  91. },
  92. onUnload() {
  93. uni.$off('scancodedate')
  94. },
  95. onShow() {
  96. // 是否默认包括禁用产品
  97. const a = uni.getStorageSync('productEnabledFlag-' + this.$store.state.vuex_userData.orgId)
  98. this.form.enableFlag = typeof a == 'boolean' ? a : true
  99. },
  100. methods: {
  101. $message(msg){
  102. uni.showToast({
  103. icon: 'none',
  104. title: msg
  105. })
  106. },
  107. // 表单清空
  108. handleClean(){
  109. this.form.productCode = ''
  110. this.form.productQrCode = ''
  111. this.form.productName = ''
  112. this.form.productOrigCode = ''
  113. this.form.productBrandSn = undefined
  114. this.form.productTypeSn1 = undefined
  115. this.form.productTypeSn2 = undefined
  116. this.form.productTypeSn3 = undefined
  117. this.form.zeroQtyFlag = false
  118. this.form.minUnsalableDays = undefined // 滞销天数最小值
  119. this.form.maxUnsalableDays = undefined // 滞销天数最大值
  120. this.listData = null
  121. },
  122. // 查询
  123. handleSearch(){
  124. let params = this.form
  125. params.zeroQtyFlag = params.zeroQtyFlag ? '0' : ''
  126. params.enableFlag = params.enableFlag ? '' : '1'
  127. params.pageNo = 1
  128. params.pageSize = 1
  129. console.log(params)
  130. stockList(params).then(res => {
  131. console.log(res)
  132. if(res.status == 200){
  133. this.listData = res.data.list[0]
  134. }
  135. if(this.listData.length==0){
  136. this.$message("没有查询到产品")
  137. }
  138. })
  139. },
  140. }
  141. }
  142. </script>
  143. <style lang="scss">
  144. page{
  145. background: #f8f8f8;
  146. }
  147. .stock-wrap{
  148. padding: 0 30upx;
  149. .panel-box {
  150. background-color: #ffffff;
  151. padding: 20upx 20upx;
  152. border-radius: 20upx;
  153. .item-box{
  154. text-align: center;
  155. display: flex;
  156. align-items: center;
  157. justify-content: space-between;
  158. font-size: 14px;
  159. }
  160. margin-bottom: 20upx;
  161. }
  162. .stock-con{
  163. background-color: #ffffff;
  164. padding: 20upx;
  165. border-radius: 20upx;
  166. .stock-tit{
  167. font-weight: bold;
  168. .u-line{
  169. display: inline-block;
  170. width: 6upx;
  171. height: 30upx;
  172. vertical-align: bottom;
  173. margin: 0 10upx;
  174. border-radius: 5upx;
  175. }
  176. border-bottom: 1px solid #eee;
  177. }
  178. .form-footer-btn{
  179. margin: 30upx;
  180. display: flex;
  181. justify-content: space-between;
  182. }
  183. .form-footer-btn uni-button{
  184. width: 40%;
  185. margin: 0 auto;
  186. font-size: 30upx;
  187. }
  188. }
  189. .stockDetail-info{
  190. background-color: #ffffff;
  191. padding: 10upx 20upx 20upx;
  192. border-radius: 20upx;
  193. box-shadow: 3upx 2upx 6upx #eee;
  194. .info-item{
  195. border-bottom: 1px dashed #e4e7ed;
  196. padding: 20upx 0;
  197. .info-name{
  198. color: #464646;
  199. }
  200. }
  201. }
  202. }
  203. </style>