game_event_admin/src/views/system/gameEvent/detail.vue

<template>
  <div class="game-event-detail">
    <el-card shadow="never">
      <template #header>
        <div class="page-header">
          <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
          <span class="page-title">赛事详情</span>
        </div>
      </template>

      <!-- 上部分：赛事信息 -->
      <el-card class="mb-4" shadow="never">
        <template #header>
          <div class="event-header">
            <h3>赛事信息</h3>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="赛事编号">{{ eventData.eventCode }}</el-descriptions-item>
              <el-descriptions-item label="赛事名称">{{ eventData.eventName }}</el-descriptions-item>
              <el-descriptions-item label="赛事类型">
                <dict-tag :options="game_event_type" :value="eventData.eventType" />
              </el-descriptions-item>
              <el-descriptions-item label="举办地点">{{ eventData.location }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="开始时间">{{ parseTime(eventData.startTime, '{y}-{m}-{d}') }} </el-descriptions-item>
              <el-descriptions-item label="结束时间">{{ parseTime(eventData.endTime, '{y}-{m}-{d}') }} </el-descriptions-item>
              <el-descriptions-item label="举办单位">{{ eventData.unit }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <dict-tag :options="game_event_status" :value="eventData.status" />
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20" class="mt-4">
          <el-col :span="24">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="备注" label-width="10%">{{ eventData.remark }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row> -->
      </el-card>

      <!-- 下部分：赛事项目分组信息 -->
      <el-card shadow="never">
        <template #header>
          <div class="project-header">
            <h3>赛事项目</h3>
          </div>
        </template>

        <el-table :data="projectData" border>
          <el-table-column label="项目类型" prop="projectType" align="center">
            <template #default="scope">
              <dict-tag :options="game_project_type" :value="scope.row.projectType" />
            </template>
          </el-table-column>
          <el-table-column label="项目名称" prop="projectName" align="center" />
          <!-- <el-table-column label="项目组别" prop="groupType" align="center" /> -->
          <el-table-column label="比赛场地" prop="location" align="center" />
          <el-table-column label="开始时间" prop="startTime" align="center" width="180">
            <template #default="scope">
              {{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间" prop="endTime" align="center" width="180">
            <template #default="scope">
              {{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column label="参赛组数" prop="groupNum" align="center" />
          <el-table-column label="参赛人数" prop="participateNum" align="center" />
          <el-table-column label="状态" prop="status" align="center">
            <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup name="GameEventDetail" lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getGameEvent } from '@/api/system/gameEvent';
import { listGameEventProject } from '@/api/system/gameEventProject';
import { GameEventVO } from '@/api/system/gameEvent/types';
import { GameEventProjectVO } from '@/api/system/gameEventProject/types';
import { parseTime } from '@/utils/ruoyi';

const route = useRoute();
const router = useRouter();

// 获取字典数据
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { game_event_type, game_event_status, sys_normal_disable, game_project_type } = toRefs<any>(
  proxy?.useDict('game_event_type', 'game_event_status', 'sys_normal_disable', 'game_project_type')
);

// 赛事数据
const eventData = ref<GameEventVO>({
  eventId: '',
  eventCode: '',
  eventName: '',
  eventType: '',
  location: '',
  purpose: '',
  startTime: '',
  endTime: '',
  eventUrl: '',
  eventUrlUrl: '',
  refereeUrl: '',
  refereeUrlUrl: '',
  registerUrl: '',
  registerUrlUrl: '',
  unit: '',
  isDefault: '',
  status: '',
  remark: '',
  limitApplication: 0
});

// 项目数据
const projectData = ref<GameEventProjectVO[]>([]);

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 加载赛事详情
const loadEventData = async (eventId: string) => {
  try {
    const res = await getGameEvent(eventId);
    eventData.value = res.data;
  } catch (error) {
    proxy?.$modal.msgError('加载赛事信息失败');
  }
};

// 加载赛事项目
const loadProjectData = async (eventId: string) => {
  try {
    const res = await listGameEventProject({
      eventId: eventId,
      pageNum: 1,
      pageSize: 1000,
      orderByColumn: undefined,
      isAsc: undefined
    });
    projectData.value = res.rows;
  } catch (error) {
    proxy?.$modal.msgError('加载赛事项目失败');
  }
};

onMounted(async () => {
  const eventId = route.params.eventId as string;
  if (eventId) {
    await loadEventData(eventId);
    await loadProjectData(eventId);
  }
});
</script>

<style scoped lang="scss">
.game-event-detail {
  .page-header {
    display: flex;
    align-items: center;

    .page-title {
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .event-header h3,
  .project-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }
}
</style>