udiwms-vue-frame/src/views/collect/newCreateCodeDetail.vue

<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="15" style="border: 1px solid #e3dfe1; padding:15px; height: 700px; margin-left: 20px;">
        <h2 style="font-weight: bold;">上货信息</h2>
        <div v-for="(item, index) in detailList" :key="index" class="product-info">
          <div class="info-item">
          <p>产品通用名: {{ item.coName }}</p>
          <p>规格: {{ item.bzgg }}</p>
          <p>产品标识: {{ item.nameCode }}</p>
          <p>批次号: {{ item.batchNo }}</p>
          </div>
          <div class="count-items">
          <p>扫码数量: <span class="scan-count">{{ item.count }}</span></p>
          <p>实际数量: <span class="actual-count">{{ item.reCount }}/ {{ item.measname }}</span></p>
          </div>
        </div>

      </el-col>
      <el-col :span="8" style="border: 1px solid #e3dfe1; margin-left: 20px; padding: 15px;height: 700px;">
        <h2 style="font-weight: bold;">扫码队列({{codeArray.length}})</h2>
        <!--<el-divider></el-divider>-->
        <div style=" border-top: 1px solid #ccc;">
          <el-table v-loading="loading" :data="codeArray" style="width: 100%;margin-top: 20px" max-height="350"
                    ref="multipleTable">
            <!--      <el-table-column-->
            <!--        type="selection"-->
            <!--        width="55">-->
            <!--      </el-table-column>-->
            <el-table-column label="序号" type="index" width="55"></el-table-column>
            <el-table-column
              label="追溯码"
              prop="code"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>

        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {convertDate} from "@/utils/date";
import { getCheckDetailCodes, getDetailCodes, updateBizProduct, updateCodeProduct } from '@/api/inout/orderDetailCode'
import { errorCodeList } from '@/api/inout/order'


export default {
  name: "newCreateCodeDetail",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
    viewType: {
      type: Object,
      required: true,
    },
    curAction: {
      type: Object,
      required: true,
    },
    status: {
      type: Object,
      required: true,
    },

  },
  data() {
    return {
      convertDateFun: convertDate,
      loading: false,
      query: {
        orderId: null,
        code: "",
        corpOrderId: "",
      },
      detailList: [],
      total: 0,
      selectRlVisible: false,
      dialogTableVisible: false,
      editCodeVisible: false,
      orderDetail:null,
      codeArray:[]

    }
  },

  watch: {
    "curAction": {
      handler(newVal, oldVal) {

      },
      immediate: true
    }
  },
  methods: {
    getOrderDetails() {
      this.loading = true;
      this.query.orderId = this.idQuery.billNo;
      getDetailCodes(this.query) //查找该单号下的所有条码
        .then((response) => {

          this.detailList = response.data.list || [];
          this.total = response.data.total || 0;
          this.loading = false;
          if (this.detailList.length > 0 && this.status == false){
            this.orderDetail = this.detailList[0]
            this.$emit('getOrderData',  this.orderDetail)
          }
          this.$emit('clearBillNo', this.detailList.length > 0? false : true);
          let count = 0;
          if (this.detailList && this.detailList.length > 0) {
            this.detailList.forEach(item => {
              count += item.reCount;
            });
            this.$emit('getCount', count);
          }
        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
          this.total = 0;
        });
    },

    rowStyle({row, rowIndex}) {
      let rowBackground = {};
      if (this.viewType == 3 && !row.checkSuccess) {
        rowBackground.color = '#f60303';
      }
      return rowBackground;
    },


    saveChange(row) {
      if (row.batchNo == '') {
        row.batchNo = null;
      }
      updateCodeProduct(row)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.$message.success("保存成功！");
            this.selectedIndex = null;
            this.refreshPanel();

          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.pageTotal = 0;
        });
    },
    rowChange(val) {
      this.currentRow = val;
      if (this.currentRow.batchNo == '')
        this.currentRow.batchNo = null;
      this.selectedIndex = val.index;
    },
    getCodeList() {
      this.loading = true;
      this.query.orderId = this.idQuery.billNo
      errorCodeList(this.query) //查找该单号下的所有条码
          .then((response) => {
            this.codeArray = response.data.list || [];
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;

          });


    },

  },
  created() {
    if (this.idQuery.billNo != null)
      this.getOrderDetails();
      this.getCodeList()
  },
}
</script>

<style scoped>
.product-info {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
}

.info-item {
  flex: 1;
}

.count-items {
  flex: 0 0 auto; /* This ensures that count items do not grow or shrink */
}

.count-item {
  margin: 0; /* Remove default margin */
}

.scan-count {
  color: red;
  font-size: 26px;
}

.actual-count {
  color: green;
  font-size: 24px;
}

</style>