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

<template>
  <div>
  <div class="pda-container">
    <div class="status-bar">
      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>上一页</div>
      <div class="goBack">登记检验结果</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">
      <el-table :height="240" :data="items" @row-click="rowClick"
                stripe highlight-current-row border :row-style="{ height: '30px' }" style="width: 100%;">
        <el-table-column prop="code" header-align="center" align="center" label="商品编码"></el-table-column>
        <el-table-column prop="qty" header-align="center" align="center" label="数量" width="42"></el-table-column>
        <el-table-column prop="qty" header-align="center" align="center" label="不合格数量">
          <template slot-scope="scope">
            <span style="height: 11px;width:98%;color: red">{{scope.row.qty}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 操作按钮区 -->

  </div>

  </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: {
    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>

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

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #17b3a3;
  color: #fff;
  padding: 8px 12px;
}

</style>