YD_Event.Web/src/views/match/user/general/index.vue

<template>
	<div class="system-menu-container layout-padding">
		<ProTable ref="tableRef" :request-api="appuserPageGet" @selection-change="handleSelectionChange" :columns="columns" :pagination="true"
			:tool-button="false" :initParams="initParam" row-key="id">
			<template #tools>
				<el-popconfirm title="确认批量审核吗？" @confirm="onBatchAudit">
					<template #reference>
						<el-button v-auth="'user:general:audit'" size="small" type="primary"> 批量审核
						</el-button>
					</template>
				</el-popconfirm>
			</template>
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			<template #auditStatus="scope">
				<el-tag :type="getAuditStatusType(scope.row.auditStatus)">
					{{ getAuditStatusText(scope.row.auditStatus) }}
				</el-tag>
			</template>
			<template #idCardImageUrl="scope">
				<PreviewImage
					v-if="scope.row.idCardImageUrl"
					:src="scope.row.idCardImageUrl"
					width="100px"
					height="100px"
					fit="cover"
					radius="4px"
					:show-zoom-icon="true"
				/>
				<span v-else>-</span>
			</template>
			<template #action="scope">
				<el-button v-auth="'user:general:record'" size="small" text type="primary"
					@click="onOpenMenu(scope.row)"> 参赛记录 </el-button>
			</template>
		</ProTable>

		<!-- 弹窗 -->
		<el-dialog title="参赛记录" v-model="isShowDialog" width="80%" @close="onDialogClose">
			<ProTable v-if="isShowDialog" ref="table" :request-api="eventrecordPageGet" :columns="columnsUser" :pagination="true"
				:tool-button="false" :initParams="initParamUser">
				<template #index="scope">
					{{ scope.$index + 1 }}
				</template>
				<template #startTime="scope">
					{{ scope.row.startTime }} -- {{ scope.row.endTime }}
				</template>
				<template #action="scope">
					<el-button v-auth="'user:general:record'" size="small" text type="primary"
						@click="lookBook(scope.row)"> 查看证书 </el-button>
				</template>
			</ProTable>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取消</el-button>
					<el-button type="primary" @click="onCancel">确定</el-button>
				</span>
			</template>
		</el-dialog>

				<!-- 弹窗 -->
		<el-dialog title="查看证书" v-model="isShowBook" width="80%">
			<div>
				证书
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelB">取消</el-button>
					<el-button type="primary" @click="onCancelB">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="general">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import SysMenuApi from '/@/api/SysMenuApi';
import { auths } from '/@/utils/authFunction';
import ProTable from '/@/components/ProTable/index.vue';
import { appuserPageGet , appuserAuditPost} from '/@/api/match/appuser';
import { eventrecordPageGet , eventrecordCertificatesGet} from '/@/api/match/eventRecord';
import PreviewImage from '/@/components/PreviewImage/index.vue';

const initParam = ref({
	refresh: true,
});
const selectedListIds = ref([]);
const initParamUser = ref({
	appUserId: null,
});
const statusList = ['info', 'warning', 'success', 'danger'];

const getAuditStatusText = (status) => {
	switch (status) {
		case 0:
			return '待提交';
		case 1:
			return '待审核';
		case 2:
			return '审核通过';
		case 3:
			return '审核拒绝';
		case 4:
			return '已取消';
		default:
			return status;
	}
};

const getAuditStatusType = (status) => {
	switch (status) {
		case 0:
			return 'info';
		case 1:
			return 'warning';
		case 2:
			return 'success';
		case 3:
			return 'danger';
		case 4:
			return 'info';
		default:
			return 'info';
	}
};

const columns = ref([
	{ prop: 'ss', type: 'selection' },
	{ prop: 'index', label: '序号', align: 'center' },
	{ prop: 'name', label: '姓名', search: { el: 'input' } },
	{
		prop: 'gender',
		label: '性别',
		search: {
			el: 'select',
		},
		enum: [
			{ label: '全部', value: '' },
			{ label: '男', value: 0 },
			{ label: '女', value: 1 },
		],
	},
	{ prop: 'mobile', label: '联系电话', search: { el: 'input' } },
	{ prop: 'idCardImageUrl', label: '身份证', width: '130px' },
	{
		prop: 'auditStatus',
		label: '审核状态',
		search: {
			el: 'select',
		},
		enum: [
			{ label: '全部', value: '' },
			{ label: '未通过', value: 3 },
			{ label: '已通过', value: 2 },
			{ label: '未审核', value: 1 },
			{ label: '未提交', value: 0 },
		],
	},
	{
		prop: 'createdTime',
		label: '生成时间',
		search: {
			el: 'date-picker',
			props: { type: 'daterange' },
		},
	},

	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['user:general:record']) },
]);
const tableRef = ref();
const handleSelectionChange = (val) => {
	console.log(val);
	selectedListIds.value = val.map((item) => item.id);
};

const statusNameList = ['未提交','未审核','已通过','未通过'];

const columnsUser = ref([
	{ prop: 'index', label: '序号', align: 'center' },
	{ prop: 'eventName', label: '赛事名称', search: { el: 'input' } },

	// {
	// 	prop: 'auditStatus',
	// 	label: '赛事类型',
	// 	search: {
	// 		el: 'select',
	// 	},
	// 	enum: [
	// 		{ label: '全部', value: '' },
	// 		{ label: '未通过', value: 3 },
	// 		{ label: '已通过', value: 2 },
	// 		{ label: '未审核', value: 1 },
	// 		{ label: '未提交', value: 0 },
	// 	],
	// },
	{
		prop: 'startTime',
		label: '起止时间',
		search: {
			el: 'date-picker',
			props: { type: 'daterange' },
		},
	},
	{
		prop: 'endTime',
		label: '起止时间',
		isShow: false,
	},

	{ prop: 'action', label: '操作', align: 'center', fixed: 'right'},
]);

const isShowDialog = ref(false);
const table = ref();

const onOpenMenu = (row) => {
	console.log(row);
	
	// 参数验证
	if (!row || !row.id) {
		ElMessage.warning('用户信息无效，无法查看参赛记录');
		return;
	}
	
	if (typeof row.id !== 'number' || row.id <= 0) {
		ElMessage.warning('用户ID无效，请刷新页面后重试');
		return;
	}
	
	// 设置用户ID参数
	initParamUser.value.appUserId = row.id;
	isShowDialog.value = true;
	
	// 下次打开对话框时强制刷新数据
	initParamUser.value.refresh = Date.now();
};

const onBatchAudit = async () => {
	console.log(selectedListIds.value);
	const { succeeded, data } = await appuserAuditPost({ ids: selectedListIds.value , status: 2 });
	if (succeeded) {
		ElMessage.success('操作成功');
		// initParam.value.refresh = !initParam.value.refresh;
		tableRef.value.clearSelection();
		tableRef.value.getTableList();
	} else {
		ElMessage.error(data);
	}
};

const onCancelB = () => {
	isShowBook.value = false;
};

// 查看证书
const isShowBook = ref(false);
const lookBook = async (row) => {
	const { succeeded, data } = await eventrecordCertificatesGet(row.id);
	if (succeeded) {
		isShowBook.value = true;
	} else {
		ElMessage.error(data);
	}
};


// 对话框关闭时清理
const onDialogClose = () => {
	// 清理参数，避免下次查询时使用旧参数
	initParamUser.value = {
		appUserId: null,
		refresh: Date.now()
	};
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
};
</script>
<style scoped lang="scss">
.dialog-footer {
	margin-top: 80px;
}

/* 时长组合框样式 */
.duration-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.duration-row .el-input {
	width: 120px;
}

.duration-separator {
	color: #606266;
	font-size: 14px;
}

.duration-label {
	color: #909399;
	font-size: 14px;
}
</style>