|
|
@@ -16,10 +16,10 @@
|
|
|
<el-button icon="Search" type="primary" @click="queryInfo"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
- <el-button icon="Printer" type="success" @click="print(false)"
|
|
|
+ <el-button icon="Printer" type="success" @click="handlePrint(false)"
|
|
|
>打印预览</el-button
|
|
|
>
|
|
|
- <el-button icon="Printer" type="success" @click="print(true)"
|
|
|
+ <el-button icon="Printer" type="success" @click="handlePrint(true)"
|
|
|
>打印</el-button
|
|
|
>
|
|
|
</el-col>
|
|
|
@@ -57,85 +57,85 @@
|
|
|
</div>
|
|
|
<el-main>
|
|
|
<el-scrollbar height="100%">
|
|
|
- <div id="cqYz">
|
|
|
- <table id="pageTable">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <td
|
|
|
- colspan="7"
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- padding: 16px 0;
|
|
|
- border: none;
|
|
|
- font-size: 23px;
|
|
|
- font-weight: bold;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ env.VITE_HOSPITAL_NAME }}<br />临时医嘱单
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td colspan="7" style="border: none">
|
|
|
- <div>
|
|
|
- <div style="width: 15%;float: left;">姓名：{{ patientInfo.name }}</div>
|
|
|
- <div style="width: 15%;float: left;">
|
|
|
- 性别：{{ patientInfo.sexName }}
|
|
|
- </div>
|
|
|
- <div style="width: 15%;float: left;">
|
|
|
- 年龄：{{ companyFunc(patientInfo.age, "岁") }}
|
|
|
- </div>
|
|
|
- <div style="width: 15%;float: left;">
|
|
|
- 科别：{{ patientInfo.admissWardName }}
|
|
|
- </div>
|
|
|
- <div style="width: 18%;float: left;">
|
|
|
- 床号：{{ patientInfo.bedNo }}
|
|
|
- </div>
|
|
|
- <div>住院号：{{ patientInfo.inpatientNo }}</div>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <th style="width: 40px; height: 40px">日期</th>
|
|
|
- <th style="width: 38px">时间</th>
|
|
|
- <th>临时医嘱</th>
|
|
|
- <th style="width: 58px">医师签名</th>
|
|
|
- <th style="width: 85px">核对护士签名</th>
|
|
|
- <th style="width: 80px">执行时间</th>
|
|
|
- <th style="width: 85px">执行护士签名</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(item, index) in yzPrintVOList">
|
|
|
- <td
|
|
|
- v-if="item.pageFlag == '1'"
|
|
|
- style="border: none"
|
|
|
- colspan="7"
|
|
|
- >
|
|
|
- 第{{ item.printPageOnce }}页
|
|
|
- </td>
|
|
|
- <td v-if="item.pageFlag != '1'" style="height: 40px">
|
|
|
- {{ item.date }}
|
|
|
- </td>
|
|
|
- <td v-if="item.pageFlag != '1'">{{ item.time }}</td>
|
|
|
- <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
- {{ item.orderGroupNo }} {{ item.newOrderName }}
|
|
|
- {{ item.newOrderNameCode }} {{ item.frequCode }}
|
|
|
- </td>
|
|
|
- <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
- <img v-if="item.doctorCode" style="width: 60px;" :src="getSign(item.doctorCode)"/>
|
|
|
- </td>
|
|
|
- <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
- <img v-if="item.nurseCode" style="width: 60px;" :src="getSign(item.nurseCode)"/>
|
|
|
- </td>
|
|
|
- <td v-if="item.pageFlag != '1'">{{ item.execTimeStr }}</td>
|
|
|
- <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
- <img v-if="item.execId" style="width: 60px;" :src="getSign(item.execId)"/>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
+ <div id="cqYz">
|
|
|
+ <table id="pageTable">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <td
|
|
|
+ colspan="7"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0;
|
|
|
+ border: none;
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: bold;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ env.VITE_HOSPITAL_NAME }}<br />临时医嘱单
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="7" style="border: none">
|
|
|
+ <div>
|
|
|
+ <div style="width: 15%;float: left;">姓名：{{ patientInfo.name }}</div>
|
|
|
+ <div style="width: 15%;float: left;">
|
|
|
+ 性别：{{ patientInfo.sexName }}
|
|
|
+ </div>
|
|
|
+ <div style="width: 15%;float: left;">
|
|
|
+ 年龄：{{ companyFunc(patientInfo.age, "岁") }}
|
|
|
+ </div>
|
|
|
+ <div style="width: 15%;float: left;">
|
|
|
+ 科别：{{ patientInfo.admissWardName }}
|
|
|
+ </div>
|
|
|
+ <div style="width: 18%;float: left;">
|
|
|
+ 床号：{{ patientInfo.bedNo }}
|
|
|
+ </div>
|
|
|
+ <div>住院号：{{ patientInfo.inpatientNo }}</div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th style="width: 40px; height: 40px">日期</th>
|
|
|
+ <th style="width: 38px">时间</th>
|
|
|
+ <th>临时医嘱</th>
|
|
|
+ <th style="width: 85px">医师签名</th>
|
|
|
+ <th style="width: 85px">核对护士签名</th>
|
|
|
+ <th style="width: 80px">执行时间</th>
|
|
|
+ <th style="width: 85px">执行护士签名</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in yzPrintVOList" :key="index">
|
|
|
+ <td
|
|
|
+ v-if="item.pageFlag == '1'"
|
|
|
+ style="border: none"
|
|
|
+ colspan="7"
|
|
|
+ >
|
|
|
+ 第{{ item.printPageOnce }}页
|
|
|
+ </td>
|
|
|
+ <td v-if="item.pageFlag != '1'" style="height: 40px">
|
|
|
+ {{ item.date }}
|
|
|
+ </td>
|
|
|
+ <td v-if="item.pageFlag != '1'">{{ item.time }}</td>
|
|
|
+ <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
+ {{ item.orderGroupNo }} {{ item.newOrderName }}
|
|
|
+ {{ item.newOrderNameCode }} {{ item.frequCode }}
|
|
|
+ </td>
|
|
|
+ <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
+ <img v-if="item.doctorCode" style="width: 60px;" :src="getSign(item.doctorCode)"/>
|
|
|
+ </td>
|
|
|
+ <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
+ <img v-if="item.nurseCode" style="width: 60px;" :src="getSign(item.nurseCode)"/>
|
|
|
+ </td>
|
|
|
+ <td v-if="item.pageFlag != '1'">{{ item.execTimeStr }}</td>
|
|
|
+ <td v-if="item.pageFlag != '1'" style="text-align: left">
|
|
|
+ <img v-if="item.execId" style="width: 60px;" :src="getSign(item.execId)"/>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</el-scrollbar>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
@@ -337,6 +337,181 @@ const print = (type) => {
|
|
|
|
|
|
};
|
|
|
|
|
|
+const handlePrint = async (type) => {
|
|
|
+ await nextTick();
|
|
|
+ const printContent = document.getElementById('cqYz');
|
|
|
+ if (!printContent) {
|
|
|
+ console.error('未找到打印容器');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 克隆原始内容
|
|
|
+ const clonedContent = printContent.cloneNode(true);
|
|
|
+
|
|
|
+ // 精确控制边框显示
|
|
|
+ adjustBorders(clonedContent);
|
|
|
+
|
|
|
+ // 等待图片加载
|
|
|
+ await waitForImages(clonedContent);
|
|
|
+
|
|
|
+ const printWindow = window.open('', '_blank');
|
|
|
+ if (!printWindow) {
|
|
|
+ alert('请允许弹出窗口以完成打印');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 复制原页面样式
|
|
|
+ const stylesheets = Array.from(document.styleSheets)
|
|
|
+ .map(style => {
|
|
|
+ try {
|
|
|
+ if (style.href) return `<link rel="stylesheet" href="${style.href}">`;
|
|
|
+ const rules = Array.from(style.cssRules).map(rule => rule.cssText).join('\n');
|
|
|
+ return `<style>${rules}</style>`;
|
|
|
+ } catch (e) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .join('\n');
|
|
|
+
|
|
|
+ // 打印专用样式
|
|
|
+ const printSpecificCss = `
|
|
|
+ @page {
|
|
|
+ size: auto;
|
|
|
+ margin: 10mm;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 根元素背景色设置 */
|
|
|
+ html, body {
|
|
|
+ background-color: #fff !important;
|
|
|
+ -webkit-print-color-adjust: exact !important;
|
|
|
+ print-color-adjust: exact !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media print {
|
|
|
+ .print-btn {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #pageTable {
|
|
|
+ border-collapse: collapse !important;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 强制打印所有背景色 */
|
|
|
+ * {
|
|
|
+ -webkit-print-color-adjust: exact !important;
|
|
|
+ print-color-adjust: exact !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保表格背景为白色 */
|
|
|
+ #pageTable {
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 构建打印页面
|
|
|
+ printWindow.document.write(`
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ ${stylesheets}
|
|
|
+ <style>${printSpecificCss}</style>
|
|
|
+ </head>
|
|
|
+ <body style="margin: 0; padding: 0;">
|
|
|
+ ${clonedContent.outerHTML}
|
|
|
+ </body>
|
|
|
+ </html>
|
|
|
+ `);
|
|
|
+ printWindow.document.close();
|
|
|
+
|
|
|
+ // 执行打印
|
|
|
+ if(type) {
|
|
|
+ printWindow.onload = () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ printWindow.print();
|
|
|
+ printWindow.onafterprint = () => printWindow.close();
|
|
|
+ }, 300);
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+// 精确调整边框显示
|
|
|
+const adjustBorders = (element) => {
|
|
|
+ // 1. 表头处理
|
|
|
+ const thead = element.querySelector('thead');
|
|
|
+ if (thead) {
|
|
|
+ // 获取表头所有行
|
|
|
+ const theadRows = thead.querySelectorAll('tr');
|
|
|
+
|
|
|
+ // 第一个tr（标题行）：强制无边框
|
|
|
+ if (theadRows[0]) {
|
|
|
+ const firstRowCells = theadRows[0].querySelectorAll('td');
|
|
|
+ firstRowCells.forEach(cell => {
|
|
|
+ cell.style.border = 'none !important';
|
|
|
+ // 确保没有继承其他边框样式
|
|
|
+ cell.style.borderTop = 'none !important';
|
|
|
+ cell.style.borderBottom = 'none !important';
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 第二个tr（患者信息行）：保持无边框
|
|
|
+ if (theadRows[1]) {
|
|
|
+ const infoRowCells = theadRows[1].querySelectorAll('td');
|
|
|
+ infoRowCells.forEach(cell => {
|
|
|
+ cell.style.border = 'none !important';
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 第三个tr（列标题行）：添加边框
|
|
|
+ if (theadRows[2]) {
|
|
|
+ const columnHeaders = theadRows[2].querySelectorAll('th');
|
|
|
+ columnHeaders.forEach(header => {
|
|
|
+ header.style.border = '1px solid #000 !important';
|
|
|
+ // 保留原有高度设置
|
|
|
+ header.style.height = header.style.height || '40px';
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 表体处理
|
|
|
+ const tbody = element.querySelector('tbody');
|
|
|
+ if (tbody) {
|
|
|
+ const tbodyCells = tbody.querySelectorAll('td');
|
|
|
+ tbodyCells.forEach(cell => {
|
|
|
+ // 页码行：无边框
|
|
|
+ if (cell.hasAttribute('colspan') && cell.colSpan >= 7) {
|
|
|
+ cell.style.border = 'none !important';
|
|
|
+ }
|
|
|
+ // 数据行：有边框
|
|
|
+ else {
|
|
|
+ cell.style.border = '1px solid #000 !important';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 等待图片加载
|
|
|
+const waitForImages = (element) => {
|
|
|
+ const images = element.querySelectorAll('img');
|
|
|
+ if (images.length === 0) return Promise.resolve();
|
|
|
+
|
|
|
+ const promises = Array.from(images).map(img => {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ if (img.complete) resolve();
|
|
|
+ img.onload = resolve;
|
|
|
+ img.onerror = resolve;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return Promise.all(promises);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -372,4 +547,16 @@ ul {
|
|
|
#pageTable tr td {
|
|
|
height: 27px;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.print-btn {
|
|
|
+ margin: 20px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background-color: #42b983;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
yeguodong