!1932 优化打印模板样式(设计、组件、属性区各自独立滚动, 打印预览分页展示)

Merge pull request !1932 from 夜鹰/v2

Web/src/layout/routerView/link.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-padding layout-link-container">
+	<div class="layout-link-container w100 h100">
 		<div class="layout-padding-auto layout-padding-view">
 			<div class="layout-link-warp">
 				<i class="layout-link-icon iconfont icon-xingqiu"></i>

Web/src/views/system/cache/index.vue

@@ -1,9 +1,5 @@
 <template>
-	<div class="sys-cache-container">
-		<!-- <div>
-			<NoticeBar text="系统缓存数据管理，请慎重操作！" style="margin: 4px" />
-		</div> -->
-
+	<div class="sys-cache-container h100">
 		<el-splitter class="smallbar-el-splitter">
 			<el-splitter-panel size="20%" :min="200">
 				<CardPro title="缓存列表" v-loading="state.loading" full-height body-style="overflow:auto">
@@ -41,7 +37,6 @@
 <script lang="ts" setup name="sysCache">
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, ElMessage, ElTree } from 'element-plus';
-// import NoticeBar from '/@/components/noticeBar/index.vue';
 import CardPro from '/@/components/CardPro/index.vue';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="sys-print-container">
-		<div class="printDialog">
+		<div class="print-dialog">
 			<el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close fullscreen>
 				<template #header>
 					<div style="color: #fff">
@@ -8,7 +8,7 @@
 						<span> {{ props.title }} </span>
 					</div>
 				</template>
-				<div style="margin: 0px 0px 0px 0px">
+				<div style="margin: 0px; height: 100%;">
 					<HiprintDesign :mode-index="mode" ref="hiprintDesignRef" />
 				</div>
 				<template #footer>
@@ -165,17 +165,3 @@ const templateSubmit = async () => {
 // 导出对象
 defineExpose({ openDialog });
 </script>
-
-<style lang="scss" scoped>
-.printDialog {
-	:deep(.el-dialog) {
-		.el-dialog__header {
-			display: none !important;
-		}
-		.el-dialog__body {
-			max-height: calc(100vh - 80px) !important;
-			height: calc(100vh - 80px) !important;
-		}
-	}
-}
-</style>

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

@@ -79,27 +79,25 @@
 		</el-col>
 	</el-row>
 
-	<el-row :gutter="8">
+	<el-row :gutter="8" style="height: calc(100% - 42px);">
 		<el-col :span="4">
-			<el-card style="height: 100%" shadow="never">
-				<el-row>
-					<el-col :span="24" id="hiprintEpContainer" class="rect-printElement-types hiprintEpContainer"> </el-col>
-				</el-row>
-			</el-card>
+			<CardPro shadow="never" full-height :body-style="{overflow: 'auto'}">
+                <div id="hiprintEpContainer" class="rect-printElement-types hiprintEpContainer"></div>
+			</CardPro>
 		</el-col>
-		<el-col :span="14">
-			<el-card shadow="never" class="card-design" :body-style="{ padding: '18px' }">
-				<div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
-			</el-card>
+		<el-col :span="14" style="height: 100%;">
+			<CardPro shadow="never" full-height :body-style="{overflow: 'auto'}">
+                <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
+			</CardPro>
 		</el-col>
-		<el-col :span="6" class="params_setting_container">
-			<el-tabs type="border-card" style="height: 100%">
-				<el-tab-pane label="属性" style="height: 100%">
-					<el-card shadow="never" :body-style="{ padding: '0px' }">
+		<el-col :span="6" class="params_setting_container" style="height: 100%;">
+			<el-tabs type="border-card" style="height: 100%; overflow: auto;">
+				<el-tab-pane label="属性" style="height: 100%;">
+                    <!-- <CardPro full-height shadow="never"> -->
 						<el-row class="hinnn-layout-sider">
 							<div id="PrintElementOptionSetting"></div>
 						</el-row>
-					</el-card>
+					<!-- </CardPro> -->
 				</el-tab-pane>
 				<el-tab-pane label="测试数据">
 					<el-button @click="formatPrintDataDemo()" style="margin-bottom: 10px; width: 100%">格式化字符串</el-button>
@@ -127,6 +125,7 @@ import { hiprint } from 'vue-plugin-hiprint';
 import providers from './providers';
 import PrintPreview from './preview.vue';
 import printDataDefault from './print-data';
+import CardPro from '/@/components/CardPro/index.vue';
 // import { IPaperType } from './type';
 
 interface IPaperType {
@@ -412,15 +411,30 @@ defineExpose({ hiprintTemplate, printDataDemo, setPrintDataDemo, initPaper, mode
 </script>
 
 <style lang="scss" scoped>
-:deep(.rect-printElement-types .hiprint-printElement-type > li > ul > li > a) {
-	// padding: 4px 4px;
-	//color: #1296db;
-	// line-height: 1;
-	height: auto;
-	text-overflow: ellipsis;
-	color: var(--el-color-primary);
-	box-shadow: none !important;
-	// border: 1px dashed var(--el-color-primary);
+.el-card {
+    border-radius: 0;
+}
+:deep(.rect-printElement-types .hiprint-printElement-type > li > ul) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    align-content: center;
+    gap: 7px;
+
+    li {
+        width: 100%;
+        a {
+            height: auto;
+            text-overflow: ellipsis;
+            color: var(--el-color-primary);
+            box-shadow: none !important;
+
+            margin: 0;
+            width: 100%;
+        }
+    }
 }
 
 // 默认图片
@@ -430,15 +444,6 @@ defineExpose({ hiprintTemplate, printDataDemo, setPrintDataDemo, initPaper, mode
 	}
 }
 
-// 设计容器
-.card-design {
-	overflow: hidden;
-	overflow-x: auto;
-	overflow-y: auto;
-	height: 100%;
-	padding: 2px;
-}
-
 :deep(.hiprint-option-item-submitBtn) {
 	background: var(--el-color-primary);
 }
@@ -451,4 +456,11 @@ defineExpose({ hiprintTemplate, printDataDemo, setPrintDataDemo, initPaper, mode
 	color: var(--el-color-primary);
 	border-bottom: 2px solid var(--el-color-primary);
 }
+:deep(.el-tabs--border-card > .el-tabs__content) {
+    overflow: auto;
+    padding: 10px;
+}
+:deep(.hiprint-option-items) {
+    padding: 0;
+}
 </style>

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

@@ -1,18 +1,20 @@
 <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>
-			<el-button type="primary" icon="ele-Printer" @click.stop="toPdf">导出PDF</el-button>
-			<el-button key="close" @click="hideDialog"> 关闭 </el-button>
-		</template>
-	</el-dialog>
+    <div class="preview-dialog" v-show="state.dialogVisible">
+        <el-dialog v-model="state.dialogVisible" width="80%">
+            <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>
+                <el-button type="primary" icon="ele-Printer" @click.stop="toPdf">导出PDF</el-button>
+                <el-button key="close" @click="hideDialog"> 关闭 </el-button>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -112,12 +114,28 @@ const hideDialog = () => {
 defineExpose({ showDialog });
 </script>
 
-<style lang="less" scoped>
-:deep(.ant-modal-body) {
-	padding: 0px;
-}
+<style lang="scss" scoped>
+.preview-dialog {
+    :deep(.el-dialog) {
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - 20px);
+
+        .el-dialog__body {
+            background-color: var(--next-bg-main-color);
+        }
+    }
 
-:deep(.ant-modal-content) {
-	margin-bottom: 24px;
+    :deep(.hiprint-printTemplate .hiprint-printPanel) {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 24px;
+        
+        .hiprint-printPaper {
+            margin: auto;
+            background-color: #fff;
+            box-shadow: 5px 5px 10px 0px rgb(78, 78, 78);
+        }
+    }
 }
 </style>