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: 400px; margin-left: 20px; overflow-y: scroll;">
<!--        <h2 style="font-weight: bold;">上货信息</h2>-->

        <span style="font-weight: bold;font-size: 18px">  上货信息</span>
        <div v-for="(item, index) in detailList" :key="index" class="product-info">
          <div class="info-item">
            <p class="p-title">产品通用名： {{ item.coName }}</p>
            <p class="p-title">制剂规格&nbsp;：{{ item.prepnSpec }}</p>
            <p class="p-title">包装规格&nbsp;：{{ item.bzgg }}</p>
            <!--<p class="p-title">产品标识: {{ item.nameCode }}</p>-->
            <p class="p-title">批次号&nbsp;&nbsp;&nbsp;&nbsp;：{{ item.batchNo }}</p>
            <p class="p-title">生产日期&nbsp;：{{ item.productDate }}</p>
            <p class="p-title">失效日期&nbsp;：{{ item.expireDate }}</p>
          </div>
          <div class="count-items">
            <p class="p-title">扫码数量&nbsp;： <span class="scan-count">{{ item.count }}</span></p>
            <p class="p-title">实际数量&nbsp;：<span class="actual-count">{{ item.reCount }}{{ item.xjdw }}</span></p>
          </div>
        </div>

      </el-col>
      <el-col :span="8" style="border: 1px solid #e3dfe1; margin-left: 20px; padding: 15px;height: 400px;">
<!--        <h2 style="font-weight: bold;">扫码明细({{ codeCount }})</h2>-->
        <span style="font-weight: bold;font-size: 18px">扫码明细({{ codeCount }})</span>
        <!--<el-divider></el-divider>-->
        <div style=" border-top: 1px solid #ccc;margin-top: 3px">
          <el-table v-loading="loading" :data="codeArray" style="width: 100%; margin-top: 20px" max-height="280px"
                    ref="multipleTable">
            <!--      <el-table-column-->
            <!--        type="selection"-->
            <!--        width="55">-->
            <!--      </el-table-column>-->
            <el-table-column label="序号" type="index" width="55" style="text-align: right;">

            </el-table-column>
            <el-table-column
              label="追溯码"
              prop="code"
              show-overflow-tooltip
              style="text-align: right;">
              <template slot-scope="scope">
                <div style="font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  {{ scope.row.code }}
                </div>
              </template>
            </el-table-column>
            <!--            <el-table-column label="操作" width="100" fixed="right">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-button-->
            <!--                  type="text"-->
            <!--                  size="small"-->
            <!--                  @click.native.stop="deleteCode(scope.$index, scope.row)"-->
            <!--                >减一-->
            <!--                </el-button-->
            <!--                >-->
            <!--                <el-button-->
            <!--                  type="text"-->
            <!--                  size="small"-->
            <!--                  @click.native.stop="editCode(scope.row)"-->
            <!--                >编辑-->
            <!--                </el-button-->
            <!--                >-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>

        </div>

      </el-col>
    </el-row>

    <el-dialog
      title="编辑条码"
      :visible.sync="editCodeVisible"
      append-to-body width="70%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="editCodeVisible"
    >
      <editCodeDialog
        editType="2"
        :closeCodeDialog="closeCodeDialog"
        :codeDetail="codeDetail">
      </editCodeDialog>
    </el-dialog>
  </div>
</template>

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

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,
    },

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

  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);
          } else {
            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.codeCount = this.codeArray.length
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;

        });
    },
    deleteCode(index, row) {
      this.$confirm("是否确定移除一个条码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let tQuery = {
          id: row.id
        }
        deleteCodesTempById(tQuery)
          .then((response) => {
            if (response.code === 20000) {
              this.getOrderDetails();
              this.getCodeList()
            } else {
              this.$message.error(response.message);
            }
          });
      }).catch(() => {
      });
    },
    editCode(row) {
      this.codeDetail = row;
      this.editCodeVisible = true;
    },
    closeCodeDialog() {
      this.editCodeVisible = false;
      this.getOrderDetails();
      this.getCodeList()
    },
  },
  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-top: 3px;
  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: 65px;
  font-weight: bold; /* 添加这行代码，使字体加粗 */
}

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

.p-title {
  font-size: 18px;

}
</style>