FT577-WMS/pda/pages/warehouse/outbound/container.vue

<template>
  <view class="page-container">
    <!-- 任务信息 -->
    <view class="task-info" v-if="taskNo">
      <text class="task-label">出库任务编号</text>
      <text class="task-value">{{ taskNo }}</text>
    </view>

    <!-- 扫码区域 -->
    <view class="scan-section">
      <view class="scan-header">
        <text class="scan-title">1.选择立库区域</text>
      </view>
      <picker mode="selector" :range="cargoAreaOptions" @change="onCargoAreaChange">
            <view class="form-input picker-text">
              {{ selectedCargoArea || '请选择库区' }}
            </view>
		</picker>
    </view>
	
	<view class="scan-section">
	  <view class="scan-header">
	    <text class="scan-title">2.选择托盘类型</text>
	  </view>
	  <picker mode="selector" :range="palletTypeOptions" @change="onPalletTypeChange">
	        <view class="form-input picker-text">
	          {{ selectedPalletType || '请选择托盘类型' }}
	        </view>
	      </picker>
	</view>

    <!-- 操作按钮 -->
    <view class="btn-section" >
      <button class="btn btn-orange" @click="handleCallContainer">呼叫容器出库</button>
      <button class="btn btn-default" @click="resetForm">重置</button>
    </view>
  </view>
</template>

<script>
  import { callStockOutForContainer } from '@/api/warehouse/outbound/container'

  export default {
    data() {
      return {
        taskNo: '',
        barcode: '',
		traCode: '',
        outboundInfo: null,
        confirmQty: '',
        form: {
          remark: ''
        },
		// 新增：下拉框选项与选中状态
		cargoAreaOptions: ['01', '02', '03', '04'],
		palletTypeOptions: [1, 2, 3],
		selectedCargoArea: '', // 库区
		selectedPalletType: '' // 托盘类型
      }
    },
    onLoad(options) {
      if (options.taskNo) {
        this.taskNo = options.taskNo
      }
    },
    methods: {
      // 处理库区选择
      onCargoAreaChange(e) {
        this.selectedCargoArea = this.cargoAreaOptions[e.detail.value]
      },
      
      // 处理托盘类型选择
      onPalletTypeChange(e) {
        this.selectedPalletType = this.palletTypeOptions[e.detail.value]
      },
	  
      // 呼叫空托出库逻辑
      handleCallContainer() {
        if (!this.selectedCargoArea || !this.selectedPalletType) {
          this.$modal.msg('请先选择库区和托盘类型')
          return
        }
  
        uni.showLoading({ title: '呼叫中...' })
        callStockOutForContainer(this.selectedCargoArea, this.selectedPalletType)
          .then(res => {
            uni.hideLoading()
			this.$modal.msgSuccess('呼叫成功')

          })
          .catch(err => {
            uni.hideLoading()
            // this.$modal.msg('网络异常，请稍后重试')
          })
      },
	  
	  
      resetForm() {
        this.selectedCargoArea = ''
        this.selectedPalletType = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f7fa;
    min-height: 100%;
  }

  .page-container {
    padding: 24rpx;
  }

  .task-info {
    background: #fff7e6;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    margin-bottom: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .task-label {
    font-size: 26rpx;
    color: #fa8c16;
  }

  .task-value {
    font-size: 26rpx;
    color: #333;
    font-weight: 500;
  }

  .scan-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .scan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .scan-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

  .scan-btn {
    display: flex;
    align-items: center;
    padding: 8rpx 20rpx;
    border: 1rpx solid #fa8c16;
    border-radius: 8rpx;
  }

  .scan-btn-text {
    font-size: 24rpx;
    margin-left: 8rpx;
  }

  .scan-btn-text.orange {
    color: #fa8c16;
  }


  .scan-input {
    font-size: 28rpx;
    padding: 16rpx;
    word-break: break-all;
    width: 100%;
    height: auto;
    line-height: 1.4;
  }

  .form-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .form-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }

  .form-item {
    display: flex;
    align-items: center;
    padding: 16rpx 0;
  }

  .form-label {
    font-size: 28rpx;
    color: #666;
    width: 160rpx;
    flex-shrink: 0;
  }

  .form-input {
    flex: 1;
    font-size: 28rpx;
    border: 1rpx solid #e8e8e8;
    border-radius: 8rpx;
    padding: 16rpx;
    width: 100%;
    height: auto;
    line-height: 1.4;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .info-label {
    font-size: 28rpx;
    color: #999;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
  }

  .info-value.highlight {
    color: #fa8c16;
    font-weight: 500;
  }

  .btn-section {
    padding: 24rpx 0;
  }

  .btn {
    font-size: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
  }

  .btn-orange {
    background: #fa8c16;
    color: #fff;
  }

  .btn-default {
    background: #fff;
    color: #666;
    border: 1rpx solid #d9d9d9;
  }
  
  .picker-text {
    display: flex;
    align-items: center;
    color: #767676;
  }
</style>