tyj_admin_ui/src/views/gameSet/auditMode/index.vue

<template>
	<div class="system-role-container">
		<el-card shadow="hover" :header="setName.label + '设置'">
			<el-form :inline="true">
				<el-form-item label="选择设置模式">
					<el-select v-model="tableData.param.name" class="m-2" @change="changeName" placeholder="选择设置模式" filterable>
						<el-option v-for="item in names" :key="item" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onOpenAdd()">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						新增
					</el-button>
				</el-form-item>
				<el-form-item label="判断优先级">
					{{ setOrder.find(r => r.value == tableData.param.name).label }}
				</el-form-item>
			</el-form>
			<el-table :data="tableData.data" style="width: 100%">
				<el-table-column prop="label" label="渠道" width="200">
					<template #default="scope">
						<div v-if="scope.row.label.length >= 12">
							{{
								channels.find((r) => r.value == scope.row.label.substring(0, 12))
									? channels.find((r) => r.value == scope.row.label.substring(0, 12)).label
									: scope.row.label.substring(0, 12)
							}}
						</div>
						<div v-if="scope.row.label.length < 12">
							{{ channels.find((r) => r.value == '') ? channels.find((r) => r.value == '').label : '' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="label" label="版本号" width="200">
					<template #default="scope">
						<div v-if="scope.row.label.length > 12">
							{{ scope.row.label.substring(12) }}
						</div>
						<div v-else-if="scope.row.label.length < 12">{{ scope.row.label }}</div>
						<div v-else>所有版本</div>
					</template>
				</el-table-column>
				<el-table-column prop="value" :label="setName.label + '模式'" show-overflow-tooltip width="200">
					<template #default="scope">
						<div v-if="scope.row.value == 0">否</div>
						<div v-if="scope.row.value == 1">是</div>
					</template>
				</el-table-column>
				<el-table-column prop="value" label="操作" show-overflow-tooltip width="100">
					<template #default="scope">
						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
						<el-button size="small" type="text" @click="onOpenEdit(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<EditConfig ref="editDicRef" @mailList="mailList" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, ref } from 'vue';
import { allChannelList, serverList, GameSetList, GameSetOrder } from '/@/utils/game';
import { ElMessage, ElMessageBox } from 'element-plus';
import { gameDelAuditMode, gameGetAllAuditMode } from '/@/api/game/set';
import EditConfig from '/src/views/gameSet/auditMode/component/editConfig.vue';

interface TableDataState {
	contentVisible: boolean;
	ItemConfig: object;
	tableData: {
		data: object[];
		total: number;
		content: string;
		param: {};
		name: string;
	};
	servers: object[];
	channels: object[];
	setName: object;
	names: object[];
	setOrder: object[];
}

export default defineComponent({
	name: 'apiV1GameSetAuditMode',
	components: { EditConfig },
	setup() {
		const editDicRef = ref();
		const state = reactive<TableDataState>({
			contentVisible: false,
			tableData: {
				data: [],
				total: 0,
				content: '',
				param: {
					name: GameSetList[0].value,
				},
			},
			channels: [],
			setName: GameSetList[0],
			setOrder: GameSetOrder,
			names: GameSetList,
		});

		const mailList = () => {
			gameGetAllAuditMode(state.tableData.param).then((res) => {
				console.log(res);
				state.tableData.data = [];
				if (res.data) {
					let data = res.data.list ?? [];
					for (let i in data) {
						console.log(data[i], i);
						state.tableData.data.push({
							label: i,
							value: data[i],
						});
					}
				}
			});
		};

		// 分页改变
		const onHandleCurrentChange = () => {
			console.log(`current page: ${state.tableData.param.pageNum}`);
			mailList();
		};

		const onRowDel = (row: any) => {
			ElMessageBox.confirm(`此操作将删除：“${row.label}”的设置，是否继续?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					gameDelAuditMode({ label: row.label, name: state.tableData.param.name }).then(() => {
						ElMessage.success('删除成功');
						mailList();
					});
				})
				.catch(() => {});
		};

		// 页面加载时
		onMounted(() => {
			serverList().then((value) => {
				state.servers = value;
			});
			allChannelList().then((value) => {
				state.channels = value;
			});
			mailList();
		});
		// 打开新增字典弹窗
		const onOpenAdd = () => {
			editDicRef.value.openDialog(
				{
					auditMode: '1',
					channel: '',
					version: '',
					name: state.tableData.param.name,
				},
				state.setName,
				true
			);
		};
		// 打开修改字典弹窗
		const onOpenEdit = (row: any) => {
			let data = { auditMode: row.value, channel: '', version: '', name: state.tableData.param.name };
			if (row.label.length > 12) {
				data.channel = row.label.substring(0, 12);
				data.version = row.label.substring(12);
			} else if (row.label.length == 12) {
				data.channel = row.label;
			} else if (row.label.length < 12) {
				data.version = row.label;
			}
			editDicRef.value.openDialog(data, state.setName, false);
		};
		const changeName = () => {
			state.setName = state.names.find((r) => r.value === state.tableData.param.name);
			mailList();
		};
		return {
			editDicRef,
			onHandleCurrentChange,
			onRowDel,
			mailList,
			onOpenAdd,
			onOpenEdit,
			changeName,
			...toRefs(state),
		};
	},
});
</script>