confirm.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <view class="replenishment-confirm-wrap">
  3. <scroll-view scroll-y class="replenishment-confirm-cont">
  4. <view class="replenishment-confirm-main" v-for="(item,index) in listdata" :key="item.id">
  5. <u-image class="item-pic" :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${theme}/def_img@2x.png`" width="64px" height="64px"></u-image>
  6. <view class="item-con">
  7. <view class="item-name">{{item.product&&item.product.name?item.product.name:'--'}}</view>
  8. <view class="item-code">{{item.product&&item.product.code?item.product.code:'--'}}</view>
  9. <view class="item-num">
  10. <view class="num-t">x {{item.qty||item.qty==0?item.qty:'--'}} {{item.product&&item.product.unit?item.product.unit:'--'}}</view>
  11. <view class="num-v">
  12. <u-number-box color="#000" bg-color="#fff" v-model="item.confirmQty" @change="handlerChange" :min="0" :max="item.qty"></u-number-box>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. </scroll-view>
  18. <view class="replenishment-confirm-footer">
  19. <u-button @click="confirmModal=true" type="success" :custom-style="customStyle" hover-class="none" shape="circle">确定补货({{confirmQty}}/{{totalQty}})</u-button>
  20. </view>
  21. <!-- 确认弹框 -->
  22. <common-modal :openModal="confirmModal" content="确认对该数字货架进行补货吗?" confirmText="确认补货" @confirm="modalConfirm" @close="confirmModal=false" />
  23. <!-- 库存不足 弹框 -->
  24. <stock-modal :openModal="stockModal" :list="stockList" :params="paramsData" @confirm="modalStock" @close="stockModal=false" />
  25. </view>
  26. </template>
  27. <script>
  28. import commonModal from '@/pages/common/commonModal.vue'
  29. import stockModal from './stockModal.vue'
  30. import { shelfReplenishDetailList, shelfReplenishDetailStock, shelfReplenishConfirm } from '@/api/shelfReplenish'
  31. export default {
  32. components: { commonModal, stockModal },
  33. data() {
  34. return {
  35. listdata: [],
  36. theme: '',
  37. customStyle: {
  38. borderRadius:'100rpx',
  39. fontSize:'30rpx',
  40. background: this.$config('primaryColor')
  41. },
  42. confirmQty: 0, // 实发数量之和
  43. totalQty: 0, // 应发数量之和
  44. replenishBillSn: '',
  45. confirmModal: false,
  46. stockModal: false,
  47. stockList: [],
  48. paramsData: null
  49. }
  50. },
  51. onReady() {
  52. uni.setNavigationBarColor({
  53. frontColor: '#ffffff',
  54. backgroundColor: this.$config('primaryColor')
  55. })
  56. },
  57. onLoad(options){
  58. this.theme = getApp().globalData.theme
  59. this.replenishBillSn = options.sn
  60. this.getRow()
  61. },
  62. methods:{
  63. // 查询列表
  64. getRow () {
  65. const _this = this
  66. shelfReplenishDetailList({ replenishBillSn: this.replenishBillSn }).then(res => {
  67. if (res.status == 200) {
  68. _this.totalQty = 0
  69. _this.confirmQty = 0
  70. res.data.map(item =>{
  71. item.confirmQty = item.qty || 0
  72. if(item.qty && Number(item.qty)){
  73. _this.totalQty += Number(item.qty)
  74. }
  75. if(item.confirmQty && Number(item.confirmQty)){
  76. _this.confirmQty += Number(item.confirmQty)
  77. }
  78. })
  79. this.listdata = res.data || []
  80. } else {
  81. this.listdata = []
  82. }
  83. })
  84. },
  85. handlerChange(value, index){
  86. const _this = this
  87. this.confirmQty = 0
  88. this.listdata.map(item => {
  89. if(item.confirmQty && Number(item.confirmQty)){
  90. _this.confirmQty += Number(item.confirmQty)
  91. }
  92. })
  93. },
  94. // 确认补货 confirm
  95. modalConfirm(){
  96. const arr = []
  97. this.listdata.map((item, index) => {
  98. if (item.confirmQty || item.confirmQty == 0) {
  99. arr.push({
  100. productSn: item.productSn,
  101. confirmQty: item.confirmQty
  102. })
  103. }
  104. })
  105. const params = {
  106. replenishBillSn: this.replenishBillSn,
  107. detailList: arr
  108. }
  109. // 校验产品库存是否足够
  110. shelfReplenishDetailStock(params).then(res => {
  111. if (res.status == 200) {
  112. if (res.data && res.data.length > 0) {
  113. this.stockList = res.data || []
  114. this.paramsData = params
  115. this.confirmModal = false
  116. this.stockModal = true
  117. } else {
  118. this.confirmFun(params)
  119. }
  120. }
  121. })
  122. },
  123. // 提交确认
  124. confirmFun (params) {
  125. shelfReplenishConfirm(params).then(res => {
  126. if (res.status == 200) {
  127. if(res.status == 200){
  128. uni.$emit('refreshBL')
  129. uni.navigateBack()
  130. }
  131. this.toashMsg(res.message)
  132. }
  133. })
  134. },
  135. // 库存不足 confirm
  136. modalStock(params){
  137. this.stockModal = false
  138. this.confirmFun(params)
  139. }
  140. }
  141. }
  142. </script>
  143. <style lang="scss" scoped>
  144. .replenishment-confirm-wrap{
  145. background-color: #fff;
  146. position: relative;
  147. width: 100%;
  148. height: 100%;
  149. overflow: hidden;
  150. padding-bottom: 136upx;
  151. .replenishment-confirm-cont{
  152. width: 100%;
  153. height: 100%;
  154. overflow: auto;
  155. .replenishment-confirm-main{
  156. display: flex;
  157. justify-content: space-between;
  158. margin: 0 32upx;
  159. padding: 30upx 0;
  160. border-bottom: 1px solid #E5E5E5;
  161. .item-pic{
  162. flex-shrink: 0;
  163. margin-right: 20upx;
  164. }
  165. .item-con{
  166. flex-grow: 1;
  167. .item-name{
  168. color: #191919;
  169. font-size: 30upx;
  170. font-weight: bold;
  171. }
  172. .item-code{
  173. color: #999999;
  174. font-size: 26upx;
  175. }
  176. .item-num{
  177. display: flex;
  178. justify-content: space-between;
  179. align-items: center;
  180. .num-t{
  181. color: #707070;
  182. font-size: 26upx;
  183. }
  184. .num-v{
  185. border: 2rpx solid #eee;
  186. border-radius: 50rpx;
  187. padding: 0 6rpx;
  188. }
  189. /deep/ .u-icon-disabled{
  190. background: #fff!important;
  191. }
  192. /deep/ .u-number-input{
  193. margin: 0 0;
  194. border: 2rpx solid #eee;
  195. border-top: 0;
  196. border-bottom: 0;
  197. }
  198. /deep/ .u-icon-plus, /deep/ .u-icon-minus{
  199. border-radius: 50rpx;
  200. }
  201. }
  202. }
  203. }
  204. }
  205. .replenishment-confirm-footer{
  206. padding: 26upx 32upx 30upx;
  207. background-color: #fff;
  208. position: fixed;
  209. left: 0;
  210. bottom: 0;
  211. width: 100%;
  212. box-shadow: 3px 1px 7px #eee;
  213. }
  214. }
  215. </style>