GEAR-OA/gear-ui3/src/views/dashboard/home.vue

<template>
  <!-- 布局组件：传入状态与方法 -->
  <DashboardLayout
    :title="title"
    :loading="loading"
    :is-refreshing="isRefreshing"
    :handle-back="handleBack"
    :handle-refresh="handleRefresh"
  >
    <!-- 图表网格组件：传入数据源 -->
    <DashboardChartsGrid
      :orders="orders"
      :order-details="orderDetails"
      :customers="customers"
      :return-exchanges="returnExchanges"
      :is-refreshing="isRefreshing"
    />
  </DashboardLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 导入子组件
import DashboardLayout from './layout/index.vue';
import DashboardChartsGrid from './grid/index.vue';

// API 请求（业务逻辑）
import { listOrder } from '@/api/oms/order';
import { listOrderDetail } from '@/api/oms/orderDetail';
import { listReturnExchange } from '@/api/oa/returnExchange';
import { listCustomer } from '@/api/oms/customer';

// 路由实例
const router = useRouter();

// 1. 页面状态（供子组件使用）
const title = ref('销售数据可视化大屏');
const loading = ref(false); // 加载态（全屏加载）
const isRefreshing = ref(false); // 刷新动画状态

// 2. 图表数据源（供图表组件使用）
const customers = ref([]);
const orders = ref([]);
const orderDetails = ref([]);
const returnExchanges = ref([]);

// 3. 生命周期：页面初始化加载数据
onMounted(() => {
  fetchAllData();
});

// 4. 核心方法：统一请求所有数据
const fetchAllData = async () => {
  try {
    loading.value = true;
    // 并行请求（提升加载效率）
    const [customerRes, orderRes, detailRes, returnRes] = await Promise.all([
      listCustomer({ pageNum: 1, pageSize: 1000 }),
      listOrder({ pageNum: 1, pageSize: 1000 }),
      listOrderDetail({ pageNum: 1, pageSize: 1000 }),
      listReturnExchange({ pageNum: 1, pageSize: 1000 })
    ]);
    // 适配接口返回格式（兼容 data/rows 两种常见结构）
    customers.value = customerRes.data || customerRes.rows || [];
    orders.value = orderRes.data || orderRes.rows || [];
    orderDetails.value = detailRes.data || detailRes.rows || [];
    returnExchanges.value = returnRes.data || returnRes.rows || [];
  } catch (error) {
    console.error('数据加载失败:', error);
    ElMessage.error('数据加载失败，请重试');
  } finally {
    loading.value = false;
    isRefreshing.value = false; // 结束刷新动画
  }
};

// 5. 导航方法：返回上一页
const handleBack = () => {
  router.back();
};

// 6. 刷新方法：触发数据重新加载
const handleRefresh = () => {
  isRefreshing.value = true; // 启动刷新动画
  // 延迟触发（确保动画可见，避免数据加载过快导致动画闪烁）
  setTimeout(() => {
    fetchAllData();
  }, 300);
};
</script>