index.vue 8.7 KB

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