AttorneySubsystemVue/src/components/system/service-count/quarter-statistics.vue

<!--
  * 季度统计组件
  *
  * @Author:    wzh
  * @Date:      2025-12-24 14:44:06
  * @Copyright  1.0
-->
<template>
  <div class="quarter-statistics">
    <!-- 查询表单 -->
    <a-card title="查询条件" size="small" class="query-card">
      <a-form :model="queryForm" layout="inline">
        <a-form-item label="季度">
          <a-select v-model:value="queryForm.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-select v-model:value="queryForm.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-input v-model:value="queryForm.lawyerName" placeholder="请输入律师姓名" style="width: 150px" />
        </a-form-item>
        
        <a-form-item label="律所名称">
          <a-input v-model:value="queryForm.firmName" placeholder="请输入律所名称" style="width: 150px" />
        </a-form-item>
        
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <SearchOutlined />
            查询
          </a-button>
          <a-button @click="handleReset" style="margin-left: 8px">
            <ReloadOutlined />
            重置
          </a-button>
          <a-button @click="handleExport" type="primary" style="margin-left: 8px">
            <ExportOutlined />
            导出Excel
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 统计表格 -->
    <a-card title="季/年度服务统计" size="small" class="table-card">
      <a-table
        :columns="columns"
        :dataSource="tableData"
        :pagination="pagination"
        :loading="loading"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'quarterlyServiceDuration'">
            {{ record.quarterlyServiceDuration }} 小时
          </template>
          <template v-else-if="column.dataIndex === 'quarterlyServiceCost'">
            {{ record.quarterlyServiceCost }} 元
          </template>
          <template v-else-if="column.dataIndex === 'annualServiceDuration'">
            {{ record.annualServiceDuration }} 小时
          </template>
          <template v-else-if="column.dataIndex === 'annualServiceCost'">
            {{ record.annualServiceCost }} 元
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api';

// 查询表单
const queryForm = reactive({
  quarter: undefined,
  year: new Date().getFullYear(),
  lawyerName: '',
  firmName: ''
});

// 季度选项
const quarterOptions = [
  { label: '第一季度', value: 1 },
  { label: '第二季度', value: 2 },
  { label: '第三季度', value: 3 },
  { label: '第四季度', value: 4 }
];

// 年度选项（近5年）
const yearOptions = ref([]);

// 表格列定义
const columns = [
  {
    title: '执业律师姓名',
    dataIndex: 'lawyerName',
    key: 'lawyerName',
    width: 120
  },
  {
    title: '执业证号',
    dataIndex: 'certificateNumber',
    key: 'certificateNumber',
    width: 120
  },
  {
    title: '季度累计服务时长',
    dataIndex: 'quarterlyServiceDuration',
    key: 'quarterlyServiceDuration',
    width: 120
  },
  {
    title: '季度累计服务成本',
    dataIndex: 'quarterlyServiceCost',
    key: 'quarterlyServiceCost',
    width: 120
  },
  {
    title: '年度累计服务时长',
    dataIndex: 'annualServiceDuration',
    key: 'annualServiceDuration',
    width: 120
  },
  {
    title: '年度累计服务成本',
    dataIndex: 'annualServiceCost',
    key: 'annualServiceCost',
    width: 120
  }
];

const tableData = ref([]);
const loading = ref(false);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条`
});

// 初始化年度选项
function initYearOptions() {
  const currentYear = new Date().getFullYear();
  for (let i = currentYear; i >= currentYear - 4; i--) {
    yearOptions.value.push(i);
  }
}

// 查询数据
async function handleSearch() {
  loading.value = true;
  try {
    const params = {
      ...queryForm,
      pageNum: pagination.current,
      pageSize: pagination.pageSize
    };
    
    // 调用API获取季度统计数据
    const result = await serviceApplicationsApi.statistics(params);
    
    if (result.data) {
      tableData.value = result.data.list || [];
      pagination.total = result.data.total || 0;
    }
  } catch (error) {
    message.error('查询失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
}

// 重置查询条件
function handleReset() {
  Object.assign(queryForm, {
    quarter: undefined,
    year: new Date().getFullYear(),
    lawyerName: '',
    firmName: ''
  });
  handleSearch();
}

// 导出Excel
async function handleExport() {
  try {
    // 构建导出参数，包含页面输入的查询条件
    const exportParams = {
      quarter: queryForm.quarter,
      year: queryForm.year,
      lawyerName: queryForm.lawyerName,
      firmName: queryForm.firmName
    };
    
      // 调用导出接口
      await serviceApplicationsApi.exportLawyer(exportParams);
  
      message.success('导出成功');
  } catch (error) {
    message.error('导出失败');
    console.error('导出失败:', error);
  }
}

// 分页变化
function handleTableChange(pag) {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  handleSearch();
}

onMounted(() => {
  initYearOptions();
  handleSearch();
});
</script>

<style scoped>
.quarter-statistics {
  padding: 0;
}

.query-card {
  margin-bottom: 16px;
}

.table-card {
  margin-bottom: 0;
}
</style>