creatOrder.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="searchBar">
  4. <view class="p-title flex align_center">
  5. <text></text>
  6. <view class="shelfName">
  7. <view>{{nowData.shelfName}}</view>
  8. </view>
  9. <view class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view>
  10. </view>
  11. <view class="search flex align_center">
  12. <view class="input">
  13. <u-search
  14. v-model="queryWord"
  15. @custom="getpartList"
  16. @search="getpartList"
  17. @clear="clearSearch"
  18. @input="$u.debounce(changeSearch, 800)"
  19. bg-color="#fff"
  20. :show-action="false"
  21. placeholder="请输入产品编码或名称搜索"></u-search>
  22. </view>
  23. <view class="icon" @click="toScan">
  24. <u-icon name="scan"></u-icon>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="check-list">
  29. <productList ref="productList" noDataText="暂无产品" @allChecked="allCheckedCallback"></productList>
  30. </view>
  31. <!-- 底部栏 -->
  32. <view class="footer-bar flex align_center">
  33. <view class="f-left">
  34. <u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
  35. </view>
  36. <view class="f-mid flex align_center" @click="openCart">
  37. <view>
  38. 已选<text>{{totalCategory}}</text>款/<text>{{totalQty}}</text>件
  39. </view>
  40. <view>
  41. 查看明细
  42. <u-icon name="arrow-up"></u-icon>
  43. </view>
  44. </view>
  45. <view class="f-btns">
  46. <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >创建补货单</u-button>
  47. </view>
  48. </view>
  49. <!-- 已选配件 购物车 -->
  50. <div class="cpb_cart-mask" v-if="showCart">
  51. <div class="cpb_cart-box">
  52. <div class="cpb_close flex align-center justify_center" @click="showCart=false">
  53. <u-icon name="close"></u-icon>
  54. </div>
  55. <div class="cpb_cart-tit">
  56. <view>已选配件</view>
  57. <view class="cpb_heji flex align_center justify_between">
  58. <text @click="clearDetail">清空列表</text>
  59. </view>
  60. </div>
  61. <div class="cpb_cart-list">
  62. <view
  63. @click="delDetail"
  64. v-for="(item, index) in chooseList"
  65. :key="item.id"
  66. >
  67. <view class="nav-right-item flex align_center">
  68. <view class="uni-col-1">
  69. <u-icon name="close-circle" color="#999" size="35"></u-icon>
  70. </view>
  71. <view class="uni-col-11 flex">
  72. <view class="uni-col-2">
  73. <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  74. </view>
  75. <view class="item-info uni-col-9">
  76. <view class="item-name">
  77. <text>{{item.shelfPlaceCode}}</text>
  78. {{item.productCode}}
  79. </view>
  80. <view class="item-name">
  81. {{item.productName}}
  82. </view>
  83. <view class="item-detail">
  84. <view class="item-detail-info align_center flex justify_between">
  85. <view></view>
  86. <view class="flex justify_end">
  87. <view class="item-detail-text">
  88. 最大库容:<text class="pnums">{{item.maxQty||0}}</text>
  89. 货架库存:<text class="pnums">{{item.qty||0}}</text>
  90. 门店库存:<text class="pnums">{{item.qplsStockQty||0}}</text>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="nav-right-item">
  99. <view class="item-detail">
  100. <view class="item-detail-info">
  101. <view class="flex justify_between">
  102. <view class="item-detail-text flex">
  103. <view v-if="item.replenishBillQty">补货在途:<text class="pnums1">{{item.replenishBillQty||0}}</text></view>
  104. <view v-if="item.recallBillQty">调回在途:<text class="pnums1">{{item.recallBillQty||0}}</text></view>
  105. </view>
  106. <view class="item-detail-text">
  107. 补货数量:
  108. <u-number-box
  109. v-model="item.checkQty"
  110. @minus="cartChangeNums"
  111. @plus="cartChangeNums"
  112. @blur="cartChangeNums"
  113. :index="'cart_'+item.id"
  114. :max="999999"></u-number-box>
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. </div>
  122. </div>
  123. </div>
  124. <!-- 筛选项 -->
  125. <u-popup v-model="showTab" mode="right" width="70%">
  126. <view class="tabBox flex flex_column">
  127. <view class="tabs">
  128. <u-checkbox-group wrap @change="checkboxGroupChange">
  129. <u-checkbox
  130. v-model="item.checked"
  131. v-for="(item, index) in queryKeys" :key="index"
  132. :name="item.code"
  133. >{{item.name}}</u-checkbox>
  134. </u-checkbox-group>
  135. </view>
  136. <view class="btns">
  137. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  138. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="clearSearch">查询</u-button>
  139. </view>
  140. </view>
  141. </u-popup>
  142. </view>
  143. </template>
  144. <script>
  145. import { queryProductListForReplenish } from '@/api/shelf'
  146. import productList from './productList.vue'
  147. import { clzConfirm } from '@/libs/tools'
  148. export default {
  149. components: {
  150. productList
  151. },
  152. data() {
  153. return {
  154. queryWord: '',
  155. qrCode: '',
  156. nowData:null,
  157. detail:null,
  158. pageNo:1,
  159. pageSize: 20,
  160. total: 0, // 列表总数
  161. noDataText: '暂无产品',
  162. status: 'loading',
  163. partList: [],
  164. allChecked: false,
  165. showTab: false,
  166. curType: [],
  167. customBtnStyle: { // 自定义按钮样式
  168. borderColor: this.$config('primaryColor'),
  169. backgroundColor: this.$config('primaryColor'),
  170. color: '#fff'
  171. },
  172. orderTotal: 0,
  173. showCart: false,
  174. chooseList: [],
  175. tempData: null,
  176. queryKeys: [
  177. {
  178. name: '库存充足',
  179. code: 'stockEnough',
  180. checked: false
  181. },
  182. {
  183. name: '部分缺货',
  184. code: 'portionStockout',
  185. checked: false
  186. },
  187. {
  188. name: '全部缺货',
  189. code: 'allStockout',
  190. checked: false
  191. }
  192. ],
  193. stockStateList:[]
  194. }
  195. },
  196. onNavigationBarButtonTap(e) {
  197. if(e.index == 0){
  198. uni.navigateTo({
  199. url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
  200. })
  201. }
  202. },
  203. onBackPress(e) {
  204. if(this.showTab||this.showCart) {
  205. this.showTab = false;
  206. this.showCart = false;
  207. return true;
  208. }
  209. },
  210. onLoad(opts) {
  211. this.nowData = JSON.parse(decodeURIComponent(opts.data));
  212. this.getpartList()
  213. },
  214. computed: {
  215. totalCategory () {
  216. return this.chooseList.length
  217. },
  218. totalQty () {
  219. let ret = 0
  220. this.chooseList.map(item => {
  221. ret = ret + item.replenishQty
  222. })
  223. return ret
  224. }
  225. },
  226. methods: {
  227. checkboxGroupChange(e) {
  228. console.log(e);
  229. this.curType = e
  230. },
  231. // 全选
  232. allCheckeChange(e){
  233. this.$refs.productList.allSelect(e.value)
  234. this.chooseList = this.$refs.productList.getAllChecked()
  235. },
  236. allCheckedCallback(val){
  237. this.allChecked = val
  238. this.chooseList = this.$refs.productList.getAllChecked()
  239. },
  240. // 创建补货单
  241. creatOrder(data){
  242. uni.showLoading({
  243. title:"正在保存.."
  244. })
  245. stockCheckSave({
  246. shelfSn: this.nowData.shelfSn,
  247. totalCategory: this.nowData.totalCategory,
  248. totalStockQty: this.nowData.totalStockQty,
  249. totalFreezeQty: this.nowData.totalFreezeQty
  250. }).then(res => {
  251. if(res.status == 200){
  252. this.detail = res.data || null
  253. this.stockCheckSn = res.data.stockCheckSn
  254. }else{
  255. uni.hideLoading()
  256. }
  257. })
  258. },
  259. // 打开购物车
  260. openCart(){
  261. if(this.totalCategory){
  262. this.showCart = !this.showCart
  263. }else{
  264. uni.showToast({
  265. icon: 'none',
  266. title: '请先添加产品'
  267. })
  268. }
  269. },
  270. // 清空购物车
  271. clearDetail(){
  272. const _this = this
  273. clzConfirm({
  274. title: '提示',
  275. content: '确认要清空列表吗?',
  276. success (ret) {
  277. if (ret.confirm || ret.index == 0) {
  278. _this.chooseList = []
  279. _this.showCart = false
  280. }
  281. }
  282. })
  283. },
  284. // 修改数量
  285. cartChangeNums(v){
  286. console.log(v,this.showCart)
  287. const data = this.chooseList.find(item => item.id == v.index.split('_')[1])
  288. },
  289. handleClear(){
  290. this.curType = []
  291. this.queryKeys.map(item => item.checked = false)
  292. this.clearSearch()
  293. },
  294. clearSearch(){
  295. this.queryWord = ''
  296. this.changeSearch()
  297. },
  298. changeSearch(){
  299. this.pageNo = 1
  300. this.partList = []
  301. this.getpartList()
  302. },
  303. // 获取数字货架列表
  304. getpartList(){
  305. const _this = this
  306. let params = {
  307. shelfSn: this.nowData.shelfSn,
  308. queryWord: this.queryWord,
  309. stockStateList: this.stockStateList
  310. }
  311. _this.status = 'loading'
  312. queryProductListForReplenish(params).then(res => {
  313. uni.hideLoading()
  314. if(res.status == 200){
  315. let list = res.data
  316. if (list && list.length){
  317. _this.partList = list
  318. } else {
  319. _this.partList = list || []
  320. }
  321. }else{
  322. _this.partList = []
  323. }
  324. this.showTab = false
  325. this.$refs.productList.setData(_this.partList)
  326. })
  327. },
  328. // 提交盘点单
  329. submitOrder(){
  330. if(this.chooseList.length){
  331. uni.navigateTo({
  332. url: '/pages/stockCheck/submitStockCheck?stockCheckSn='+this.stockCheckSn+'&type=submit'
  333. })
  334. }else{
  335. uni.showToast({
  336. icon: 'none',
  337. title: '请先添加产品'
  338. })
  339. }
  340. },
  341. // 扫描
  342. toScan(){
  343. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  344. this.mpaasScanModule.scan(
  345. {
  346. "scanMode":"Customized",
  347. "scanStyle":{
  348. "scanFrameSizePlus":{"width":250,"height":250},
  349. "scanFrameSize":200,
  350. "scanLight":"visible",
  351. "scanText":"对准条形码/二维码进行识别",
  352. "scanTitle":"扫码搜索货位产品",
  353. }
  354. },
  355. (result) => {
  356. if(result.scanStatus == 1){
  357. this.scanResult(result)
  358. }
  359. })
  360. },
  361. // 扫描结果
  362. scanResult(data){
  363. // 二维码
  364. if(data.scanType == 'QRCODE'){
  365. const ret = data.scanValue.split("&")
  366. this.queryWord = ret[1] // 产品编码
  367. }else{
  368. this.qrCode = data.scanValue
  369. }
  370. this.stockStateList = []
  371. this.getpartList()
  372. }
  373. }
  374. }
  375. </script>
  376. <style lang="less">
  377. .content{
  378. height: 100vh;
  379. width: 100%;
  380. background: #fff;
  381. .searchBar{
  382. padding: 0 0.8rem 0.3rem;
  383. .p-title{
  384. padding: 0 15rpx;
  385. display: flex;
  386. align-items: center;
  387. color: #222;
  388. font-size: 30rpx;
  389. > text{
  390. display: block;
  391. height: 30rpx;
  392. width: 6rpx;
  393. background: #0485F6;
  394. margin-right: 10rpx;
  395. border-radius: 10rpx;
  396. }
  397. .shelfName{
  398. flex-grow: 1;
  399. font-weight: bold;
  400. width: 80%;
  401. > view{
  402. overflow: hidden;
  403. white-space: nowrap;
  404. text-overflow: ellipsis;
  405. }
  406. }
  407. .btns{
  408. width:100rpx;
  409. text-align: right;
  410. font-size: 28rpx;
  411. color: #0485F6;
  412. }
  413. }
  414. .search{
  415. margin-top: 15upx;
  416. padding: 0.1rem;
  417. border-radius: 50rpx;
  418. border:1rpx solid #eee;
  419. .input{
  420. flex-grow: 1;
  421. padding: 4rpx;
  422. }
  423. .icon{
  424. width: 13%;
  425. text-align: center;
  426. font-size: 46rpx;
  427. color: #999;
  428. }
  429. }
  430. }
  431. .check-list{
  432. padding: 0 0.8rem;
  433. flex-grow: 1;
  434. overflow: auto;
  435. }
  436. .footer-bar{
  437. background-color: #f8f8f8;
  438. padding: 20upx;
  439. .f-left{
  440. color: #fff;
  441. }
  442. .active{
  443. background-color: #0485F6;
  444. }
  445. .f-mid{
  446. flex-grow: 1;
  447. font-size: 0.8rem;
  448. color: #666;
  449. > view{
  450. padding: 0 10upx;
  451. &:first-child{
  452. text{
  453. color: red;
  454. }
  455. }
  456. }
  457. }
  458. .f-btns{
  459. button{
  460. width: 200upx;
  461. }
  462. }
  463. }
  464. // 筛选
  465. .tabBox{
  466. height: 100vh;
  467. .tabs{
  468. overflow: auto;
  469. padding: 20rpx;
  470. > view{
  471. flex-wrap: wrap;
  472. justify-content: space-between;
  473. > view{
  474. width: 98%;
  475. border: 1rpx solid #eee;
  476. padding: 15rpx;
  477. border-radius: 50rpx;
  478. text-align: center;
  479. margin-bottom: 15rpx;
  480. /deep/ .u-checkbox__label{
  481. flex-grow: 1;
  482. }
  483. }
  484. &:first-child{
  485. > view{
  486. width: 100%;
  487. }
  488. }
  489. }
  490. }
  491. .btns{
  492. display: flex;
  493. padding: 40upx 20upx 20upx;
  494. justify-content: space-between;
  495. .handle-btn {
  496. font-size: 28upx;
  497. }
  498. }
  499. }
  500. // 购物车
  501. .cpb_cart-mask{
  502. position: fixed;
  503. width: 100%;
  504. background: rgba(0,0,0,0.5);
  505. z-index: 900;
  506. bottom: 100rpx;
  507. top: 0;
  508. }
  509. .cpb_cart-box{
  510. background-color: #fff;
  511. position: absolute;
  512. width: 100%;
  513. z-index: 1000;
  514. bottom: 0;
  515. border-radius: 30rpx 30rpx 0 0;
  516. max-height: 70vh;
  517. display: flex;
  518. flex-direction: column;
  519. .cpb_close{
  520. position: absolute;
  521. top: 10rpx;
  522. right: 20rpx;
  523. width: 70rpx;
  524. height: 70rpx;
  525. font-size: 32rpx;
  526. color: #999;
  527. }
  528. .cpb_cart-tit{
  529. text-align: center;
  530. padding: 20rpx;
  531. font-size: 32rpx;
  532. border-bottom: 2rpx solid #eee;
  533. .cpb_heji{
  534. padding-top: 20rpx;
  535. font-size: 26upx;
  536. > text{
  537. color: #00aaff;
  538. }
  539. > view{
  540. color: #999;
  541. > text{
  542. color: #333;
  543. &:first-child{
  544. margin-right: 20upx;
  545. }
  546. }
  547. }
  548. }
  549. }
  550. .cpb_cart-list{
  551. padding: 20rpx 0;
  552. overflow: auto;
  553. flex-grow: 1;
  554. > view{
  555. margin-bottom: 20rpx;
  556. }
  557. .nav-right-item{
  558. padding: 0 30upx;
  559. &:last-child{
  560. border-bottom:2rpx solid #eee;
  561. }
  562. }
  563. .item-name{
  564. font-size: 26rpx;
  565. text{
  566. background: rgba(3, 54, 146, 0.15);
  567. color: #1c588a;
  568. border-radius: 1em;
  569. font-size: 0.8em;
  570. padding: 0 0.5em;
  571. margin-right: 10upx;
  572. }
  573. margin-top: 10upx;
  574. }
  575. .item-info{
  576. flex-grow: 1;
  577. padding-left: 0.8em;
  578. }
  579. .item-detail{
  580. .item-detail-info{
  581. padding: 10upx 0 4upx;
  582. font-size: 24upx;
  583. .pnums{
  584. margin-right: 10rpx;
  585. color: #333;
  586. }
  587. .pnums1{
  588. margin-right: 10rpx;
  589. color: red;
  590. }
  591. > view{
  592. padding-bottom: 10rpx;
  593. align-items: center;
  594. .item-detail-text{
  595. color: #999;
  596. margin-left: 20upx;
  597. }
  598. }
  599. }
  600. }
  601. }
  602. }
  603. }
  604. </style>