0514-2

Web/src/views/labelPrinting/materialPrinting/component/editAccess.vue

@@ -4,9 +4,9 @@
             <el-form :inline="true" :model="printInfoFrom" class="demo-form-inline" label-width="90px">
                 <el-row>
                     <el-col :span="8">
-                        <el-form-item label="打印模板" prop="unit" :rules="[{ required: true, message: '打印模板不能为空', trigger: 'blur' }]">
-                                <el-select v-model="printInfoFrom.printData" placeholder="打印模板" filterable default-first-option style="width: 100%">
-                                     <el-option v-for="item in state.printData" :key="item.id" :label="item.name" :value="item" />
+                        <el-form-item label="打印模板" prop="printDataTem" :rules="[{ required: true, message: '打印不能为空', trigger: 'blur' }]">
+                                <el-select v-model="printInfoFrom.printDataTem" placeholder="打印模板" filterable default-first-option style="width: 100%">
+                                     <el-option v-for="item in state.printDatas" :key="item.id" :label="item.name" :value="item.template" />
                                 </el-select>
                         </el-form-item>
                     </el-col>
@@ -42,12 +42,12 @@
 
                     <el-col :span="8">
                         <el-form-item label="生产日期">
-                            <el-date-picker v-model="printInfoFrom.productDate"  clearable />
+                            <el-date-picker v-model="printInfoFrom.productDate" type="date" clearable />
                         </el-form-item>
                     </el-col>
                     <el-col :span="8">
                         <el-form-item label="失效日期" >
-                            <el-date-picker v-model="printInfoFrom.loseDate"  clearable />
+                            <el-date-picker v-model="printInfoFrom.loseDate" type="date" clearable />
                         </el-form-item>
                     </el-col>
                     <el-col :span="8">
@@ -56,13 +56,17 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-
             </el-form>
+
+            <el-divider />
             <el-row style="display: flex; justify-content: space-around;">
                 <el-button style="width: 100px;" @click="state.isShowDialog = false">取消</el-button>
                 <el-button style="width: 100px;" type="primary" @click="printSubmit">打印</el-button>
             </el-row>
         </el-dialog>
+
+        <!-- 预览 -->
+	<PrintPreview ref="preViewRef" />
     </div>
 </template>
 
@@ -76,9 +80,9 @@ import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 
 import { hiprint } from 'vue-plugin-hiprint';
-import providers from './providers';
-import PrintPreview from './preview.vue';
-import printData from './print-data';
+import providers from '../../print/component/hiprint/providers';
+import PrintPreview from '../../print/component/hiprint/preview.vue';
+import printData from '../../print/component/hiprint/print-data';
 
 
 const props = defineProps({
@@ -93,13 +97,13 @@ const preViewRef = ref();
 //定义printInfoFrom字段
 const printInfoFrom = reactive({
     name: '',
-    printData: {} as SysPrint,
+    printDataTem: '',
     printCount: 100,
     unit: '',
     packageUnit: 1,
     package: '',
-    productDate: {} as Date,
-    loseDate: {} as Date,
+    productDate: undefined,
+    loseDate: undefined,
     batch:1,
 })
 
@@ -107,7 +111,7 @@ const state = reactive({
 	loading: false,
     isShowDialog:false,
     matterFrom: {} as MaterialsOutput,
-	printData: [] as Array<SysPrint>,
+	printDatas: [] as Array<SysPrint>,
     unitData: [] as Array<SysUnitOutput>,
 	queryParams: {
 		name: undefined,
@@ -117,6 +121,9 @@ const state = reactive({
 		pageSize: 10,
 		total: 0 as any,
 	},
+    scaleValue: 1,
+	scaleMax: 5,
+	scaleMin: 0.5,
     waitShowPrinter: false,
     width: 0, // 纸张宽 mm
 	editPrintTitle: '',
@@ -128,7 +135,7 @@ const handleQuery = async () => {
 	state.loading = true;
 	let params = Object.assign(state.queryParams, state.tableParams);
 	var res = await getAPI(SysPrintApi).apiSysPrintPagePost(params);
-	state.printData = res.data.result?.items ?? [];
+	state.printDatas = res.data.result?.items ?? [];
 	state.tableParams.total = res.data.result?.total;
 	state.loading = false;
     //console.log(state.printData)
@@ -146,7 +153,28 @@ const queryUnitByGroupId = async (groupId:number) => {
 
 //定义matterSubmit方法
 const printSubmit = () => {
-    console.log(printInfoFrom)
+    //changeMode();
+    console.log(printInfoFrom.printDataTem)
+    hiprintTemplate.value.clear();
+    hiprintTemplate.value?.update(JSON.parse(printInfoFrom.printDataTem));
+    console.log(hiprintTemplate.value)
+    console.log(hiprintTemplate.value.printPanels[0].width)
+    let { width } = hiprintTemplate.value.printPanels[0].width;
+    //let width=80;
+    preViewRef.value.showDialog(hiprintTemplate.value, printData, width);
+
+
+
+    // state.waitShowPrinter = true;
+	// hiprintTemplate.value.print(
+	// 	printData,
+	// 	{},
+	// 	{
+	// 		callback: () => {
+	// 			state.waitShowPrinter = false;
+	// 		},
+	// 	}
+	// );
 }
 
 const formInline = reactive({
@@ -166,6 +194,7 @@ const openDialog = async (row: any) => {
         printLabel(row);
 	}
 	state.isShowDialog = true;
+    changeMode();
 };
 
 
@@ -183,8 +212,43 @@ const printLabel = (data:any) => {
 
 onMounted(() => {
     handleQuery();
+    
 })
 
+
+// 选择模板
+const changeMode = () => {
+	console.log('changeMode')
+	let provider = providers[0];
+	hiprint.init({
+		providers: [provider.f],
+	});
+
+	// 渲染自定义选项
+	const hiprintEpContainerEl = document.getElementById('hiprintEpContainer');
+	if (hiprintEpContainerEl) {
+		hiprintEpContainerEl.innerHTML = '';
+	}
+	hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
+
+	// 渲染绘画模板
+	const hiprintPrintTemplate = document.getElementById('hiprint-printTemplate');
+	if (hiprintPrintTemplate) {
+		hiprintPrintTemplate.innerHTML = '';
+	}
+	// 初始化打印模板设计器
+	let template = {};
+	hiprintTemplate.value = new hiprint.PrintTemplate({
+		template: template,
+		settingContainer: '#PrintElementOptionSetting',
+		paginationContainer: '.hiprint-printPagination',
+	});
+	hiprintTemplate.value.design('#hiprint-printTemplate');
+	// 获取当前放大比例, 当zoom时传true才会有
+	state.scaleValue = hiprintTemplate.value.editingPanel.scale || 1;
+    console.log('changeModeEnd')
+};
+
 // 导出对象
 defineExpose({ openDialog });
 </script>

Web/src/views/labelPrinting/materialPrinting/index.vue

@@ -129,7 +129,7 @@ const queryUnitByGroupId = async (groupId:number) => {
 	var res = await getAPI(SysUnitApi).apiSysUnitListUnitGroupIdGet(groupId);
 	const units = res.data.result ?? [];
 	unitListData.value=units
-    console.log(units)
+    //console.log(units)
 };
 
 

Web/src/views/labelPrinting/print/component/editPrint.vue

@@ -66,7 +66,7 @@
 
 <script lang="ts" setup name="sysEditPrint">
 import { onMounted, reactive, ref, nextTick } from 'vue';
-import HiprintDesign from '/@/views/system/print/component/hiprint/index.vue';
+import HiprintDesign from '/@/views/labelPrinting/print/component/hiprint/index.vue';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysPrintApi } from '/@/api-services/api';

Web/src/views/labelPrinting/print/component/hiprint/index.vue

@@ -177,6 +177,7 @@ const curPaperType = computed(() => {
 
 // 选择模板
 const changeMode = () => {
+	console.log('changeMode')
 	let provider = providers[state.mode];
 	hiprint.init({
 		providers: [provider.f],

Web/src/views/labelPrinting/print/index.vue

@@ -109,7 +109,7 @@
 <script lang="ts" setup name="sysPrint">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import EditPrint from '/@/views/system/print/component/editPrint.vue';
+import EditPrint from '/@/views/labelPrinting/print/component/editPrint.vue';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysPrintApi } from '/@/api-services/api';