index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <view class="p-content">
  3. <view class="p-head" v-if="baseData">
  4. <view>
  5. <view>
  6. <text>店内调出单号:</text>
  7. <text style="color: crimson;">{{baseData.storeCallOutNo}}</text>
  8. </view>
  9. <view>
  10. <button :disabled="loading" size="mini" type="primary" @click="submitForm"> 出库 <text class="iconfont icon-icon-test43"></text></button>
  11. </view>
  12. </view>
  13. <view>
  14. <text>条形码:</text>
  15. <view>
  16. <input
  17. @blur="addQty(true)"
  18. style="width: 100%;text-align: left;"
  19. class="uni-input"
  20. placeholder="扫描或输入条形码"
  21. border="surround"
  22. v-model="code">
  23. </view>
  24. </view>
  25. <view>
  26. <text>产品编码:</text>
  27. <view>
  28. <input
  29. @blur="addQty(true)"
  30. style="width: 100%;text-align: left;"
  31. class="uni-input"
  32. placeholder="请输入产品编码"
  33. border="surround"
  34. v-model="productCode">
  35. </view>
  36. </view>
  37. <view style="justify-content: flex-start;flex-wrap: wrap;">
  38. <view>已拣款数: <text style="color: red;">{{baseData.pickCategory||0}}</text>/{{baseData.productTotalCategory}}</view>
  39. <view>已拣数量: <text style="color: red;">{{baseData.pickQty||0}}</text>/{{baseData.productTotalQty}}</view>
  40. </view>
  41. </view>
  42. <view class="p-body">
  43. <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading" >
  44. <!-- 表头行 -->
  45. <uni-tr>
  46. <uni-td align="center">产品编码</uni-td>
  47. <uni-td align="center">产品分类</uni-td>
  48. <uni-td align="center">已拣/总数</uni-td>
  49. <uni-td align="center">拣货</uni-td>
  50. </uni-tr>
  51. <!-- 表格数据行 -->
  52. <uni-tr
  53. v-for="item in detailList"
  54. :key="item.id"
  55. :checkedRow="curProduct&&(item.productCode == curProduct.productCode)">
  56. <uni-td width="30%" align="center">
  57. <view @click="copyText(item.productCode)">{{item.productCode}}</view>
  58. </uni-td>
  59. <uni-td width="30%" align="center">{{item.productTypeName3||'--'}}</uni-td>
  60. <uni-td width="25%" align="center"><text style="color: red;">{{item.pickQty||0}}</text>/{{item.outQty}}</uni-td>
  61. <uni-td width="15%" align="center">
  62. <view style="display: flex;justify-content: center;">
  63. <u-icon v-if="item.pickFlag==0" name="close-circle-fill" color="red" size="22"></u-icon>
  64. <u-icon v-if="item.pickFlag==1" name="checkmark-circle-fill" color="green" size="22"></u-icon>
  65. <u-icon v-if="item.pickFlag==2" name="info-circle-fill" color="#ffaa00" size="22"></u-icon>
  66. </view>
  67. </uni-td>
  68. </uni-tr>
  69. </uni-table>
  70. </view>
  71. <view class="p-footer">
  72. <button size="mini" type="warn" @click="addQty(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button>
  73. <button size="mini" type="primary" @click="addQty(true)"> <text class="iconfont icon-add-btn"> 加 </text></button>
  74. </view>
  75. <scanCode></scanCode>
  76. <u-modal :show="showModal" :title="msg.title" :confirmText="msg.confirmText" showCancelButton :content='msg.content' @cancel="showModal=false" @confirm="confirmModal"></u-modal>
  77. </view>
  78. </template>
  79. <script>
  80. import scanCode from '@/libs/scan-code.vue';
  81. import { storeCallOutDetail, storeCallOutDetailList, storeCallOutPick, storeCallOutOut } from '@/config/api.js'
  82. import { playAudio } from '@/libs/tools.js'
  83. import clipboard from "@/js_sdk/dc-clipboard/clipboard.js"
  84. export default {
  85. components: { scanCode },
  86. data() {
  87. return {
  88. loading: false,
  89. baseData: null,
  90. showModal: false,
  91. msg:{title:'提示',content:''},
  92. detailList:[],
  93. code:'',
  94. productCode: '',
  95. storeCallOutSn: null,
  96. storeCallOutId: null,
  97. curProduct: null
  98. };
  99. },
  100. onLoad(opts) {
  101. var _this = this
  102. this.storeCallOutSn = opts.storeCallOutSn
  103. this.storeCallOutId = opts.id
  104. this.getDetail()
  105. this.getDetailList()
  106. uni.$on('scancodedate', function(content) {
  107. console.log("扫描到的内容为:", content)
  108. _this.code = content||''
  109. _this.addQty(true)
  110. })
  111. },
  112. onUnload() {
  113. uni.$off('scancodedate')
  114. },
  115. onShow() {
  116. this.hideKeyborder()
  117. },
  118. methods: {
  119. hideKeyborder(){
  120. uni.hideKeyboard()
  121. },
  122. // 复制
  123. copyText(text){
  124. clipboard.setText(text);
  125. uni.showToast({
  126. icon: 'none',
  127. title: '编码已复制成功'
  128. })
  129. },
  130. getCurProduct(){
  131. const curProduct = this.detailList.find(item => item.productQrCode == this.code || item.productCode == this.productCode)
  132. this.curProduct = curProduct || null
  133. return curProduct || null
  134. },
  135. addQty(flag){
  136. const curProduct = this.getCurProduct()
  137. if(curProduct){
  138. if(curProduct.pickFlag != 1 || !flag){
  139. this.queryProduct((curProduct.pickQty||0)+1*(flag?1:-1))
  140. }else{
  141. uni.$u.toast("此商品已全部拣货")
  142. playAudio('warn')
  143. }
  144. }else{
  145. if(this.code == '' && this.productCode == ''){
  146. uni.$u.toast("请扫描条形码或输入编码")
  147. }else{
  148. uni.$u.toast("此商品不存在")
  149. }
  150. playAudio('warn')
  151. }
  152. },
  153. //拣货
  154. queryProduct(pickQty){
  155. this.loading = true
  156. const params = {
  157. storeCallOutSn: this.storeCallOutSn,
  158. productQrCode: this.code,
  159. productCode: this.productCode,
  160. pickQty: pickQty
  161. }
  162. console.log(params)
  163. storeCallOutPick(params).then(res => {
  164. console.log(res)
  165. if(res.status == 200){
  166. if(res.data){
  167. this.getDetail()
  168. this.getDetailList()
  169. }else{
  170. uni.$u.toast("此商品不存在")
  171. playAudio('error')
  172. }
  173. }
  174. this.loading = false
  175. })
  176. },
  177. // 详情
  178. getDetail(){
  179. storeCallOutDetail({sn: this.storeCallOutSn}).then(res => {
  180. console.log(res,'详情')
  181. if(res.status == 200){
  182. this.baseData = res.data
  183. }
  184. })
  185. },
  186. // 产品明细列表
  187. getDetailList(){
  188. storeCallOutDetailList({pageNo:1,pageSize:1000,storeCallOutSn:this.storeCallOutSn}).then(res => {
  189. console.log(res)
  190. if(res.status == 200){
  191. this.detailList = res.data.list
  192. this.getCurProduct()
  193. }
  194. })
  195. },
  196. confirmModal(e){
  197. this.toOut()
  198. },
  199. // 提交
  200. submitForm(){
  201. if(this.baseData.pickQty != this.baseData.productTotalQty){
  202. this.showModal = true
  203. this.msg = {
  204. title: '提示',
  205. content: '拣货未完成,是否出库?',
  206. confirmText: '确定出库'
  207. }
  208. }else{
  209. this.toOut()
  210. }
  211. },
  212. // 出库
  213. async toOut(){
  214. const ret = await storeCallOutOut({storeCallOutSn: this.storeCallOutSn})
  215. if(ret.status == 200){
  216. this.$store.state.vuex_isRefash = true
  217. uni.navigateBack()
  218. }
  219. }
  220. },
  221. }
  222. </script>
  223. <style lang="scss">
  224. .p-content{
  225. .p-head{
  226. font-size: 32upx;
  227. color: $uni-text-color;
  228. >view{
  229. display: flex;
  230. align-items: center;
  231. padding: 10upx 20upx;
  232. border-bottom: 1px solid #eee;
  233. justify-content: space-between;
  234. > view{
  235. display: flex;
  236. padding: 0 10upx;
  237. align-items: center;
  238. }
  239. }
  240. .uni-input{
  241. border: 1px solid #eee;
  242. width: 150upx;
  243. text-align: center;
  244. padding: 8upx;
  245. }
  246. }
  247. .p-body{
  248. overflow: auto;
  249. flex-grow: 1;
  250. height: 50%;
  251. }
  252. .p-footer{
  253. padding:20upx 30upx;
  254. display: flex;
  255. > button{
  256. width: 30%;
  257. }
  258. }
  259. }
  260. </style>