tyj_admin_ui/src/views/gameRole/account/index.vue

<template>
	<div class="game-account-container">
		<el-card shadow="hover">
			<div class="game-account-search mb15">
				<el-form :inline="true">
					<el-form-item label="服务器">
						<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px">
							<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-select v-model="queryParams.serverId" class="m-2" placeholder="选择服务器" filterable>
							<el-option v-for="item in switchServer()" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="账号">
						<el-input size="default" v-model="queryParams.account" placeholder="请输入账号" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="id">
						<el-input size="default" v-model="queryParams.id" placeholder="请输入uid" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="uid">
						<el-input size="default" v-model="queryParams.uid" placeholder="请输入uid" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="身份证:">
						<el-input size="default" v-model="queryParams.ident" placeholder="身份证" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="名字:">
						<el-input size="default" v-model="queryParams.name" placeholder="名字" class="w-50 m-2" clearable />
					</el-form-item>
					<el-form-item label="账号状态">
						<el-select v-model="queryParams.gmState" class="m-2" placeholder="选择状态" size="large">
							<el-option label="" value="" />
							<el-option v-for="item in tableData.accountType" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="accountList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%" stripe>
				<el-table-column type="index" label="id" width="60" />
				<el-table-column prop="AccountName" label="账号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="uid" label="uid" show-overflow-tooltip></el-table-column>
				<el-table-column prop="StringId" label="id" show-overflow-tooltip></el-table-column>
				<el-table-column prop="AccountType" label="账号类型" show-overflow-tooltip></el-table-column>
				<el-table-column prop="RealName" label="名字" show-overflow-tooltip></el-table-column>
				<el-table-column prop="Identity" label="身份证" show-overflow-tooltip></el-table-column>
				<el-table-column prop="CreateTime" label="创建时间" show-overflow-tooltip></el-table-column>
			</el-table>
			<el-row justify="space-evenly">
				<el-pagination
					:hide-on-single-page="true"
					:total="tableData.total"
					v-model:page-size="queryParams.pageSize"
					v-model:current-page="queryParams.pageNum"
					@current-change="accountList"
				/>
			</el-row>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import { gameAccountList } from '/@/api/game/basicinfo';
import { ElMessage } from 'element-plus';
import { ServerCategorize, serverList } from '/@/utils/game';
import { gSwitchServer } from '/@/utils/utils';
import { AccountType } from '/@/api/common/consts';

// 定义接口来定义对象的类型
interface TableData {
	uid: number;
	name: string;
	region: number;
	totalTime: number;
	rechargeTotal: number;
	CreateTime: string;
	AccountType: string;
}

interface TableDataState {
	serverSwitch: number;
	queryParams: {
		account: string;
		serverId: number;
		id: string;
		uid: string;
		ident: string;
		name: string;
		gmState: string;
		pageSize: number;
		pageNum: number;
	};
	tableData: {
		data: Array<TableData>;
		total: 0;
		accountType: Array<{ label: string; value: number }>;
	};
	servers: object[];
	gmStates: object;
	serverCategorize: object[];
}

export default defineComponent({
	name: 'apiV1GameRoleAccount',
	setup() {
		const state = reactive<TableDataState>({
			serverSwitch: 0,
			queryParams: {
				account: '',
				serverId: '',
				id: '',
				uid: '',
				ident: '',
				name: '',
				gmState: '',
				pageSize: 10,
				pageNum: 1,
			},
			tableData: {
				data: [],
				total: 0,
				accountType: AccountType,
			},
			servers: [],
			serverCategorize: ServerCategorize,
		});

		const accountList = () => {
			state.tableData.data = [];
			console.log(state.queryParams);
			gameAccountList(state.queryParams).then((res) => {
				if (!res.data.list || res.data.list.length == 0) {
					ElMessage.error('未查询到用户信息！');
					return;
				}
				console.log(res);
				const list = res.data.list ?? [];
				state.tableData.total = res.data.total;
				list.map((item: TableData) => {
					item.AccountType = state.tableData.accountType.find((r) => r.value == item.AccountType).label;
					item.CreateTime = new Date(item.CreateTime).toLocaleString();
				});
				state.tableData.data = list;
			});
		};
		// 页面加载时
		onMounted(() => {
			serverList().then((res) => {
				state.servers = res;
				state.queryParams.serverId = res[0].id;
			});
		});

		const switchServer = () => {
			return gSwitchServer(state.serverSwitch, state.servers);
		};

		return {
			switchServer,
			accountList,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
.el-form-item {
	display: -moz-flex;
	vertical-align: middle;
	margin-right: 32px;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: #ffffd5;
}

::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td {
	background: inherit;
}
</style>