cartList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="product-list flex">
  4. <view class="leftTabs">
  5. <view v-for="item in placeTab" :key="item" :class="curTab==item?'active':''" @click="curTab = item">{{item}}层</view>
  6. </view>
  7. <scroll-view scroll-y class="rightCons" v-if="shelfPlaceList">
  8. <view
  9. class="partList-list-box"
  10. v-for="item in shelfPlaceList[curTab]"
  11. :key="item.shelfCartSn"
  12. @click="editRow(item)"
  13. >
  14. <view class="flex align_center flex_1">
  15. <view class="pimgs">
  16. <u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
  17. </view>
  18. <view class="pinfo">
  19. <view class="ptxt">
  20. <text>{{item.shelfPlaceCode}}</text>
  21. {{item.productCode}}
  22. </view>
  23. <view class="pname">
  24. {{item.product.productName}}
  25. </view>
  26. </view>
  27. </view>
  28. <view class="ptools flex align_center justify_between">
  29. <view></view>
  30. <view class="pcurnums flex align_center">
  31. <view class="u-ninput">
  32. <u-number-box :index="item.id" @blur="updateNums" @minus="updateNums" @plus="updateNums" color="#000" bg-color="#fff" v-model="item.qty" :min="0"></u-number-box>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </scroll-view>
  38. </view>
  39. <view class="footer-bar flex align_center justify_between">
  40. <view class="heji flex align_center" @click="showPop=!showPop">
  41. 所有层合计款数:<text>{{totalKs}}</text>;数量:<text>{{totalNums}}</text>;
  42. <u-icon name="arrow-up"></u-icon>
  43. </view>
  44. <view class="btns">
  45. <u-button @click="showLayer=true" type='primary' shape="circle" size="medium">继续录入产品</u-button>
  46. </view>
  47. </view>
  48. <!-- 合计弹框 -->
  49. <u-popup mode="bottom" :mask="false" closeable v-model="showPop" :z-index="100">
  50. <view class="heji-content">
  51. <scroll-view scroll-y="true" style="height: 400rpx;">
  52. <view class="heji-con-list">
  53. <view class="flex align_center" v-for="item in countData" :key="item.shelfTierCode">
  54. <view>{{item.shelfTierCode}}层</view>
  55. <view class="flex align_center">
  56. <text>款数:{{item.category}}</text>
  57. <text>数量:{{item.qty}}</text>
  58. </view>
  59. </view>
  60. </view>
  61. </scroll-view>
  62. </view>
  63. </u-popup>
  64. <!-- 选中层 -->
  65. <u-popup mode="center" width="80%" :mask-close-able="false" closeable @close="curLayer=''" v-model="showLayer" border-radius="15">
  66. <view class="layer-content">
  67. <view class="tits">请选择产品的货架层号</view>
  68. <view class="tagbox flex">
  69. <view>
  70. <view class="tag" :class="curLayer==item?'active':''" v-for="item in layerList" :key="item" @click="curLayer=curLayer==item?'':item">
  71. {{item}}层
  72. </view>
  73. </view>
  74. </view>
  75. <view class="newbtn flex justify_between" v-if="curLayer">
  76. <u-button shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button>
  77. <u-button @click="scanProduct()" type='primary' shape="circle" size="medium">扫描条形码匹配</u-button>
  78. </view>
  79. </view>
  80. </u-popup>
  81. </view>
  82. </template>
  83. <script>
  84. import { clzConfirm, numberToFixed } from '@/libs/tools';
  85. import {queryMapList, queryCountList, shelfCartSave, shelfCartDelete} from '@/api/shelfCart.js'
  86. export default {
  87. data() {
  88. return {
  89. showPop: false,
  90. shelfSn: '',
  91. shelfName: '',
  92. shelfPlaceList: null,
  93. placeTab: [],
  94. curTab: '',
  95. totalKs: 0,
  96. totalNums: 0,
  97. countData: [],
  98. layerList: [],
  99. showLayer: false,
  100. curLayer: ''
  101. }
  102. },
  103. onLoad(opts) {
  104. this.layerList = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z'.split('、');
  105. this.shelfSn = opts.shelfSn
  106. this.shelfName = opts.shelfName
  107. this.customerSn = opts.customerSn
  108. this.pageInit()
  109. uni.$on("updateTempHw",()=>{
  110. this.pageInit(true)
  111. })
  112. },
  113. onUnload() {
  114. uni.$off("updateTempHw")
  115. },
  116. methods: {
  117. pageInit(flag){
  118. this.placeTab = []
  119. this.shelfPlaceList = null
  120. this.countData = []
  121. this.getList(flag)
  122. this.getCount()
  123. },
  124. scanProduct(){
  125. this.showLayer = false
  126. this.curLayer = ''
  127. uni.navigateTo({
  128. url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
  129. })
  130. },
  131. searchProduct(){
  132. this.showLayer = false
  133. this.curLayer = ''
  134. uni.navigateTo({
  135. url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
  136. })
  137. },
  138. // 编辑
  139. editRow(item){
  140. this.$store.state.vuex_tempData = item
  141. uni.navigateTo({
  142. url: "/pages/batchShelves/editShelfHw?shelfSn="+this.shelfSn+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
  143. })
  144. },
  145. // 获取产品列表
  146. getList(flag){
  147. uni.showLoading({
  148. title: '正在加载...'
  149. })
  150. queryMapList({ shelfSn: this.shelfSn }).then(res => {
  151. console.log(res.data)
  152. if (res.status == 200 && res.data) {
  153. this.shelfPlaceList = JSON.stringify(res.data) == '{}' ? null : res.data
  154. for(let a in res.data){
  155. this.placeTab.push(a)
  156. }
  157. if(!flag || this.placeTab.length==1){
  158. this.curTab = this.placeTab[0]
  159. }else{
  160. if(!this.shelfPlaceList[this.curTab]){
  161. this.curTab = this.placeTab[0]
  162. }
  163. }
  164. if(this.placeTab.length == 0){
  165. this.shelfPlaceList = null
  166. }
  167. } else {
  168. this.shelfPlaceList = null
  169. this.placeTab = []
  170. }
  171. uni.hideLoading()
  172. })
  173. },
  174. // 获取统计数据
  175. getCount(){
  176. this.totalKs = 0
  177. this.totalNums = 0
  178. queryCountList({shelfSn: this.shelfSn}).then(res => {
  179. if(res.status == 200){
  180. this.countData = res.data
  181. // 计算合计
  182. this.countData.map(item => {
  183. this.totalKs += item.category||0
  184. this.totalNums += item.qty||0
  185. })
  186. }
  187. })
  188. },
  189. // 删除
  190. shelfCartDelete(row){
  191. const _this = this
  192. clzConfirm({
  193. title: '提示',
  194. content: '确认删除此货位和产品吗?',
  195. success (ret) {
  196. if (ret.confirm || ret.index == 0) {
  197. uni.showLoading({
  198. title: '正在删除...'
  199. })
  200. shelfCartDelete({ shelfCartSn: row.shelfCartSn }).then(res => {
  201. if (res.status == 200) {
  202. _this.toashMsg(res.message)
  203. _this.pageInit(true)
  204. }
  205. uni.hideLoading()
  206. })
  207. }else{
  208. _this.pageInit(true)
  209. }
  210. }
  211. })
  212. },
  213. // 修改数量
  214. updateNums(e){
  215. console.log(e)
  216. const row = this.shelfPlaceList[this.curTab].find(item => item.id == e.index)
  217. const nums = e.value
  218. // 如果小于1,提示是否删除
  219. if(nums<1){
  220. this.shelfCartDelete(row)
  221. return
  222. }
  223. // 继续修改数量
  224. uni.showLoading({
  225. title: '正在保存...'
  226. })
  227. const params = {
  228. shelfSn: row.shelfSn,
  229. shelfName: this.shelfName,
  230. shelfTierCode: row.shelfTierCode,
  231. shelfPlaceSn: row.shelfPlaceSn,
  232. shelfPlaceCode: row.shelfPlaceCode,
  233. productSn: row.productSn,
  234. productCode: row.productCode,
  235. qty: nums,
  236. price: row.price,
  237. cost: row.cost,
  238. shelfCartSn: row.shelfCartSn
  239. }
  240. console.log(params)
  241. shelfCartSave(params).then(res => {
  242. if(res.status == 200){
  243. this.toashMsg(res.message)
  244. this.getCount()
  245. }
  246. uni.hideLoading()
  247. })
  248. },
  249. }
  250. }
  251. </script>
  252. <style lang="less">
  253. .content{
  254. width: 100%;
  255. height: 100vh;
  256. .product-list{
  257. flex-grow: 1;
  258. .leftTabs{
  259. width: 20%;
  260. overflow: auto;
  261. > view{
  262. padding: 0.8rem 0.5rem;
  263. border-left: 0.2rem solid #f8f8f8;
  264. text-align: center;
  265. }
  266. .active{
  267. border-color: rgb(47, 126, 209);
  268. background-color: #fff;
  269. }
  270. }
  271. .rightCons{
  272. width: 80%;
  273. background-color: #fff;
  274. position: relative;
  275. padding: 0 20upx;
  276. height: calc(100vh - 110rpx);
  277. .partList-list-box{
  278. padding: 10px 0;
  279. border-bottom: 2rpx solid #f5f5f5;
  280. .pinfo{
  281. flex-grow: 1;
  282. padding-left: 20rpx;
  283. .ptxt{
  284. color: #666;
  285. font-size: 26rpx;
  286. text{
  287. font-weight: normal;
  288. margin-right: 10rpx;
  289. padding: 0 10rpx;
  290. background: rgba(3, 54, 146, 0.15);
  291. border-radius: 30rpx;
  292. color: #033692;
  293. font-size: 24rpx;
  294. }
  295. margin-bottom: 15upx;
  296. }
  297. .pname{
  298. color: #666;
  299. font-size: 26rpx;
  300. font-weight: bold;
  301. }
  302. }
  303. .ptools{
  304. color: #666;
  305. font-size: 26rpx;
  306. .u-ninput{
  307. border: 2rpx solid #eee;
  308. border-radius: 50rpx;
  309. padding: 0 6rpx;
  310. }
  311. /deep/ .u-icon-disabled{
  312. background: #fff!important;
  313. }
  314. /deep/ .u-number-input{
  315. margin: 0 0;
  316. border: 2rpx solid #eee;
  317. border-top: 0;
  318. border-bottom: 0;
  319. }
  320. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  321. border-radius: 50rpx;
  322. }
  323. }
  324. }
  325. }
  326. }
  327. .footer-bar{
  328. padding: 20rpx;
  329. position: relative;
  330. z-index: 200;
  331. background-color: #fff;
  332. .heji{
  333. flex-grow: 1;
  334. color: #999;
  335. text{
  336. color: #333;
  337. }
  338. font-size: 26rpx;
  339. padding-right: 30upx;
  340. }
  341. .btns{
  342. button{
  343. width: 200rpx;
  344. background-color: rgb(51, 95, 182);
  345. color: #fff;
  346. }
  347. }
  348. }
  349. .heji-content{
  350. padding: 60upx 30upx 30upx;
  351. }
  352. .heji-con-list{
  353. > view{
  354. display: flex;
  355. align-items: center;
  356. border-bottom: 2rpx solid #eee;
  357. padding: 18rpx 0;
  358. > view{
  359. &:first-child{
  360. font-weight: normal;
  361. padding: 4rpx 15rpx;
  362. background: rgba(3, 54, 146, 0.15);
  363. border-radius: 10rpx;
  364. color: #033692;
  365. font-size: 24rpx;
  366. margin-right: 30upx;
  367. }
  368. &:last-child{
  369. flex-grow: 1;
  370. text{
  371. margin-right: 20upx;
  372. }
  373. }
  374. }
  375. }
  376. }
  377. .layer-content{
  378. padding: 30upx;
  379. .tits{
  380. padding: 10upx 0 20upx;
  381. text-align: center;
  382. }
  383. .tagbox{
  384. flex-grow: 1;
  385. > view{
  386. margin: 0 auto;
  387. overflow: hidden;
  388. width: 100%;
  389. .tag{
  390. width: 16%;
  391. background-color: #fff;
  392. border:1rpx solid #aeaeae;
  393. box-shadow: 2rpx 4rpx 6rpx #eee;
  394. border-radius: 15rpx;
  395. text-align: center;
  396. padding: 10rpx 0;
  397. float: left;
  398. margin: 10rpx 2%;
  399. }
  400. .active{
  401. background-color: #55aaff;
  402. border-color: #55aaff;
  403. color: #fff;
  404. }
  405. }
  406. }
  407. .newbtn{
  408. padding: 40upx 0 10upx;
  409. button{
  410. width: 45%;
  411. }
  412. }
  413. }
  414. }
  415. </style>