完善团课相关管理

gym-manage-web/src/views/groupcourse/CourseRecommendManagement.vue

@@ -4,20 +4,28 @@
       <template #header>
         <div class="card-title">
           <span>团课推荐管理</span>
-          <el-button type="primary" @click="handleAdd">
-            新增推荐
-          </el-button>
+          <div class="header-actions">
+            <el-button size="small" @click="resetSort">恢复默认排序</el-button>
+            <el-button type="primary" @click="handleAdd">新增推荐</el-button>
+          </div>
         </div>
       </template>
+
       <el-table
+        ref="tableRef"
         v-loading="loading"
-        :data="dataSource"
+        :data="sortedData"
         style="width: 100%"
+        @sort-change="onSortChange"
       >
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="courseId" label="团课ID" width="100" />
+        <el-table-column prop="id" label="ID" width="100" sortable="custom" />
+        <el-table-column prop="courseName" label="团课名称" min-width="160" show-overflow-tooltip sortable="custom">
+          <template #default="{ row }">
+            {{ courseMap[row.courseId] || `课程 #${row.courseId}` }}
+          </template>
+        </el-table-column>
         <el-table-column prop="recommendTitle" label="推荐标题" min-width="160" show-overflow-tooltip />
-        <el-table-column label="优先级" width="100" sortable="custom">
+        <el-table-column prop="priority" label="优先级" width="100" sortable="custom">
           <template #default="{ row }">
             <el-tag
               :type="row.priority >= 5 ? 'danger' : row.priority >= 3 ? 'warning' : 'info'"
@@ -40,6 +48,11 @@
           </template>
         </el-table-column>
         <el-table-column prop="recommendReason" label="推荐理由" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="createdAt" label="创建时间" width="170" sortable="custom">
+          <template #default="{ row }">
+            {{ formatTime(row.createdAt) }}
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="280" fixed="right">
           <template #default="{ row }">
             <el-button type="primary" link size="small" @click="handleEdit(row)">
@@ -82,8 +95,20 @@
         :rules="formRules"
         label-width="100px"
       >
-        <el-form-item label="关联团课ID" prop="courseId">
-          <el-input-number v-model="formState.courseId" :min="1" style="width: 100%" placeholder="请输入团课ID" />
+        <el-form-item label="关联团课" prop="courseId">
+          <el-select
+            v-model="formState.courseId"
+            filterable
+            placeholder="请选择团课"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="course in courseList"
+              :key="course.id"
+              :value="course.id!"
+              :label="course.courseName"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="推荐标题" prop="recommendTitle">
           <el-input v-model="formState.recommendTitle" placeholder="请输入推荐标题" />
@@ -105,7 +130,7 @@
           />
         </el-form-item>
         <el-form-item label="优先级" prop="priority">
-          <el-input-number v-model="formState.priority" :min="0" :max="999" style="width: 100%" />
+          <el-input-number v-model="formState.priority" :min="0" :max="20" style="width: 100%" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -117,12 +142,55 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { groupCourseRecommendApi, type GroupCourseRecommend } from '@/api/groupCourse.api'
+import { groupCourseRecommendApi, groupCourseApi, type GroupCourseRecommend, type GroupCourse } from '@/api/groupCourse.api'
 
 const loading = ref(false)
 const dataSource = ref<GroupCourseRecommend[]>([])
+const courseMap = ref<Record<number, string>>({})
+const courseList = ref<GroupCourse[]>([])
+const sortState = ref<{ prop: string; order: 'ascending' | 'descending' | null }>({ prop: 'priority', order: 'descending' })
+
+const sortedData = computed(() => {
+  const list = [...dataSource.value]
+  const { prop, order } = sortState.value
+  if (!order) return list
+  const dir = order === 'ascending' ? 1 : -1
+  const getName = (courseId: number) => courseMap.value[courseId] || ''
+  switch (prop) {
+    case 'id':
+      return list.sort((a, b) => ((a.id || 0) - (b.id || 0)) * dir)
+    case 'priority':
+      return list.sort((a, b) => ((a.priority || 0) - (b.priority || 0)) * dir)
+    case 'courseName':
+      return list.sort((a, b) => getName(a.courseId).localeCompare(getName(b.courseId), 'zh') * dir)
+    case 'createdAt':
+      return list.sort((a, b) => (a.createdAt || '').localeCompare(b.createdAt || '') * dir)
+    default:
+      return list
+  }
+})
+
+const onSortChange = ({ prop, order }: { prop: string; order: 'ascending' | 'descending' | null }) => {
+  sortState.value = { prop, order }
+}
+
+const tableRef = ref()
+const resetSort = () => {
+  tableRef.value?.clearSort()
+  sortState.value = { prop: 'priority', order: 'descending' }
+  // Re-apply default sort arrows on the table
+  tableRef.value?.sort('priority', 'descending')
+}
+
+const formatTime = (time?: string) => {
+  if (!time) return '-'
+  return new Date(time).toLocaleString('zh-CN', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
 
 const modalVisible = ref(false)
 const modalTitle = ref('')
@@ -137,7 +205,7 @@ const formState = reactive<GroupCourseRecommend>({
 })
 
 const formRules = {
-  courseId: [{ required: true, message: '请输入团课ID', trigger: 'blur' }],
+  courseId: [{ required: true, message: '请选择团课', trigger: 'change' }],
   recommendTitle: [
     { required: true, message: '请输入推荐标题', trigger: 'blur' },
     { max: 200, message: '标题长度不能超过200个字符', trigger: 'blur' },
@@ -148,7 +216,18 @@ const formRules = {
 const fetchData = async () => {
   loading.value = true
   try {
-    dataSource.value = await groupCourseRecommendApi.getAll()
+    const [recommends, courses] = await Promise.all([
+      groupCourseRecommendApi.getAll(),
+      groupCourseApi.getAll(),
+    ])
+    dataSource.value = recommends
+    courseList.value = courses
+    // Build courseId -> courseName map
+    const map: Record<number, string> = {}
+    courses.forEach((c) => {
+      if (c.id != null) map[c.id] = c.courseName
+    })
+    courseMap.value = map
   } catch {
     ElMessage.error('加载数据失败')
   } finally {
@@ -243,4 +322,10 @@ onMounted(() => fetchData())
   justify-content: space-between;
   align-items: center;
 }
+
+.course-recommend-management .header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 </style>