修改

zhouwx

2 天以前 1ea0d85b0fe2e7e4427fd484a9342d964c831b3d

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

@@ -35,6 +35,7 @@
                <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>
@@ -51,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>
@@ -96,8 +97,7 @@
  // state.queryParams.basicId =value.basicId
  state.queryParams.entryId = value.id
  title.value = type;
  await getList()

  await reset()
  console.log('state.dataList',state.dataList)
  dialogVisible.value = true;
}
@@ -115,31 +115,32 @@
}

const handleClose = () => {
  reset();

  dialogVisible.value = false;
  emit("getList")
}
const reset = () => {
const reset = async () => {
  state.dataList = [];
  state.queryParams = {
    pageNum: 1,
    pageSize: 5,
    entryId: null,
    entryId: state.queryParams.entryId,
    code: ''
  }
  state.total = 0
  state.chooseList = []
  await getList()
}
const getList = async () => {
  if(title.value == 'pro'){
    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
@@ -225,6 +226,40 @@
  // 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