index.vue 5.1 KB

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