wms-pda/src/views/modules/recv/recv.vue

<template>
  <div>
  <div class="pda-receipt">
    <div class="status-bar">
      <div class="time">{{ new Date().toTimeString().substr(0, 5) }}</div>
      <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
    </div>
    <!-- 扫描输入区 -->
    <div class="scan-box">
      <input
        v-model="scanCode"
        placeholder="扫描PO条码或输入PO号"
        @keyup.enter="addItem"
        ref="scanCodeRef"
      />
    </div>

    <!-- 商品列表区 -->
    <div class="item-list">
      <div
        v-for="(item, i) in items"
        :key="i"
        class="item-row"
      >
        <span>{{ item.code }}</span>
        <span>{{ item.qty }}件</span>
        <el-button icon="el-icon-delete" @click="removeItem(i)"></el-button>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <el-button
      class="submit-btn"
      @click="submit"
    >
      确认收货 ({{ totalQty }})
    </el-button>
  </div>
    <el-dialog
      style="font-size: 12px"
      v-drag
      :title="'Dialog'"
      :visible.sync="siteVisible"
      width="260px" :append-to-body="true" >
      <el-form label-position="top"  style="margin-left: 7px;margin-top: 10px;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="'Test'" >
              <el-radio label="Y">Y</el-radio>
              <el-radio label="N">N</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-footer style="height:40px;margin-top: 10px;text-align:center">
        <el-button type="primary" @click="">确定</el-button>
        <el-button type="primary" @click="siteVisible=false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      siteVisible: false,
      scanCode: '',
      items: [{code: 'A001', qty: 1}, {code: 'A002', qty: 2}]
    }
  },
  computed: {
    totalQty() {
      return this.items.reduce((sum, item) => sum + item.qty, 0)
    }
  },
  methods: {
    toShouye(){
      this.$router.push({path: '/'})
    },
    addItem() {
      if (!this.scanCode) return
      this.items.push({
        code: this.scanCode,
        qty: 1
      })
      this.scanCode = ''
    },
    removeItem(index) {
      this.items.splice(index, 1)
    },
    submit() {
      alert(`已提交${this.items.length}种商品`)
      this.items = []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.scanCodeRef.focus()
    })
  }
}
</script>

<style scoped>
.pda-receipt {
  display: flex;
  flex-direction: column;
  height: 80vh;
  padding: 10px;
}

.scan-box input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
}

.item-list {
  flex: 1;
  overflow-y: auto;
  margin: 20px 0;
}

.item-row {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.submit-btn {
  padding: 12px;
  background: #07c160;
  color: white;
  border: none;
  font-size: larger;
}
</style>