✨ feat: 增加智慧库房，完善项目盈亏
This commit is contained in:
砂糖
201
pages/workbench/smartWM/smartWM.vue
Normal file
201
pages/workbench/smartWM/smartWM.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<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 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>
|
||||
Reference in New Issue
Block a user