AttorneySubsystemVue/src/views/business/erp/service/law-firm.vue

<!--
  * 律所统计概览组件（CEO专用）
  *
  * @Author:    Assistant
  * @Date:      2026-01-11
  * @Description: CEO角色查看各律所服务申报统计概览
-->
<template>
  <div class="law-firm-statistics">
    
    <!-- 查询视图 -->
    <div v-if="!showDetailView">
      <!-- 提示信息 -->
      <div class="info-section">
        <p>作为协会，您可以查看机构级别的统计数据，数据以Excel表格样式展示。</p>
        <p>请选择需要查看的季度和年度，然后点击查询按钮。</p>
      </div>
      
      <!-- 查询条件 -->
      <div class="query-section">
        <a-form :model="queryForm" layout="horizontal">
          <div class="query-row">
            <a-form-item label="年度" class="query-item">
              <a-select v-model:value="queryForm.year" placeholder="请选择年度" style="width: 300px">
                <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="季度" class="query-item">
              <a-select v-model:value="queryForm.quarter" placeholder="请选择季度" style="width: 300px">
                <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="机构名称" class="query-item">
              <DepartmentTreeSelect 
                v-model:value="queryForm.firmId" 
                placeholder="请选择部门" 
                style="width: 300px" 
              />
            </a-form-item>
          </div>
          <div class="button-row">
            <a-button type="primary" @click="handleQuery" :loading="loading" class="query-button">
              查询数据
            </a-button>
            <a-button @click="handleReset" class="reset-button">
              重置
            </a-button>
          </div>
        </a-form>
      </div>
    </div>
    
    <!-- 详情视图 -->
    <div v-else>
      <!-- 返回按钮 -->
      <div class="back-section">
        <a-button @click="showDetailView = false" class="back-button">
          <ArrowLeftOutlined />
          返回查询
        </a-button>
      </div>
      
      <!-- 详情组件 -->
      <FirmStatisticsDetail :params="detailParams" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { SearchOutlined, ReloadOutlined, DownloadOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api';
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';
import FirmStatisticsDetail from '/@/views/business/erp/service/firm-statistics-detail.vue'; // 导入detail组件

// 响应式数据
const loading = ref(false);
const exportLoading = ref(false);
const showDetailView = ref(false); // 控制是否显示详情视图
const detailParams = ref(null); // 传递给详情组件的参数

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

// 查询表单
const queryForm = reactive({
  year: new Date().getFullYear(),
  quarter: null,
  firmId: null
});

// 初始化年度选项
function initYearOptions() {
  const currentYear = new Date().getFullYear();
  const years = [];
  for (let i = currentYear - 5; i <= currentYear + 1; i++) {
    years.push(i);
  }
  yearOptions.value = years;
}

// 查询数据，在页面内切换到详情视图
async function handleQuery() {
  try {
    loading.value = true;
    
    // 设置查询参数，用于传递给详情组件
    detailParams.value = {
      year: queryForm.year,
      quarter: queryForm.quarter,
      firmId: queryForm.firmId
    };
    
    // 切换到详情视图
    showDetailView.value = true;
  } catch (error) {
    message.error('查询失败');
    console.error('查询失败:', error);
  } finally {
    loading.value = false;
  }
}

// 重置查询条件
function handleReset() {
  queryForm.year = new Date().getFullYear();
  queryForm.quarter = null;
  queryForm.firmId = null;
}

// 导出Excel报表
async function handleExportExcel() {
  try {
    exportLoading.value = true;
    const params = {
      year: queryForm.year,
      quarter: queryForm.quarter,
      firmId: queryForm.firmId
    };
    
    // 调用导出律所统计信息的API
    await serviceApplicationsApi.exportLawyer(params);
    message.success('导出成功');
  } catch (error) {
    message.error('导出失败');
    console.error('导出失败:', error);
  } finally {
    exportLoading.value = false;
  }
}

// 组件挂载时初始化
onMounted(() => {
  initYearOptions();
});
</script>

<style scoped>
.law-firm-statistics {
  padding: 20px;
  background: #fff;
  min-height: 600px;
}

/* 页面标题 */
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 16px;
}

/* 提示信息 */
.info-section {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 24px;
  line-height: 1.5;
  color: #333;
}

.info-section p {
  margin: 0;
  font-size: 14px;
}

.info-section p:first-child {
  margin-bottom: 8px;
}

/* 查询条件区域 */
.query-section {
  margin-bottom: 24px;
}

/* 查询行 */
.query-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* 查询项 */
.query-item {
  margin-bottom: 0 !important;
}

.query-item :deep(.ant-form-item-label) {
  font-weight: 400;
  color: #333;
  width: 100px;
  text-align: left;
  padding-right: 16px;
}

.query-item :deep(.ant-form-item-control) {
  flex: 1;
  min-width: 200px;
}

.query-item :deep(.ant-select-selector),
.query-item :deep(.ant-input) {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

/* 按钮行 */
.button-row {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 24px;
}

/* 按钮通用样式 */
.button-row .ant-btn {
  border-radius: 4px;
  font-weight: 500;
  height: 32px;
  padding: 0 16px;
}

/* 查询按钮 */
.query-button {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
}

.query-button:hover {
  background: #40a9ff;
  border-color: #40a9ff;
}

/* 重置按钮 */
.reset-button {
  background: white;
  border-color: #d9d9d9;
  color: #666;
}

.reset-button:hover {
  border-color: #40a9ff;
  color: #1890ff;
}

/* 返回按钮区域 */
.back-section {
  margin-bottom: 20px;
}

/* 返回按钮 */
.back-button {
  background: white;
  border-color: #d9d9d9;
  color: #666;
  margin-bottom: 16px;
}
</style>