<script setup lang="ts">
|
import { computed, reactive, ref } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { useRouter } from 'vue-router'
|
import { useCompareReports, type CompareReportRecord } from '@/stores/compareReports'
|
import { createCompareReportPrintData, openCompareReportPrint } from '@/utils/compareReportPrint'
|
|
interface FilterState {
|
reportName: string
|
creator: string
|
dateRange: [string, string] | null
|
}
|
|
const router = useRouter()
|
const { records, removeReport } = useCompareReports()
|
const filters = reactive<FilterState>({ reportName: '', creator: '', dateRange: null })
|
const appliedFilters = ref<FilterState>({ reportName: '', creator: '', dateRange: null })
|
const currentPage = ref(1)
|
const pageSize = ref(10)
|
const revisionVisible = ref(false)
|
const activeReport = ref<CompareReportRecord | null>(null)
|
|
const creatorOptions = computed(() => [...new Set(records.value.map(item => item.creator))].sort((a, b) => a.localeCompare(b, 'zh-CN')))
|
|
const filteredRecords = computed(() => {
|
const query = appliedFilters.value
|
const keyword = query.reportName.trim().toLowerCase()
|
return records.value
|
.filter(item => !keyword || item.name.toLowerCase().includes(keyword) || String(item.id).includes(keyword))
|
.filter(item => !query.creator || query.creator === '全部' || item.creator === query.creator)
|
.filter(item => {
|
if (!query.dateRange) return true
|
const date = item.createdAt.slice(0, 10)
|
return date >= query.dateRange[0] && date <= query.dateRange[1]
|
})
|
.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
|
})
|
|
const pagedRecords = computed(() => {
|
const start = (currentPage.value - 1) * pageSize.value
|
return filteredRecords.value.slice(start, start + pageSize.value)
|
})
|
|
function applySearch() {
|
appliedFilters.value = {
|
reportName: filters.reportName,
|
creator: filters.creator,
|
dateRange: filters.dateRange ? [...filters.dateRange] as [string, string] : null,
|
}
|
currentPage.value = 1
|
ElMessage.success(`已找到 ${filteredRecords.value.length} 份对比报表`)
|
}
|
|
function resetSearch() {
|
Object.assign(filters, { reportName: '', creator: '', dateRange: null })
|
appliedFilters.value = { reportName: '', creator: '', dateRange: null }
|
currentPage.value = 1
|
}
|
|
function openCreate() {
|
router.push('/report-compare/new')
|
}
|
|
function openEdit(item: CompareReportRecord) {
|
router.push(`/report-compare/${item.id}/edit`)
|
}
|
|
function openView(item: CompareReportRecord) {
|
router.push({ path: `/report-compare/${item.id}/edit`, query: { mode: 'view' } })
|
}
|
|
function openRevisions(item: CompareReportRecord) {
|
activeReport.value = item
|
revisionVisible.value = true
|
}
|
|
function escapeCsv(value: string | number) {
|
return `"${String(value).replaceAll('"', '""')}"`
|
}
|
|
function downloadRevisions(item: CompareReportRecord) {
|
const headers = ['修订记录ID', '报告ID', '报告名称', '修订时间', '修订人', '修订内容']
|
const rows = item.revisions.map(revision => [revision.id, item.id, item.name, revision.modifiedAt, revision.modifier, revision.summary])
|
const csv = `\uFEFF${[headers, ...rows].map(row => row.map(escapeCsv).join(',')).join('\n')}`
|
const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }))
|
const anchor = document.createElement('a')
|
anchor.href = url
|
anchor.download = `${item.name}_修订记录.csv`
|
anchor.style.display = 'none'
|
document.body.appendChild(anchor)
|
anchor.click()
|
anchor.remove()
|
window.setTimeout(() => URL.revokeObjectURL(url), 1000)
|
ElMessage.success(`已导出 ${item.revisions.length} 条修订记录`)
|
}
|
|
function printPdf(item: CompareReportRecord) {
|
const opened = openCompareReportPrint(createCompareReportPrintData(item))
|
if (!opened) {
|
ElMessage.warning('浏览器阻止了报表窗口，请允许弹出窗口后重试')
|
return
|
}
|
ElMessage.info('已打开打印版报表，请在打印窗口选择“另存为 PDF”')
|
}
|
|
async function deleteReport(item: CompareReportRecord) {
|
try {
|
await ElMessageBox.confirm(`删除“${item.name}”及其修订记录后无法恢复，是否继续？`, '确认删除对比报表', {
|
confirmButtonText: '删除',
|
cancelButtonText: '取消',
|
type: 'warning',
|
confirmButtonClass: 'danger-confirm',
|
})
|
removeReport(item.id)
|
currentPage.value = Math.min(currentPage.value, Math.max(1, Math.ceil(filteredRecords.value.length / pageSize.value)))
|
ElMessage.success('对比报表已删除')
|
} catch {
|
// 用户取消删除。
|
}
|
}
|
</script>
|
|
<template>
|
<div class="compare-report-page">
|
<section class="filter-panel" aria-label="对比报表查询条件">
|
<header class="section-heading"><div><i></i><strong>查询报表</strong><span>REPORT QUERY</span></div><small>共 {{ records.length }} 份报表</small></header>
|
<div class="filter-grid">
|
<label><span>报告名称</span><el-input v-model="filters.reportName" clearable placeholder="输入报告名称或ID" @keyup.enter="applySearch" /></label>
|
<label><span>创建人</span><el-select v-model="filters.creator" clearable placeholder="全部"><el-option label="全部" value="全部" /><el-option v-for="item in creatorOptions" :key="item" :label="item" :value="item" /></el-select></label>
|
<label><span>创建时间</span><el-date-picker v-model="filters.dateRange" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" unlink-panels /></label>
|
<div class="filter-actions"><button class="primary-button" type="button" @click="applySearch"><el-icon><Search /></el-icon>查询</button><button class="secondary-button" type="button" @click="resetSearch"><el-icon><RefreshLeft /></el-icon>重置</button></div>
|
</div>
|
</section>
|
|
<section class="result-panel">
|
<div class="result-toolbar"><div><i></i><strong>对比报表列表</strong><span>{{ filteredRecords.length }} RESULTS · 按创建时间倒序</span></div><button class="primary-button" type="button" @click="openCreate"><el-icon><Plus /></el-icon>新建报表</button></div>
|
<div class="table-wrap">
|
<table>
|
<thead><tr><th>报告ID</th><th>报告名称</th><th>创建时间</th><th>创建人</th><th class="action-column">操作</th></tr></thead>
|
<tbody>
|
<tr v-for="item in pagedRecords" :key="item.id">
|
<td class="id-cell">#{{ item.id }}</td><td :title="item.name"><strong>{{ item.name }}</strong></td><td>{{ item.createdAt }}</td><td>{{ item.creator }}</td>
|
<td class="action-column"><div class="row-actions"><button type="button" @click="openView(item)">查看报表</button><button type="button" @click="openEdit(item)">编辑</button><button type="button" @click="printPdf(item)">下载PDF</button><button type="button" @click="openRevisions(item)">修订记录</button><button type="button" @click="downloadRevisions(item)">下载记录</button><button class="delete-action" type="button" @click="deleteReport(item)">删除</button></div></td>
|
</tr>
|
<tr v-if="!pagedRecords.length"><td colspan="5" class="empty-cell">暂无符合条件的对比报表</td></tr>
|
</tbody>
|
</table>
|
</div>
|
<footer class="pagination-bar"><span>显示 {{ pagedRecords.length }} 条，共 {{ filteredRecords.length }} 条</span><el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :total="filteredRecords.length" layout="sizes, prev, pager, next" background /></footer>
|
</section>
|
|
<el-dialog v-model="revisionVisible" class="revision-dialog" title="报表修订记录" width="760px" align-center>
|
<div v-if="activeReport" class="revision-summary"><span>报告ID <strong>#{{ activeReport.id }}</strong></span><span>报告名称 <strong>{{ activeReport.name }}</strong></span><button class="secondary-button" type="button" @click="downloadRevisions(activeReport)"><el-icon><Download /></el-icon>下载记录</button></div>
|
<div class="revision-table-wrap">
|
<table class="revision-table">
|
<thead><tr><th>记录ID</th><th>修订时间</th><th>修订人</th><th>修订内容</th></tr></thead>
|
<tbody><tr v-for="item in activeReport?.revisions || []" :key="item.id"><td class="id-cell">{{ item.id }}</td><td>{{ item.modifiedAt }}</td><td>{{ item.modifier }}</td><td :title="item.summary">{{ item.summary }}</td></tr></tbody>
|
</table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped>
|
.compare-report-page { width: 100%; }
|
.primary-button, .secondary-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
|
.primary-button { color: #fff; background: var(--blue); border-color: var(--blue); }
|
.primary-button:hover { background: #176fcb; border-color: #176fcb; }
|
.primary-button:disabled { opacity: .55; cursor: wait; }
|
.secondary-button { color: #52606d; background: #fff; border-color: var(--line-strong); }
|
.secondary-button:hover { color: var(--blue); border-color: #9dc8f5; }
|
.filter-panel, .result-panel { background: #fff; border: 1px solid #d8e1e9; }
|
.filter-panel { margin-bottom: 16px; }
|
.section-heading, .result-toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
|
.section-heading { height: 44px; padding: 0 16px; }
|
.section-heading > div, .result-toolbar > div { display: flex; align-items: center; gap: 8px; }
|
.section-heading > div > i, .result-toolbar > div:first-child > i { width: 3px; height: 16px; background: #2b78a3; }
|
.section-heading strong, .result-toolbar strong { color: var(--ink); font-size: 15px; font-weight: 600; }
|
.section-heading span, .result-toolbar span { color: #81909d; font-size: 10px; }
|
.section-heading small { color: #647380; font-size: 11px; }
|
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; padding: 16px; }
|
.filter-grid label { width: 100%; min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
|
.filter-grid label > span { color: #52606d; font-size: 12px; font-weight: 500; }
|
.filter-grid :deep(.el-select), .filter-grid :deep(.el-date-editor) { width: 100%; }
|
.filter-grid :deep(.el-input__wrapper), .filter-grid :deep(.el-select__wrapper) { min-height: 34px; border-radius: 3px; box-shadow: 0 0 0 1px #d8e1e9 inset; background: #f8fafc; }
|
.filter-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
|
.result-toolbar { height: 50px; padding: 0 16px; }
|
.table-wrap { overflow-x: auto; }
|
table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: collapse; color: #52606d; font-size: 13px; }
|
th, td { height: 50px; padding: 0 12px; border-right: 1px solid #dde7f0; border-bottom: 1px solid #dde7f0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
th { height: 40px; color: #52606d; background: #eaf4ff; border-color: #c7e0ff; font-size: 12px; font-weight: 600; }
|
th:nth-child(1) { width: 120px; } th:nth-child(2) { width: 310px; } th:nth-child(3) { width: 180px; } th:nth-child(4) { width: 110px; } th:last-child { width: 380px; }
|
th:last-child, td:last-child { border-right: 0; text-align: center; }
|
.action-column { position: sticky; right: 0; z-index: 2; background: #fff; overflow: visible; border-left: 0; box-shadow: inset 1px 0 0 #b4c7d9, -8px 0 14px rgba(23, 49, 74, .12); }
|
th.action-column { z-index: 3; background: #eaf4ff; }
|
tbody tr:hover td.action-column { background: #f7fbff; }
|
tbody tr:hover { background: #f7fbff; }
|
tbody tr:last-child td { border-bottom: 0; }
|
td strong { color: #26333f; font-weight: 600; }
|
.id-cell { color: #647380; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
|
.row-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
|
.row-actions button { border: 0; color: var(--blue); background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; }
|
.row-actions button:hover { color: #176fcb; text-decoration: underline; }
|
.row-actions .delete-action { color: #ad4a4a; }
|
.empty-cell { height: 160px; color: #8795a3; text-align: center; }
|
.pagination-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); }
|
.pagination-bar > span { color: #7b8794; font-size: 11px; }
|
.pagination-bar :deep(.el-pagination) { --el-pagination-button-bg-color: #edf4fa; --el-pagination-hover-color: var(--blue); }
|
.compare-report-page :deep(.revision-dialog) { max-width: calc(100vw - 28px); border-radius: 4px; }
|
.compare-report-page :deep(.el-dialog__header) { margin: 0; padding: 17px 20px; border-bottom: 1px solid var(--line); }
|
.compare-report-page :deep(.el-dialog__body) { padding: 20px; }
|
.compare-report-page :deep(.el-dialog__footer) { padding: 14px 20px; border-top: 1px solid var(--line); }
|
.revision-summary { min-height: 42px; display: flex; align-items: center; gap: 22px; margin-bottom: 14px; padding: 0 12px; background: #f6f9fc; border: 1px solid #d8e1e9; }
|
.revision-summary span { min-width: 0; color: #7b8794; font-size: 12px; }
|
.revision-summary strong { margin-left: 5px; color: #44515d; font-weight: 600; }
|
.revision-summary button { margin-left: auto; }
|
.revision-table-wrap { overflow-x: auto; }
|
.revision-table { min-width: 680px; }
|
.revision-table th:nth-child(1) { width: 135px; } .revision-table th:nth-child(2) { width: 155px; } .revision-table th:nth-child(3) { width: 95px; } .revision-table th:nth-child(4) { width: auto; }
|
.revision-table th:last-child, .revision-table td:last-child { text-align: left; }
|
@media (max-width: 1100px) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
@media (max-width: 680px) {
|
.filter-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
|
.filter-grid { padding: 14px 12px; }
|
.filter-actions { justify-content: stretch; }
|
.filter-actions button { flex: 1; }
|
.section-heading, .result-toolbar { padding-left: 12px; }
|
.section-heading span, .result-toolbar span { display: none; }
|
.pagination-bar, .revision-summary { align-items: flex-start; flex-direction: column; }
|
.revision-summary { padding: 12px; }
|
.revision-summary button { width: 100%; margin-left: 0; }
|
}
|
</style>
|
