maxcess-synergy-admin/src/views/materialReceiptNotice/barCode.vue

<template>
	<el-dialog :model-value="state.show" @close="closeFun" width="600">
		<div id="printTemplate" class="print-hide" ref="typefaceBoxRef">
			<div class="typefaceBox">
				<VueQr text="props.data.tiaoMa" :size="200"></VueQr>
				<div class="titleList">
					<div class="itemText">供应商：{{ state.data.supplierName }}</div>
				</div>
			</div>
		</div>
		<div class="btnList">
			<el-button type="primary" @click="handlePrint">打印</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, defineExpose } from 'vue';
import VueQr from 'vue-qr/src/packages/vue-qr.vue';
import printJS from 'print-js';
import html2canvas from 'html2canvas';
const LODOP = window.LODOP;
const typefaceBoxRef = ref();

const state = reactive({
	show: false,
  data: {},
	snapshotUrl: '',
  printWidth: 100,
  printHeight: 100,
});

const openDataFun = (obj:object) => {
  state.data = obj
  state.show = true
}

const handlePrintInitialization = () => {
  LODOP.PRINT_INITA(0,0,0,0,"L4");
  LODOP.SET_PRINT_PAGESIZE(0,state.printWidth * 10,state.printHeight * 10,"A4");
  // LODOP.PREVIEW();
  LODOP.PRINT();
}

//打印配置
const handlePrintZhuhai = async () => {
  LODOP.ADD_PRINT_BARCODE(125,25,150,150,"QRCode","1234567890版本7的最大值是122个字符123123");
};

const handlePrintTaiguo = () => {
  
}

const closeFun = () => {
	state.show = false
};

defineExpose({
  openDataFun
})
</script>
<style scoped lang="scss">
.typefaceBox {
	display: flex;
	align-items: center;
	justify-content: center;

	.titleList {
		flex: 1;
	}
}

.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}
</style>