airConditionerWebManager/src/views/consumptionRecord/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">消费记录</div>
							<div class="title-detail">总余额：{{total_balance}}元</div>
							<div class="title-detail">总消费：{{total_consumption}}元</div>
							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
						</div>
						<div class="title-right">
							<el-button type="primary" @click="handler_download_excel">导出表单</el-button>
						</div>
					</div>
					<div class="cell-body">
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="关键字：">
								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="warning" @click="btn_search">查询</el-button>
							</el-form-item>
							<el-form-item label="时间筛选：">
								<el-date-picker v-model="search_datatime" type="datetimerange" align="right"
									start-placeholder="开始日期" end-placeholder="结束日期" @change="search_datetime_change"
									:default-time="['00:00:00', '23:59:59']" clearable
									value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="">
								<el-select v-model="formInline.state" placeholder="支付状态" @change="search_state_change"
									clearable>
									<el-option label="支付成功" value="1"></el-option>
									<el-option label="支付失败" value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style"
							:header-cell-style="header_cell_style">
							<el-table-column label="序号" align="center" width="90">
								<template slot-scope="scope">
									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.user_name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="手机" align="center" width="140">
								<template slot-scope="scope">
									<span>{{ scope.row.phone }}</span>
								</template>
							</el-table-column>
							<el-table-column label="楼栋" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.build }}</span>
								</template>
							</el-table-column>
							<el-table-column label="楼层" align="center" width="80">
								<template slot-scope="scope">
									<span>{{ scope.row.floors }}</span>
								</template>
							</el-table-column>
							<el-table-column label="房间号" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.dom }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作状态" align="center" width="90">
								<template slot-scope="scope">
									<span>{{ scope.row.handler_state }}</span>
								</template>
							</el-table-column>
							<el-table-column label="到账金额（元）" align="center" width="140">
								<template slot-scope="scope">
									<span>{{ scope.row.account }}</span>
								</template>
							</el-table-column>
							<el-table-column label="账户余额（元）" align="center" width="140">
								<template slot-scope="scope">
									<span>{{ scope.row.balance }}</span>
								</template>
							</el-table-column>
							<el-table-column label="支付状态" align="center" width="150">
								<template slot-scope="scope">
									<span v-if="scope.row.state == 1" class="txt-cell-green">支付成功</span>
									<span v-else class="txt-cell-red">支付失败</span>
								</template>
							</el-table-column>
							<el-table-column label="交易流水号" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.order_num }}</span>
								</template>
							</el-table-column>
							<el-table-column label="支付时间" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.time }}</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-table">
							<el-pagination @current-change="currentPageChange"
								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
								layout="prev, pager, next, jumper" :total="pagination.total">
							</el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getThreeData,
		getTableData,
		downloadExcel
	} from '@/api/consumptionRecord'
	export default {
		data() {
			return {
				total_balance: 0.0.toFixed(2), // 总余额
				total_consumption: 0.0.toFixed(2), // 总消费
				total_number: 0, // 总交易笔数
				formLabelWidth: '120px',
				// 表格单元格样式
				cell_style: {
					color: '#1A202B',
					'font-size': '14px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				// 表格头部样式
				header_cell_style: {
					background: '#E6ECFE',
					color: '#1A202B',
					'font-size': '16px',
					'font-family': 'Microsoft YaHei-3970(82674968)'
				},
				search_datatime: '',
				// 表单数据
				formInline: {
					user: '',
					startTime: '',
					endTime: '',
					state: ''
				},
				tableData: [],
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				}
			}
		},
		created() {
			// 获取3个数据
			this.get_three_data()
			// 获取消费记录,表格数据
			this.get_table_data('list')
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 下载Excel表格
			 */
			handler_download_excel() {
				// 开始发送请求，获取配置数据
				downloadExcel().then((res) => {
					// console.log(res);
					if (typeof res.code == 'undefined' || res.code == '') {
						this.$message.error('返回数据格式问题，code未获取到！')
						return
					}

					if (res.code == 200) {
						this.$message.success('下载成功！')
						let xls = 'http://demo.xwsyjjy.com' + res.downurl
						window.open(xls)
					} else {
						this.$message.error('返回的数据异常！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 搜索状态
			 */
			search_state_change() {
				// 刷新列表
				this.get_table_data('search')
			},
			/**
			 * 选取的时间进行格式化，赋值给formInline
			 */
			search_datetime_change() {
				// console.log(this.search_datatime);
				if (this.search_datatime == null) {
					this.formInline.startTime = ''
					this.formInline.endTime = ''
				} else {
					this.formInline.startTime = this.search_datatime[0]
					this.formInline.endTime = this.search_datatime[1]
				}
				// 刷新列表
				this.get_table_data('search')
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}
				if (param == 'search') {
					data.page = 1
					if (this.formInline.user !== '') {
						data.name_card = this.formInline.user
					}
					if (this.formInline.startTime !== '') {
						data.start_time = this.formInline.startTime
					}
					if (this.formInline.endTime !== '') {
						data.end_time = this.formInline.endTime
					}
					if (this.formInline.state !== '') {
						data.state = this.formInline.state
					}
				}
				// console.log(data);
				getTableData(data).then((res) => {
					// console.log(res);
					if (typeof res.rows !== 'undefined' && res.rows !== '') {
						this.pagination.total = res.total
						this.tableData = []
						for (var i = 0; i < res.rows.length; i++) {
							this.tableData.push(res.rows[i])
						}
					} else {
						this.tableData = []
						this.$message.warning('没有符合条件的数据！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 获取3个数据
			 */
			get_three_data() {
				getThreeData().then((res) => {
					// console.log(res);
					if (res.code == 200) {
						this.total_balance = res.TotalYe.toFixed(2) // 总余额
						this.total_consumption = res.zongConsume.toFixed(2) // 总消费
						this.total_number = res.zongRecord // 总交易笔数
					} else {
						this.$message.error('返回的数据异常！')
					}
				}).catch((err) => {
					// console.log(err);
					this.$message.error(err.message)
				})
			},
			/**
			 * 搜索
			 */
			btn_search() {
				this.get_table_data('search')
			},
			/**
			 * currentPage 改变时会触发
			 * @param {Object} val
			 */
			currentPageChange(val) {
				this.pagination.currentPage = val
				this.get_table_data('pages')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;
					// box-shadow: 5px 5px 15px #979797;
					box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title-left {
							display: flex;
							align-items: center;

							.title {
								font-size: 22px;
								font-family: Microsoft YaHei-3970(82674968);
								font-weight: bold;
								color: #1A202B;
							}

							.title-detail {
								margin-left: 50px;
								font-size: 18px;
								font-family: Microsoft YaHei-3970(82674968);
								color: #1A202B;
							}
						}

						.title-right {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.el-button {
								width: 110px;
								height: 46px;
								background: #2B4CFE;
								font-size: 18px;
								color: #FFFFFF;
								font-family: Microsoft YaHei-3970(82674968);
								border-radius: 5px;
							}

							.el-button--warning {
								background: #F88A64;
							}
						}
					}

					.cell-body {

						.el-form {
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.el-button--warning {
								background: #F88A64;
							}

							.el-date-editor--datetimerange {
								padding: 3px 8px;
								width: 370px;
							}

							.el-select {
								width: 130px;
							}
						}

						.txt-cell-green {
							color: #67C23A;
							font-size: 16px;
						}

						.txt-cell-red {
							color: #F56C6C;
							font-size: 16px;
						}

						.pagination-table {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							margin-top: 20px;
							padding-right: 100px;

							::v-deep .el-pagination {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}

							::v-deep .el-pagination ul {
								display: flex;

							}

							::v-deep .el-pagination button,
							::v-deep .el-pagination li {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								border-radius: 3px;
								font-size: 14px;
								margin: 0 5px;
							}

							::v-deep .el-pagination span {
								margin-left: 10px;
							}

							::v-deep .el-pagination .el-pagination__jump {
								font-size: 16px;
							}

							::v-deep .el-pagination .el-pagination__editor {
								width: 50px;
								height: 36px;
								margin: 0 5px;
							}

							::v-deep .el-pagination .el-input__inner {
								width: 50px;
								height: 36px;
								border: 1px solid #626262;
								margin: -4px 0 0 0;
							}
						}
					}
				}
			}
		}

		::v-deep .el-dialog {
			margin: 0 !important;
			width: 400px;
			height: 320px;
			background: #FFFFFF;
			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.el-dialog__header {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				padding: 30px;
				background: #E6EBFE;
				border-radius: 10px 10px 0px 0px;
				font-weight: bold;
			}

			.el-dialog__body {
				padding-bottom: 0;

				.el-form-item {
					margin-bottom: 0;

					.el-form-item__label,
					.el-form-item__content {
						font-size: 16px;
						font-family: Microsoft YaHei-3970(82674968);
						color: #53575A;
					}

					.el-input__inner {
						width: 100px;
					}
				}
			}
		}
	}
</style>