ylj/cloudNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💥 feat(模块): 添加了个很棒的功能

Browse Source
This commit is contained in:
cclu 2025-03-17 19:04:26 +08:00
parent 1d35b458fa
commit 637f0cd1c8
3 changed files with 192 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/examine/record/components/printStyle.css
View File

@ -1,6 +1,5 @@
/* 打印样式 */ /* 打印样式 */
@media print { @media print {
/* 隐藏不需要打印的元素 */ /* 隐藏不需要打印的元素 */
.ant-pro-card-header, .ant-pro-card-header,
.ant-pro-table-search, .ant-pro-table-search,
@ -21,7 +20,7 @@
td { td {
border: 1px solid #000; border: 1px solid #000;
padding: 8px; padding: 8px;
text-align: left; text-align: center;
} }
/* 页面设置 */ /* 页面设置 */
@ -53,4 +52,21 @@
margin: 20px 0; margin: 20px 0;
white-space: pre-wrap; white-space: pre-wrap;
} }
/* 确保iframe内的打印内容可见 */
iframe {
display: block !important;
visibility: visible !important;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* 确保打印内容可见 */
.print-content, .print-content * {
visibility: visible !important;
display: block !important;
}
} }

331
src/pages/examine/record/components/recordDetail.tsx
View File

@ -38,7 +38,7 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
const columns: any = [ const columns: any = [
{ {
title: "考核分类", title: "考核分类",
dataIndex: "name" dataIndex: "parentName"
}, },
{ {
title: "考核子类", title: "考核子类",
@ -121,7 +121,7 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
} }
// 把需要打印的数组拿到一层中来 // 把需要打印的数组拿到一层中来
const handleGetTableRes = (list: any) => { const handleGetTableRes = (list: any, fieldObj?: any) => {
console.log('list', list); console.log('list', list);
let res: any = []; let res: any = [];
@ -132,13 +132,14 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
item.question.forEach((questionItem: any) => { item.question.forEach((questionItem: any) => {
res.push({ res.push({
...questionItem, ...questionItem,
parentId: item.parentId ? item.parentId : "-" parentId: item.parentId ? item.parentId : "-",
parentName: fieldObj && item.parentId ? fieldObj[item.parentId] : "-"
}); });
}); });
} }
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
// 如果有子项，递归处理子项并合并结果 // 如果有子项，递归处理子项并合并结果
const childResults = handleGetTableRes(item.children); const childResults = handleGetTableRes(item.children, fieldObj);
if (childResults && childResults.length > 0) { if (childResults && childResults.length > 0) {
res = [...res, ...childResults]; res = [...res, ...childResults];
} }
@ -161,61 +162,100 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
// 从categoryId获取分类名称 // 从categoryId获取分类名称
if (item.question && item.question.categoryId) { if (item.question && item.question.categoryId) {
// 这里需要根据实际情况获取分类名称 // 这里需要根据实际情况获取分类名称
// 可以从缓存或其他地方获取
// const categoryInfo = getCategoryInfo(item.question.categoryId);
item.name = examineObj && item.parentId ? examineObj[item.parentId] : "" item.name = examineObj && item.parentId ? examineObj[item.parentId] : ""
item.categoryName = item?.question.title || ''; item.categoryName = item?.question.title || '';
item.parentCategoryName = item?.name || ''; item.parentCategoryName = item?.name || '';
} }
}); });
// 按照考核分类和考核子类排序，确保相同的分类和子类相邻
processedData.sort((a, b) => {
// 先按考核分类排序
if (a.parentCategoryName !== b.parentCategoryName) {
return a.parentCategoryName.localeCompare(b.parentCategoryName);
}
// 再按考核子类排序
return a.categoryName.localeCompare(b.categoryName);
});
// 计算合并信息 // 计算合并信息
let currentCategory = ''; let currentCategory = '';
let currentSubCategory = ''; let currentSubCategory = '';
let categorySpan = 0; let categoryStartIndex = 0;
let subCategorySpan = 0; let subCategoryStartIndex = 0;
processedData.forEach((item: any, index: number) => { processedData.forEach((item: any, index: number) => {
// 初始化合并标记
item._categoryMerged = false;
item._subCategoryMerged = false;
// 处理考核分类合并 // 处理考核分类合并
if (item.parentCategoryName === currentCategory) { if (index === 0 || item.parentCategoryName !== currentCategory) {
categorySpan++; // 如果是新的分类，更新前一个分类的合并信息
item._categoryMerged = true; // 标记为已合并 if (index > 0) {
} else { const span = index - categoryStartIndex;
// 更新前一个分类的合并信息 if (span > 1) { // 只有当跨度大于1时才需要合并
if (categorySpan > 0 && index > 0) { processedData[categoryStartIndex]._categoryRowSpan = span;
processedData[index - categorySpan]._categoryRowSpan = categorySpan + 1; // 标记除第一行外的其他行为已合并
for (let i = categoryStartIndex + 1; i < index; i++) {
processedData[i]._categoryMerged = true;
}
}
} }
// 记录新分类的开始位置
categoryStartIndex = index;
currentCategory = item.parentCategoryName; currentCategory = item.parentCategoryName;
categorySpan = 0; // 重置子类信息，因为新的分类开始了
item._categoryRowSpan = 1; // 默认占一行 currentSubCategory = '';
subCategoryStartIndex = index;
} }
// 处理考核子类合并 // 处理考核子类合并
if (item.categoryName === currentSubCategory) { if (index === 0 || item.categoryName !== currentSubCategory || item.parentCategoryName !== currentCategory) {
subCategorySpan++; // 如果是新的子类或新的分类，更新前一个子类的合并信息
item._subCategoryMerged = true; // 标记为已合并 if (index > 0 && currentSubCategory) {
} else { const span = index - subCategoryStartIndex;
// 更新前一个子类的合并信息 if (span > 1) { // 只有当跨度大于1时才需要合并
if (subCategorySpan > 0 && index > 0) { processedData[subCategoryStartIndex]._subCategoryRowSpan = span;
processedData[index - subCategorySpan]._subCategoryRowSpan = subCategorySpan + 1; // 标记除第一行外的其他行为已合并
for (let i = subCategoryStartIndex + 1; i < index; i++) {
processedData[i]._subCategoryMerged = true;
}
}
} }
// 记录新子类的开始位置
subCategoryStartIndex = index;
currentSubCategory = item.categoryName; currentSubCategory = item.categoryName;
subCategorySpan = 0;
item._subCategoryRowSpan = 1; // 默认占一行
} }
}); });
// 处理最后一组数据的合并信息 // 处理最后一组数据的合并信息
if (categorySpan > 0 && processedData.length > 0) { const lastIndex = processedData.length - 1;
const targetIndex = processedData.length - categorySpan - 1; if (lastIndex >= 0) {
if (targetIndex >= 0 && targetIndex < processedData.length && processedData[targetIndex]) { // 处理最后一个分类的合并
processedData[targetIndex]._categoryRowSpan = categorySpan + 1; const categorySpan = lastIndex - categoryStartIndex + 1;
if (categorySpan > 1) {
processedData[categoryStartIndex]._categoryRowSpan = categorySpan;
for (let i = categoryStartIndex + 1; i <= lastIndex; i++) {
processedData[i]._categoryMerged = true;
}
} else {
// 如果只有一行，不需要合并
processedData[categoryStartIndex]._categoryRowSpan = 1;
processedData[categoryStartIndex]._categoryMerged = false;
} }
}
if (subCategorySpan > 0 && processedData.length > 0) { // 处理最后一个子类的合并
const targetIndex = processedData.length - subCategorySpan - 1; const subCategorySpan = lastIndex - subCategoryStartIndex + 1;
if (targetIndex >= 0 && targetIndex < processedData.length && processedData[targetIndex]) { if (subCategorySpan > 1) {
processedData[targetIndex]._subCategoryRowSpan = subCategorySpan + 1; processedData[subCategoryStartIndex]._subCategoryRowSpan = subCategorySpan;
for (let i = subCategoryStartIndex + 1; i <= lastIndex; i++) {
processedData[i]._subCategoryMerged = true;
}
} else {
// 如果只有一行，不需要合并
processedData[subCategoryStartIndex]._subCategoryRowSpan = 1;
processedData[subCategoryStartIndex]._subCategoryMerged = false;
} }
} }
@ -250,73 +290,58 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
// 打印表格方法 // 打印表格方法
const handlePrintTable = () => { const handlePrintTable = () => {
// 创建打印内容
const printWindow = window.open('', '_blank');
if (!printWindow) {
Modal.error({ title: '打印失败', content: '无法创建打印窗口，请检查浏览器设置。' });
return;
}
// 获取表格数据 // 获取表格数据
const tableData = proTableData || []; const tableData = proTableData || [];
// 构建HTML内容 // 创建一个iframe用于打印，这样可以避免CSS冲突
const printIframe = document.createElement('iframe');
printIframe.style.position = 'absolute';
printIframe.style.width = '0';
printIframe.style.height = '0';
printIframe.style.border = '0';
document.body.appendChild(printIframe);
// 构建打印内容
let printContent = ` let printContent = `
<html> <!DOCTYPE html>
<head> <html>
<title>考核记录打印</title> <head>
<style> <title>打印页面</title>
body { font-family: Arial, sans-serif; margin: 20px; } <style>
.print-header, .print-footer { margin: 20px 0; white-space: pre-wrap; } /* 重置样式 */
table { width: 100%; border-collapse: collapse; margin: 20px 0; } * { margin: 0; padding: 0; box-sizing: border-box; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } body { font-family: Arial, sans-serif; padding: 32px; }
th { background-color: #f2f2f2; }
.info-section { margin-bottom: 20px; } /* 表格样式 */
.info-item { margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.info-label { font-weight: bold; display: inline-block; width: 100px; } th, td { border: 1px solid #000; padding: 8px; text-align: center; }
.image-container { display: flex; flex-wrap: wrap; margin-top: 10px; } th { background-color: #f2f2f2; font-weight: bold; }
.image-item { margin-right: 10px; margin-bottom: 10px; }
@media print { /* 打印设置 */
button { display: none; } @page { margin: 1cm; }
}
</style> /* 确保所有内容可见 */
</head> .print-content { visibility: visible !important; }
<body> </style>
</head>
<body>
<div class="print-content">
`; `;
// 加一下页眉
// 添加自定义页眉
if (headerContent) {
printContent += `<div class="print-header">${headerContent}</div>`;
}
// 添加基本信息
printContent += ` printContent += `
<div class="info-section"> <div style="width:100%;text-align:center;font-size: 32px;font-weight: bold;margin-bottom: 20px">
<div class="info-item"><span class="info-label">服务区名称:</span> ${formRes?.serverPartName || ''}</div> <div>${parentRow?.serverPartName || '-'}</div>
<div class="info-item"><span class="info-label">站点名称:</span> ${formRes?.placeName || ''}</div> <div>走动式管理巡查记录</div>
<div class="info-item"><span class="info-label">巡查内容:</span> ${formRes?.uploadResult || ''}</div>
<div class="info-item"><span class="info-label">巡查人员:</span> ${formRes?.userName || ''}</div>
<div class="info-item"><span class="info-label">巡查时间:</span> ${formRes?.submittedAt || ''}</div>
</div> </div>
`; <div style="width:100%;display:flex;align-items: center;justify-content: space-between;">
<div>巡查内容：</div>
// 添加图片信息 <div>服务区区域：${parentRow?.title || '-'}</div>
if (formRes?.imgsList && formRes.imgsList.length > 0) { </div>
printContent += ` <div style="width:100%;display:flex;align-items: center;justify-content: space-between;">
<div class="info-section"> <div>巡检人员：${parentRow?.operator || '-'}</div>
<div class="info-label">附件列表:</div> <div>巡检时间：${parentRow?.createdAt ? moment(parentRow?.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'}</div>
<div class="image-container"> </div>
`; `
formRes.imgsList.forEach((item: string) => {
printContent += `<div class="image-item"><img src="${item}" style="width: 150px; height: 150px;" /></div>`;
});
printContent += `
</div>
</div>
`;
}
// 添加表格 // 添加表格
printContent += ` printContent += `
@ -325,12 +350,14 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
<tr> <tr>
<th>考核分类</th> <th>考核分类</th>
<th>考核子类</th> <th>考核子类</th>
<th>考核结果</th> <th>${detailType !== 'modal' ? '考核结果' : '考核选项'}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
`; `;
console.log('tableData', tableData);
// 添加表格数据行 // 添加表格数据行
tableData.forEach((record: any) => { tableData.forEach((record: any) => {
printContent += '<tr>'; printContent += '<tr>';
@ -339,7 +366,7 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
if (record._categoryMerged) { if (record._categoryMerged) {
// 如果已合并，不显示单元格 // 如果已合并，不显示单元格
} else { } else {
printContent += `<td ${record._categoryRowSpan && record._categoryRowSpan > 1 ? `rowspan="${record._categoryRowSpan}"` : ''}>${record.parentCategoryName || ''}</td>`; printContent += `<td ${record._categoryRowSpan && record._categoryRowSpan > 1 ? `rowspan="${record._categoryRowSpan}"` : ''}>${record.parentName || ''}</td>`;
} }
// 考核子类列 - 处理合并单元格 // 考核子类列 - 处理合并单元格
@ -361,41 +388,58 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
printContent += '</tr>'; printContent += '</tr>';
}); });
// 加一个页脚
// printContent += `
// <table>
// <tbody>
// <tr>
// <td>巡检人员</td>
// <td></td>
// <td>巡检时间</td>
// <td></td>
// </tr>
// </tbody>
// </table>
// `
printContent += ` printContent += `
</tbody> </tbody>
</table> </table>
`;
// 添加自定义页脚
if (footerContent) {
printContent += `<div class="print-footer">${footerContent}</div>`;
}
// 添加打印按钮
printContent += `
<div style="text-align: center; margin-top: 20px;">
<button onclick="window.print();" style="padding: 8px 16px;">打印</button>
<button onclick="window.close();" style="padding: 8px 16px; margin-left: 10px;">关闭</button>
</div> </div>
</body>
</html>
`; `;
printContent += ` console.log('printContent', printContent);
</body>
</html>
`;
// 写入打印窗口并打印 // 获取iframe的文档对象
printWindow.document.open(); const iframeDocument = printIframe.contentWindow?.document;
printWindow.document.write(printContent); if (iframeDocument) {
printWindow.document.close(); // 打开文档进行写入
iframeDocument.open();
// 等待图片加载完成后打印 iframeDocument.write(printContent);
setTimeout(() => { iframeDocument.close();
printWindow.focus();
// 自动打印可以取消注释下面的代码
// printWindow.print();
}, 500);
// 等待内容渲染完成后打印
setTimeout(() => {
try {
// 使用iframe的打印功能
printIframe.contentWindow?.print();
} catch (error) {
console.error('打印失败:', error);
} finally {
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(printIframe);
}, 100);
}
}, 500); // 增加等待时间确保内容完全渲染
} else {
console.error('无法获取iframe文档对象');
}
}; };
return ( return (
@ -481,16 +525,17 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
formRef={tableFormRef} formRef={tableFormRef}
search={false} search={false}
columns={columns} columns={columns}
bordered
toolbar={{ toolbar={{
actions: [ actions: [
<Button type="primary" onClick={(e) => { <Button type="primary" onClick={(e) => {
setPrintModalVisible(true) handlePrintTable()
}}> }}>
打印 打印
</Button> </Button>
] ]
}} }}
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }} scroll={{ x: "100%", y: 'calc(100vh - 300px)' }}
pagination={false} pagination={false}
options={false} options={false}
request={async () => { request={async () => {
@ -516,7 +561,7 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
let tableData = await handeGetTableData(typeData, res) let tableData = await handeGetTableData(typeData, res)
console.log('tableData', tableData); console.log('tableData', tableData);
// 拿到整个数据之后 递归取出tableData中有 question 数据的那一层数据变为一个数组 // 拿到整个数据之后 递归取出tableData中有 question 数据的那一层数据变为一个数组
let tableRes = await handleGetTableRes(tableData) let tableRes = await handleGetTableRes(tableData, obj)
console.log('tableRes', tableRes); console.log('tableRes', tableRes);
// 处理表格数据，为合并单元格做准备 // 处理表格数据，为合并单元格做准备
@ -582,37 +627,7 @@ const RecordDetail = ({ parentRow, show, detailType }: DetailProps) => {
}} }}
/> />
<Modal {/* 移除打印设置弹窗 */}
title="打印设置"
open={printModalVisible}
onOk={() => {
handlePrintTable();
setPrintModalVisible(false);
}}
onCancel={() => setPrintModalVisible(false)}
width={600}
>
<div style={{ marginBottom: 16 }}>
<div style={{ marginBottom: 8 }}>页眉内容（可选）：</div>
<Input.TextArea
ref={headerRef}
rows={4}
value={headerContent}
onChange={(e) => setHeaderContent(e.target.value)}
placeholder="请输入要在打印页面顶部显示的内容"
/>
</div>
<div>
<div style={{ marginBottom: 8 }}>页脚内容（可选）：</div>
<Input.TextArea
ref={footerRef}
rows={4}
value={footerContent}
onChange={(e) => setFooterContent(e.target.value)}
placeholder="请输入要在打印页面底部显示的内容"
/>
</div>
</Modal>
</div> </div>
) )

2
src/pages/examine/record/service.ts
View File

@ -2,7 +2,7 @@ import request from "@/utils/request"
// 拿到记录 // 拿到记录
export async function handleGetRecordList(params?: any) { export async function handleGetRecordList(params?: any) {
const data = await request.post('/questionnaire-templates/search', params) const data = await request.post('/questionnaire-templates/search/many', params)
if (data.code === 200) { if (data.code === 200) {
return data.data return data.data
} }