更新后台管理系统，实现团课管理基础显示

2026-07-06 16:44:27 +08:00
parent efd4d03037
commit 1e41f31271
6 changed files with 1389 additions and 0 deletions
@@ -0,0 +1,378 @@
+<template>
+  <div class="group-course-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="search-section">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索课程名称"
+              clearable
+              style="width: 240px"
+              @clear="handleSearch"
+              @keyup.enter="handleSearch"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-select
+              v-model="searchStatus"
+              placeholder="课程状态"
+              clearable
+              style="width: 140px"
+              @change="handleSearch"
+            >
+              <el-option value="0" label="正常" />
+              <el-option value="1" label="已取消" />
+              <el-option value="2" label="已结束" />
+              <el-option value="3" label="进行中" />
+              <el-option value="4" label="超时" />
+            </el-select>
+            <el-button type="primary" @click="handleSearch">
+              搜索
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAdd">
+            新增团课
+          </el-button>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        :data="dataSource"
+        style="width: 100%"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column prop="id" label="ID" width="80" sortable="custom" />
+        <el-table-column prop="courseName" label="课程名称" min-width="140" />
+        <el-table-column prop="courseType" label="课程类型" width="100" />
+        <el-table-column label="状态" width="90">
+          <template #default="{ row }">
+            <el-tag
+              :type="statusMap[row.status]?.type || 'info'"
+              effect="dark"
+              style="font-weight: 500; font-size: 14px;"
+            >
+              {{ statusMap[row.status]?.label || row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" label="开始时间" width="170">
+          <template #default="{ row }">
+            {{ formatDateTime(row.startTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="endTime" label="结束时间" width="170">
+          <template #default="{ row }">
+            {{ formatDateTime(row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="location" label="上课地点" width="120" />
+        <el-table-column label="人数" width="90">
+          <template #default="{ row }">
+            {{ row.currentMembers || 0 }}/{{ row.maxMembers || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button
+              v-if="row.status === '0'"
+              type="warning"
+              link
+              size="small"
+              @click="handleCancel(row)"
+            >
+              取消
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-model:current-page="pagination.current"
+        v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        style="margin-top: 16px; justify-content: flex-end"
+        @current-change="handleTableChange"
+        @size-change="handleSizeChange"
+      />
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="600px"
+    >
+      <el-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="课程名称" prop="courseName">
+          <el-input v-model="formState.courseName" placeholder="请输入课程名称" />
+        </el-form-item>
+        <el-form-item label="课程类型" prop="courseType">
+          <el-select v-model="formState.courseType" placeholder="请选择课程类型" style="width: 100%">
+            <el-option
+              v-for="type in courseTypes"
+              :key="type.id"
+              :value="type.id"
+              :label="type.typeName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+            v-model="formState.startTime"
+            type="datetime"
+            placeholder="选择开始时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker
+            v-model="formState.endTime"
+            type="datetime"
+            placeholder="选择结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="最大人数" prop="maxMembers">
+          <el-input-number v-model="formState.maxMembers" :min="1" :max="999" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="上课地点" prop="location">
+          <el-input v-model="formState.location" placeholder="请输入上课地点" />
+        </el-form-item>
+        <el-form-item label="封面图片">
+          <el-input v-model="formState.coverImage" placeholder="请输入封面图片URL" />
+        </el-form-item>
+        <el-form-item label="储值卡额度">
+          <el-input-number v-model="formState.storedValueAmount" :min="0" :precision="2" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="课程描述">
+          <el-input
+            v-model="formState.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入课程描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleModalOk">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { groupCourseApi, groupCourseTypeApi, type GroupCourse, type GroupCourseType } from '@/api/groupCourse.api'
+import { formatDateTime } from '@/utils/dateFormat'
+
+const loading = ref(false)
+const dataSource = ref<GroupCourse[]>([])
+const searchKeyword = ref('')
+const searchStatus = ref('')
+const courseTypes = ref<GroupCourseType[]>([])
+
+const statusMap: Record<string, { type: string; label: string }> = {
+  '0': { type: 'success', label: '正常' },
+  '1': { type: 'danger', label: '已取消' },
+  '2': { type: 'info', label: '已结束' },
+  '3': { type: '', label: '进行中' },
+  '4': { type: 'warning', label: '超时' },
+}
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const sortInfo = reactive({
+  sortBy: 'id',
+  sortOrder: 'asc' as 'asc' | 'desc',
+})
+
+const modalVisible = ref(false)
+const modalTitle = ref('')
+const formRef = ref()
+const formState = reactive<GroupCourse>({
+  courseName: '',
+  courseType: undefined,
+  startTime: '',
+  endTime: '',
+  maxMembers: 20,
+  location: '',
+  coverImage: '',
+  description: '',
+  storedValueAmount: 0,
+})
+
+const formRules = {
+  courseName: [
+    { required: true, message: '请输入课程名称', trigger: 'blur' },
+    { min: 2, max: 100, message: '课程名称长度在 2 到 100 个字符', trigger: 'blur' },
+  ],
+  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
+  maxMembers: [{ required: true, message: '请输入最大人数', trigger: 'blur' }],
+}
+
+const fetchCourseTypes = async () => {
+  try {
+    courseTypes.value = await groupCourseTypeApi.getAll()
+  } catch {
+    // ignore
+  }
+}
+
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await groupCourseApi.getPage({
+      page: pagination.current - 1,
+      size: pagination.pageSize,
+      sortBy: sortInfo.sortBy,
+      sortOrder: sortInfo.sortOrder,
+      keyword: searchKeyword.value || undefined,
+      status: searchStatus.value || undefined,
+    })
+    dataSource.value = res.content
+    pagination.total = Number(res.totalElements) || 0
+  } catch {
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTableChange = () => fetchData()
+const handleSizeChange = () => {
+  pagination.current = 1
+  fetchData()
+}
+const handleSearch = () => {
+  pagination.current = 1
+  fetchData()
+}
+
+const handleSortChange = ({ prop, order }: any) => {
+  sortInfo.sortBy = prop
+  sortInfo.sortOrder = order === 'ascending' ? 'asc' : 'desc'
+  fetchData()
+}
+
+const handleAdd = () => {
+  modalTitle.value = '新增团课'
+  Object.assign(formState, {
+    id: undefined,
+    courseName: '',
+    courseType: undefined,
+    startTime: '',
+    endTime: '',
+    maxMembers: 20,
+    location: '',
+    coverImage: '',
+    description: '',
+    storedValueAmount: 0,
+  })
+  modalVisible.value = true
+}
+
+const handleEdit = (row: GroupCourse) => {
+  modalTitle.value = '编辑团课'
+  Object.assign(formState, { ...row })
+  modalVisible.value = true
+}
+
+const handleCancel = async (row: GroupCourse) => {
+  try {
+    await ElMessageBox.confirm('确定要取消该团课吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseApi.cancel(row.id!)
+    ElMessage.success('取消成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('取消失败')
+    }
+  }
+}
+
+const handleDelete = async (row: GroupCourse) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该团课吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await groupCourseApi.delete(row.id!)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+const handleModalOk = async () => {
+  if (!formRef.value) return
+  try {
+    await formRef.value.validate()
+    if (formState.id) {
+      await groupCourseApi.update(formState.id, formState)
+    } else {
+      await groupCourseApi.create(formState)
+    }
+    ElMessage.success('操作成功')
+    modalVisible.value = false
+    fetchData()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败')
+    }
+  }
+}
+
+onMounted(() => {
+  fetchCourseTypes()
+  fetchData()
+})
+</script>
+
+<style scoped lang="css">
+.group-course-management {
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+
+    .search-section {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+}
+</style>