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="userId">
			<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="statusList[scope.row.auditStatus]">
					{{ scope.row.auditRemark }}
				</el-tag>
			</template>
			<template #ss="scope">
				
			</template>
			<template #idCardImageUrl="scope">
				<el-image style="width: 100px;" :src="scope.row.idCardImageUrl" fit="cover"></el-image>
			</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%">
			<ProTable ref="tableRef" :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="project">
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';

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

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: 1 },
			{ label: '女', value: 2 },
		],
	},
	{ prop: 'mobile', label: '联系电话', search: { el: 'input' } },
	{ prop: 'idCardImageUrl', label: '身份证' },
	{
		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 handleSelectionChange = (val) => {
	console.log(val);
	selectedListIds.value = val.map((item) => item.userId);
};

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 onOpenMenu = (row) => {
	console.log(row);
	initParamUser.value.appUserId = row.id;
	isShowDialog.value = true;
};

const onBatchAudit = async () => {
	console.log(selectedListIds.value);
	const { succeeded, data } = await appuserAuditPost({ ids: selectedListIds.value });
	if (succeeded) {
		ElMessage.success('操作成功');
		initParam.value.refresh = !initParam.value.refresh;
	} 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 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>