FT577-WMS/pda/pages/warehouse/inbound/emptyTray.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">托盘条码</text>
        <view class="scan-btn" @click="startScan">
          <uni-icons type="scan" size="18" color="#52c41a"></uni-icons>
          <text class="scan-btn-text green">扫码</text>
        </view>
      </view>
      <view class="input-wrap">
        <input class="scan-input" v-model="barcode" placeholder="请输入或扫描托盘条码"
          @confirm="handleBarcode" focus />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="btn-section">
      <button class="btn btn-success" @click="submitSupply">生成绑定信息</button>
      <button class="btn btn-default" @click="resetForm">重置</button>
    </view>
  </view>
</template>

<script>
  import { getMaterialByBarcode, submitSupplyInbound, submitAddEmptyTrayJob} from '@/api/warehouse/inbound'

  export default {
    data() {
      return {
        taskNo: '',
        barcode: '',
        materialInfo: null,
        form: {
          lineCode: '',
          stationCode: '',
          quantity: '',
          reason: ''
        }
      }
    },
    onLoad(options) {
      if (options.taskNo) {
        this.taskNo = options.taskNo
      }
    },
    methods: {
      startScan() {
        var that = this
        uni.scanCode({
          onlyFromCamera: false,
          scanType: ['barCode', 'qrCode'],
          success: function(res) {
            that.barcode = res.result
            that.handleBarcode()
          }
        })
      },
      handleBarcode() {
        if (!this.barcode) {
          this.$modal.msg('请输入物料条码')
          return
        }
        var that = this
        getMaterialByBarcode(this.barcode).then(function(res) {
          that.materialInfo = res.data
          that.$modal.msgSuccess('物料信息获取成功')
        }).catch(function() {
          that.materialInfo = null
        })
      },
      submitSupply() {
        if (!this.barcode) {
          this.$modal.msg('请输入托盘条码')
          return
        }

        var data = {
          barcode: this.barcode,
        }

        var that = this
        submitAddEmptyTrayJob(data).then(function() {
          that.$modal.msgSuccess('绑定操作成功')
          that.resetForm()
        })
      },
      resetForm() {
        this.barcode = ''
        this.materialInfo = null
        this.form = {
          lineCode: '',
          stationCode: '',
          quantity: '',
          reason: ''
        }
      }
    }
  }
</script>

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

  .page-container {
    padding: 24rpx;
  }

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

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

  .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 #52c41a;
    border-radius: 8rpx;
  }

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

  .scan-btn-text.green {
    color: #52c41a;
  }

  .input-wrap {
    border: 1rpx solid #e8e8e8;
    border-radius: 8rpx;
    padding: 5rpx;
  }

  .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;
  }

  .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;
  }

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

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

  .btn-success {
    background: #52c41a;
    color: #fff;
  }

  .btn-default {
    background: #fff;
    color: #666;
    border: 1rpx solid #d9d9d9;
  }
</style>