webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">日志查询分析</span></div>
			</div>
			<div>
				<!-- 表格 -->
				<el-table :data="tableData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">

					<el-table-column label="序号" min-width="80">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column label="请求时间" prop="createTime" min-width="250">
					</el-table-column>
					<el-table-column label="请求用户" prop="name" min-width="200">

					</el-table-column>
					<el-table-column label="请求IP" prop="ip" min-width="300">

					</el-table-column>
					<el-table-column label="请求设备" prop="browserName" min-width="250">
					</el-table-column>
					<el-table-column prop="payState" label="支付状态" min-width="300">

					</el-table-column>
					<el-table-column prop="type" label="请求类型" min-width="150">
						<template slot-scope="scope">
							{{scope.row.type == '1'?'平台端':scope.row.type == '2'?'商家端':'C端'}}
						</template>
					</el-table-column>
					<el-table-column prop="time" label="请求耗时" min-width="100">
						<template slot-scope="scope">
							{{scope.row.time}}秒
						</template>
					</el-table-column>
					<el-table-column label="操作" width="auto" min-width="80">
						<template slot-scope="scope">
							<div @click="delList(scope.row)" class="tableBtn greens">删除</div>

						</template>
					</el-table-column>
				</el-table>
				<div class="fenye">
					<div style="line-height: 34px">共{{total}}条</div>
					<el-pagination class="pagination" :hide-on-single-page="flag" background
						:current-page="pageindex.page+1" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
						layout="prev, pager,next" :total="total " @current-change="handleCurrentChange" />
				</div>

				<!-- 新建商家弹框 -->
				<el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin"
					custom-class="diaslog_zhong" style="padding: 0;" width="80%" class="dialog_css_Xq" center
					:close-on-click-modal="false" :show-close="false">
					<div>
						<div style="margin-bottom: 20px;">
							<el-form ref="form" :model="formInline" label-width="80px">
								<el-form-item label="渠道名称">
									<el-input v-model="formInline.name"
										:disabled="index == 1?false:index == 2?true:false" size="mini"
										placeholder="请输入"></el-input>
								</el-form-item>
								<el-form-item label="渠道类型">
									<el-select v-model="formInline.createUser" placeholder="请选择" size="mini"
										:disabled="index == 1?false:index == 2?true:false" style="width:100%">
										<el-option label="APP" value="APP" />
									</el-select>
								</el-form-item>

								<el-form-item label="备注">
									<el-input type="textarea" v-model="formInline.textarea" :rows="4"
										:disabled="index == 1?false:index == 2?true:false"></el-input>
								</el-form-item>

							</el-form>

						</div>
						<div style="display: flex;justify-content: flex-end;">
							<el-button plain @click="closeFn(1)" size="mini"
								style="background-color: #fff;color: #000;width: 70px;height: 30px;border-color: #B2B2B2;">返回</el-button>
							<el-button plain @click="bianji()" v-if="index == 2" size="mini"
								style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">编辑</el-button>
							<el-button plain @click="addCheck(0)" v-if="index!= 2" size="mini"
								style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">确定</el-button>
						</div>
					</div>
				</el-dialog>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		logQuery,
		deleteList
	} from '../../../api/online.js'
	export default {
		data() {
			return {
				total: 0,
				flag: false,
				ggXin: false,
				index: 1,
				formInline: {
					merchantName: '', // 商家名称
					storeId: '', // 编码
					contacts: '', // 联系人
					businessEntity: '', //经营主体
					page: 0, // 当前页
					pageSize: 10 // 每页记录数
				},
				tableData: [],
				multipleSelection: 0,
				pageindex: {
					page: 0,
					pageSize: 10,
				},
			}
		},
		computed: {},
		mounted() {
			this.getAll()
		},
		methods: {
			async getAll() {
				const res = await logQuery(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.totalElements
			},
			handleCurrentChange(val) {
				this.pageindex.page = val - 1
				this.getAll()
			},
			closeFn() {
				this.ggXin = false
				this.index = 1
			},
			delList(item) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							deleteList({
								id: item.webLogId
							}).then(res => {
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})

			}
		}
	}
</script>

<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;
		position: relative;
	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .formSearch {
		position: relative;
		margin-bottom: 20px;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 14px;
		justify-content: space-between;

		.el-form-item__label {
			line-height: 28px;
			font-size: 14px;
			color: #000;
			font-weight: 100;
		}
	}

	.greens {
		color: #3F9B6A;
	}



	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		margin-top: 4px;
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>