tyj_admin_ui/src/views/gameManage/gm/component/editConfig.vue

<template>
	<div>
		<el-drawer class="el-drawer" title="开启gm权限历史" v-model="isShowDialog" direction="ltr" size="50%">
			<el-table :data="tableData.list" border>
				<el-table-column label="操作账号" width="180">
					<template #default="scope">
						<span>{{ scope.row.operName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="发送玩家" width="180">
					<template #default="scope">
						<span>{{ scope.row.uids }}</span>
					</template>
				</el-table-column>
				<el-table-column label="服务器" width="180">
					<template #default="scope">
						<span>{{ scope.row.serverName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="gm开关" width="100">
					<template #default="scope">
						<div v-if="scope.row.state == 1">开启</div>
						<div v-if="scope.row.state == 0">关闭</div>
					</template>
				</el-table-column>
				<el-table-column label="时间" width="180">
					<template #default="scope">
						<span>{{ scope.row.operTime }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-row justify="space-evenly">
				<el-pagination
					:hide-on-single-page="true"
					v-model:page-size="queryParams.pageSize"
					v-model:current-page="queryParams.pageNum"
					:pager-count="5"
					@current-change="getRecord"
					layout="total, prev, pager, next"
					:total="queryParams.total"
				/>
			</el-row>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent } from 'vue';
import { ElLoading } from 'element-plus';
import { getOperLog } from '/@/api/game';
import { allChannelList, serverList } from '/@/utils/game';

interface TableDataState {
	isShowDialog: boolean;
	queryParams: object;
	channels: object[];
	servers: object[];
	tableData: object[];
}

export default defineComponent({
	name: 'apiV1GameGmEdit',
	setup(prop, { emit }) {
		const state = reactive<TableDataState>({
			isShowDialog: false,
			queryParams: { label: '/api/v1/game/mange/setclientgm', pageNum: 1, pageSize: 10, total: 0 },
			channels: [],
			servers: [],
			tableData: {
				list: [],
			},
		});
		// 打开弹窗
		const openDialog = (row: any | null) => {
			state.isShowDialog = true;
			state.queryParams = { label: '/api/v1/game/mange/setclientgm', pageNum: 1, pageSize: 10, total: 0 };
			state.tableData = {
				list: [],
			};
			console.log('openDialog: >>>>>>>>>>>', row);
			allChannelList().then((res) => {
				state.channels = res;
			});
			serverList().then((res) => {
				state.servers = res;
			});
			getRecord();
		};

		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const getRecord = () => {
			const loading = ElLoading.service({
				lock: true,
				text: 'Loading',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			getOperLog(state.queryParams)
				.then((res) => {
					console.log(res);
					state.queryParams.total = res.data.total;
					state.tableData.list = res.data.list || [];
					state.tableData.list.forEach((item: any) => {
						let param = item.operParam.split('&');
						for (let i in param) {
							let data = param[i].split('=');
							if (data[0]) {
								item[data[0]] = data[1];
							}
						}
            item.serverName = item.serverId;
            if (state.servers.find((r) => r.id == Number(item.serverId))) {
              item.serverName = state.servers.find((r) => r.id == Number(item.serverId)).name;
            }
					});
				})
				.catch((err) => {
					state.tableData.list = [];
					state.queryParams.total = 0;
				})
				.finally(function () {
					loading.close();
				});
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			getRecord,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
::v-deep .el-drawer {
	background-color: rgba(253, 253, 253, 0.68);
}
</style>