修改

zhouwx

2025-04-18 39868da3de6192d19dfd316c8be1c080b2d3ebe7

 src/views/hazardousChemicals/warehouseManage/components/printCode.vue

@@ -3,26 +3,46 @@
    <el-dialog
        v-model="dialogVisible"
        :title="title == 'pro' ? '成品二维码打印' : '危化品二维码打印'"
        width="600px"
        width="650px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <div style="display: flex;justify-content: space-between">
        <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
          <el-form-item label="条码编号：" >
            <el-input v-model="state.queryParams.code" placeholder="请输入条码编号" ></el-input>
          </el-form-item>
          <el-form-item >
            <el-button
                type="primary"
                @click="getList"
            >查询</el-button>
            <el-button
                type="primary"
                plain
                @click="reset"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="state.loading" :data="state.dataList" :border="true" :show-header="false" height="550"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"  align="center" />
        <el-table-column align="center" >
          <template #default="scope">
            <div :id="scope.row.code">
              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                <div style="font-size:14px;margin-top:10px;">{{scope.row.name}}—{{scope.row.productSn}}</div>
                <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="scope.row.code" style="margin-top:10px;"></vue-qr>
                <div style="font-size:10px;margin-top:10px;">{{scope.row.code}}</div>
              <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{scope.row.name}}—{{scope.row.productSn}}</div>
                <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true"  :text="scope.row.code"></vue-qr>
                <div style="font-size:10px;margin-top: 2px">{{scope.row.code}}</div>
                <div class="page-break"></div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-model:pager-count="pageCount"
          v-show="state.total > 0"
          :total="state.total"
          v-model:page="state.queryParams.pageNum"
@@ -32,7 +52,7 @@
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="printEvent" size="default" v-preReClick>打印</el-button>
            <el-button type="primary"  @click="handlePrint" size="default" v-preReClick>打印</el-button>
        </span>
      </template>
    </el-dialog>
@@ -42,11 +62,12 @@
import {reactive, ref, toRefs} from 'vue'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import {ElMessage} from "element-plus";
import printJS from 'print-js';
import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse";
import {verifyPhone} from "@/utils/validate";
import {checkBasicName} from "@/api/hazardousChemicals/basicInfo";
import {getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord";
import {getRawDetail} from "@/api/hazardousChemicals/rawRecord";
import {getProDetail, getProductRecord, getWhProDetail} from "@/api/hazardousChemicals/productRecord";
import {getRawDetail, getWhRawDetail} from "@/api/hazardousChemicals/rawRecord";

const dialogVisible = ref(false);
const title = ref("");
@@ -61,17 +82,20 @@
  queryParams:{
    pageNum: 1,
    pageSize: 5,
    warehouseId: null,
    basicId: null,
    // warehouseId: null,
    // basicId: null,
    entryId: null,
    code: ''
  },
  chooseList: []

})

const pageCount = ref(3)
const originalList = ref([])
const openDialog = async (type,value) => {
  state.queryParams.warehouseId =value.warehouseId
  state.queryParams.basicId =value.basicId
  // state.queryParams.warehouseId =value.warehouseId
  // state.queryParams.basicId =value.basicId
  state.queryParams.entryId = value.id
  title.value = type;
  await getList()

@@ -101,22 +125,22 @@
  state.queryParams = {
    pageNum: 1,
    pageSize: 5,
    warehouseId: null,
    basicId: null,
    entryId: null,
    code: ''
  }
  state.total = 0
  state.chooseList = []
}
const getList = async () => {
  if(title.value == 'pro'){
    const res = await getProDetail(state.queryParams)
    const res = await getWhProDetail(state.queryParams)
    if(res.code == 200){
      state.dataList = res.data.list.map(item => {
       return{
         ...item,
         name: item.productBasic.name,
         productSn: item.productBasic.productSn
       }
        return{
          ...item,
          name: item.productBasic.name,
          productSn: item.productBasic.productSn
        }
      })
      state.total = res.data.total
      originalList.value = state.dataList
@@ -124,7 +148,7 @@
      ElMessage.warning(res.message)
    }
  }else {
    const res = await getRawDetail(state.queryParams)
    const res = await getWhRawDetail(state.queryParams)
    if(res.code == 200){
      state.dataList = res.data.list.map(item => {
        return{
@@ -145,6 +169,7 @@
}

const printEvent=() => {

  let data = []
  if(state.chooseList && state.chooseList.length>0){
    data = state.chooseList
@@ -154,10 +179,11 @@
  let qrCodes=''
  for(let index in data){
    console.log(index,'index')
    qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
    qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
  }
  const printContent=document.createElement('div')
  printContent.innerHTML=qrCodes

  //创建一个新的隐藏的iframe元素
  const printFrame =document.createElement('iframe')
  printFrame.style.display='none'
@@ -172,8 +198,9 @@
    <style>
      @media print {
        .page-break { page-break-after:always;} /* 定义分页符格式*/
        .centered-content { text-align:center;} /* 居中对齐内容*/
        .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
        @page { size:50mm 40mm;margin:0mm; }
         .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
      }
    </style>
  </head>
@@ -181,13 +208,58 @@
  </html>
  `)
  printDocument.close()
  let ct = document.getElementById('codeTitle').offsetWidth
  console.log('ct',ct)
  //在打印窗口中调用打印功能
  // debugger
  // if(ct >= 180) {

  // }else {
  //
  //   printFrame.contentWindow.document.body.style.zoom = '100%'
  // }


  printFrame.contentWindow.print()
  //移除隐藏的iframe元素
  document.body.removeChild(printFrame)
  // handleClose()
}

const handlePrint = () => {
  let data = [];
  if(state.chooseList && state.chooseList.length>0){
    data = state.chooseList;
  }else {
    data = state.dataList;
  }
  let qrCodes="";
  for(const index in data){
    console.log(index,"index");
    qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`;
  }
  const printContent=document.createElement("div");
  printContent.innerHTML=qrCodes;
  document.getElementsByTagName("body")[0].style.zoom=0.92;
  // 获取打印模板的DOM元素
  if (printContent) {
    // 显示打印模板，以便能够打印
    printContent.classList.remove("print-hide");
    // 使用vue-printjs打印模板内容
    const style = "@media print {@page { size:auto;margin:0; } .page-break { page-break-after:always;} .changeFont{text-align:center;margin-top: 10px} ";
    printJS({
      printable: printContent,
      type: "html",
      style: style,
      error: (err) => {
        console.log("err", err);
      },
      font_size: "10px"
    });
    // 打印完成后隐藏打印模板
    printContent.classList.add("print-hide");
  }
};

defineExpose({
  openDialog
@@ -200,10 +272,15 @@
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  :deep(.el-dialog__body) {
    padding: 10px 20px 0 20px;
  }

  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

}
</style>