出库

pages/order-detail/index.vue

@@ -35,7 +35,7 @@
             <view
               v-else-if="steps[index].length > 0 && steps[index][steps[index].length - 2].desc == '未完成'"
               class="button-item"
-              @click="operatePaper(index, 'outbound', 1000)"
+              @click="showModal(order, index)"
             >
               出库
             </view>
@@ -145,6 +145,31 @@
         </view>
       </view>
     </qn-footer>
+    <uni-popup ref="popup" type="bottom">
+      <view class="popup_modal">
+        <slot name="title">
+          <view class="popup_modal-title">请输入出库数量</view>
+        </slot>
+        <view style="width: 750rpx; padding: 20rpx 32rpx">
+          <qn-easyinput
+            :maxlength="8"
+            :styles="{ disableColor: '#fff' }"
+            v-model="outInfo.quantity"
+            text="left"
+            type="number"
+            :placeholder="`出库上线${outInfo.max}`"
+          ></qn-easyinput>
+        </view>
+        <view class="flex-row-center-space" style="margin-top: 40rpx; width: 750rpx; padding: 0 32rpx">
+          <view class="button button__submit" @click="makeOut">
+            <text class="text" style="color: white">确认</text>
+          </view>
+          <view class="button button__cancel" @click="closeModal">
+            <text class="text">取消</text>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -173,7 +198,12 @@ export default {
       supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum),
       paymentMethodEnum: Object.freeze(paymentMethodEnum),
       showList: ['send', 'receive'],
-      steps: []
+      steps: [],
+      outInfo: {
+        quantity: 0,
+        max: 0,
+        index: 0
+      }
     }
   },
   onLoad(option) {
@@ -194,6 +224,33 @@ export default {
   methods: {
     go2,
     back,
+    showModal(order, index) {
+      // 计算已出库数
+      let quantity = 0
+      order.outboundProcessList.forEach((item) => {
+        if (item.status == '30302') {
+          quantity += item.quantity
+        }
+      })
+      this.outInfo.max = order.pieceQuantity - quantity
+      this.outInfo.index = index
+      this.$refs.popup.open('bottom')
+    },
+    closeModal() {
+      this.$refs.popup.close()
+    },
+    makeOut() {
+      // 校验
+      if (this.outInfo.quantity > this.outInfo.max) {
+        uni.showToast({
+          title: '出库数量不能大于上限',
+          icon: 'none'
+        })
+        return
+      }
+      this.operatePaper(this.outInfo.index, 'outbound', this.outInfo.quantity)
+      this.closeModal()
+    },
     transformAddress(address) {
       let res = ''
       if (address.provinceName) {
@@ -634,4 +691,57 @@ export default {
     z-index: 5;
   }
 }
+.popup_modal {
+  width: 750rpx;
+  height: 600rpx;
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+  .popup_modal-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 750rpx;
+    height: 88rpx;
+    font-weight: 600;
+    border-bottom: 2rpx solid #d8d8d8;
+  }
+  .popup_modal-scroll {
+    width: 750rpx;
+    height: 600rpx;
+    .popup_modal-scroll-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      width: 750rpx;
+      height: 88rpx;
+      padding: 0rpx 32rpx;
+      border-bottom: 2rpx solid #d8d8d8;
+    }
+  }
+}
+.button {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10rpx;
+  .text {
+    font-size: 30rpx;
+    font-weight: 500;
+    text-align: center;
+  }
+}
+.button__cancel {
+  width: 270rpx;
+  height: 88rpx;
+  border: 2rpx solid #979797;
+}
+.button__submit {
+  width: 400rpx;
+  height: 88rpx;
+  background: #007aff;
+}
 </style>