😎优化模板打印流程

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

@@ -1,15 +1,15 @@
 <template>
 	<div class="sys-print-container">
 		<div class="printDialog">
-			<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" fullscreen>
+			<el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close fullscreen>
 				<template #header>
 					<div style="color: #fff">
 						<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
 						<span> {{ props.title }} </span>
 					</div>
 				</template>
-				<div style="margin: -16px 0px 0px 0px">
-					<HiprintDesign ref="hiprintDesignRef" />
+				<div style="margin: 0px 0px 0px 0px">
+					<HiprintDesign :mode-index="mode" ref="hiprintDesignRef" />
 				</div>
 				<template #footer>
 					<span class="dialog-footer" style="margin-top: 10px">
@@ -20,7 +20,7 @@
 			</el-dialog>
 		</div>
 
-		<el-dialog v-model="state.showDialog2" draggable :close-on-click-modal="false" width="600px">
+		<el-dialog v-model="state.showDialog2" draggable overflow destroy-on-close width="600px">
 			<template #header>
 				<div style="color: #fff">
 					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@@ -28,7 +28,7 @@
 				</div>
 			</template>
 			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
-				<el-row :gutter="35">
+				<el-row :gutter="10">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="模板名称" prop="name" :rules="[{ required: true, message: '模板名称不能为空', trigger: 'blur' }]">
 							<el-input v-model="state.ruleForm.name" placeholder="模板名称" clearable />
@@ -93,6 +93,8 @@ import { UpdatePrintInput } from '/@/api-services/models';
 
 const hiprintDesignRef = ref<InstanceType<typeof HiprintDesign>>();
 
+const mode = ref(0);
+
 const props = defineProps({
 	title: String,
 });
@@ -104,11 +106,16 @@ const state = reactive({
 	showDialog2: false,
 });
 
+// 页面初始化
 onMounted(async () => {});
 
 // 打开弹窗
 const openDialog = (row: any) => {
 	state.ruleForm = JSON.parse(JSON.stringify(row));
+	if (JSON.stringify(state.ruleForm) !== '{}') {
+		let templateJson = JSON.parse(state.ruleForm.template);
+		mode.value = templateJson.panels[0].index;
+	}
 	state.isShowDialog = true;
 	ruleFormRef.value?.resetFields();
 
@@ -146,7 +153,9 @@ const templateCancel = () => {
 
 // 模板设置提交
 const templateSubmit = async () => {
-	state.ruleForm.template = JSON.stringify(hiprintDesignRef.value?.hiprintTemplate.getJson());
+	let templateJson=hiprintDesignRef.value?.hiprintTemplate.getJson();
+	templateJson.panels[0].index=hiprintDesignRef.value?.mode;
+	state.ruleForm.template = JSON.stringify(templateJson);
 	if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 		await getAPI(SysPrintApi).apiSysPrintUpdatePost(state.ruleForm);
 	} else {
@@ -169,6 +178,7 @@ defineExpose({ openDialog });
 		}
 		.el-dialog__body {
 			max-height: calc(100vh - 80px) !important;
+			height: calc(100vh - 80px) !important;
 		}
 	}
 }

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

@@ -2,7 +2,7 @@
 	<el-row :gutter="8" style="margin-bottom: 5px">
 		<el-col :span="4">
 			<!-- 流程下拉 模板选择 -->
-			<el-select v-model="state.mode" showSearch @change="changeMode" :defaultValue="0" option-label-prop="label" class="w100">
+			<el-select v-model="mode" showSearch @change="changeMode" :defaultValue="0" option-label-prop="label" class="w100">
 				<el-option v-for="(opt, idx) in state.modeList" :key="idx" :label="opt.name" :value="idx">
 					{{ opt.name }}
 				</el-option>
@@ -109,12 +109,18 @@ import providers from './providers';
 import PrintPreview from './preview.vue';
 import printData from './print-data';
 
+var props = defineProps({
+	modeIndex: {
+		type: Number,
+		default: 0,
+	},
+});
+
 let hiprintTemplate = ref();
+let mode = ref(0); // 模板选择
 
 const preViewRef = ref();
 const state = reactive({
-	// 模板选择
-	mode: 0,
 	modeList: [] as any,
 	// 当前纸张
 	curPaper: {
@@ -178,7 +184,7 @@ const curPaperType = computed(() => {
 
 // 选择模板
 const changeMode = () => {
-	let provider = providers[state.mode];
+	let provider = providers[mode.value];
 	hiprint.init({
 		providers: [provider.f],
 	});
@@ -318,6 +324,7 @@ onMounted(() => {
 	state.modeList = providers.map((e) => {
 		return { type: e.type, name: e.name, value: e.value };
 	});
+	mode.value = props.modeIndex;
 	changeMode();
 	// otherPaper(); // 默认纸张
 });
@@ -333,7 +340,7 @@ const initPaper = () => {
 };
 
 // 导出对象
-defineExpose({ hiprintTemplate, initPaper });
+defineExpose({ hiprintTemplate, initPaper, mode });
 </script>
 
 <style lang="scss" scoped>

Web/src/views/system/print/component/hiprint/preview.vue

@@ -1,5 +1,11 @@
 <template>
 	<el-dialog v-model="state.dialogVisible" draggable :close-on-click-modal="false" :width="Number(state.width) + Number(8) + 'mm'">
+		<template #header>
+			<div style="color: #fff">
+				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Printer /> </el-icon>
+				<span>{{ props.title }}</span>
+			</div>
+		</template>
 		<div id="preview_content" ref="previewContentRef"></div>
 		<template #footer>
 			<el-button :loading="state.waitShowPrinter" type="primary" icon="ele-Printer" @click.stop="print">直接打印</el-button>
@@ -12,6 +18,13 @@
 <script lang="ts" setup>
 import { nextTick, reactive, ref } from 'vue';
 
+var props = defineProps({
+	title: {
+		type: String,
+		default: '',
+	},
+});
+
 const state = reactive({
 	dialogVisible: false,
 	waitShowPrinter: false,