editModal.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <u-mask class="productModal" :show="isShow" :mask-click-able="false">
  3. <view class="product-con">
  4. <view class="product-main">
  5. <view class="p-title">
  6. <text>[{{infoData.shelfPlaceCode}}]</text> {{infoData.productCode}}
  7. </view>
  8. <view class="p-info flex align_center">
  9. <text>产品名称</text> {{infoData.productEntity.productName}}
  10. </view>
  11. <view class="p-info flex align_center">
  12. <text>单位</text> {{infoData.productEntity.unit}}
  13. </view>
  14. <view class="p-info flex align_center">
  15. <text>可用库存</text> {{infoData.qty}}
  16. </view>
  17. <view class="p-info flex align_center">
  18. <text>冻结库存</text>
  19. <view class="flex align_center">
  20. {{infoData.freezeQty}}
  21. <view>
  22. <text>冻结明细</text>
  23. <u-icon name="arrow-right"></u-icon>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="p-info flex align_center">
  28. <text>结算价格</text>
  29. <view>
  30. <text>{{infoData.price}}</text>
  31. </view>
  32. </view>
  33. <view class="p-info flex align_center">
  34. <text>实际可用库存</text>
  35. <view>
  36. <u-number-box v-model="infoData.checkQty" :index="infoData.id" :min="0" :max="infoData.maxQty||999999"></u-number-box>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="product-footer">
  41. <view class="button-cancel" @click="isShow=false">取消</view>
  42. <view class="button-confirm" @click="handleConfirm">确定</view>
  43. </view>
  44. </view>
  45. </u-mask>
  46. </template>
  47. <script>
  48. import { stockCheckDetailSave } from '@/api/stockCheck'
  49. export default {
  50. props: {
  51. openModal: { // 弹框显示状态
  52. type: Boolean,
  53. default: false
  54. },
  55. infoData: {
  56. tyoe: Object,
  57. default: ()=>{
  58. return null
  59. }
  60. },
  61. },
  62. data() {
  63. return {
  64. isShow: this.openModal, // 是否打开弹框
  65. }
  66. },
  67. methods: {
  68. // 确认
  69. handleConfirm(){
  70. this.$emit('addProduct',{
  71. shelfSn: this.infoData.shelfSn,
  72. shelfPlaceSn: this.infoData.shelfPlaceSn,
  73. shelfPlaceCode: this.infoData.shelfPlaceCode,
  74. productCode: this.infoData.productCode,
  75. stockQty: this.infoData.stockQty,
  76. freezeQty: this.infoData.freezeQty,
  77. checkQty: this.infoData.checkQty,
  78. })
  79. },
  80. },
  81. watch: {
  82. // 父页面传过来的弹框状态
  83. openModal (newValue, oldValue) {
  84. this.isShow = newValue
  85. },
  86. // 重定义的弹框状态
  87. isShow (newValue, oldValue) {
  88. if (!newValue) {
  89. this.$emit('close')
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. .productModal{
  97. width: 100%;
  98. height: 100%;
  99. .text-c{
  100. text-align: center;
  101. }
  102. .product-con{
  103. width: 78%;
  104. margin: 30vh auto 0;
  105. background-color: #fff;
  106. border-radius: 24upx;
  107. .product-main{
  108. padding: 60upx 20upx 50upx;
  109. max-height: 50vh;
  110. overflow: auto;
  111. .p-title{
  112. padding: 20upx 30upx;
  113. background-color: #999;
  114. border-radius: 60upx;
  115. }
  116. .p-info{
  117. padding: 20upx 30upx;
  118. > text{
  119. width: 100upx;
  120. color: #999;
  121. }
  122. > view{
  123. flex-grow:1;
  124. }
  125. }
  126. }
  127. .product-footer{
  128. font-size: 30upx;
  129. display: flex;
  130. justify-content: space-between;
  131. align-items: center;
  132. text-align: center;
  133. border-top: 1upx solid #E5E5E5;
  134. .button-cancel{
  135. color: #999;
  136. border-right: 1upx solid #E5E5E5;
  137. flex-grow: 1;
  138. padding: 20upx 0;
  139. }
  140. .button-confirm{
  141. color: #2A86F4;
  142. flex-grow: 1;
  143. padding: 20upx 0;
  144. }
  145. }
  146. }
  147. }
  148. </style>