hotWaterManagerWeb/src/components/balance/Balance.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">余额管理</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<div class="total_balance">余额共计：{{total_amount}}元</div>
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="姓名：" class="shuibiaoId">
						<el-input v-model="searchformUser" placeholder="请输入姓名" maxlength="16"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查找</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<el-table-column align="center" label="学号" width="260">
						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
					</el-table-column>
					<el-table-column prop="user_name" label="姓名" align="center" width="400"></el-table-column>
					<el-table-column prop="balance" label="余额（元）" :formatter="formatBalance" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" align="center" width="280">
						<el-button type="text" slot-scope="scope" @click="handleShowDialog(scope.$index, scope.row)">
							查看记录
						</el-button>
					</el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
							:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
							@current-change="handleCurrentChange"></el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 充值记录对话框 -->
				<el-dialog title="充值记录" :visible.sync="viewdialogFormVisible" :close-on-click-modal="false"
					:close-on-press-escape="false" width="640px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<div class="right-tip">共计：{{ view_total_amount }}元</div>
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="筛选条件：">
							<div class="block">
								<el-date-picker v-model="select_month" value-format="yyyy-MM" type="month"
									placeholder="选择月" @change="handleChangeMonth">
								</el-date-picker>
							</div>
						</el-form-item>
					</el-form>
					<el-table ref="multipleTable" :data="view_tableData" tooltip-effect="dark" style="width: 100%"
						highlight-current-row>
						<el-table-column align="center" label="时间">
							<template slot-scope="scope">{{ scope.row.re_time }}</template>
						</el-table-column>
						<el-table-column align="center" prop="account" label="金额" :formatter="formatBalance" show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<div class="dialog-pages">
							<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
								:hide-on-single-page="true" :page-size="pageRows" :total="view_rows_total"
								@current-change="handleViewCurrentChange"></el-pagination>
						</div>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				total_amount: 0.0.toFixed(2), // 余额共计
				view_total_amount: 0.0.toFixed(2), // 查看记录对话框中的余额共计
				searchformUser: '', // 查找的姓名
				viewdialogFormVisible: false, // 显示隐藏查看记录对话框
				select_month: '', // 选择的月份
				formLabelWidth: '120px',
				// 余额列表
				tableData: [], // 余额列表
				rows_total: 0, // 余额列表总记录数
				currentPage: 1, // 余额列表当前页
				// 查看记录
				view_tableData: [], // 查看记录列表
				view_rows_total: 0, // 查看记录列表总记录数
				view_currentPage: 1, // 查看记录当前页

				pageRows: 8, // 每页记录数
				stu_number: '' // 学号
			}
		},
		created() {
			// 获取总金额
			this.get_total_amount()
			// 获取余额列表
			let params = {
				page: this.currentPage,
				rows: this.pageRows
			}
			this.get_amount_list(params)
		},
		methods: {
			formatBalance: (row, column, cellValue, index) => {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				return cellValue.toFixed(2)
			},
			/**
			 * 获取当月，格式YYYY-MM
			 */
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month;
				return currentdate;
			},
			/**
			 * 获取余额列表
			 */
			get_amount_list(params) {
				var _this = this
				_this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterMoney.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.success('【获取余额列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取余额列表】请求异常: ' + err);
					})
			},
			/**
			 * 获取总金额
			 */
			get_total_amount() {
				var _this = this
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterfindMoneyTotal.action')
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.money) != 'undefined' && res.data.money != '' && JSON.stringify(res
								.data) != '{}') {
							// _this.$message.success('数据加载成功！');
							let amount = res.data.money
							_this.total_amount = parseFloat(amount).toFixed(2)
						} else {
							_this.$message.success('【获取总金额】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取总金额】请求异常: ' + err);
					})
			},
			/**
			 * 余额列表改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.currentPage = val
				var params = {}
				if (this.searchformUser != '' & typeof(this.searchformUser) != 'undefined') {
					params = {
						page: this.currentPage,
						rows: this.pageRows,
						user_name: this.searchformUser
					}
				} else {
					params = {
						page: this.currentPage,
						rows: this.pageRows
					}
				}
				// 获取余额列表
				this.get_amount_list(params)
			},
			/**
			 * 查找姓名对应的 余额列表
			 */
			onSearch() {
				// console.log(this.searchformUser);
				this.currentPage = 1
				this.handleCurrentChange(this.currentPage)
			},
			/**
			 * 查看充值记录列表
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleShowDialog(index, row) {
				// console.log(index, row)
				// 获取当月
				this.select_month = this.getNowFormatDate();
				this.stu_number = row.stu_number
				// 显示查看充值记录对话框
				this.viewdialogFormVisible = true
				// 组合参数
				let params = {
					stu_number: this.stu_number,
					time: this.select_month,
					page: 1,
					rows: this.pageRows
				}

				// 获取查看记录列表
				this.get_view_list(params)

				// 充值记录总计
				this.get_view_total_amount()
			},
			/**
			 * 充值记录总计
			 */
			get_view_total_amount() {
				var _this = this
				_this.view_total_amount = 0.0.toFixed(2)
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterrechargeTotal.action', {
						params: {
							re_time: this.select_month,
							stu_number: this.stu_number
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.money) != 'undefined' && res.data.money != '' && JSON.stringify(res
								.data) != '{}') {
							// _this.$message.success('数据加载成功！');
							let amount = res.data.money
							_this.view_total_amount = parseFloat(amount).toFixed(2)
						} else {
							_this.$message.success('【充值记录总计】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【充值记录总计】请求异常: ' + err);
					})
			},
			/**
			 * 选择月份，更新查看记录列表
			 */
			handleChangeMonth() {
				// console.log(this.select_month);
				this.currentPage = 1
				// 组合参数
				let params = {
					stu_number: this.stu_number,
					time: this.select_month,
					page: this.currentPage,
					rows: this.pageRows
				}

				// 获取查看记录列表
				this.get_view_list(params)
				
				// 充值记录总计
				this.get_view_total_amount()
			},
			/**
			 * 获取查看记录列表
			 */
			get_view_list(params) {
				var _this = this
				_this.view_tableData = []
				// _this.view_rows_total = 0
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterfindRecharge.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							// _this.$message.success('数据加载成功！');
							_this.view_tableData = res.data.rows
							_this.view_rows_total = res.data.total
						} else {
							_this.$message.success('【获取查看记录列表】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取查看记录列表】请求异常: ' + err);
					})
			},
			/**
			 * 查看记录对话框改变页码
			 * @param {Object} val
			 */
			handleViewCurrentChange(val) {
				// console.log(val);
				this.view_currentPage = val

				// 组合参数
				let params = {
					stu_number: this.stu_number,
					time: this.select_month,
					page: this.view_currentPage,
					rows: this.pageRows
				}

				// 获取余额列表
				this.get_view_list(params)
			}
		}
	}
</script>

<style scoped>
	@import url("Balance.css");
</style>