“wangzihua”
3 months ago
7 changed files with 1048 additions and 213 deletions
@ -0,0 +1,365 @@ |
|||
<!-- |
|||
* Excel样式统计报表组件 |
|||
* |
|||
* @Author: wzh |
|||
* @Date: 2025-12-24 14:44:06 |
|||
* @Copyright 1.0 |
|||
--> |
|||
<template> |
|||
<div class="excel-statistics-detail"> |
|||
<!-- 查询条件和导出按钮 --> |
|||
<div class="header-section"> |
|||
<div class="query-section"> |
|||
<a-form :model="localQueryForm" layout="inline"> |
|||
<a-form-item label="年度"> |
|||
<a-select v-model:value="localQueryForm.year" placeholder="请选择年度" style="width: 120px"> |
|||
<a-select-option v-for="year in yearOptions" :key="year" :value="year"> |
|||
{{ year }}年 |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="季度"> |
|||
<a-select v-model:value="localQueryForm.quarter" placeholder="请选择季度" style="width: 120px"> |
|||
<a-select-option v-for="quarter in quarterOptions" :key="quarter.value" :value="quarter.value"> |
|||
{{ quarter.label }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="律师姓名"> |
|||
<a-input v-model:value="localQueryForm.lawyerName" placeholder="请输入律师姓名" style="width: 150px" /> |
|||
</a-form-item> |
|||
<a-form-item> |
|||
<a-button type="primary" @click="handleQuery" :loading="queryLoading"> |
|||
<SearchOutlined /> |
|||
查询 |
|||
</a-button> |
|||
<a-button @click="handleReset" style="margin-left: 8px"> |
|||
<ReloadOutlined /> |
|||
重置 |
|||
</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</div> |
|||
<div class="export-section"> |
|||
<a-button type="primary" @click="handleExport" :loading="exportLoading"> |
|||
<ExportOutlined /> |
|||
导出Excel |
|||
</a-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Excel样式统计报表 --> |
|||
<div class="statistics-report-container"> |
|||
<!-- 报表标题 --> |
|||
<div class="report-header"> |
|||
<h1>律师服务统计报表</h1> |
|||
<div class="report-subtitle">统计时间：{{ localQueryForm.year }}年<span v-if="localQueryForm.quarter != null">第{{ localQueryForm.quarter }}季度</span></div> |
|||
</div> |
|||
|
|||
<!-- 报表表格 --> |
|||
<div class="report-table"> |
|||
<!-- 表头 --> |
|||
<div class="report-row header-row"> |
|||
<div class="report-cell">序号</div> |
|||
<div class="report-cell">律师姓名</div> |
|||
<div class="report-cell">季度累计服务时长</div> |
|||
<div class="report-cell">季度累计服务成本</div> |
|||
<div class="report-cell">年度累计服务时长</div> |
|||
<div class="report-cell">年度累计服务成本</div> |
|||
</div> |
|||
|
|||
<!-- 数据行 --> |
|||
<div v-for="(item, index) in tableData" :key="index" class="report-row data-row"> |
|||
<div class="report-cell">{{ index + 1 }}</div> |
|||
<div class="report-cell">{{ item.lawyerName || '-' }}</div> |
|||
<div class="report-cell">{{ formatNumber(item.quarterlyServiceDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(item.quarterlyServiceCost) }}</div> |
|||
<div class="report-cell">{{ formatNumber(item.annualServiceDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(item.annualServiceCost) }}</div> |
|||
</div> |
|||
|
|||
<!-- 汇总行 --> |
|||
<div v-if="summaryData" class="report-row summary-row"> |
|||
<div class="report-cell">汇总</div> |
|||
<div class="report-cell">-</div> |
|||
<div class="report-cell">{{ formatNumber(summaryData.totalQuarterlyDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(summaryData.totalQuarterlyCost) }}</div> |
|||
<div class="report-cell">{{ formatNumber(summaryData.totalAnnualDuration) }}</div> |
|||
<div class="report-cell">{{ formatCurrency(summaryData.totalAnnualCost) }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, computed, onMounted } from 'vue'; |
|||
import { ExportOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api'; |
|||
|
|||
// 接收父组件传递的参数 |
|||
const props = defineProps({ |
|||
queryParams: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
tableData: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}); |
|||
|
|||
const exportLoading = ref(false); |
|||
const queryLoading = ref(false); |
|||
|
|||
// 本地查询表单 |
|||
const localQueryForm = reactive({ |
|||
quarter: props.queryParams.quarter || null, |
|||
year: props.queryParams.year || new Date().getFullYear(), |
|||
lawyerName: props.queryParams.lawyerName || '', |
|||
firmName: props.queryParams.firmName || '' |
|||
}); |
|||
|
|||
// 季度选项 |
|||
const quarterOptions = [ |
|||
{ label: '第一季度', value: 1 }, |
|||
{ label: '第二季度', value: 2 }, |
|||
{ label: '第三季度', value: 3 }, |
|||
{ label: '第四季度', value: 4 } |
|||
]; |
|||
|
|||
// 年度选项（近5年） |
|||
const yearOptions = ref([]); |
|||
|
|||
// 初始化年度选项 |
|||
function initYearOptions() { |
|||
const currentYear = new Date().getFullYear(); |
|||
for (let i = currentYear; i >= currentYear - 4; i--) { |
|||
yearOptions.value.push(i); |
|||
} |
|||
} |
|||
|
|||
// 表格数据 |
|||
const tableData = ref(props.tableData || []); |
|||
|
|||
// 计算汇总数据 |
|||
const summaryData = computed(() => { |
|||
if (!tableData.value || tableData.value.length === 0) { |
|||
return null; |
|||
} |
|||
|
|||
const summary = { |
|||
totalQuarterlyDuration: 0, |
|||
totalQuarterlyCost: 0, |
|||
totalAnnualDuration: 0, |
|||
totalAnnualCost: 0 |
|||
}; |
|||
|
|||
tableData.value.forEach(item => { |
|||
summary.totalQuarterlyDuration += Number(item.quarterlyServiceDuration) || 0; |
|||
summary.totalQuarterlyCost += Number(item.quarterlyServiceCost) || 0; |
|||
summary.totalAnnualDuration += Number(item.annualServiceDuration) || 0; |
|||
summary.totalAnnualCost += Number(item.annualServiceCost) || 0; |
|||
}); |
|||
|
|||
return summary; |
|||
}); |
|||
|
|||
// 格式化数字 |
|||
function formatNumber(value) { |
|||
if (value === null || value === undefined) return '-'; |
|||
const num = Number(value); |
|||
return isNaN(num) ? '-' : num.toFixed(2); |
|||
} |
|||
|
|||
// 格式化货币 |
|||
function formatCurrency(value) { |
|||
if (value === null || value === undefined) return '-'; |
|||
const num = Number(value); |
|||
return isNaN(num) ? '-' : `¥${num.toFixed(2)}`; |
|||
} |
|||
|
|||
// 查询数据 |
|||
async function handleQuery() { |
|||
queryLoading.value = true; |
|||
try { |
|||
console.log('开始查询律师统计数据...'); |
|||
const params = { |
|||
...localQueryForm, |
|||
pageNum: 1, |
|||
pageSize: 500 // 查询所有数据 |
|||
}; |
|||
|
|||
// 调用律师统计接口 |
|||
const res = await serviceApplicationsApi.statistics(params); |
|||
console.log('律师统计查询结果:', res); |
|||
|
|||
if (res.data && res.data.list && Array.isArray(res.data.list)) { |
|||
tableData.value = res.data.list.map(item => ({ |
|||
...item, |
|||
// 根据实际返回字段映射 |
|||
lawyerName: item.lawyerName || '-', |
|||
certificateNumber: item.certificateNumber || '-', |
|||
quarterlyServiceDuration: item.quarterlyServiceDuration || 0, |
|||
quarterlyServiceCost: item.quarterlyServiceCost || 0, |
|||
annualServiceDuration: item.annualServiceDuration || 0, |
|||
annualServiceCost: item.annualServiceCost || 0 |
|||
})); |
|||
|
|||
// 关闭查询成功提示 |
|||
// message.success(`查询成功，共 ${res.data.total} 条数据`); |
|||
} else { |
|||
tableData.value = []; |
|||
message.warning('暂无数据'); |
|||
} |
|||
} catch (error) { |
|||
message.error('查询失败'); |
|||
console.error('查询律师统计数据失败:', error); |
|||
tableData.value = []; |
|||
} finally { |
|||
queryLoading.value = false; |
|||
} |
|||
} |
|||
|
|||
// 重置查询条件 |
|||
function handleReset() { |
|||
localQueryForm.quarter = null; |
|||
localQueryForm.year = new Date().getFullYear(); |
|||
localQueryForm.lawyerName = ''; |
|||
localQueryForm.firmName = ''; |
|||
tableData.value = []; |
|||
} |
|||
|
|||
// 导出Excel |
|||
async function handleExport() { |
|||
if (tableData.value.length === 0) { |
|||
message.warning('暂无数据可导出'); |
|||
return; |
|||
} |
|||
|
|||
exportLoading.value = true; |
|||
try { |
|||
console.log('开始导出律师统计详情...'); |
|||
const exportParams = { |
|||
quarter: localQueryForm.quarter, |
|||
year: localQueryForm.year, |
|||
lawyerName: localQueryForm.lawyerName, |
|||
firmName: localQueryForm.firmName |
|||
}; |
|||
|
|||
// 调用律师导出接口 |
|||
await serviceApplicationsApi.exportLawyer(exportParams); |
|||
message.success('导出成功'); |
|||
console.log('律师统计详情导出成功'); |
|||
} catch (error) { |
|||
message.error('导出失败'); |
|||
console.error('导出律师统计详情失败:', error); |
|||
} finally { |
|||
exportLoading.value = false; |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initYearOptions(); |
|||
// 如果没有传入数据，则自动查询 |
|||
if (!props.tableData || props.tableData.length === 0) { |
|||
handleQuery(); |
|||
} |
|||
console.log('Excel统计详情组件已加载'); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.excel-statistics-detail { |
|||
padding: 0 16px; |
|||
} |
|||
|
|||
.header-section { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
.query-section { |
|||
flex: 1; |
|||
} |
|||
|
|||
.export-section { |
|||
margin-left: 16px; |
|||
} |
|||
|
|||
.statistics-report-container { |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.report-header { |
|||
background: #f5f5f5; |
|||
padding: 20px; |
|||
text-align: center; |
|||
border-bottom: 1px solid #ddd; |
|||
} |
|||
|
|||
.report-header h1 { |
|||
margin: 0 0 8px 0; |
|||
font-size: 24px; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.report-subtitle { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.report-table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.report-row { |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.report-cell { |
|||
flex: 1; |
|||
padding: 12px; |
|||
border-right: 1px solid #ddd; |
|||
border-bottom: 1px solid #ddd; |
|||
text-align: center; |
|||
min-height: 50px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.report-cell:last-child { |
|||
border-right: none; |
|||
} |
|||
|
|||
.header-row { |
|||
background-color: #0044cc; |
|||
color: white; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.data-row { |
|||
background-color: white; |
|||
color: #333; |
|||
} |
|||
|
|||
.summary-row { |
|||
background-color: #f0f0f0; |
|||
color: #333; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/* 最后一行单元格没有下边框 */ |
|||
.report-row:last-child .report-cell { |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue