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

<template>
	<div>
		<!--    <el-card shadow="hover" header="">-->
		<!--      <div class="mb15">-->
		<el-form class="flex-warp" label-position="right">
			<el-form-item>
				<el-button type="success" class="ml10" @click="reloadServer">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					重载配置
				</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" class="ml10" @click="countList"> 刷新列表</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" class="ml10" @click="onOpenAddDic"> 添加</el-button>
			</el-form-item>

			<el-table :data="tableData.data" style="width: 100%" stripe border>
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="label" label="名称" width="180" />
				<el-table-column prop="value" label="渠道编号" width="260" />
				<el-table-column prop="sort" label="排序" width="180" />
				<el-table-column>
					<template #default="scope">
						<el-button size="small" type="success" @click="onOpenEditDic(scope.row)">修改</el-button>
						<el-button size="small" type="danger" @click="delLoginUrl(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row justify="space-evenly">
				<el-pagination
					:hide-on-single-page="true"
					v-model:page-size="tableData.params.pageSize"
					:pager-count="5"
					v-model:current-page="tableData.params.pageNum"
					layout="total, prev, pager, next"
					:total="tableData.total"
					@current-change="handleCurrentChange"
				/>
			</el-row>
		</el-form>

		<EditConfig ref="editDicRef" @countList="countList" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, ref } from 'vue';
import EditConfig from '/@/views/gameLoginUrl/channelList/component/editConfig.vue';
import { gameReloadServer } from '/@/api/game';
import { gameGetChannel, gameDelChannel } from '/@/api/game/channel';
import { PLATFORM } from '/@/api/common/consts';

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

interface TableDataState {
	tableData: {
		data: Array<TableData>;
		total: number;
		params: {
			pageNum: number;
			pageSize: number;
		};
	};
	platform: Array<{ label: string; value: string }>;
}

export default defineComponent({
	name: 'apiV1ServerConfig',
	components: { EditConfig },
	setup() {
		const editDicRef = ref();
		const state = reactive<TableDataState>({
			platform: PLATFORM,
			tableData: {
				data: [],
				total: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
				},
			},
		});
		// 打开新增字典弹窗
		const onOpenAddDic = () => {
			editDicRef.value.openDialog();
		};
		// 打开修改字典弹窗
		const onOpenEditDic = (row: TableData) => {
			editDicRef.value.openDialog(row);
		};
		const countList = () => {
			gameGetChannel(state.tableData.params).then((res) => {
				console.log('countList:', res);
				state.tableData.total = res.data.total || 1;
				state.tableData.data = res.data.list ?? [];
				console.log('countList:', state.tableData);
			});
		};

		const delLoginUrl = (id: number) => {
			gameDelChannel({ id: id }).then((res) => {
				countList();
			});
		};

		const reloadServer = () => {
			gameReloadServer({ sType: 2 }).then((res) => {
				console.log(res);
			});
		};
		const handleCurrentChange = (val: number) => {
			state.tableData.params.pageNum = val;
			countList();
		};
		onMounted(() => {
			countList();
		});
		return {
			editDicRef,
			handleCurrentChange,
			countList,
			onOpenAddDic,
			onOpenEditDic,
			delLoginUrl,
			reloadServer,
			...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>