airConditionerWebManager/src/views/operationRecord/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_recharge}}元</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" clearable placeholder="请输入操作账号"></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="['23:59:59', '23:59:59']" :picker-options="pickerOptions"
									value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" clearable>
								</el-date-picker>
							</el-form-item>
							<el-form-item label="操作：">
								<el-select v-model="formInline.re_state" clearable placeholder="请选择" @change="search_state_change">
									<el-option label="全部" value=""></el-option>
									<el-option label="补充" value="补充"></el-option>
									<el-option label="赠送" value="赠送"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style" v-loading="loading"
							:header-cell-style="header_cell_style">
							<el-table-column label="序号" align="center" width="80">
								<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.oper_user }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作模块" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.oper_interface }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作页面" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.oper_url }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作时间" align="center" width="150">
								<template slot-scope="scope">
									<span>{{ scope.row.oper_time }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作人IP" align="center" width="100">
								<template slot-scope="scope">
									<span>{{ scope.row.oper_ip }}</span>
								</template>
							</el-table-column>
							<el-table-column label="内容" align="center">
								<template slot-scope="scope">
									<span>{{ scope.row.oper_remark }}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" width="180">
								<template slot-scope="scope">
									<span v-if="scope.row.oper_way.includes('失败')" class="txt-cell-red">{{ scope.row.oper_way }}</span>
									<span v-else-if="scope.row.oper_way.includes('用户行为')">{{ scope.row.oper_way }}</span>
									<span v-else class="txt-cell-green">{{ scope.row.oper_way }}</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/operationRecord'
	export default {
		data() {
			return {
				// total_balance: 0.0.toFixed(2), // 总余额
				// total_recharge: 0.0.toFixed(2), // 总充值
				// total_number: 0, // 总交易笔数
				// 表格单元格样式
				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: [],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				// 表单数据
				formInline: {
					user: '',
					startTime: '',
					endTime: '',
					re_state: ''
				},
				tableData: [],
				cond_data: {},
				// 分页参数
				pagination: {
					currentPage: 1,
					pageSize: 9,
					total: 0
				},
				loading: true
			}
		},
		created() {
			// 获取消费记录,表格数据
			this.get_table_data('list')
		},
		mounted() {
			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
		},
		methods: {
			/**
			 * 选取的时间进行格式化，赋值给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')
			},
			/**
			 * 搜索状态
			 */
			search_state_change() {
				// 刷新列表
				this.get_table_data('search')
			},
			/**
			 * 获取消费记录,表格数据
			 */
			get_table_data(param) {
				this.loading = true
				this.get_condtion();

				let data = this.cond_data;
				if (param == 'search') {
					data.page = 1
					this.pagination.currentPage = 1
				}
				// 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)
				});
				this.loading = false;
			},
			/**
			 * 条件
			 */
			get_condtion() {
				let data = {
					page: this.pagination.currentPage,
					rows: this.pagination.pageSize
				}
				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.re_state !== '') {
					data.re_state = this.formInline.re_state
				}

				this.cond_data = data;
			},
			/**
			 * 搜索
			 */
			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;
							}
						}

						.btn-cell-blue {
							color: #2B4CFE;
							border: none;
							font-size: 18px;
						}

						.btn-cell-black {
							color: #53575A;
							border: none;
							font-size: 18px;
						}

						.txt-cell-green {
							color: #67C23A;
						}
						
						.txt-cell-blue {
							color: #0202c2;
						}

						.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-table .cell {
			padding: 0 3px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		::v-deep .el-table__row:hover .cell {
			overflow: visible;
			white-space: normal;
		}

		::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>