备品备件二维码打印

yangwl
Yangwl 3 months ago
parent b13bed8f43
commit f99cf28040

@ -135,6 +135,22 @@
>
</div>
</el-col>
<el-col :span="1.5">
<div>
<el-button
type="primary"
plain
size="mini"
:disabled="single"
@click="showPrint"
v-hasPermi="['device:sparePartsLedger:print']"
>
<svg-icon icon-class="print" />
打印
</el-button>
</div>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
@ -341,6 +357,20 @@
@pagination="getList"
/>
<el-dialog :title="printTitle" :visible.sync="printOpen" width="500px" append-to-body>
<div class="center-content" id="printFrom">
<canvas ref="qrCanvas"></canvas>
<ul class="no-bullets">
<li class="material-info">{{printData.materialCode}}</li>
<li class="material-info">{{printData.materialDesc}}</li>
</ul>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)"> </el-button>
</div>
</el-dialog>
<!-- 添加或修改备品备件台账管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
@ -729,6 +759,7 @@ import {
updateSparePartsLedger,
} from "@/api/device/sparePartsLedger";
import { getToken } from "@/utils/auth";
import QRCode from 'qrcode';
export default {
name: "SparePartsLedger",
@ -753,7 +784,7 @@ export default {
url:
process.env.VUE_APP_BASE_API + "/device/sparePartsLedger/importFile",
},
selectedRow: null,
//
loading: true,
//
@ -770,8 +801,25 @@ export default {
sparePartsLedgerList: [],
//
title: "",
//
printTitle:"",
//
open: false,
//
printOpen: false,
//
printData: {
printable: 'printFrom',
ignore: ['no-print'],
workCenter: "暂无数据",
SAPNo: null,
manufacture: null,
auditor: null,
printDate: null,
factory: null,
productDate: null,
workTable: [],
},
//
queryParams: {
pageNum: 1,
@ -853,6 +901,7 @@ export default {
},
};
},
created() {
this.getList();
},
@ -1012,6 +1061,43 @@ export default {
);
},
showPrint(row) {
const storageId = row.storageId || this.ids;
getSparePartsLedger(storageId).then((response) => {
this.reset();
this.printData = response.data;
this.printOpen = true;
// 使 Vue nextTick DOM
this.$nextTick(() => {
const canvas = this.$refs.qrCanvas;
const options = {
width: 200, //
height: 200 //
};
QRCode.toCanvas(canvas,response.data.materialCode, options, error => {
if (error) console.error(error);
});
});
});
},
//
handlePrint(params) {
console.log(params)
printJS({
printable: params.printable || 'printFrom', // id
type: params.type || 'html',
maxWidth: 1500, //
font_size: "",//
header: params.header, // '',
targetStyles: ['*'],
style: '@page {margin:0 10mm};', // -
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null
})
},
// -
handleImport() {
this.upload.title = "设备信息导入";
@ -1055,3 +1141,29 @@ export default {
},
};
</script>
<style scoped>
.center-content {
display: flex;
flex-direction: column;
align-items: center;
}
.material-info {
font-size: 25px;
font-weight: bold;
line-height: 1.2;
padding: 2px 0;
}
.no-bullets {
list-style: none;
padding: 0;
text-align: center; /* 使 ul 中的所有 li 居中 */
}
@media print {
#printFrom{
font-family: "SimSun", "宋体" !important;
color: #000 !important;
font-size: 14pt !important; /* 调整字体大小 */
}
}
</style>

Loading…
Cancel
Save