cartList.vue 9.3 KB

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