增加项目成本页面

pages/workbench/cost/cost.vue

@@ -12,37 +12,67 @@
 			<view class="date-picker-container">
 				<picker mode="date" @change="onDateChange" fields="month" :value="currentDate" class="date-picker">
 					<view class="picker-view">
-						<text>{{ formattedDate }}</text> 
+						<text>{{ formattedDate }}</text>
 					</view>
 				</picker>
 			</view>
-			<fad-collapse title="指标汇总"> 
-				<SummaryCardsVue :cardsData="cardData"/>
+			<fad-collapse title="指标汇总">
+				<SummaryCardsVue :cardsData="cardData" />
 			</fad-collapse>
 
 			<fad-collapse title="月度收支">
-				<!-- <BarVue :chart-data="barChartData"></BarVue> -->
+				<template #extra>
+					<view @click.stop>
+						<uni-data-checkbox @click.stop mode="tag" v-model="chartType"
+							:localdata="[{ value: 'line', text: '折线图' }, { value: 'column', text: '柱状图' }]" />
+					</view> 
+				</template>
+				<BarVue :chart-data="barChartData" v-if="chartType == 'column'"></BarVue>
+				<LineVue :chart-data="barChartData" v-else></LineVue>
 			</fad-collapse>
 
-			<fad-collapse title="近六月趋势">
+			<!-- <fad-collapse title="近六月趋势">
 
-			</fad-collapse>
+			</fad-collapse> -->
 
 			<fad-collapse title="项目支出占比">
 				<PieVue :project-list="projectList"></PieVue>
 			</fad-collapse>
 
 			<fad-collapse title="明细表格">
-			
+				<TableVue :table-data="costList" @row="showCostDetail"></TableVue>
+				<view v-if="tableTotal > 0" class="simple-pagination">
+					<!-- 上一页按钮（当前页=1时禁用） -->
+					<button class="page-btn" :disabled="tableQueryParams.pageNum === 1" @click="handlePrevPage">
+						上一页
+					</button>
+
+					<!-- 页数/总数显示 -->
+					<view class="page-info">
+						第{{ tableQueryParams.pageNum }}页 / 共{{ totalPages }}页
+						（总计{{ tableTotal }}条）
+					</view>
+
+					<!-- 下一页按钮（当前页=总页数时禁用） -->
+					<button class="page-btn" :disabled="tableQueryParams.pageNum === totalPages" @click="handleNextPage">
+						下一页
+					</button>
+				</view>
 			</fad-collapse>
 		</view>
+		
+		<uni-popup ref="popup" type="top">
+			<DetailVue :detailData='costDetail'></DetailVue>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import {
 		barData,
-		findFinanceList2
+		findFinanceList2,
+		getCostDetailList,
+		getCostDetailById
 	} from '@/api/oa/finance/finance';
 	import {
 		getExchangeRate
@@ -54,6 +84,9 @@
 	import SummaryCardsVue from './components/SummaryCards.vue';
 	import PieVue from './components/Pie.vue'
 	import BarVue from './components/Bar.vue';
+	import LineVue from './components/Line.vue';
+	import TableVue from './components/Table.vue';
+	import DetailVue from './components/Detail.vue';
 
 	export default {
 		data() {
@@ -66,21 +99,37 @@
 				projectList: [], // projectData2接口返回的列表
 				financeList: [], // findFinanceList2接口返回的列表
 				queryFinanceParams: {}, // 接口请求参数（需确保已定义）
-				dateForProject: '' ,// 项目接口日期参数（需确保已定义）
+				dateForProject: '', // 项目接口日期参数（需确保已定义）
 				barChartData: {},
 				exchangeRate: 7,
+				chartType: 'column',
+				costList: [],
+				tableQueryParams: {
+					pageSize: 10,
+					pageNum: 1,
+				},
+				tableTotal: 0,
+				costDetail: {}
 			};
 		},
 		computed: {
 			formattedDate() {
 				const [year, month] = this.currentDate.split('-');
 				return `${year}年${month}月`;
+			},
+			totalPages() {
+				if (this.tableTotal === 0) return 0; // 无数据时总页数为0
+				// 总页数 = 总条数 ÷ 每页条数，向上取整（如15条/10条=2页）
+				return Math.ceil(this.tableTotal / this.tableQueryParams.pageSize);
 			}
 		},
 		components: {
 			SummaryCardsVue,
 			PieVue,
-			BarVue
+			BarVue,
+			LineVue,
+			TableVue,
+			DetailVue
 		},
 		onLoad() {
 			// 初始化日期为当前月份
@@ -98,29 +147,63 @@
 					this.monthlyDataMap[m].exchangeRate = this.exchangeRate;
 				}
 			},
+			showCostDetail(row) {
+				getCostDetailById(row.projectId).then(response => {
+				  this.costDetail = response.data;
+				  this.$refs.popup.open()
+				})
+			},
+			/**
+			 * 上一页按钮事件
+			 */
+			handlePrevPage() {
+				if (this.tableQueryParams.pageNum > 1) {
+					this.tableQueryParams.pageNum--; // 页码减1
+					this.loadTableData(); // 重新加载当前页数据
+				}
+			},
+
+			/**
+			 * 下一页按钮事件
+			 */
+			handleNextPage() {
+				// 只有当前页 < 总页数时，才能切换下一页
+				if (this.tableQueryParams.pageNum < this.totalPages) {
+					this.tableQueryParams.pageNum++; // 页码加1
+					this.loadTableData(); // 重新加载当前页数据
+				}
+			},
 			onDateChange(e) {
-			  const value = e.detail.value;
-			  this.currentDate = value + '-01';
-				
+				const value = e.detail.value;
+				this.currentDate = value + '-01';
+				this.tableQueryParams.pageNum = 1;
 				this.loadAllData()
 			},
+			loadTableData() {
+				getCostDetailList(this.tableQueryParams).then(res => {
+					this.costList = res.rows;
+					this.tableTotal = res.total;
+				})
+			},
 			async loadAllData() {
 				this.loading = true;
 				this.exchangeRate = await getExchangeRate()
-				barData(this.queryFinanceParams)
-					.then(res => {
-						this.currentList = res.data;
-					})
-					.then(async () => {
-						const months = this.currentList.map(i => i.month);
-						await this.loadAllExchangeRates(months);
-						return Promise.all([
-							projectData2(this.currentDate),
-							findFinanceList2({
-								date: this.currentDate
-							})
-						]);
-					})
+
+				const res = await barData(this.queryFinanceParams)
+
+				this.currentList = res.data;
+				const months = this.currentList.map(i => i.month);
+				await this.loadAllExchangeRates(months);
+				this.loadTableData()
+				Promise.all([
+						projectData2(this.currentDate),
+						findFinanceList2({
+							date: this.currentDate,
+							pageSize: 9999,
+							financeType: '',
+							pageNum: 1
+						})
+					])
 					.then(([projRes, finRes]) => {
 						this.projectList = projRes.data;
 						this.financeList = finRes.data;
@@ -128,103 +211,152 @@
 					})
 					.finally(() => {
 						this.loading = false;
-						console.log('loadAllData done', this.monthlyDataMap);
-						this.$nextTick(this.initCharts);
 					});
 			},
 			computeSummaries() {
-			  // 1. 获取当前选中月份（格式：YYYY-MM，从currentDate提取）
-			  const currentMonth = this.currentDate.slice(0, 7);
-			
-			  // 2. 初始化月度数据映射（确保每个月份的基础结构存在）
-			  this.currentList.forEach(item => {
-			    const month = item.month;
-			    if (!this.monthlyDataMap[month]) {
-			      this.monthlyDataMap[month] = {
-			        outTotal: 0,
-			        inCNY: 0,
-			        inUSD: 0,
-			        exchangeRate: this.monthlyDataMap[month]?.exchangeRate || 0 // 保留已有汇率
-			      };
-			    }
-			    // 赋值出库总额（从barData接口获取）
-			    this.monthlyDataMap[month].outTotal = item.totalOut;
-			  });
-			
-			  // 3. 初始化统计变量（月度/项目收支）
-			  const initStats = {
-			    monthlyOutCNY: 0, // 月度总支出（人民币）
-			    monthlyOutUSD: 0, // 月度总支出（美元）
-			    monthlyInCNY: 0,  // 月度总收入（人民币）
-			    monthlyInUSD: 0,  // 月度总收入（美元）
-			    projectOutCNY: 0, // 项目支出（人民币）
-			    projectOutUSD: 0, // 项目支出（美元）
-			    projectInCNY: 0,  // 项目收入（人民币）
-			    projectInUSD: 0   // 项目收入（美元）
-			  };
-			  Object.assign(this, initStats);
-			
-			  // 4. 遍历财务明细，计算收支数据
-			  this.financeList.forEach(finItem => {
-			    const itemMonth = finItem.date.slice(0, 7); // 明细所属月份
-			    const amount = Number(finItem.amount) || 0; // 金额（转数字，避免NaN）
-			    const isOut = finItem.type === '0'; // 0=支出，1=收入（按业务定义）
-			    const currency = finItem.currency === 'USD' ? 'USD' : 'CNY'; // 货币类型
-			
-			    // 4.1 更新月度收入数据（存入monthlyDataMap）
-			    const monthData = this.monthlyDataMap[itemMonth];
-			    if (monthData && !isOut) {
-			      monthData[`in${currency}`] += amount;
-			    }
-			
-			    // 4.2 计算「当前选中月份」的统计数据
-			    if (itemMonth === currentMonth) {
-			      if (isOut) {
-			        // 支出：更新月度总支出 + 项目支出（有projectId才统计项目）
-			        this[`monthlyOut${currency}`] += amount;
-			        if (finItem.projectId) {
-			          this[`projectOut${currency}`] += amount;
-			        }
-			      } else {
-			        // 收入：更新月度总收入 + 项目收入（有projectId才统计项目）
-			        this[`monthlyIn${currency}`] += amount;
-			        if (finItem.projectId) {
-			          this[`projectIn${currency}`] += amount;
-			        }
-			      }
-			    }
-			  });
-			
-			  // 5. 构建汇总卡片数据（核心：适配SummaryCards组件）
+				// 1. 获取当前选中月份（格式：YYYY-MM，从currentDate提取）
+				const currentMonth = this.currentDate.slice(0, 7);
+
+				// 2. 初始化月度数据映射（确保每个月份的基础结构存在）
+				this.currentList.forEach(item => {
+					const month = item.month;
+					this.monthlyDataMap[month] = {
+						outTotal: 0,
+						inCNY: 0,
+						inUSD: 0,
+						exchangeRate: this.monthlyDataMap[month]?.exchangeRate || 0 // 保留已有汇率
+					};
+					// 赋值支出总额（从barData接口获取）
+					this.monthlyDataMap[month].outTotal = item.totalOut;
+				});
+
+				// 3. 初始化统计变量（月度/项目收支）
+				const initStats = {
+					monthlyOutCNY: 0, // 月度总支出（人民币）
+					monthlyOutUSD: 0, // 月度总支出（美元）
+					monthlyInCNY: 0, // 月度总收入（人民币）
+					monthlyInUSD: 0, // 月度总收入（美元）
+					projectOutCNY: 0, // 项目支出（人民币）
+					projectOutUSD: 0, // 项目支出（美元）
+					projectInCNY: 0, // 项目收入（人民币）
+					projectInUSD: 0 // 项目收入（美元）
+				};
+				Object.assign(this, initStats);
+
+				// 4. 遍历财务明细，计算收支数据
+				this.financeList.forEach(finItem => {
+					const itemMonth = finItem.date.slice(0, 7); // 明细所属月份
+					const amount = Number(finItem.amount) || 0; // 金额（转数字，避免NaN）
+					const isOut = finItem.type === '0'; // 0=支出，1=收入（按业务定义）
+					const currency = finItem.currency === 'USD' ? 'USD' : 'CNY'; // 货币类型
+
+					// 4.1 更新月度收入数据（存入monthlyDataMap）
+					const monthData = this.monthlyDataMap[itemMonth];
+					if (monthData && !isOut) {
+						monthData[`in${currency}`] += amount;
+					}
+
+					// 4.2 计算「当前选中月份」的统计数据
+					if (itemMonth === currentMonth) {
+						if (isOut) {
+							// 支出：更新月度总支出 + 项目支出（有projectId才统计项目）
+							this[`monthlyOut${currency}`] += amount;
+							if (finItem.projectId) {
+								this[`projectOut${currency}`] += amount;
+							}
+						} else {
+							// 收入：更新月度总收入 + 项目收入（有projectId才统计项目）
+							this[`monthlyIn${currency}`] += amount;
+							if (finItem.projectId) {
+								this[`projectIn${currency}`] += amount;
+							}
+						}
+					}
+				});
+
+				// 5. 构建汇总卡片数据（核心：适配SummaryCards组件）
 				console.log(this.monthlyDataMap, '月度数据')
-			  this.cardData = [
-			    {
-			      title: '月度总支出',
-			      valueCNY: Number(this.monthlyOutCNY.toFixed(2)), // 保留2位小数，转数字
-			      valueUSD: Number(this.monthlyOutUSD.toFixed(2))
-			    },
-			    {
-			      title: '月度总收入',
-			      valueCNY: Number(this.monthlyInCNY.toFixed(2)),
-			      valueUSD: Number(this.monthlyInUSD.toFixed(2))
-			    },
-			    {
-			      title: '项目支出',
-			      valueCNY: Number(this.projectOutCNY.toFixed(2)),
-			      valueUSD: Number(this.projectOutUSD.toFixed(2))
-			    },
-			    {
-			      title: '项目收入',
-			      valueCNY: Number(this.projectInCNY.toFixed(2)),
-			      valueUSD: Number(this.projectInUSD.toFixed(2))
-			    }
-			  ];
+				const categories = Object.keys(this.monthlyDataMap);
+				console.log('分类', categories)
+				const dataList =
+					this.barChartData = {
+						categories,
+						series: [{
+								name: '支出',
+								data: Object.values(this.monthlyDataMap).map(item => item.outTotal)
+							},
+							{
+								name: '收入(USD)',
+								data: Object.values(this.monthlyDataMap).map(item => item.inUSD)
+							},
+							{
+								name: '支出(CNY)',
+								data: Object.values(this.monthlyDataMap).map(item => item.inCNY)
+							}
+						]
+					}
+				console.log(this.barChartData)
+				this.cardData = [{
+						title: '月度总支出',
+						valueCNY: Number(this.monthlyOutCNY.toFixed(2)), // 保留2位小数，转数字
+						valueUSD: Number(this.monthlyOutUSD.toFixed(2))
+					},
+					{
+						title: '月度总收入',
+						valueCNY: Number(this.monthlyInCNY.toFixed(2)),
+						valueUSD: Number(this.monthlyInUSD.toFixed(2))
+					},
+					{
+						title: '项目支出',
+						valueCNY: Number(this.projectOutCNY.toFixed(2)),
+						valueUSD: Number(this.projectOutUSD.toFixed(2))
+					},
+					{
+						title: '项目收入',
+						valueCNY: Number(this.projectInCNY.toFixed(2)),
+						valueUSD: Number(this.projectInUSD.toFixed(2))
+					}
+				];
 			},
 		}
 	};
 </script>
 
 <style scoped>
+	/* 简化版分页容器：居中显示，上下留间距 */
+	  .simple-pagination {
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    gap: 20rpx; /* 按钮与文字之间的间距 */
+	    margin-top: 24rpx;
+	    margin-bottom: 16rpx;
+	    padding: 8rpx 0;
+	  }
+	
+	  /* 分页按钮：统一样式，禁用时灰色 */
+	  .page-btn {
+	    padding: 8rpx 24rpx;
+	    background-color: #007aff;
+	    color: #fff;
+	    border: none;
+	    border-radius: 8rpx;
+	    font-size: 24rpx;
+	  }
+	
+	  /* 按钮禁用状态：灰色背景，无法点击 */
+	  .page-btn:disabled {
+	    background-color: #e5e5e5;
+	    color: #999;
+	    cursor: not-allowed;
+	  }
+	
+	  /* 页数信息：灰色文字，适中大小 */
+	  .page-info {
+	    font-size: 24rpx;
+	    color: #666;
+	  }
+		
 	.container {
 		padding: 16rpx;
 		background-color: #f5f5f5;
@@ -273,6 +405,7 @@
 		background-color: #fff;
 		border-radius: 8rpx;
 		padding: 16rpx;
+		margin-bottom: 10rpx;
 		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 	}