creatOrder.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781
  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>{{orderTotal}}</text>款/<text>{{orderTotal}}</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 v-if="detail">
  60. 盈亏总数量:
  61. <text>
  62. {{detail.totalProfitLossQty}}
  63. </text>
  64. 盈亏总金额:
  65. <text>
  66. ¥{{detail.totalProfitLossCost}}
  67. </text>
  68. </view>
  69. </view>
  70. </div>
  71. <div class="cpb_cart-list">
  72. <u-swipe-action
  73. :show="item.show"
  74. :btn-width="120"
  75. :index="index"
  76. @click="delDetail"
  77. v-for="(item, index) in chooseList"
  78. :key="item.id"
  79. :options="options"
  80. >
  81. <view class="nav-right-item flex">
  82. <view class="uni-col-2">
  83. <u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="100" height="100" border-radius="30"></u-image>
  84. </view>
  85. <view class="item-info uni-col-10">
  86. <view class="item-name">
  87. <text>{{item.shelfPlaceCode}}</text>
  88. {{item.product.productName}}
  89. </view>
  90. <view class="item-detail">
  91. <view class="item-detail-info align_center flex justify_between">
  92. <view>
  93. {{item.productCode}}
  94. </view>
  95. <view class="flex justify_end">
  96. <text class="item-detail-text">
  97. 可用:{{item.stockQty?item.stockQty:0}} {{item.product&&item.product.unit}}
  98. </text>
  99. <text class="item-detail-text">
  100. 冻结:{{item.freezeQty?item.freezeQty:0}} {{item.product&&item.product.unit}}
  101. </text>
  102. </view>
  103. </view>
  104. </view>
  105. <view class="item-detail">
  106. <view class="item-detail-info">
  107. <view class="flex justify_between">
  108. <view></view>
  109. <view class="item-detail-text">
  110. 实际可用:
  111. <u-number-box
  112. v-model="item.checkQty"
  113. @minus="cartChangeNums"
  114. @plus="cartChangeNums"
  115. @blur="cartChangeNums"
  116. :index="'cart_'+item.id"
  117. :max="999999"></u-number-box>
  118. </view>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. </u-swipe-action>
  125. </div>
  126. </div>
  127. </div>
  128. <!-- 筛选项 -->
  129. <u-popup v-model="showTab" mode="right" width="70%">
  130. <view class="tabBox flex flex_column">
  131. <view class="tabs">
  132. <u-checkbox-group wrap @change="checkboxGroupChange">
  133. <u-checkbox
  134. v-model="item.checked"
  135. v-for="(item, index) in queryKeys" :key="index"
  136. :name="item.code"
  137. >{{item.name}}</u-checkbox>
  138. </u-checkbox-group>
  139. </view>
  140. <view class="btns">
  141. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  142. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="clearSearch">查询</u-button>
  143. </view>
  144. </view>
  145. </u-popup>
  146. </view>
  147. </template>
  148. <script>
  149. import { getShelfProductList,getProductPlace } from '@/api/shelf'
  150. import productList from './productList.vue'
  151. import {
  152. stockCheckDetailQueryList,
  153. stockCheckDetailDelete,
  154. stockCheckSave,
  155. stockCheckBySn,
  156. stockCheckDetailSave,
  157. deleteByStockCheckSn
  158. } from '@/api/stockCheck'
  159. import { clzConfirm } from '@/libs/tools'
  160. export default {
  161. components: {
  162. productList
  163. },
  164. data() {
  165. return {
  166. queryWord: '',
  167. nowData:null,
  168. stockCheckSn: null,
  169. detail:null,
  170. pageNo:1,
  171. pageSize: 20,
  172. total: 0, // 列表总数
  173. noDataText: '暂无产品',
  174. status: 'loading',
  175. partList: [],
  176. allChecked: false,
  177. showTab: false,
  178. curType: [],
  179. customBtnStyle: { // 自定义按钮样式
  180. borderColor: this.$config('primaryColor'),
  181. backgroundColor: this.$config('primaryColor'),
  182. color: '#fff'
  183. },
  184. orderTotal: 0,
  185. showCart: false,
  186. chooseList: [],
  187. tempData: null,
  188. options: [
  189. {
  190. text: '删除',
  191. style: {
  192. backgroundColor: '#dd524d'
  193. }
  194. }
  195. ],
  196. queryKeys: [
  197. {
  198. name: '库存充足',
  199. code: '1',
  200. checked: false
  201. },
  202. {
  203. name: '部分缺货',
  204. code: '2',
  205. checked: false
  206. },
  207. {
  208. name: '全部缺货',
  209. code: '3',
  210. checked: false
  211. }
  212. ]
  213. }
  214. },
  215. onNavigationBarButtonTap(e) {
  216. if(e.index == 0){
  217. uni.navigateTo({
  218. url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn
  219. })
  220. }
  221. },
  222. onBackPress(e) {
  223. if(this.showTab||this.showCart) {
  224. this.showTab = false;
  225. this.showCart = false;
  226. return true;
  227. }
  228. },
  229. onLoad(opts) {
  230. this.nowData = JSON.parse(decodeURIComponent(opts.data));
  231. this.stockCheckSn = this.nowData.stockCheckSn
  232. this.getpartList()
  233. if(this.stockCheckSn){
  234. // 获取盘点单明细
  235. this.getDetail()
  236. // 获取盘点明细列表
  237. this.getChooseList()
  238. }
  239. // 重置盘点单
  240. uni.$on("resetStockCheck",()=>{
  241. this.resetStockCheck()
  242. })
  243. },
  244. onUnload() {
  245. uni.$off("resetStockCheck")
  246. },
  247. methods: {
  248. checkboxGroupChange(e) {
  249. console.log(e);
  250. this.curType = e
  251. },
  252. // 全选
  253. allCheckeChange(e){
  254. this.$refs.productList.allSelect(e.value)
  255. },
  256. allCheckedCallback(val){
  257. this.allChecked = val
  258. },
  259. // 重置盘点单
  260. resetStockCheck(){
  261. this.chooseList = []
  262. this.orderTotal = 0
  263. this.stockCheckSn = null
  264. this.detail = null
  265. this.tempData = null
  266. this.queryWord = ''
  267. this.showCart = false
  268. this.handleClear()
  269. },
  270. // 获取盘点明细列表
  271. getChooseList(){
  272. stockCheckDetailQueryList({
  273. stockCheckSn: this.stockCheckSn
  274. }).then(res => {
  275. this.chooseList = res.data || []
  276. this.orderTotal = this.chooseList.length
  277. })
  278. },
  279. // 详细
  280. getDetail(){
  281. stockCheckBySn({stockCheckSn: this.stockCheckSn}).then(res => {
  282. this.detail = res.data || null
  283. })
  284. },
  285. //添加产品
  286. toEdit(item){
  287. },
  288. // 创建补货单
  289. creatOrder(data){
  290. uni.showLoading({
  291. title:"正在保存.."
  292. })
  293. stockCheckSave({
  294. shelfSn: this.nowData.shelfSn,
  295. totalCategory: this.nowData.totalCategory,
  296. totalStockQty: this.nowData.totalStockQty,
  297. totalFreezeQty: this.nowData.totalFreezeQty
  298. }).then(res => {
  299. if(res.status == 200){
  300. this.detail = res.data || null
  301. this.stockCheckSn = res.data.stockCheckSn
  302. }else{
  303. uni.hideLoading()
  304. }
  305. })
  306. },
  307. // 打开购物车
  308. openCart(){
  309. if(this.orderTotal){
  310. this.showCart = !this.showCart
  311. }else{
  312. uni.showToast({
  313. icon: 'none',
  314. title: '请先添加产品'
  315. })
  316. }
  317. },
  318. // 清空购物车
  319. clearDetail(){
  320. const _this = this
  321. clzConfirm({
  322. title: '提示',
  323. content: '确认要清空列表吗?',
  324. success (ret) {
  325. if (ret.confirm || ret.index == 0) {
  326. }
  327. }
  328. })
  329. },
  330. // 修改数量
  331. cartChangeNums(v){
  332. console.log(v,this.showCart)
  333. const data = this.chooseList.find(item => item.id == v.index.split('_')[1])
  334. },
  335. // 删除盘点详细
  336. delDetail(a,b){
  337. if(b==0){
  338. const data = this.chooseList[a]
  339. stockCheckDetailDelete({stockCheckDetailSn: data.stockCheckDetailSn}).then(res=>{
  340. if(res.status == 200){
  341. this.chooseList.splice(a,1)
  342. this.orderTotal = this.chooseList.length
  343. // 删除最后一个后刷新列表
  344. if(this.orderTotal == 0){
  345. this.showCart = false
  346. this.getChooseList()
  347. }
  348. this.getDetail()
  349. }
  350. })
  351. }
  352. },
  353. handleClear(){
  354. this.curType = []
  355. this.queryKeys.map(item => item.checked = false)
  356. this.clearSearch()
  357. },
  358. clearSearch(){
  359. this.queryWord = ''
  360. this.changeSearch()
  361. },
  362. changeSearch(){
  363. this.pageNo = 1
  364. this.partList = []
  365. this.getpartList()
  366. },
  367. // 获取数字货架列表
  368. getpartList(){
  369. const _this = this
  370. let params = {
  371. pageNo: this.pageNo,
  372. pageSize: this.pageSize,
  373. shelfSn: this.nowData.shelfSn,
  374. queryWord: this.queryWord,
  375. currQtyFlag: this.curType=='available' ? 1 : '',
  376. freezeQtyFlag: this.curType=='blocked' ? 1 : '',
  377. }
  378. _this.status = 'loading'
  379. getShelfProductList(params).then(res => {
  380. uni.hideLoading()
  381. if(res.status == 200){
  382. let list = res.data.list
  383. if (list && list.length){
  384. // 分页 拼接数据
  385. if (_this.pageNo != 1) {
  386. _this.partList = _this.partList ? _this.partList.concat(list) : list
  387. } else {
  388. _this.partList = list
  389. }
  390. this.total = res.data.count
  391. if (_this.partList.length == res.data.count) {
  392. _this.status = 'nomore'
  393. } else {
  394. _this.status = 'loadmore'
  395. }
  396. } else {
  397. _this.partList = list || []
  398. this.total = 0
  399. _this.status = 'nomore'
  400. }
  401. _this.noDataText = '暂无匹配产品'
  402. }else{
  403. _this.status = 'loadmore'
  404. _this.partList = []
  405. _this.total = 0
  406. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  407. }
  408. this.showTab = false
  409. })
  410. },
  411. // 加载更多
  412. onreachBottom () {
  413. if(this.partList.length < this.total ){
  414. this.pageNo++
  415. this.getpartList()
  416. }else{
  417. this.status = "nomore"
  418. }
  419. },
  420. // 提交盘点单
  421. submitOrder(){
  422. if(this.chooseList.length){
  423. uni.navigateTo({
  424. url: '/pages/stockCheck/submitStockCheck?stockCheckSn='+this.stockCheckSn+'&type=submit'
  425. })
  426. }else{
  427. uni.showToast({
  428. icon: 'none',
  429. title: '请先添加产品'
  430. })
  431. }
  432. },
  433. // 扫描
  434. toScan(){
  435. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  436. this.mpaasScanModule.scan(
  437. {
  438. "scanMode":"Customized",
  439. "scanStyle":{
  440. "scanFrameSizePlus":{"width":250,"height":250},
  441. "scanFrameSize":200,
  442. "scanLight":"visible",
  443. "scanText":"对准条形码/二维码进行识别",
  444. "scanTitle":"扫码搜索货位产品",
  445. }
  446. },
  447. (result) => {
  448. if(result.scanStatus == 1){
  449. this.scanResult(result)
  450. }
  451. })
  452. },
  453. // 扫描结果
  454. scanResult(data){
  455. const params = {
  456. pageNo: 1,
  457. pageSize:1,
  458. shelfSn: this.nowData.shelfSn
  459. }
  460. // 二维码
  461. if(data.scanType == 'QRCODE'){
  462. const ret = data.scanValue.split("&")
  463. params.queryWord = ret[1] // 产品编码
  464. }else{
  465. params.qrCode = data.scanValue
  466. }
  467. getShelfProductList(params).then(res => {
  468. console.log(res)
  469. if(res.status == 200){
  470. if(res.data&&res.data.list.length){
  471. this.toEdit(res.data.list[0])
  472. }else{
  473. uni.showToast({
  474. icon: "none",
  475. title: "产品不属于此货架,请重新扫描",
  476. duration: 5000
  477. })
  478. }
  479. }
  480. })
  481. }
  482. }
  483. }
  484. </script>
  485. <style lang="less">
  486. .content{
  487. height: 100vh;
  488. width: 100%;
  489. background: #fff;
  490. .searchBar{
  491. padding: 0 0.8rem 0.3rem;
  492. .p-title{
  493. padding: 0 15rpx;
  494. display: flex;
  495. align-items: center;
  496. color: #222;
  497. font-size: 30rpx;
  498. > text{
  499. display: block;
  500. height: 30rpx;
  501. width: 6rpx;
  502. background: #0485F6;
  503. margin-right: 10rpx;
  504. border-radius: 10rpx;
  505. }
  506. .shelfName{
  507. flex-grow: 1;
  508. font-weight: bold;
  509. width: 80%;
  510. > view{
  511. overflow: hidden;
  512. white-space: nowrap;
  513. text-overflow: ellipsis;
  514. }
  515. }
  516. .btns{
  517. width:100rpx;
  518. text-align: right;
  519. font-size: 28rpx;
  520. color: #0485F6;
  521. }
  522. }
  523. .search{
  524. margin-top: 15upx;
  525. padding: 0.1rem;
  526. border-radius: 50rpx;
  527. border:1rpx solid #eee;
  528. .input{
  529. flex-grow: 1;
  530. padding: 4rpx;
  531. }
  532. .icon{
  533. width: 13%;
  534. text-align: center;
  535. font-size: 46rpx;
  536. color: #999;
  537. }
  538. }
  539. }
  540. .check-list{
  541. padding: 0 0.5rem;
  542. flex-grow: 1;
  543. .scroll-view{
  544. height: calc(100vh - 260rpx);
  545. box-sizing: border-box;
  546. }
  547. .partList-list-box{
  548. padding: 20rpx 30rpx;
  549. border-bottom: 2rpx solid #f5f5f5;
  550. &:last-child{
  551. border:0;
  552. }
  553. .product{
  554. flex-grow: 1;
  555. &:active{
  556. opacity: 0.6;
  557. background-color: #f8f8f8;
  558. }
  559. .pimgs{
  560. position: relative;
  561. border:2rpx solid #eee;
  562. border-radius: 15rpx;
  563. padding: 5rpx;
  564. > text{
  565. position: absolute;
  566. left: 0;
  567. bottom:0;
  568. z-index: 500;
  569. width: 100%;
  570. text-align: center;
  571. background: rgba(255, 0, 0, 0.6);
  572. color: #fff;
  573. font-size: 20upx;
  574. }
  575. }
  576. .item-detail{
  577. margin-top: 10rpx;
  578. display: flex;
  579. align-items: center;
  580. justify-content: space-between;
  581. color: #9DA8B5;
  582. font-size: 26upx;
  583. .item-detail-text{
  584. font-size: 26upx;
  585. color: #333;
  586. }
  587. }
  588. .pinfo{
  589. flex-grow: 1;
  590. padding-left: 20rpx;
  591. .pname{
  592. font-size: 28rpx;
  593. color: #191919;
  594. text{
  595. font-weight: normal;
  596. margin-right: 6rpx;
  597. padding: 0 10rpx;
  598. background: rgba(3, 54, 146, 0.15);
  599. border-radius: 100rpx;
  600. color: #033692;
  601. font-size: 24rpx;
  602. }
  603. }
  604. .ptxt{
  605. font-size: 28rpx;
  606. color: #333;
  607. font-weight: bold;
  608. margin-top: 10upx;
  609. .pnums{
  610. color: #222;
  611. }
  612. }
  613. }
  614. }
  615. }
  616. }
  617. .footer-bar{
  618. background-color: #f8f8f8;
  619. padding: 20upx;
  620. .f-left{
  621. color: #fff;
  622. }
  623. .active{
  624. background-color: #0485F6;
  625. }
  626. .f-mid{
  627. flex-grow: 1;
  628. font-size: 0.8rem;
  629. color: #666;
  630. > view{
  631. padding: 0 10upx;
  632. &:first-child{
  633. text{
  634. color: red;
  635. }
  636. }
  637. }
  638. }
  639. .f-btns{
  640. button{
  641. width: 200upx;
  642. }
  643. }
  644. }
  645. // 筛选
  646. .tabBox{
  647. height: 100vh;
  648. .tabs{
  649. overflow: auto;
  650. padding: 20rpx;
  651. > view{
  652. flex-wrap: wrap;
  653. justify-content: space-between;
  654. > view{
  655. width: 98%;
  656. border: 1rpx solid #eee;
  657. padding: 15rpx;
  658. border-radius: 50rpx;
  659. text-align: center;
  660. margin-bottom: 15rpx;
  661. /deep/ .u-checkbox__label{
  662. flex-grow: 1;
  663. }
  664. }
  665. &:first-child{
  666. > view{
  667. width: 100%;
  668. }
  669. }
  670. }
  671. }
  672. .btns{
  673. display: flex;
  674. padding: 40upx 20upx 20upx;
  675. justify-content: space-between;
  676. .handle-btn {
  677. font-size: 28upx;
  678. }
  679. }
  680. }
  681. // 购物车
  682. .cpb_cart-mask{
  683. position: fixed;
  684. width: 100%;
  685. background: rgba(0,0,0,0.5);
  686. z-index: 900;
  687. bottom: 100rpx;
  688. top: 0;
  689. }
  690. .cpb_cart-box{
  691. background-color: #fff;
  692. position: absolute;
  693. width: 100%;
  694. z-index: 1000;
  695. bottom: 0;
  696. border-radius: 30rpx 30rpx 0 0;
  697. max-height: 70vh;
  698. display: flex;
  699. flex-direction: column;
  700. .cpb_close{
  701. position: absolute;
  702. top: 10rpx;
  703. right: 20rpx;
  704. width: 70rpx;
  705. height: 70rpx;
  706. font-size: 32rpx;
  707. color: #999;
  708. }
  709. .cpb_cart-tit{
  710. text-align: center;
  711. padding: 20rpx;
  712. font-size: 32rpx;
  713. border-bottom: 2rpx solid #eee;
  714. .cpb_heji{
  715. padding-top: 20rpx;
  716. font-size: 26upx;
  717. > text{
  718. color: #00aaff;
  719. }
  720. > view{
  721. color: #999;
  722. > text{
  723. color: #333;
  724. &:first-child{
  725. margin-right: 20upx;
  726. }
  727. }
  728. }
  729. }
  730. }
  731. .cpb_cart-list{
  732. padding: 20rpx 0;
  733. overflow: auto;
  734. flex-grow: 1;
  735. > view{
  736. margin-bottom: 20rpx;
  737. }
  738. .nav-right-item{
  739. padding: 0 30upx;
  740. }
  741. .item-name{
  742. font-size: 30rpx;
  743. text{
  744. background: rgba(3, 54, 146, 0.15);
  745. color: #1c588a;
  746. border-radius: 1em;
  747. font-size: 0.8em;
  748. padding: 0 0.5em;
  749. margin-right: 10upx;
  750. }
  751. }
  752. .item-info{
  753. border-bottom:2rpx solid #eee;
  754. flex-grow: 1;
  755. padding-left: 0.2em;
  756. }
  757. .item-detail{
  758. .item-detail-info{
  759. padding: 10upx 0 4upx;
  760. font-size: 24upx;
  761. > view{
  762. padding-bottom: 20rpx;
  763. align-items: center;
  764. .item-detail-text{
  765. color: #999;
  766. margin-left: 20upx;
  767. }
  768. }
  769. }
  770. }
  771. }
  772. }
  773. }
  774. </style>