index.vue 9.9 KB

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