index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <view class="p-content">
  3. <view class="p-head" v-if="baseData">
  4. <view>
  5. <text>销售单号:</text>
  6. <text style="color: crimson;">{{baseData.salesBillNo}}</text>
  7. </view>
  8. <view>
  9. <text>条码:</text>
  10. <view>
  11. <input
  12. @blur="queryProduct"
  13. style="width: 100%;text-align: left;"
  14. class="uni-input"
  15. placeholder="扫描或输入条码"
  16. border="surround"
  17. v-model="code">
  18. </view>
  19. </view>
  20. </view>
  21. <view class="p-body">
  22. <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading" >
  23. <!-- 表头行 -->
  24. <uni-tr>
  25. <uni-td align="center">产品编码</uni-td>
  26. <uni-td align="center">产品分类</uni-td>
  27. <uni-td align="center">数量</uni-td>
  28. <uni-td align="center">扫码检货</uni-td>
  29. </uni-tr>
  30. <!-- 表格数据行 -->
  31. <uni-tr v-for="item in detailList" :key="item.id" :checkedRow="curProduct&&curProduct.qrCode == item.qrCode">
  32. <uni-td width="30%" align="center">{{item.dealerProductEntity.code}}</uni-td>
  33. <uni-td width="30%" align="center">{{item.dealerProductEntity.productTypeName2}}</uni-td>
  34. <uni-td width="20%" align="center">{{item.qty}}/{{item.qty}}</uni-td>
  35. <uni-td width="20%" align="center">
  36. <text :style="{color:item.pickFlag==1?'green':'red'}">{{item.pickFlag==1?'已检货':'未检货'}}</text>
  37. </uni-td>
  38. </uni-tr>
  39. </uni-table>
  40. </view>
  41. <view class="p-footer">
  42. <button :disabled="loading" size="mini" type="default" @click="toNoOut"> 未检货出库 <text class="iconfont icon-icon-test43"></text></button>
  43. <button :disabled="loading" size="mini" type="primary" @click="toOut"> 检货出库 <text class="iconfont icon-icon-test43"></text></button>
  44. </view>
  45. <scanCode></scanCode>
  46. </view>
  47. </template>
  48. <script>
  49. import scanCode from '@/libs/scan-code.vue';
  50. import { salesDetail, salesDetailList, salesPick, salesWriteStockOut, salesWriteNoStockOut } from '@/config/api.js'
  51. import { playAudio } from '@/libs/tools.js'
  52. export default {
  53. components: { scanCode },
  54. data() {
  55. return {
  56. loading: false,
  57. baseData: null,
  58. detailList:[],
  59. code:'',
  60. salesBillSn: null,
  61. salesId: null,
  62. curProduct: null
  63. };
  64. },
  65. onLoad(opts) {
  66. var _this = this
  67. this.salesBillSn = opts.salesBillSn
  68. this.salesId = opts.id
  69. this.getDetail()
  70. this.getDetailList()
  71. uni.$on('scancodedate', function(content) {
  72. console.log("扫描到的内容为:", content)
  73. _this.code = content||''
  74. _this.queryProduct()
  75. })
  76. },
  77. onShow() {
  78. this.hideKeyborder()
  79. },
  80. onUnload() {
  81. uni.$off('scancodedate')
  82. },
  83. methods: {
  84. hideKeyborder(){
  85. uni.hideKeyboard()
  86. },
  87. //检货
  88. queryProduct(){
  89. if(this.code==''){return}
  90. this.loading = true
  91. salesPick({salesBillSn: this.salesBillSn, productQrCode: this.code}).then(res => {
  92. console.log(res)
  93. if(res.status == 200){
  94. if(res.data){
  95. this.getDetailList()
  96. }else{
  97. uni.$u.toast("此商品不存在")
  98. playAudio('error')
  99. }
  100. }
  101. this.loading = false
  102. })
  103. },
  104. // 详情
  105. getDetail(){
  106. salesDetail({salesBillSn: this.salesBillSn}).then(res => {
  107. console.log(res,'详情')
  108. if(res.status == 200){
  109. this.baseData = res.data
  110. }
  111. })
  112. },
  113. // 产品明细列表
  114. getDetailList(){
  115. salesDetailList({pageNo:1,pageSize:1000,salesBillSn:this.salesBillSn,orderBy: 'sales_bill_detail.CREATE_DATE desc'}).then(res => {
  116. if(res.status == 200){
  117. this.detailList = res.data.list
  118. const curProduct = this.detailList.find(item => item.qrCode == this.code)
  119. this.curProduct = curProduct || null
  120. }
  121. })
  122. },
  123. // 未捡货出库
  124. toNoOut(){
  125. const _this = this
  126. uni.showModal({
  127. title: '提示',
  128. content: '确定未检货出库?',
  129. success: function (res) {
  130. if (res.confirm) {
  131. _this.salesWriteNoStockOut()
  132. }
  133. }
  134. });
  135. },
  136. async salesWriteNoStockOut(){
  137. const ret = await salesWriteNoStockOut({salesBillSn: this.salesBillSn})
  138. if(ret.status == 200){
  139. this.$store.state.vuex_isRefash = true
  140. uni.navigateBack()
  141. }
  142. },
  143. // 出库
  144. async toOut(){
  145. const ret = await salesWriteStockOut({salesBillSn: this.salesBillSn})
  146. if(ret.status == 200){
  147. this.$store.state.vuex_isRefash = true
  148. uni.navigateBack()
  149. }
  150. }
  151. },
  152. }
  153. </script>
  154. <style lang="scss">
  155. .p-content{
  156. .p-head{
  157. font-size: 32upx;
  158. color: $uni-text-color;
  159. >view{
  160. display: flex;
  161. align-items: center;
  162. padding: 10upx 20upx;
  163. border-bottom: 1px solid #eee;
  164. > view{
  165. display: flex;
  166. padding: 0 10upx;
  167. align-items: center;
  168. }
  169. }
  170. .uni-input{
  171. border: 1px solid #eee;
  172. width: 150upx;
  173. text-align: center;
  174. padding: 8upx;
  175. }
  176. }
  177. .p-body{
  178. overflow: auto;
  179. flex-grow: 1;
  180. height: 50%;
  181. }
  182. .p-footer{
  183. padding:30upx;
  184. display: flex;
  185. > button{
  186. width: 40%;
  187. }
  188. }
  189. }
  190. </style>