YD_Event.Web/src/views/match/manage/index.vue

<template>
	<div class="system-menu-container layout-padding">
		<ProTable
			ref="tableRef"
			:request-api="eventPagePost"
			:columns="columns"
			:pagination="true"
			:tool-button="false"
			:initParam="initParam"
			toolButton
		>
			<template #tools>
				<el-button v-auth="'event:add'" type="primary" @click="onOpenMenu()"> 新增 </el-button>
				<el-button v-auth="'event:add'" type="primary" @click="onOpenMenu"> 导出 </el-button>
			</template>
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			<template #qrCodeUrl="scope">
				<el-image :src="scope.row.qrCodeUrl" style="height: 80px" fit="cover" />
			</template>
			<template #eventStatus="scope">
				<el-tag :type="scope.row.eventStatus === 0 ? 'success' : scope.row.eventStatus === 1 ? 'warning' : 'danger'">
					{{ scope.row.eventStatus === 0 ? '报名中' : scope.row.eventStatus === 1 ? '比赛中' : '已结束' }}
				</el-tag>
			</template>
			<template #action="scope">
				<el-button v-auth="'event:edit'"  size="small" text type="primary" @click="onOpenMenu(scope.row.id)"> 编辑 </el-button>
				<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
					<template #reference>
						<el-button v-auth="'event:delete'" size="small" text type="danger"> 删除 </el-button>
					</template>
				</el-popconfirm>
				<el-button v-auth="'event:edit'"  size="small" text type="primary" @click="onOpenWorkBench(scope.row.id)"> 赛事工作台 </el-button>
			</template>
		</ProTable>
		<MenuDialog ref="menuDialogRef" @refresh="tableRef?.reset" @update:table="refreshTable" />
		<WorkDialog ref="workDialogRef" />
	</div>
</template>

<script setup name="event">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import SysMenuApi from '/@/api/SysMenuApi';
import { auths } from '/@/utils/authFunction';
import ProTable from '/@/components/ProTable/index.vue';
import MenuDialog from './dialog.vue';
import WorkDialog from './work.vue';
import { eventPagePost , eventDeleteDelete} from '/@/api/match/event';
//table组件实例
const tableRef = ref();
const initParam = ref({
	refresh: true,
});

const refreshTable = () =>{
	initParam.value.refresh = !initParam.value.refresh
}
const columns = reactive([
	{
		width: '120px',
		prop: 'index',
		label: '序号',
		align: 'center',
	},
	{
		width: '120px',
		prop: 'eventName',
		label: '赛事名称',
		align: 'center',
		search: {
			el: 'input',
		},
	},
	{
		width: '120px',
		prop: 'qrCodeUrl',
		label: '封面',
		align: 'center',
		width: '120px',
	},
	{
		width: '120px',
		prop: 'eventType',
		label: '赛事类型',
		search: {
			el: 'select',
		},
		enum: [
			{ label: '全部', value: '' },
			{ label: '线上', value: 0 },
			{ label: '线下', value: 1 },
		],
	},
	{
		width: '120px',
		prop: 'registrationType',
		label: '报名方式',
		enum: [
			{ label: '两者都有', value: 0 },
			{ label: '只允许个人报名', value: 1 },
			{ label: '只允许团队报名', value: 2 },
		],
	},
	{
		width: '120px',
		prop: 'chargeMode',
		label: '收费模式',
		search: {
			el: 'select',
		},
		enum: [
			{ label: '全部', value: '' },
			{ label: '免费', value: 0 },
			{ label: '定价（赛事）', value: 1 },
			{ label: '单价（赛事）', value: 2 },
			{ label: '单价（项目）', value: 3 },
		],
	},
		
	{ prop: 'merchantName', label: '收款账户',width: '120px', },
	{
		width: '120px',
		prop: 'eventStatus',
		label: '赛事状态',
		search: {
			el: 'select',
		},
		enum: [
			{ label: '报名中', value: 0 },
			{ label: '比赛中', value: 1 },
			{ label: '已结束', value: 2 },
		],
	},
	{
		width: '120px',
		prop: 'registrationStartTime',
		label: '报名开始时间',
		search: {
			el: 'date-picker',
			props: {
				type: 'daterange',
			},
		},
	},
	{
		width: '120px',
		prop: 'registrationEndTime',
		label: '报名结束时间',
		search: {
			el: 'date-picker',
			props: {
				type: 'daterange',
			},
		},
	},
	{
		width: '120px',
		prop: 'matchStartTime',
		label: '比赛开始时间',
		search: {
			el: 'date-picker',
			props: {
				type: 'daterange',
			},
		},
	},
	{
		width: '120px',
		prop: 'matchEndTime',
		label: '比赛结束时间',
		search: {
			el: 'date-picker',
			props: {
				type: 'daterange',
			},
		},
	},
	{ prop: 'action', label: '操作', align: 'center', width: 160, fixed: 'right', isShow: auths(['event:edit', 'event:delete']) },
]);

// 定义变量内容
const menuDialogRef = ref();
const workDialogRef = ref()
// 打开添加编辑菜单弹窗
const onOpenMenu = async (id) => {
	await menuDialogRef.value.openDialog(id);
};

const onOpenWorkBench = async(id)=>{
	await workDialogRef.value.openDialog(id)
}

//删除菜单
const onDeleteMenu = async (id) => {
	const { succeeded, errors } = await eventDeleteDelete({ id });
	if (succeeded) {
		ElMessage.success('删除成功');
		tableRef.value?.reset();
	} else {
		ElMessage.error(errors);
	}
};
</script>
<style scoped lang="scss"></style>