gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hjmCar): 优化导出二维码功能

Browse Source 
- 增加导出按钮的禁用状态和数量显示
- 修改导出逻辑，使用选中的车辆数据- 优化导出成功提示信息
- 更新导出文件名称和内容标题
This commit is contained in:
赵忠林
2025-09-17 11:12:44 +08:00
parent 77f3686e0f
commit 8840cf6c08
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/hjm/hjmCar/components/search.vue
View File

@@ -41,7 +41,8 @@
:icon="h(QrcodeOutlined)" :icon="h(QrcodeOutlined)"
@click="handleExport" @click="handleExport"
:loading="exportLoading" :loading="exportLoading"
>导出二维码</a-button :disabled="!props.selection || props.selection.length === 0"
>导出二维码{{ props.selection && props.selection.length > 0 ? `(${props.selection.length})` : '' }}</a-button
> >
<!-- <span class="text-red-500" v-if="where.organizationId">{{ where.organizationParentName }}(ID：{{where.organizationParentId}})</span>--> <!-- <span class="text-red-500" v-if="where.organizationId">{{ where.organizationParentName }}(ID：{{where.organizationParentId}})</span>-->
<!-- <span class="text-red-500" v-if="where.organizationId">{{ where }}(ID：{{where.organizationId}})</span>--> <!-- <span class="text-red-500" v-if="where.organizationId">{{ where }}(ID：{{where.organizationId}})</span>-->
@@ -80,12 +81,14 @@
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
// 选中的角色 // 选中的车辆
selection?: []; selection?: HjmCar[];
// 全部部门 // 全部部门
organizationList: Organization[]; organizationList: Organization[];
}>(), }>(),
{} {
selection: () => []
}
); );
const emit = defineEmits<{ const emit = defineEmits<{
@@ -138,11 +141,11 @@
exportLoading.value = true; exportLoading.value = true;
message.loading('正在生成二维码文档，请稍候...', 0); message.loading('正在生成二维码文档，请稍候...', 0);
// 获取所有车辆数据 // 使用选中的车辆数据
const carList = await listHjmCar(where); const carList = props.selection || [];
if (!carList || carList.length === 0) { if (!carList || carList.length === 0) {
message.error('没有车辆数据可导出'); message.error('请先选择要导出的车辆');
return; return;
} }
@@ -176,13 +179,13 @@
try { try {
await createWordDocument(qrCodeImages); await createWordDocument(qrCodeImages);
message.destroy(); message.destroy();
message.success(`成功导出 ${qrCodeImages.length} 个车辆二维码`); message.success(`成功导出 ${qrCodeImages.length} 个选中车辆的二维码`);
} catch (docError) { } catch (docError) {
console.warn('Word文档生成失败，使用HTML方式:', docError); console.warn('Word文档生成失败，使用HTML方式:', docError);
createHtmlDocument(qrCodeImages); createHtmlDocument(qrCodeImages);
message.destroy(); message.destroy();
message.success( message.success(
`成功生成 ${qrCodeImages.length} 个车辆二维码（HTML格式，可直接打印）` `成功生成 ${qrCodeImages.length} 个选中车辆的二维码（HTML格式，可直接打印）`
); );
} }
} catch (error) { } catch (error) {
@@ -203,7 +206,7 @@
// 添加标题 // 添加标题
children.push( children.push(
new Paragraph({ new Paragraph({
text: '车辆二维码清单', text: `选中车辆二维码清单 (共${qrCodeImages.length}辆)`,
alignment: AlignmentType.CENTER, alignment: AlignmentType.CENTER,
spacing: { after: 400 } spacing: { after: 400 }
}) })
@@ -335,7 +338,7 @@
// 生成并下载文档 // 生成并下载文档
try { try {
const buffer = await Packer.toBlob(doc); const buffer = await Packer.toBlob(doc);
const fileName = `车辆二维码清单_${new Date() const fileName = `选中车辆二维码清单_${new Date()
.toISOString() .toISOString()
.slice(0, 10)}.docx`; .slice(0, 10)}.docx`;
saveAs(buffer, fileName); saveAs(buffer, fileName);
@@ -346,7 +349,7 @@
const blob = new Blob([buffer], { const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
}); });
const fileName = `车辆二维码清单_${new Date() const fileName = `选中车辆二维码清单_${new Date()
.toISOString() .toISOString()
.slice(0, 10)}.docx`; .slice(0, 10)}.docx`;
saveAs(blob, fileName); saveAs(blob, fileName);
@@ -363,7 +366,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>车辆二维码清单</title> <title>选中车辆二维码清单</title>
<style> <style>
@page { @page {
size: A4; size: A4;
@@ -405,7 +408,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="title">车辆二维码清单</div> <div class="title">选中车辆二维码清单 (共${qrCodeImages.length}辆)</div>
<div class="qr-grid"> <div class="qr-grid">
`; `;
@@ -439,7 +442,7 @@
} else { } else {
// 如果弹窗被阻止，创建下载链接 // 如果弹窗被阻止，创建下载链接
const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' }); const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
const fileName = `车辆二维码清单_${new Date() const fileName = `选中车辆二维码清单_${new Date()
.toISOString() .toISOString()
.slice(0, 10)}.html`; .slice(0, 10)}.html`;
saveAs(blob, fileName); saveAs(blob, fileName);