feat(style): 新增款式详情导出Excel功能
- 实现导出款式详情为Excel格式的功能，支持HTML内容兼容Excel显示 - 等待打印区域图片加载完成后再导出，避免导出图片显示异常 - 添加导出成功和失败的提示信息反馈 - 在页面按钮区域新增导出Excel按钮，支持用户一键导出 - 更新中文国际化文案，增加导出Excel相关文本 - 调整部分界面按钮布局顺序，提高用户操作便捷性
This commit is contained in:
user
parent
8b4a14015f
commit
cb01605bb8
@ -5,6 +5,7 @@ import { useAlertService } from '@/shared/alert/alert.service';
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import QrcodeVue from 'qrcode.vue';
|
import QrcodeVue from 'qrcode.vue';
|
||||||
import printJS from 'print-js';
|
import printJS from 'print-js';
|
||||||
|
// @ts-ignore
|
||||||
import html2pdf from 'html2pdf.js';
|
import html2pdf from 'html2pdf.js';
|
||||||
import buildPaginationQuery from '@/shared/sort/sorts';
|
import buildPaginationQuery from '@/shared/sort/sorts';
|
||||||
|
|
||||||
@ -208,7 +209,7 @@ export default defineComponent({
|
|||||||
printable: 'stylePrintContent',
|
printable: 'stylePrintContent',
|
||||||
type: 'html',
|
type: 'html',
|
||||||
css: ['/content/css/bootstrap.min.css', '/content/css/print-form.css'],
|
css: ['/content/css/bootstrap.min.css', '/content/css/print-form.css'],
|
||||||
documentTitle: `${$t('jewpmsApp.style.detail.title')} - ${style.value.number}`,
|
documentTitle: `款式详情 - ${style.value.number}`,
|
||||||
style: '@page { size: A4; margin: 15mm; }',
|
style: '@page { size: A4; margin: 15mm; }',
|
||||||
targetStyles: ['*'],
|
targetStyles: ['*'],
|
||||||
scanStyles: true,
|
scanStyles: true,
|
||||||
@ -311,6 +312,100 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 导出Excel（HTML格式）
|
||||||
|
const exportExcel = async () => {
|
||||||
|
try {
|
||||||
|
// 确保数据已加载完成
|
||||||
|
if (loading.value) {
|
||||||
|
alertService.showInfo($t('global.messages.info.loading'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取打印区域的HTML内容
|
||||||
|
const printElement = document.getElementById('stylePrintContent');
|
||||||
|
if (!printElement) {
|
||||||
|
alertService.showError('打印内容元素不存在');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 等待图片加载完成
|
||||||
|
await waitForImages(printElement);
|
||||||
|
|
||||||
|
// 获取完整的HTML内容
|
||||||
|
const printContent = printElement.outerHTML;
|
||||||
|
|
||||||
|
// 创建Excel兼容的HTML内容
|
||||||
|
const excelContent = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
|
||||||
|
xmlns:x="urn:schemas-microsoft-com:office:excel"
|
||||||
|
xmlns="http://www.w3.org/TR/REC-html40">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>款式详情 - ${style.value.number}</title>
|
||||||
|
<!--[if gte mso 9]>
|
||||||
|
<xml>
|
||||||
|
<x:ExcelWorkbook>
|
||||||
|
<x:ExcelWorksheets>
|
||||||
|
<x:ExcelWorksheet>
|
||||||
|
<x:Name>Sheet1</x:Name>
|
||||||
|
<x:WorksheetOptions>
|
||||||
|
<x:DisplayGridlines/>
|
||||||
|
</x:WorksheetOptions>
|
||||||
|
</x:ExcelWorksheet>
|
||||||
|
</x:ExcelWorksheets>
|
||||||
|
</x:ExcelWorkbook>
|
||||||
|
</xml>
|
||||||
|
<![endif]-->
|
||||||
|
<style>
|
||||||
|
table { border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; }
|
||||||
|
th, td { border: 1px solid #000; padding: 8px; text-align: left; vertical-align: top; }
|
||||||
|
th { background-color: #f2f2f2; font-weight: bold; }
|
||||||
|
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px 0; }
|
||||||
|
.info-table { margin-bottom: 20px; }
|
||||||
|
.info-table td { border: 1px solid #ccc; }
|
||||||
|
.detail-table { margin-bottom: 20px; }
|
||||||
|
img { max-width: 120px; max-height: 90px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>${printContent}</body>
|
||||||
|
</html>`;
|
||||||
|
|
||||||
|
// 创建Blob
|
||||||
|
const blob = new Blob([excelContent], {
|
||||||
|
type: 'application/vnd.ms-excel;charset=utf-8',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建下载链接
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `款式详情-${style.value.number}.xls`;
|
||||||
|
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
alertService.showInfo($t('entity.action.exportSuccess'));
|
||||||
|
}, 100);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Excel导出错误:', error);
|
||||||
|
alertService.showError($t('entity.action.exportError'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 等待图片加载完成
|
||||||
|
const waitForImages = (element: Element): Promise<void> => {
|
||||||
|
const images = element.querySelectorAll('img');
|
||||||
|
const promises = Array.from(images).map(img => {
|
||||||
|
if (img.complete) return Promise.resolve();
|
||||||
|
return new Promise(resolve => {
|
||||||
|
img.onload = img.onerror = resolve;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return Promise.all(promises).then(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
// 加载 StyleGroup 字典项
|
// 加载 StyleGroup 字典项
|
||||||
const loadStyleGroupDicts = async () => {
|
const loadStyleGroupDicts = async () => {
|
||||||
try {
|
try {
|
||||||
@ -444,6 +539,7 @@ export default defineComponent({
|
|||||||
getSettingTypeName,
|
getSettingTypeName,
|
||||||
getStyleGroupTitle,
|
getStyleGroupTitle,
|
||||||
downloadPdf,
|
downloadPdf,
|
||||||
|
exportExcel,
|
||||||
styleGroupTitle,
|
styleGroupTitle,
|
||||||
styleGroupDicts,
|
styleGroupDicts,
|
||||||
getStyleGroupName,
|
getStyleGroupName,
|
||||||
|
|||||||
@ -6,16 +6,20 @@
|
|||||||
<span class="d-none d-md-inline" v-text="$t('entity.action.back')"></span>
|
<span class="d-none d-md-inline" v-text="$t('entity.action.back')"></span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
|
<button type="button" class="btn btn-success me-2" @click="downloadPdf">
|
||||||
|
<font-awesome-icon icon="download" />
|
||||||
|
<span class="d-none d-md-inline" v-text="$t('entity.action.download')"></span>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-warning me-2" @click="exportExcel">
|
||||||
|
<font-awesome-icon icon="file-excel" />
|
||||||
|
<span class="d-none d-md-inline" v-text="$t('entity.action.exportExcel')"></span>
|
||||||
|
</button>
|
||||||
<div class="form-check form-switch me-3">
|
<div class="form-check form-switch me-3">
|
||||||
<input class="form-check-input" type="checkbox" id="printDirectSwitch" v-model="printDirect" />
|
<input class="form-check-input" type="checkbox" id="printDirectSwitch" v-model="printDirect" />
|
||||||
<label class="form-check-label" for="printDirectSwitch">
|
<label class="form-check-label" for="printDirectSwitch">
|
||||||
{{ $t('entity.action.directPrint') }}
|
{{ $t('entity.action.directPrint') }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-success me-2" @click="downloadPdf">
|
|
||||||
<font-awesome-icon icon="download" />
|
|
||||||
<span class="d-none d-md-inline" v-text="$t('entity.action.download')"></span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="btn btn-primary" @click="printStyle">
|
<button type="button" class="btn btn-primary" @click="printStyle">
|
||||||
<font-awesome-icon icon="print" />
|
<font-awesome-icon icon="print" />
|
||||||
<span class="d-none d-md-inline" v-text="$t('entity.action.print')"></span>
|
<span class="d-none d-md-inline" v-text="$t('entity.action.print')"></span>
|
||||||
|
|||||||
@ -142,6 +142,9 @@
|
|||||||
"download": "下载",
|
"download": "下载",
|
||||||
"downloadSuccess": "下载成功",
|
"downloadSuccess": "下载成功",
|
||||||
"downloadError": "下载失败",
|
"downloadError": "下载失败",
|
||||||
|
"exportExcel": "导出Excel",
|
||||||
|
"exportSuccess": "导出成功",
|
||||||
|
"exportError": "导出失败",
|
||||||
"retake": "重拍",
|
"retake": "重拍",
|
||||||
"retry": "重试",
|
"retry": "重试",
|
||||||
"new": "新建",
|
"new": "新建",
|
||||||
|
|||||||
@ -18,8 +18,8 @@
|
|||||||
"title": "订单详情"
|
"title": "订单详情"
|
||||||
},
|
},
|
||||||
"setting": {
|
"setting": {
|
||||||
"title": "BOM信息",
|
"title": "镶嵌信息",
|
||||||
"process": "镶嵌信息",
|
"process": "镶嵌工序",
|
||||||
"name": "名称",
|
"name": "名称",
|
||||||
"material": "物料",
|
"material": "物料",
|
||||||
"subgroup": "分组",
|
"subgroup": "分组",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user