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="律师姓名" v-if="!isAdmin">
          <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="isAdmin ? '请输入机构名称' : '请输入律所名称'" 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="props.isAdmin ? '机构数据统计' : '季/年度服务统计'" 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, computed, watch } 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';

// 接收父组件传递的isAdmin参数
const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false
  }
});

// 查询表单
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 = computed(() => {
  if (props.isAdmin) {
    // Admin用户显示机构级别统计
    return [
      {
        title: '机构名称',
        dataIndex: 'firmName',
        key: 'firmName',
        width: 150
      },
      {
        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
      },
      {
        title: '律师总数',
        dataIndex: 'lawyerCount',
        key: 'lawyerCount',
        width: 100
      }
    ];
  } else {
    // 普通用户显示律师级别统计
    return [
      {
        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
    };
    
    let result;
    if (props.isAdmin) {
      // 管理员使用机构数据统计接口
      result = await serviceApplicationsApi.statisticsDepartment(params);
    } else {
      // 普通用户使用个人统计接口
      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() {
  const resetData = {
    quarter: undefined,
    year: new Date().getFullYear(),
    firmName: ''
  };
  
  // 普通用户才重置律师姓名
  if (!props.isAdmin) {
    resetData.lawyerName = '';
  }
  
  Object.assign(queryForm, resetData);
  handleSearch();
}

// 导出Excel
async function handleExport() {
  try {
    // 构建导出参数，包含页面输入的查询条件
    const exportParams = {
      quarter: queryForm.quarter,
      year: queryForm.year,
      lawyerName: queryForm.lawyerName,
      firmName: queryForm.firmName
    };
    
    if (props.isAdmin) {
      // 管理员导出机构数据
      await serviceApplicationsApi.exportDepartment(exportParams);
    } else {
      // 普通用户导出个人数据
      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();
}

// 监听isAdmin变化，重新查询数据
watch(() => props.isAdmin, (newVal, oldVal) => {
  console.log('isAdmin发生变化:', oldVal, '->', newVal);
  if (newVal !== oldVal) {
    // 重置分页并重新查询
    pagination.current = 1;
    handleSearch();
  }
}, { immediate: true });

onMounted(() => {
  initYearOptions();
  console.log('组件挂载，当前isAdmin:', props.isAdmin);
  handleSearch();
});
</script>

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

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

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