im-uniapp/pages/workbench/smartWM/smartWM.vue

<template>
	<view class="container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-view">
			<uni-loading-icon size="24" color="#007aff"></uni-loading-icon>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 内容区域（加载完成后显示） -->
		<view v-else>
			<!-- 1. 指标卡组件 - 折叠卡片 -->
			<fad-collapse title="指标汇总">
				<summary-cards-vue :cards-data="summaryCards"></summary-cards-vue>
			</fad-collapse>

			<!-- 2. 出入库对比图表 - 折叠卡片 -->
			<fad-collapse title="出入库对比分析">
				<in-out-compare-vue class="chart-item"></in-out-compare-vue>
			</fad-collapse>

			<!-- 3. 库存趋势图表 - 折叠卡片（日期选择器作为额外内容） -->
			<fad-collapse title="库存趋势分析">
				<!-- 标题右侧额外内容：日期选择器 -->
				<template #extra>
					<picker @click.stop mode="date" fields="month" :value="selectedDate" @change="onDateChange">
						<view class="picker-view">
							<uni-icons type="calendar" size="20" color="#666" class="icon-margin"></uni-icons>
							<text>{{ selectedDate }}</text>
						</view>
					</picker>
				</template>

				<!-- 折叠内容：库存趋势图表 -->
				<inventory-trend-vue class="chart-item" :date="selectedDate"></inventory-trend-vue>
			</fad-collapse>

			<!-- 4. 表格组件 - 折叠卡片 -->
			<fad-collapse title="最近库存记录">
				<recent-records-vue :table-data="tableData"></recent-records-vue>
			</fad-collapse>
		</view>
	</view>
</template>

<script>
	import SummaryCardsVue from './components/SummaryCards.vue';
	import RecentRecordsVue from './components/RecentRecords.vue';
	import InOutCompareVue from './components/InOutCompare.vue';
	import InventoryTrendVue from './components/InventoryTrend.vue';

	import {
		getSummaryData,
		recentWarehouse
	} from '@/api/oa/wms/oaWarehouse';

	export default {
		data() {
			return {
				// 加载状态标记
				loading: true,
				// 指标卡数据
				summaryCards: [],
				// 表格数据
				tableData: [],
				// 选中的日期（YYYY-mm格式）
				selectedDate: ''
			};
		},
		components: {
			SummaryCardsVue,
			RecentRecordsVue,
			InOutCompareVue,
			InventoryTrendVue
		},
		onLoad() {
			// 初始化默认日期为当前月份
			this.selectedDate = this.formatCurrentDate();
			// 页面加载时获取数据
			this.fetchAllData();
		},
		methods: {
			// 格式化当前日期为YYYY-mm
			formatCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				return `${year}-${month}`;
			},

			// 处理日期选择变化
			onDateChange(e) {
				this.selectedDate = e.detail.value;
			},

			// 统一获取所有数据
			fetchAllData() {
				this.loading = true;

				// 并行请求多个接口（提高效率）
				Promise.all([
					this.fetchSummaryData(),
					this.fetchTableData()
				]).then(() => {
					// 所有数据加载完成
					this.loading = false;
				}).catch(err => {
					console.error('数据加载失败', err);
					this.loading = false;
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				});
			},

			// 获取指标卡数据
			fetchSummaryData() {
				return new Promise((resolve, reject) => {
					getSummaryData().then(res => {
						if (res.code === 200) {
							this.summaryCards = res.data;
							resolve();
						} else {
							reject(new Error('指标卡数据获取失败'));
						}
					}).catch(err => {
						reject(err);
					});
				});
			},

			// 获取表格数据
			fetchTableData() {
				return new Promise((resolve, reject) => {
					const params = {
						pageNum: 1,
						pageSize: 10
					};

					recentWarehouse(params).then(res => {
						if (res.code === 200) {
							this.tableData = res.data;
							resolve();
						} else {
							reject(new Error('表格数据获取失败'));
						}
					}).catch(err => {
						reject(err);
					});
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 16rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 日期选择器在折叠卡片额外内容中的样式 */
	.picker-view {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
	}

	.icon-margin {
		margin-right: 8rpx;
	}

	/* 图表样式调整 */
	.chart-item {
		width: 100%;
	}

	/* 加载状态样式 */
	.loading-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	/* 折叠卡片间距 */
	.fad-collapse {
		margin-bottom: 16rpx;
	}
</style>