startCheck.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="searchBar">
  4. <view class="p-title flex align_center">
  5. <view class="shelfName flex align_center"><text></text>{{nowData.shelfName}}</view>
  6. <view class="btns" @click="showTab = true">筛选<u-icon name="more-circle"></u-icon></view>
  7. </view>
  8. <view class="search flex align_center">
  9. <view class="input">
  10. <u-search
  11. focus
  12. v-model="queryWord"
  13. @input="change"
  14. @custom="getpartList"
  15. @search="getpartList"
  16. @clear="clearSearch"
  17. bg-color="#fff"
  18. :action-style="{border:'0.1rpx solid #00aaff',borderRadius:'50rpx',color:'#00aaff'}"
  19. placeholder="请输入产品编码或名称搜索"></u-search>
  20. </view>
  21. <view class="icon" @click="toScan">
  22. <u-icon name="scan"></u-icon>
  23. </view>
  24. </view>
  25. </view>
  26. <view class="check-list">
  27. <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
  28. <view class="partList-list-box" v-for="item in partList" :key="item.id">
  29. <view class="product" @click="toEdit(item)">
  30. <view class="flex align_center flex_1">
  31. <view class="pimgs">
  32. <u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  33. </view>
  34. <view class="pinfo">
  35. <view class="pname">
  36. <text>{{item.shelfPlaceCode}}</text>{{item.productEntity&&item.productEntity.code}}
  37. </view>
  38. <view class="ptxt flex align_center justify_between">
  39. <view>
  40. <text class="pcode">{{item.productEntity&&item.productEntity.productName}}</text>
  41. </view>
  42. </view>
  43. <view class="item-detail">
  44. <view>
  45. 可用库存:
  46. <text class="item-detail-text">{{item.qty}}</text>
  47. {{item.productEntity&&item.productEntity.unit}}
  48. </view>
  49. <view>
  50. 冻结库存:
  51. <text class="item-detail-text">{{item.freezeQty}}</text>
  52. {{item.productEntity&&item.productEntity.unit}}
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view v-if="partList&&partList.length==0">
  60. <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty>
  61. </view>
  62. <view style="padding: 20upx;" v-if="total>pageSize || status=='loading'">
  63. <u-loadmore :status="status" />
  64. </view>
  65. </scroll-view>
  66. </view>
  67. <!-- 底部栏 -->
  68. <view class="footer-bar flex align_center">
  69. <view class="f-left" :style="{background:orderTotal?$config('primaryColor'):''}">
  70. <u-icon name="order" size="45"></u-icon>
  71. <u-badge type="error" size="mini" :offset="[-10,-10]" :count="orderTotal"></u-badge>
  72. </view>
  73. <view class="f-mid">
  74. 盘盈总数:<text>3</text>
  75. 盘亏总数:<text>3</text>
  76. </view>
  77. <view class="f-btns">
  78. <u-button size="medium" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >提交盘点单</u-button>
  79. </view>
  80. </view>
  81. <!-- 已选配件 购物车 -->
  82. <div class="cpb_cart-mask" v-if="showCart">
  83. <div class="cpb_cart-box">
  84. <div class="cpb_close flex align-center justify_center" @click="showCart=false">
  85. <u-icon name="close"></u-icon>
  86. </div>
  87. <div class="cpb_cart-tit">
  88. <view>已选配件</view>
  89. <view class="cpb_heji flex align_center justify_between">
  90. <text>清空列表</text>
  91. <view>
  92. 盈亏总数量:
  93. <text>
  94. -2334
  95. </text>
  96. 盈亏总金额:
  97. <text>
  98. ¥-254
  99. </text>
  100. </view>
  101. </view>
  102. </div>
  103. <div class="cpb_cart-list">
  104. <view class="nav-right-item flex" v-for="(item, index) in chooseList" :key="item.id">
  105. <view class="uni-col-2">
  106. <u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="100" height="100" border-radius="30"></u-image>
  107. </view>
  108. <view class="item-info uni-col-10">
  109. <view class="item-name">
  110. <text>{{item.productEntity&&item.productEntity.code}}</text>
  111. {{item.productEntity&&item.productEntity.productName}}
  112. </view>
  113. <view class="item-detail">
  114. <view class="item-detail-info">
  115. <view class="flex justify_end">
  116. <text class="item-detail-text">
  117. 可用:{{item.qty?item.qty:0}} {{item.productEntity&&item.productEntity.unit}}
  118. </text>
  119. <text class="item-detail-text">
  120. 冻结:{{item.freezeQty?item.freezeQty:0}} {{item.productEntity&&item.productEntity.unit}}
  121. </text>
  122. </view>
  123. </view>
  124. </view>
  125. <view class="item-detail">
  126. <view class="item-detail-info">
  127. <view class="flex justify_end">
  128. <view class="item-detail-text">
  129. 实际可用:
  130. <u-number-box v-model="item.qty" :index="'cart_'+item.id" :min="0" :max="item.qty||999999"></u-number-box>
  131. </view>
  132. </view>
  133. </view>
  134. </view>
  135. </view>
  136. </view>
  137. </div>
  138. </div>
  139. </div>
  140. <!-- 编辑弹框 -->
  141. <editModal :openModal="editModal" :infoData="tempData" @close="editModal=false"></editModal>
  142. <!-- 筛选项 -->
  143. <u-popup v-model="showTab" mode="right" width="70%">
  144. <view class="tabBox flex flex_column">
  145. <view class="tabs">
  146. <view>
  147. <view :class="'available'==curType?'active':''" @click="curType='available'">有可用库存的产品</view>
  148. <view :class="'blocked'==curType?'active':''" @click="curType='blocked'">有冻结库存的产品</view>
  149. </view>
  150. <view class="flex">
  151. <view :class="item==curTab?'active':''" v-for="item in placeTab" :key="item" @click="curTab=item">{{item}}层</view>
  152. </view>
  153. </view>
  154. <view class="btns">
  155. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button>
  156. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="clearSearch">查询</u-button>
  157. </view>
  158. </view>
  159. </u-popup>
  160. </view>
  161. </template>
  162. <script>
  163. import { getShelfProductList,getProductPlace } from '@/api/shelf'
  164. import { stockCheckDetailQueryList, stockCheckDetailDelete, stockCheckSave, stockCheckBySn } from '@/api/stockCheck'
  165. import editModal from './editModal'
  166. export default {
  167. components: {
  168. editModal
  169. },
  170. data() {
  171. return {
  172. queryWord: '',
  173. nowData:null,
  174. detail:null,
  175. pageNo:1,
  176. pageSize: 10,
  177. total: 0, // 列表总数
  178. noDataText: '暂无产品',
  179. status: 'loading',
  180. partList: [],
  181. showTab: false,
  182. placeTab: [],
  183. curTab: '',
  184. curType: '',
  185. customBtnStyle: { // 自定义按钮样式
  186. borderColor: this.$config('primaryColor'),
  187. backgroundColor: this.$config('primaryColor'),
  188. color: '#fff'
  189. },
  190. orderTotal: 0,
  191. showCart: false,
  192. chooseList: [],
  193. editModal: false,
  194. tempData: null
  195. }
  196. },
  197. onLoad(opts) {
  198. this.nowData = JSON.parse(decodeURIComponent(opts.data));
  199. this.getpartList()
  200. this.getShelfPlace()
  201. if(this.nowData.stockCheckSn){
  202. // 获取盘点单明细
  203. this.getDetail()
  204. // 获取盘点明细列表
  205. this.getChooseList()
  206. }
  207. },
  208. methods: {
  209. // 获取盘点明细列表
  210. getChooseList(){
  211. stockCheckDetailQueryList({
  212. stockCheckSn: this.nowData.stockCheckSn
  213. }).then(res => {
  214. this.chooseList = res.data || []
  215. })
  216. },
  217. // 详细
  218. getDetail(){
  219. stockCheckBySn({stockCheckSn: this.nowData.stockCheckSn}).then(res => {
  220. this.detail = res.data || null
  221. })
  222. },
  223. //添加产品
  224. toEdit(item){
  225. item.checkQty = item.qty
  226. this.tempData = item
  227. this.editModal = true
  228. },
  229. // 添加产品明细
  230. addProduct(data){
  231. // 是否第一次添加产品
  232. if(this.chooseList.length==0){
  233. // 先创建盘点单
  234. stockCheckSave({
  235. shelfSn: this.nowData.shelfSn,
  236. totalCategory: this.nowData.totalCategory,
  237. totalStockQty: this.nowData.totalStockQty,
  238. totalFreezeQty: this.nowData.totalFreezeQty
  239. }).then(res => {
  240. if(res.status == 200){
  241. this.detail = res.data || null
  242. this.saveProduct(data)
  243. }
  244. })
  245. }else{
  246. this.saveProduct(data)
  247. }
  248. },
  249. saveProduct(data){
  250. stockCheckDetailSave({
  251. stockCheckSn: this.detail.stockCheckSn,
  252. stockCheckNo: this.detail.stockCheckNo,
  253. ...data
  254. }).then(res => {
  255. if(res.status == 200){
  256. }
  257. })
  258. },
  259. // 获取货位号
  260. getShelfPlace(flag){
  261. getProductPlace({ shelfSn: this.nowData.shelfSn }).then(res => {
  262. if (res.status == 200) {
  263. for(let a in res.data){
  264. this.placeTab.push(a)
  265. }
  266. if(!flag){
  267. this.curTab = ''
  268. }
  269. } else {
  270. this.placeTab = []
  271. }
  272. })
  273. },
  274. handleClear(){
  275. this.curTab = ''
  276. this.curType = ''
  277. this.clearSearch()
  278. },
  279. clearSearch(){
  280. this.queryWord = ''
  281. this.pageNo = 1
  282. this.partList = []
  283. this.getpartList()
  284. },
  285. change(v){
  286. if(v==''){
  287. this.clearSearch()
  288. }
  289. },
  290. // 获取数字货架列表
  291. getpartList(){
  292. const _this = this
  293. let params = {
  294. pageNo: this.pageNo,
  295. pageSize: this.pageSize,
  296. shelfSn: this.nowData.shelfSn,
  297. queryWord: this.queryWord,
  298. shelfPlaceCodeHead: this.curTab,
  299. currQtyFlag: this.curType=='available' ? 1 : '',
  300. freezeQtyFlag: this.curType=='blocked' ? 1 : '',
  301. }
  302. _this.status = 'loading'
  303. getShelfProductList(params).then(res => {
  304. uni.hideLoading()
  305. if(res.status == 200){
  306. let list = res.data.list
  307. console.log(list)
  308. if (list && list.length){
  309. // 分页 拼接数据
  310. if (_this.pageNo != 1) {
  311. _this.partList = _this.partList ? _this.partList.concat(list) : list
  312. } else {
  313. _this.partList = list
  314. }
  315. this.total = res.data.count
  316. if (_this.partList.length == res.data.count) {
  317. _this.status = 'nomore'
  318. } else {
  319. _this.status = 'loadmore'
  320. }
  321. } else {
  322. _this.partList = list || []
  323. this.total = 0
  324. _this.status = 'nomore'
  325. }
  326. _this.noDataText = '暂无匹配产品'
  327. }else{
  328. _this.status = 'loadmore'
  329. _this.partList = []
  330. _this.total = 0
  331. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  332. }
  333. this.showTab = false
  334. })
  335. },
  336. // 加载更多
  337. onreachBottom () {
  338. if(this.partList.length < this.total ){
  339. this.pageNo++
  340. this.getpartList()
  341. }else{
  342. this.status = "nomore"
  343. }
  344. },
  345. // 扫描
  346. toScan(){
  347. this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
  348. this.mpaasScanModule.scan(
  349. {
  350. "scanMode":"Customized",
  351. "scanStyle":{
  352. "scanFrameSizePlus":{"width":250,"height":250},
  353. "scanFrameSize":200,
  354. "scanLight":"visible",
  355. "scanText":"对准条形码/二维码进行识别",
  356. "scanTitle":"扫码搜索货位产品",
  357. }
  358. },
  359. (result) => {
  360. console.log(result)
  361. if(result.scanStatus == 1){
  362. this.scanResult(result)
  363. }
  364. })
  365. },
  366. // 扫描结果
  367. scanResult(data){
  368. const params = {
  369. pageNo: 1,
  370. pageSize:1,
  371. shelfSn: this.nowData.shelfSn
  372. }
  373. // 二维码
  374. if(data.scanType == 'QRCODE'){
  375. const ret = data.scanValue.split("&")
  376. params.queryWord = ret[1] // 产品编码
  377. }else{
  378. params.qrCode = data.scanValue
  379. }
  380. getShelfProductList(params).then(res => {
  381. console.log(res)
  382. if(res.status == 200){
  383. if(res.data&&res.data.list.length){
  384. this.toEdit(res.data.list[0])
  385. }else{
  386. uni.showToast({
  387. icon: "none",
  388. title: "产品不属于此货架,请重新扫描",
  389. duration: 5000
  390. })
  391. }
  392. }
  393. })
  394. }
  395. }
  396. }
  397. </script>
  398. <style lang="less">
  399. .content{
  400. height: 100vh;
  401. width: 100%;
  402. background: #fff;
  403. .searchBar{
  404. padding: 0 0.5rem;
  405. .p-title{
  406. padding: 0 20rpx;
  407. display: flex;
  408. align-items: center;
  409. color: #222;
  410. font-size: 32rpx;
  411. .shelfName{
  412. width: 80%;
  413. flex-grow: 1;
  414. font-weight: bold;
  415. text{
  416. display: block;
  417. height: 30rpx;
  418. width: 6rpx;
  419. background: #0485F6;
  420. margin-right: 10rpx;
  421. border-radius: 10rpx;
  422. }
  423. }
  424. .btns{
  425. width:100rpx;
  426. text-align: right;
  427. font-size: 28rpx;
  428. }
  429. }
  430. .search{
  431. padding: 0.5rem 0.5rem 0.3rem 0.5rem;
  432. .input{
  433. flex-grow: 1;
  434. border:0.1rpx solid #eee;
  435. padding: 0.1rpx;
  436. border-radius: 50rpx;
  437. padding-right: 10rpx;
  438. }
  439. .icon{
  440. width: 10%;
  441. text-align: center;
  442. font-size: 50rpx;
  443. color: #999;
  444. }
  445. }
  446. }
  447. .check-list{
  448. padding: 0 0.5rem;
  449. flex-grow: 1;
  450. .scroll-view{
  451. height: calc(100vh - 180rpx);
  452. box-sizing: border-box;
  453. }
  454. .partList-list-box{
  455. padding: 20rpx 30rpx;
  456. border-bottom: 2rpx solid #f5f5f5;
  457. &:last-child{
  458. border:0;
  459. }
  460. .product{
  461. flex-grow: 1;
  462. &:active{
  463. opacity: 0.6;
  464. background-color: #f8f8f8;
  465. }
  466. .item-detail{
  467. margin-top: 10rpx;
  468. display: flex;
  469. align-items: center;
  470. justify-content: space-between;
  471. color: #9DA8B5;
  472. font-size: 26upx;
  473. .item-detail-text{
  474. font-size: 26upx;
  475. color: #333;
  476. }
  477. }
  478. .pinfo{
  479. flex-grow: 1;
  480. padding-left: 20rpx;
  481. .pname{
  482. font-size: 28rpx;
  483. color: #191919;
  484. text{
  485. font-weight: normal;
  486. margin-right: 6rpx;
  487. padding: 0 10rpx;
  488. background: rgba(3, 54, 146, 0.15);
  489. border-radius: 100rpx;
  490. color: #033692;
  491. font-size: 24rpx;
  492. }
  493. }
  494. .ptxt{
  495. font-size: 28rpx;
  496. color: #333;
  497. font-weight: bold;
  498. margin-top: 10upx;
  499. .pnums{
  500. color: #222;
  501. }
  502. }
  503. }
  504. }
  505. }
  506. }
  507. .footer-bar{
  508. background-color: #f8f8f8;
  509. padding: 52upx 20upx;
  510. .f-left{
  511. background-color: #d8d8d8;
  512. padding: 15upx;
  513. border-radius: 100upx;
  514. color: #fff;
  515. position: relative;
  516. }
  517. .active{
  518. background-color: #0485F6;
  519. }
  520. .f-mid{
  521. flex-grow: 1;
  522. text{
  523. margin-right: 15upx;
  524. &:first-child{
  525. color: #00cb00;
  526. }
  527. &:last-child{
  528. color: red;
  529. }
  530. }
  531. padding: 0 15upx;
  532. font-size: 0.8rem;
  533. color: #666;
  534. }
  535. .f-btns{
  536. button{
  537. width: 200upx;
  538. }
  539. }
  540. }
  541. // 筛选
  542. .tabBox{
  543. height: 100vh;
  544. .tabs{
  545. flex-grow: 1;
  546. overflow: auto;
  547. padding: 20rpx;
  548. > view{
  549. flex-wrap: wrap;
  550. justify-content: space-between;
  551. > view{
  552. width: 45%;
  553. border: 0.1rpx solid #eee;
  554. padding: 15rpx;
  555. border-radius: 50rpx;
  556. text-align: center;
  557. margin-bottom: 15rpx;
  558. }
  559. .active{
  560. border:0;
  561. background-color: #0485F6;
  562. color: #fff;
  563. }
  564. &:first-child{
  565. > view{
  566. width: 100%;
  567. }
  568. }
  569. }
  570. }
  571. .btns{
  572. display: flex;
  573. padding: 20upx;
  574. justify-content: space-between;
  575. .handle-btn {
  576. font-size: 28upx;
  577. }
  578. }
  579. }
  580. // 购物车
  581. .cpb_cart-mask{
  582. position: fixed;
  583. width: 100%;
  584. background: rgba(0,0,0,0.5);
  585. z-index: 10000;
  586. bottom: 100rpx;
  587. top: 0;
  588. }
  589. .cpb_cart-box{
  590. background-color: #fff;
  591. position: absolute;
  592. width: 100%;
  593. z-index: 1000;
  594. bottom: 0;
  595. border-radius: 30rpx 30rpx 0 0;
  596. max-height: 70vh;
  597. display: flex;
  598. flex-direction: column;
  599. .cpb_close{
  600. position: absolute;
  601. top: 10rpx;
  602. right: 20rpx;
  603. width: 70rpx;
  604. height: 70rpx;
  605. font-size: 32rpx;
  606. color: #999;
  607. }
  608. .cpb_cart-tit{
  609. text-align: center;
  610. padding: 20rpx;
  611. font-size: 32rpx;
  612. border-bottom: 2rpx solid #eee;
  613. .cpb_heji{
  614. padding-top: 20rpx;
  615. font-size: 26upx;
  616. > text{
  617. color: #333;
  618. }
  619. > view{
  620. color: #999;
  621. > text{
  622. color: #333;
  623. &:first-child{
  624. margin-right: 20upx;
  625. }
  626. }
  627. }
  628. }
  629. }
  630. .cpb_cart-list{
  631. padding: 20rpx 30rpx;
  632. overflow: auto;
  633. flex-grow: 1;
  634. > view{
  635. margin-bottom: 20rpx;
  636. }
  637. .item-name{
  638. font-size: 30rpx;
  639. text{
  640. background: #eef6ff;
  641. color: #1c588a;
  642. border-radius: 1em;
  643. font-size: 0.8em;
  644. padding: 0 0.5em;
  645. margin-right: 10upx;
  646. }
  647. }
  648. .item-info{
  649. border-bottom:2rpx solid #f8f8f8;
  650. flex-grow: 1;
  651. padding-left: 0.2em;
  652. }
  653. .item-detail{
  654. .item-detail-info{
  655. padding: 10upx 0 4upx;
  656. font-size: 24upx;
  657. > view{
  658. padding-bottom: 20rpx;
  659. align-items: center;
  660. .item-detail-text{
  661. color: #999;
  662. }
  663. }
  664. }
  665. }
  666. }
  667. }
  668. }
  669. </style>