tyj_admin_ui/src/views/gameLoginUrl/serverReloadDll/index.vue

<template>
	<div class="game-online-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<!--					<el-form-item label="选择服务器" prop="serverId">-->
					<!--						<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="tableData.param.serverId" class="m-2" placeholder="选择服务器" size="large" multiple 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>
						<el-button size="default" type="primary" class="ml10" @click="onlineList">
							<el-icon>
								<ele-Search />
							</el-icon>
							重载
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" stripe border>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" width="71" />
				<el-table-column prop="name" label="服务器名" width="250"></el-table-column>
				<el-table-column prop="msg" label="发送状态">
					<template #default="scope">
						<div v-if="scope.row.msg == '发送成功'" style="color: #e60000">{{ scope.row.msg }}</div>
						<div v-else-if="!!scope.row.msg">{{ scope.row.msg }}</div>
						<div v-else style="color: #a5a5a5">未发送</div>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import { serverList, ServerCategorize, ServerList } from '/@/utils/game';
import { gameServerReloadDll } from '/@/api/game/serverConfig';

// 定义接口来定义对象的类型
interface TableData {
	serverId: number;
	name: string;
	ip: string;
	status: string;
	msg: string;
}

interface TableDataState {
	serverSwitch: number;
	tableData: {
		data: Array<TableData>;
		param: {
			serverId: number[];
		};
	};
	servers: object[];
	serverCategorize: object[];
}

export default defineComponent({
	name: 'apiV1ServerReloadDll',
	setup() {
		const state = reactive<TableDataState>({
			serverSwitch: 0,
			tableData: {
				data: [],
				param: {
					serverId: '',
				},
			},
			servers: ServerList,
			serverCategorize: ServerCategorize,
		});
		const onlineList = () => {
			if (state.tableData.param.serverId.length > 0) {
				for (let server in state.tableData.param.serverId) {
					onlines(state.tableData.param.serverId[server]);
				}
			}
		};
		const onlines = (serverId: number) => {
			if (!serverId) {
				return;
			}
			gameServerReloadDll({ serverId: serverId }).then((res) => {
				console.log(res.data);
				let data = state.tableData.data.find((r) => r.id === serverId);
				if (data) {
					if (res.data.message) {
						data.msg = res.data.message;
					} else {
						data.msg = '发送失败';
					}
				}
			});
		};
		// 页面加载时
		onMounted(() => {
			serverList().then((res) => {
				// console.log(res);
				state.tableData.data = res;
			});
		});
		const handleSelectionChange = (selection: any[]) => {
			state.tableData.param.serverId = selection.map((item) => item.id);
			console.log(state.tableData.param.serverId, selection);
		};
		return {
			handleSelectionChange,
			onlineList,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
::v-deep .el-table .el-table__cell {
	padding: 5px;
	margin-left: -20px;
	min-width: 0;
	box-sizing: border-box;
	text-overflow: ellipsis;
	vertical-align: middle;
	position: relative;
	text-align: left;
	z-index: 1;
}

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