<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title == 'pro' ? '成品二维码打印' : '危化品二维码打印'"
|
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-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"
|
v-model:limit="state.queryParams.pageSize"
|
@pagination="getList"
|
/>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="handlePrint" size="default" v-preReClick>打印</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
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, getWhProDetail} from "@/api/hazardousChemicals/productRecord";
|
import {getRawDetail, getWhRawDetail} from "@/api/hazardousChemicals/rawRecord";
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const busRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
|
const state = reactive({
|
loading: false,
|
dataList: [],
|
total: 0,
|
queryParams:{
|
pageNum: 1,
|
pageSize: 5,
|
// 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.entryId = value.id
|
title.value = type;
|
await getList()
|
|
console.log('state.dataList',state.dataList)
|
dialogVisible.value = true;
|
}
|
const getRowKey = (row) => {
|
return row.id
|
}
|
|
const onSubmit = async () => {
|
|
}
|
const handleSelectionChange = (val) => {
|
// state.form.studentIds = val.map(item => item.id)
|
state.chooseList = val
|
console.log("选中的行", val)
|
}
|
|
const handleClose = () => {
|
reset();
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const reset = () => {
|
state.dataList = [];
|
state.queryParams = {
|
pageNum: 1,
|
pageSize: 5,
|
entryId: null,
|
code: ''
|
}
|
state.total = 0
|
state.chooseList = []
|
}
|
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
|
}
|
})
|
state.total = res.data.total
|
originalList.value = state.dataList
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}else {
|
const res = await getWhRawDetail(state.queryParams)
|
if(res.code == 200){
|
state.dataList = res.data.list.map(item => {
|
return{
|
...item,
|
name: item.hazmatBasic.name,
|
productSn: item.hazmatBasic.productSn
|
}
|
})
|
state.total = res.data.total
|
originalList.value = state.dataList
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
|
|
}
|
|
const printEvent=() => {
|
|
let data = []
|
if(state.chooseList && state.chooseList.length>0){
|
data = state.chooseList
|
}else {
|
data = state.dataList
|
}
|
let qrCodes=''
|
for(let 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
|
|
//创建一个新的隐藏的iframe元素
|
const printFrame =document.createElement('iframe')
|
printFrame.style.display='none'
|
document.body.appendChild(printFrame)
|
|
const printDocument=printFrame.contentWindow.document
|
printDocument.open()
|
printDocument.write(`
|
<html>
|
<head>
|
<title>Print</title>
|
<style>
|
@media print {
|
.page-break { page-break-after:always;} /* 定义分页符格式*/
|
.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>
|
<body style='margin:0;padding:0;'>${printContent.innerHTML}</body>
|
</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
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
: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>
|
