93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
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> |