【增加】充值记录

src/components/congzhijilu/congzhijilu.css

@@ -0,0 +1,269 @@
+/* congzhijilu */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+.tag {
+	width: 108px;
+	height: 40px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #000000;
+	line-height: 54px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.riqi>>>.el-input__inner {
+	border: 1px solid #626262;
+	width: 280px;
+}
+
+.riqi>>>.el-range-input,
+.riqi>>>.el-range__icon {
+	font-size: 18px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 320px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.zhuangtai>>>.el-input__inner {
+	font-size: 20px;
+	width: 150px;
+	border: 1px solid #4D4D4D;
+}
+
+.el-button {
+	margin: 0 0 0 0;
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	height: 46px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 46px;
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+/* dev-mgr */

src/components/congzhijilu/congzhijilu.vue

@@ -0,0 +1,336 @@
+<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">
+				<el-form :inline="true" class="demo-form-inline">
+					<el-form-item label="" class="riqi">
+						<el-date-picker v-model="dateFromTo" type="daterange" range-separator="至" start-placeholder="开始日期"
+							end-placeholder="结束日期" value-format="yyyy-MM-dd">
+						</el-date-picker>
+					</el-form-item>
+					<el-form-item label="" class="shuibiaoId">
+						<el-input v-model="searchformUser" clearable placeholder="请输入户号/户名/联系人/手机号"></el-input>
+					</el-form-item>
+					<el-form-item label="" class="zhuangtai">
+						<el-select v-model="value" clearable placeholder="支付状态">
+							<el-option v-for="item in options" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" icon="el-icon-document" @click="onExport">导出</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="序号">
+						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
+					</el-table-column>
+					<el-table-column align="center" label="户号">
+						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
+					</el-table-column>
+					<el-table-column prop="user_name" label="联系人" align="center"></el-table-column>
+					<el-table-column prop="user_name" label="交易流水号" align="center"></el-table-column>
+					<el-table-column prop="balance" label="支付余额（元）" align="center" :formatter="formatBalance"
+						show-overflow-tooltip></el-table-column>
+					<el-table-column prop="balance" label="到账余额（元）" align="center" :formatter="formatBalance"
+						show-overflow-tooltip></el-table-column>
+					<el-table-column prop="user_name" label="支付状态" align="center"></el-table-column>
+					<el-table-column prop="user_name" label="支付时间" align="center"></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>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dateFromTo: '',
+				options: [{
+					value: '选项1',
+					label: '成功'
+				}, {
+					value: '选项2',
+					label: '失败'
+				}],
+				value: '',
+				// total_amount: 0.0.toFixed(2), // 余额共计
+				view_total_amount: 0.0.toFixed(2), // 查看记录对话框中的余额共计
+				searchformUser: '', // 查找的姓名
+				select_month: '', // 选择的月份
+				// 余额列表
+				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.dateFromTo);
+				// 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
+				// 组合参数
+				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("congzhijilu.css");
+</style>