AttorneySubsystemVue/src/components/system/service-count/firm-statistics-detail.vue

<template>
  <div class="firm-statistics-detail">
    <!-- 返回按钮和标题 -->
    <div class="detail-header">
      <a-button type="link" @click="handleBack" class="back-btn">
        <ArrowLeftOutlined />
        返回查询
      </a-button>
      <div class="detail-title">
        <h2>律所统计详情</h2>
        <div class="detail-subtitle">统计时间：{{ queryParams.year }}年<span v-if="queryParams.quarter != null">第{{ queryParams.quarter }}季度</span></div>
      </div>
    </div>

    <!-- 导出按钮 -->
    <div class="export-section">
      <a-button type="primary" @click="handleExport" :loading="exportLoading">
        <ExportOutlined />
        导出Excel
      </a-button>
    </div>

    <!-- Excel样式表格 -->
    <div class="excel-table-container">
      <div class="excel-table-header">
        <div class="excel-table-title">律所服务统计报表</div>
        <div class="excel-table-subtitle">统计时间：{{ queryParams.year }}年<span v-if="queryParams.quarter != null">第{{ queryParams.quarter }}季度</span></div>
      </div>
      
      <div class="excel-table">
        <!-- 表头 -->
        <div class="excel-row excel-header">
          <div class="excel-cell" style="width: 15%;">序号</div>
          <div class="excel-cell" style="width: 25%;">律所名称</div>
          <div class="excel-cell" style="width: 15%;">季度累计服务时长</div>
          <div class="excel-cell" style="width: 15%;">季度累计服务成本</div>
          <div class="excel-cell" style="width: 15%;">年度累计服务时长</div>
          <div class="excel-cell" style="width: 15%;">年度累计服务成本</div>
        </div>
        
        <!-- 数据行 -->
        <div v-for="(item, index) in tableData" :key="index" class="excel-row excel-data">
          <div class="excel-cell" style="width: 15%;">{{ index + 1 }}</div>
          <div class="excel-cell" style="width: 25%;">{{ item.firmName || '-' }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatNumber(item.quarterlyServiceDuration) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(item.quarterlyServiceCost) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatNumber(item.annualServiceDuration) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(item.annualServiceCost) }}</div>
        </div>
        
        <!-- 汇总行 -->
        <div v-if="summaryData" class="excel-row excel-summary">
          <div class="excel-cell" style="width: 15%;">汇总</div>
          <div class="excel-cell" style="width: 25%;">-</div>
          <div class="excel-cell" style="width: 15%;">{{ formatNumber(summaryData.totalQuarterlyDuration) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(summaryData.totalQuarterlyCost) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatNumber(summaryData.totalAnnualDuration) }}</div>
          <div class="excel-cell" style="width: 15%;">{{ formatCurrency(summaryData.totalAnnualCost) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ExportOutlined, ArrowLeftOutlined } 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,
    required: true
  },
  tableData: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['back']);

const exportLoading = ref(false);

// 计算汇总数据
const summaryData = computed(() => {
  if (!props.tableData || props.tableData.length === 0) {
    return null;
  }

  const summary = {
    totalQuarterlyDuration: 0,
    totalQuarterlyCost: 0,
    totalAnnualDuration: 0,
    totalAnnualCost: 0
  };

  props.tableData.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)}`;
}

// 返回查询页面
function handleBack() {
  emit('back');
}

// 导出Excel
async function handleExport() {
  if (!props.tableData || props.tableData.length === 0) {
    message.warning('暂无数据可导出');
    return;
  }

  exportLoading.value = true;
  try {
    console.log('开始导出律所统计详情...');
    const exportParams = {
      quarter: props.queryParams.quarter,
      year: props.queryParams.year,
      firmName: props.queryParams.firmName,
      pageNum: 1,
      pageSize: 500
    };
    
    await serviceApplicationsApi.exportLawyerByDepartment(exportParams);
    message.success('导出成功');
    console.log('律所统计详情导出成功');
  } catch (error) {
    message.error('导出失败');
    console.error('律所统计详情导出失败:', error);
  } finally {
    exportLoading.value = false;
  }
}

onMounted(() => {
  console.log('律所统计详情组件已加载，数据量:', props.tableData.length);
});
</script>
<style scoped>
.firm-statistics-detail {
  padding: 0;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.back-btn {
  margin-right: 20px;
  color: #1890ff;
}

.detail-title h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.detail-subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: #666;
}

.export-section {
  margin-bottom: 20px;
  text-align: right;
  padding: 0 16px;
}

.excel-table-container {
  border: 2px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}

.excel-table-header {
  background: #f5f5f5;
  padding: 16px;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
}

.excel-table-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.excel-table-subtitle {
  font-size: 14px;
  color: #666;
}

.excel-table {
  width: 100%;
}

.excel-row {
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}

.excel-row:last-child {
  border-bottom: none;
}

.excel-header {
  background: #e6f7ff;
  font-weight: 600;
}

.excel-summary {
  background: #f0f0f0;
  font-weight: 600;
}

.excel-cell {
  padding: 12px;
  border-right: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  box-sizing: border-box;
  font-size: 14px;
}

.excel-cell:last-child {
  border-right: none;
}

.excel-header .excel-cell {
  background: #1890ff;
  color: white;
  border-right: 1px solid #40a9ff;
}

.excel-data .excel-cell {
  background: white;
  color: #333;
}

.excel-summary .excel-cell {
  background: #fafafa;
  color: #333;
}
</style>