大哥的三个页面的导出优化前端导出

This commit is contained in:
2026-01-16 21:18:55 +08:00
parent 75f705dcf8
commit 1974be0a55
2 changed files with 138 additions and 2 deletions

View File

@@ -335,7 +335,10 @@ function formatTimestamp(milliseconds) {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
import { useDictStore } from '@/store/modules/dict' // 如果你项目里有字典 store import { useDictStore } from '@/store/modules/dict' // 如果你项目里有字典 store
import { useLocaleStoreWithOut } from '@/store/modules/locale'
const dictStore = useDictStore?.() // 有就用;没有的话把 dictStore 相关行删掉 const dictStore = useDictStore?.() // 有就用;没有的话把 dictStore 相关行删掉
const localeStore = useLocaleStoreWithOut()
const currentLang = computed(() => localeStore.getCurrentLocale.lang)
// 统一用字符串比较,自动识别并翻译 i18n key // 统一用字符串比较,自动识别并翻译 i18n key
function dictLabelI18n(type: string, val: any) { function dictLabelI18n(type: string, val: any) {
const v = val == null ? '' : String(val) const v = val == null ? '' : String(val)
@@ -385,8 +388,72 @@ const handleDelete = async (id: number) => {
} catch { } } catch { }
} }
/** 导出按钮操作 */ /** 导出按钮操作 - 前端导出当前页数据 */
const handleExport = async () => { const handleExport = async () => {
try {
exportLoading.value = true
// 定义表头(根据表格列顺序)
const headers = [
t('bigBrother.displayId'),
t('bigBrother.uid'),
t('bigBrother.nickname'),
t('bigBrother.level'),
t('bigBrother.fansLevel'),
t('bigBrother.hostCoins'),
t('bigBrother.followerCount'),
t('bigBrother.followingCount'),
t('bigBrother.region'),
t('bigBrother.historicHighCoins'),
t('bigBrother.totalGiftCoins'),
t('bigBrother.hostDisplayId'),
t('newHosts.createTime'),
t('bigBrother.negotiation')
]
// 将当前页数据转换为 CSV 行
const rows = list.value.map(row => [
row.displayId || '',
row.userIdStr || '',
row.nickname || '',
row.level || '',
row.fansLevel || '',
row.hostcoins || '',
row.followerCount || '',
row.followingCount || '',
currentLang.value === 'zh-CN' ? (row.region || '') : (row.regionEng || row.region || ''),
row.historicHighCoins || '',
row.totalGiftCoins || '',
row.hostDisplayId || '',
row.createTime ? new Date(row.createTime).toLocaleString(currentLang.value === 'zh-CN' ? 'zh-CN' : 'en-US') : '',
dictLabelI18n(DICT_TYPE.BIGBIOTHER_NEGOTIATION, row.operationStatus) || ''
])
// 组装 CSV 内容(添加 BOM 以支持 Excel 正确显示中文)
const BOM = '\uFEFF'
const csvContent = BOM + [headers, ...rows]
.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
.join('\n')
// 创建 Blob 并下载
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `${t('bigBrother.exportFileName')}_${new Date().toISOString().split('T')[0]}.csv`
link.click()
URL.revokeObjectURL(url)
message.success(t('bigBrother.exportSuccess'))
} catch (error) {
console.error('导出失败:', error)
} finally {
exportLoading.value = false
}
}
/* ======== 后端导出代码(已注释,保留备用)========
const handleExportBackend = async () => {
try { try {
// 导出的二次确认 // 导出的二次确认
await message.exportConfirm() await message.exportConfirm()
@@ -399,6 +466,7 @@ const handleExport = async () => {
exportLoading.value = false exportLoading.value = false
} }
} }
======== 后端导出代码结束 ======== */
//分配按钮操作 //分配按钮操作
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {

View File

@@ -322,7 +322,10 @@ function formatTimestamp(milliseconds) {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
import { useDictStore } from '@/store/modules/dict' // 如果你项目里有字典 store import { useDictStore } from '@/store/modules/dict' // 如果你项目里有字典 store
import { useLocaleStoreWithOut } from '@/store/modules/locale'
const dictStore = useDictStore?.() // 有就用;没有的话把 dictStore 相关行删掉 const dictStore = useDictStore?.() // 有就用;没有的话把 dictStore 相关行删掉
const localeStore = useLocaleStoreWithOut()
const currentLang = computed(() => localeStore.getCurrentLocale.lang)
// 统一用字符串比较,自动识别并翻译 i18n key // 统一用字符串比较,自动识别并翻译 i18n key
function dictLabelI18n(type: string, val: any) { function dictLabelI18n(type: string, val: any) {
const v = val == null ? '' : String(val) const v = val == null ? '' : String(val)
@@ -359,8 +362,72 @@ const handleDelete = async (id: number) => {
} catch { } } catch { }
} }
/** 导出按钮操作 */ /** 导出按钮操作 - 前端导出当前页数据 */
const handleExport = async () => { const handleExport = async () => {
try {
exportLoading.value = true
// 定义表头(根据表格列顺序)
const headers = [
t('bigBrother.displayId'),
t('bigBrother.uid'),
t('bigBrother.nickname'),
t('bigBrother.level'),
t('bigBrother.fansLevel'),
t('bigBrother.hostCoins'),
t('bigBrother.followerCount'),
t('bigBrother.followingCount'),
t('bigBrother.region'),
t('bigBrother.historicHighCoins'),
t('bigBrother.totalGiftCoins'),
t('bigBrother.hostDisplayId'),
t('newHosts.createTime'),
t('bigBrother.negotiation')
]
// 将当前页数据转换为 CSV 行
const rows = list.value.map(row => [
row.displayId || '',
row.userIdStr || '',
row.nickname || '',
row.level || '',
row.fansLevel || '',
row.hostcoins || '',
row.followerCount || '',
row.followingCount || '',
currentLang.value === 'zh-CN' ? (row.region || '') : (row.regionEng || row.region || ''),
row.historicHighCoins || '',
row.totalGiftCoins || '',
row.hostDisplayId || '',
row.createTime ? new Date(row.createTime).toLocaleString(currentLang.value === 'zh-CN' ? 'zh-CN' : 'en-US') : '',
dictLabelI18n(DICT_TYPE.BIGBIOTHER_NEGOTIATION, row.operationStatus) || ''
])
// 组装 CSV 内容(添加 BOM 以支持 Excel 正确显示中文)
const BOM = '\uFEFF'
const csvContent = BOM + [headers, ...rows]
.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
.join('\n')
// 创建 Blob 并下载
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = `${t('bigBrother.exportFileName')}_${new Date().toISOString().split('T')[0]}.csv`
link.click()
URL.revokeObjectURL(url)
message.success(t('bigBrother.exportSuccess'))
} catch (error) {
console.error('导出失败:', error)
} finally {
exportLoading.value = false
}
}
/* ======== 后端导出代码(已注释,保留备用)========
const handleExportBackend = async () => {
try { try {
// 导出的二次确认 // 导出的二次确认
await message.exportConfirm() await message.exportConfirm()
@@ -373,6 +440,7 @@ const handleExport = async () => {
exportLoading.value = false exportLoading.value = false
} }
} }
======== 后端导出代码结束 ======== */
//分配按钮操作 //分配按钮操作
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {