😎优化 table/index.vue 组件的打印样式

Web/src/components/table/index.vue

@@ -26,7 +26,7 @@
 					<template #default>
 						<div class="tool-box">
 							<el-tooltip :content="t('message.list.dragToSort')" placement="top-start">
-								<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
+								<SvgIcon style="position: absolute; right: 15px; line-height: 32px" name="fa fa-question-circle-o" :size="17" class="ml11 cursor-pointer" color="#909399" />
 							</el-tooltip>
 							<el-checkbox v-model="state.checkListAll" :indeterminate="state.checkListIndeterminate" class="ml10 mr1" :label="t('message.list.columnDisplay')" @change="onCheckAllChange" />
 							<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" :label="t('message.list.seq')" />
@@ -34,8 +34,8 @@
 						</div>
 						<el-scrollbar>
 							<div ref="toolSetRef" class="tool-sortable">
-								<div class="tool-sortable-item" v-for="v in columns" :key="v.prop" v-show="!v.hideCheck" :data-key="v.prop">
+								<div class="tool-sortable-item" v-for="v in columns" :key="v.prop" :data-key="v.prop" :data-fixed="v.hideCheck ?? false">
-									<i class="fa fa-arrows-alt handle cursor-pointer"></i>
+									<i class="fa fa-arrows-alt handle"></i>
 									<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.label" @change="onCheckChange" />
 								</div>
 							</div>
@@ -142,6 +142,7 @@ import { exportExcel } from '/@/utils/exportExcel';
 import printJs from 'print-js';
 import formatter from '/@/components/table/formatter.vue';
 import { useI18n } from 'vue-i18n';
+import { EmptyObjectType } from '/@/types/global';
 
 // 定义父组件传过来的值
 const props = defineProps({
@@ -319,42 +320,78 @@ const exportData = (data: Array<EmptyObjectType>) => {
 };
 // 打印
 const onPrintTable = () => {
-	// https://printjs.crabbly.com/#documentation
+	let printDiv = document.createElement('div');
-	// 自定义打印
+	let printTitle = document.createElement('div');
-	let tableTh = '';
+	let printTable = document.createElement('table');
-	let tableTrTd = '';
+	let printTableHeader = document.createElement('thead');
-	let tableTd: any = {};
+	let printTableBody = document.createElement('tbody');
-	// 表头
+
-	setHeader.value.forEach((v: any) => {
+	// 构建表头
-		if (v.prop === 'action') {
+	setHeader.value.forEach((col: EmptyObjectType) => {
+		if (col.prop === 'action' || !col.isCheck) {
 			return;
 		}
-		tableTh += `<th class="table-th">${v.label}</th>`;
+		let th = document.createElement('th');
+		th.innerText = col.label;
+		th.classList.add('print-table-th');
+		th.style.width = col.width ? col.width + 'px' : 'auto';
+		th.style.minWidth = col.minWidth ? col.minWidth + 'px' : 'auto';
+		printTableHeader.appendChild(th);
 	});
-	// 表格内容
+
-	state.data.forEach((val: any, key: any) => {
+	// 构建表体
-		if (!tableTd[key]) tableTd[key] = [];
+	state.data.forEach((row: EmptyObjectType) => {
-		setHeader.value.forEach((v: any) => {
+		let tr = document.createElement('tr');
-			if (v.prop === 'action') {
+		tr.classList.add('print-table-tr');
+		setHeader.value.forEach((col: EmptyObjectType) => {
+			if (col.prop === 'action' || !col.isCheck) {
 				return;
 			}
-			if (v.type === 'text') {
+
-				tableTd[key].push(`<td class="table-th table-center">${val[v.prop]}</td>`);
+			let td = document.createElement('td');
-			} else if (v.type === 'image') {
+			td.classList.add('print-table-td');
-				tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.prop]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
+			if (col.type === 'image') {
+				let img = document.createElement('img');
+				img.classList.add('print-table-img');
+
+				// img.src = row[col.prop];
+				// img.style.width = col.width + 'px';
+				// img.style.height = col.height + 'px';
+				td.appendChild(img);
+				tr.appendChild(td);
 			} else {
-				tableTd[key].push(`<td class="table-th table-center">${val[v.prop]}</td>`);
+				td.innerText = getProperty(row, col.prop);
+				td.style.textAlign = col.align ? col.align : 'left';
+				tr.appendChild(td);
 			}
 		});
-		tableTrTd += `<tr>${tableTd[key].join('')}</tr>`;
+		printTableBody.appendChild(tr);
 	});
-	// 打印
+
+	printTable.appendChild(printTableHeader);
+	printTable.appendChild(printTableBody);
+	printTable.classList.add('print-table');
+
+	// 构建打印标题
+	if (props.config.printName) {
+		printTitle.classList.add('print-table-title');
+		printTitle.innerText = props.config.printName;
+		printDiv.appendChild(printTitle);
+	} else {
+		printTitle.style.display = 'none';
+	}
+
+	printDiv.appendChild(printTable);
+
 	printJs({
-		printable: `<div style=display:flex;flex-direction:column;text-align:center><h3>${props.printName}</h3></div><table border=1 cellspacing=0><tr>${tableTh}${tableTrTd}</table>`,
+		printable: printDiv,
-		type: 'raw-html',
+		type: 'html',
-		css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
+		//header: props.config.printName,
-		style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}; .table-th{word-break: break-all;white-space: pre-wrap;}.table-center{text-align: center;}`,
+		scanStyles: false,
+		css: ['/@/theme/media/printTable.css'],
 	});
+
+	printDiv.remove();
 };
 // 刷新
 const onRefreshTable = () => {
@@ -365,9 +402,25 @@ const onRefreshTable = () => {
 const onSetTable = () => {
 	nextTick(() => {
 		const sortable = Sortable.create(toolSetRef.value, {
-			handle: '.handle',
+			//handle: '.handle',
 			dataIdAttr: 'data-key',
 			animation: 150,
+			onStart: () => {
+				// 为了区分固定列和非固定列，拖动时给非固定列加背景色
+				toolSetRef.value.children.forEach((element: HTMLElement) => {
+					if (element.dataset.fixed === 'false') {
+						element.classList.add('tool-sortable-item-draggable');
+					}
+				});
+			},
+			onMove: (evt) => {
+				// 禁止固定列拖动
+				const srcItem = evt.dragged.dataset.fixed; // 拖动项
+				const targetItem = evt.related.dataset.fixed; // 目标位置(禁止拖动到固定列位置)
+				if (srcItem === 'true' || targetItem === 'true') {
+					return false;
+				}
+			},
 			onEnd: () => {
 				const headerList: EmptyObjectType[] = [];
 				sortable.toArray().forEach((val: any) => {
@@ -375,7 +428,13 @@ const onSetTable = () => {
 						if (v.prop === val) headerList.push({ ...v });
 					});
 				});
-				emit('sortHeader', headerList);
+				//emit('sortHeader', headerList);
+				state.columns = headerList;
+
+				// 清除拖动时加的背景色
+				toolSetRef.value.children.forEach((element: HTMLElement) => {
+					element.classList.remove('tool-sortable-item-draggable');
+				});
 			},
 		});
 	});

Web/src/components/table/modifyRecord.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-popover placement="bottom" width="300" trigger="hover">
 		<template #reference>
-			<el-text type="primary" class="cursor-default">
+			<el-text type="primary" class="cursor-pointer">
 				<el-icon><ele-InfoFilled /></el-icon>{{ t('message.list.detail') }}
 			</el-text>
 		</template>

Web/src/theme/media/printTable.scss

@@ -0,0 +1,37 @@
+@media print {
+	.print-table-title {
+		text-align: center;
+		font-size: 24px;
+		font-weight: bold;
+		margin: 10px 0;
+	}
+
+	.print-table {
+		width: 100%;
+		border-collapse: collapse;
+		background-color: antiquewhite;
+		border: #000 1px solid;
+	}
+
+	.print-table-th,
+	.print-table-td {
+		border: 1px solid #000;
+		padding: 6px 8px;
+		word-break: break-all;
+		white-space: pre-wrap;
+	}
+	.print-table-th {
+		font-weight: bold;
+		text-align: center;
+	}
+	.print-table-tr {
+	}
+	.print-table-td {
+	}
+	.print-table-img {
+	}
+}
+@page {
+	size: auto;
+	margin: 7mm 10mm;
+}

Web/src/theme/tableTool.scss

@@ -3,6 +3,7 @@
 	.tool-box {
 		display: flex;
 		border-bottom: 1px solid var(--el-border-color-lighter);
+		margin-bottom: 5px;
 		box-sizing: border-box;
 		color: var(--el-text-color-primary);
 		height: 40px;
@@ -11,11 +12,13 @@
 	.tool-sortable {
 		max-height: 303px;
 		.tool-sortable-item {
+			height: var(--el-checkbox-height, 32px);
 			display: flex;
 			box-sizing: border-box;
 			color: var(--el-text-color-primary);
 			align-items: center;
 			padding: 0 12px;
+			cursor: grab;
 			&:hover {
 				background: var(--el-fill-color-lighter);
 			}
@@ -23,5 +26,14 @@
 				opacity: 0.7;
 			}
 		}
+		.tool-sortable-item-draggable[data-fixed='false'] {
+			background-color: var(--el-color-warning-light-9);
+		}
+
+		.sortable-ghost {
+			background: var(--el-fill-color-lighter);
+			border: 1px dashed var(--w-e-toolbar-disabled-color) !important;
+			opacity: 0.3; /* 减淡颜色，使其半透明 */
+		}
 	}
 }