From 35a85b085df4c76c38c76dfda74aa4527cea0b5b Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期五, 28 二月 2025 15:57:06 +0800
Subject: [PATCH] gx
---
src/views/home/index.vue | 2
src/views/home/components/fangAn/editDietary.vue | 25 ++++--
src/assets/css/printcss.css | 57 ++++++++++++++
src/views/fun/printJs/index.vue | 103 +++++++++++++++++++++++++
src/views/home/components/editDietary.vue | 53 ++++---------
5 files changed, 191 insertions(+), 49 deletions(-)
diff --git a/src/assets/css/printcss.css b/src/assets/css/printcss.css
new file mode 100644
index 0000000..af02c15
--- /dev/null
+++ b/src/assets/css/printcss.css
@@ -0,0 +1,57 @@
+.gridtable {
+ font-family: verdana, arial, sans-serif;
+ font-size: 11px;
+ color: #333333;
+ border-width: 1px;
+ border-color: #666666;
+ border-collapse: collapse;
+
+}
+
+.gridtable th {
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ background-color: #a4b0e2;
+}
+
+.gridtable td {
+ border-width: 1px;
+ padding: 8px;
+ border-style: solid;
+ border-color: #666666;
+ background-color: #ffffff;
+}
+input {
+ /* 去除所有边框 */
+ border: none;
+ text-align: center;
+ font-size: 12px;
+
+ /* 设置下边框 */
+ border-bottom: 1px solid #000; /* 您可以根据需要调整颜色和宽度 */
+
+ /* 可选：设置背景透明 */
+ background-color: transparent;
+
+ /* 移除内边距和外边距 */
+ padding: 5px 0; /* 根据需要调整上下内边距，确保文本与线条之间有足够的空间 */
+ margin: 0;
+
+ /* 移除默认轮廓 */
+ outline: none;
+
+ /* 移除浏览器默认样式 */
+ appearance: none;
+ -webkit-appearance: none;
+}
+
+/* 可选：为聚焦状态添加自定义样式 */
+input:focus {
+ /* 当输入框获得焦点时，改变下边框的颜色或增加一些视觉提示 */
+ border-bottom-color: #007BFF; /* 聚焦时的下边框颜色 */
+
+ /* 可选：添加轻微的阴影效果来突出显示 */
+ box-shadow: 0 1px 0 0 #007BFF; /* 在下边框下方添加一条颜色相同的阴影 */
+}
\ No newline at end of file
diff --git a/src/views/fun/printJs/index.vue b/src/views/fun/printJs/index.vue
index d3b6188..77100b9 100644
--- a/src/views/fun/printJs/index.vue
+++ b/src/views/fun/printJs/index.vue
@@ -7,12 +7,109 @@
:closable="false"
class="mb15"
></el-alert>
- <el-button @click="onPrintJs" size="default" type="primary">
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+ <el-alert
+ title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
+ type="success"
+ :closable="false"
+ class="mb15"
+ ></el-alert>
+
+ </el-card>
+ </div>
+ <el-button @click="onPrintJs" size="default" type="primary">
<SvgIcon name="iconfont icon-dayin" />
点击打印演示
</el-button>
- </el-card>
- </div>
</template>
<script setup lang="ts" name="funPrintJs">
diff --git a/src/views/home/components/editDietary.vue b/src/views/home/components/editDietary.vue
index 1a0177d..1db33d6 100644
--- a/src/views/home/components/editDietary.vue
+++ b/src/views/home/components/editDietary.vue
@@ -1,8 +1,8 @@
<template>
<div class="dietarySurvey-item">
- <el-dialog v-model="state.dialogTableVisible" title="膳食生活调查表" :fullscreen="true" width="100%">
+ <el-dialog v-model="state.dialogTableVisible" title="膳食生活调查22表" :fullscreen="true" width="100%">
<div class="container" style="width: 100%; height: 100%;overflow: auto;">
- <div id="printMe">
+ <div ref="printRef">
<div>
<el-form size="small">
<div style="width: 100%">
@@ -906,14 +906,14 @@
<el-button type="primary" @click="onSubmit">
保存
</el-button>
- <el-button v-if="state.viewInfo.id" type="primary" v-print="'#printMe'">
+ <el-button v-if="state.viewInfo.id" type="primary" @click="onPrint">
<el-icon><Printer /></el-icon>
打印
</el-button>
- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF">
+ <!-- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF">
<el-icon><Position /></el-icon>
导出
- </el-button>
+ </el-button> -->
</div>
</template>
@@ -924,8 +924,9 @@
</template>
-<script setup lang="ts" name="visualizingLinkDemo2">
+<script setup lang="ts" >
import html2pdf from 'html2pdf.js';
+import printJs from 'print-js';
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
@@ -941,6 +942,8 @@
const { userInfos } = storeToRefs(stores);
const router = useRouter()
const emit = defineEmits([ "shuaxin" ]);
+// 定义变量内容
+const printRef = ref();
const state = reactive({
dialogTableVisible:false,
tableData: {
@@ -1140,7 +1143,13 @@
}
// 打印
const onPrint=()=>{
-
+ printJs({
+ printable: printRef.value,
+ type: 'html',
+ css: ['@/assets/css/printcss.css','//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
+ scanStyles: false,
+ style: `@media print{}}`,
+ });
}
const generatePDF=()=> {
const element = document.getElementById('printMe');
@@ -1410,36 +1419,6 @@
<style scoped lang="scss">
-@media print {
- body * {
- visibility: hidden;
- }
- #printMe, #printMe * {
- visibility: visible;
- }
- #printMe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- }
-
- /* 防止内容在页面边界处被截断 */
- p, h1, div {
- page-break-inside: avoid;
- }
-
- /* 确保表格行不会被截断（如果有表格的话） */
- table tr {
- page-break-inside: avoid;
- }
-
- /* 设置页面大小和边距 */
- @page {
- size: A4;
- margin: 0mm;
- }
-}
.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 11px;
diff --git a/src/views/home/components/fangAn/editDietary.vue b/src/views/home/components/fangAn/editDietary.vue
index a7c9e77..88538d8 100644
--- a/src/views/home/components/fangAn/editDietary.vue
+++ b/src/views/home/components/fangAn/editDietary.vue
@@ -2,7 +2,7 @@
<div class="dietarySurvey-item">
<el-dialog v-model="state.dialogTableVisible" title="营养饮食指导方案" :fullscreen="true" width="100%">
<div class="container" style="width: 100%; height: 100%;overflow: auto;" >
- <div id="fanganprintFrom1" class="print-section">
+ <div ref="printRef" id="fanganprintFrom1" class="print-section">
<div>
<el-form size="small">
<div style="width: 100%">
@@ -609,18 +609,18 @@
<el-button type="primary" @click="onSubmit">
保存
</el-button>
- <el-button v-if="state.viewInfo.id" type="primary" v-print="'#fanganprintFrom1'">
+ <el-button v-if="state.viewInfo.id" type="primary" @click="onPrint">
<el-icon>
<Printer />
</el-icon>
打印
</el-button>
- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF">
+ <!-- <el-button type="primary" v-if="state.viewInfo.id" @click="generatePDF">
<el-icon>
<Position />
</el-icon>
导出
- </el-button>
+ </el-button> -->
</div>
</template>
@@ -656,6 +656,7 @@
import html2pdf from 'html2pdf.js';
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
+import printJs from 'print-js';
import { reactive, onMounted, onUnmounted, ref,computed} from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
@@ -671,6 +672,8 @@
const { patientsInfo } = storeToRefs(storesPat);
const { userInfos } = storeToRefs(stores);
const router = useRouter()
+// 定义变量内容
+const printRef = ref();
const emit = defineEmits(["shuaxin"]);
const state = reactive({
centerDialogVisibleYZDBZ:false,
@@ -824,6 +827,16 @@
}
})
+// 打印
+const onPrint=()=>{
+ printJs({
+ printable: printRef.value,
+ type: 'html',
+ css: ['@/assets/css/printcss.css','//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
+ scanStyles: false,
+ style: `@media print{}}`,
+ });
+}
const numberPart=(str:any)=>{
if(str){
// 使用正则表达式匹配数字
@@ -933,10 +946,6 @@
}
const funhui = () => {
state.dialogTableVisible = false
-}
-// 打印
-const onPrint = () => {
-
}
const generatePDF = () => {
const element = document.getElementById('fanganprintFrom1');
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index c71a107..e2ec58e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -152,7 +152,7 @@
</el-row>
<div class="fixed-div" v-show="patientsInfo.patientName">
<el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
- <div @click="state.isTable = false">{{ patientsInfo.patientName }}</div>
+ <div>{{ patientsInfo.patientName }}</div>
</div>
</div>
</template>
--
Gitblit v1.8.0