完成部分功能的后台管理 #47
@@ -0,0 +1,245 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// ==================== 团课课程 ====================
|
||||||
|
|
||||||
|
export interface GroupCourse {
|
||||||
|
id?: number
|
||||||
|
courseName: string
|
||||||
|
coachId?: number
|
||||||
|
courseType?: number
|
||||||
|
startTime: string
|
||||||
|
endTime: string
|
||||||
|
maxMembers?: number
|
||||||
|
currentMembers?: number
|
||||||
|
status?: string
|
||||||
|
actualStartTime?: string
|
||||||
|
actualEndTime?: string
|
||||||
|
location?: string
|
||||||
|
coverImage?: string
|
||||||
|
description?: string
|
||||||
|
storedValueAmount?: number
|
||||||
|
qrCodePath?: string
|
||||||
|
createBy?: string
|
||||||
|
updateBy?: string
|
||||||
|
createdAt?: string
|
||||||
|
updatedAt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GroupCoursePageRequest {
|
||||||
|
page: number
|
||||||
|
size: number
|
||||||
|
keyword?: string
|
||||||
|
status?: string
|
||||||
|
courseType?: number
|
||||||
|
coachId?: number
|
||||||
|
startTime?: string
|
||||||
|
endTime?: string
|
||||||
|
sortBy?: string
|
||||||
|
sortOrder?: 'asc' | 'desc'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PageResponse<T> {
|
||||||
|
content: T[]
|
||||||
|
totalElements: number
|
||||||
|
totalPages: number
|
||||||
|
size: number
|
||||||
|
number: number
|
||||||
|
first: boolean
|
||||||
|
last: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const groupCourseApi = {
|
||||||
|
getAll: () =>
|
||||||
|
request.get<GroupCourse[]>('/groupCourse/list'),
|
||||||
|
|
||||||
|
getPage: (params: GroupCoursePageRequest) =>
|
||||||
|
request.post<PageResponse<GroupCourse>>('/groupCourse/page', params),
|
||||||
|
|
||||||
|
getById: (id: number) =>
|
||||||
|
request.get<GroupCourse>(`/groupCourse/${id}`),
|
||||||
|
|
||||||
|
getDetailById: (id: number) =>
|
||||||
|
request.get<GroupCourse>(`/groupCourse/${id}/detail`),
|
||||||
|
|
||||||
|
create: (data: GroupCourse) =>
|
||||||
|
request.post<GroupCourse>('/groupCourse', data),
|
||||||
|
|
||||||
|
update: (id: number, data: GroupCourse) =>
|
||||||
|
request.put<GroupCourse>(`/groupCourse/${id}`, data),
|
||||||
|
|
||||||
|
delete: (id: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/${id}`),
|
||||||
|
|
||||||
|
cancel: (id: number) =>
|
||||||
|
request.post<void>(`/groupCourse/${id}/cancel`),
|
||||||
|
|
||||||
|
search: (params: any) =>
|
||||||
|
request.post<GroupCourse[]>('/groupCourse/search', params),
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 团课类型 ====================
|
||||||
|
|
||||||
|
export interface GroupCourseType {
|
||||||
|
id?: number
|
||||||
|
typeName: string
|
||||||
|
baseDifficulty?: number
|
||||||
|
description?: string
|
||||||
|
category?: string
|
||||||
|
createBy?: string
|
||||||
|
updateBy?: string
|
||||||
|
createdAt?: string
|
||||||
|
updatedAt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const groupCourseTypeApi = {
|
||||||
|
getAll: () =>
|
||||||
|
request.get<GroupCourseType[]>('/groupCourse/types'),
|
||||||
|
|
||||||
|
search: (params: any) =>
|
||||||
|
request.get<GroupCourseType[]>('/groupCourse/types/search', { params }),
|
||||||
|
|
||||||
|
getCategories: () =>
|
||||||
|
request.get<string[]>('/groupCourse/types/categories'),
|
||||||
|
|
||||||
|
getByCategory: (category: string) =>
|
||||||
|
request.get<GroupCourseType[]>(`/groupCourse/types/category/${category}`),
|
||||||
|
|
||||||
|
getById: (id: number) =>
|
||||||
|
request.get<GroupCourseType>(`/groupCourse/types/${id}`),
|
||||||
|
|
||||||
|
create: (data: GroupCourseType) =>
|
||||||
|
request.post<GroupCourseType>('/groupCourse/types', data),
|
||||||
|
|
||||||
|
update: (id: number, data: GroupCourseType) =>
|
||||||
|
request.put<GroupCourseType>(`/groupCourse/types/${id}`, data),
|
||||||
|
|
||||||
|
delete: (id: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/types/${id}`),
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 团课标签 ====================
|
||||||
|
|
||||||
|
export interface CourseLabel {
|
||||||
|
id?: number
|
||||||
|
labelName: string
|
||||||
|
color?: string
|
||||||
|
description?: string
|
||||||
|
createBy?: string
|
||||||
|
updateBy?: string
|
||||||
|
createdAt?: string
|
||||||
|
updatedAt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const courseLabelApi = {
|
||||||
|
getAll: () =>
|
||||||
|
request.get<CourseLabel[]>('/groupCourse/labels'),
|
||||||
|
|
||||||
|
search: (params: any) =>
|
||||||
|
request.get<CourseLabel[]>('/groupCourse/labels/search', { params }),
|
||||||
|
|
||||||
|
getById: (id: number) =>
|
||||||
|
request.get<CourseLabel>(`/groupCourse/labels/${id}`),
|
||||||
|
|
||||||
|
getByTypeId: (typeId: number) =>
|
||||||
|
request.get<CourseLabel[]>(`/groupCourse/types/${typeId}/labels`),
|
||||||
|
|
||||||
|
create: (data: CourseLabel) =>
|
||||||
|
request.post<CourseLabel>('/groupCourse/labels', data),
|
||||||
|
|
||||||
|
update: (id: number, data: CourseLabel) =>
|
||||||
|
request.put<CourseLabel>(`/groupCourse/labels/${id}`, data),
|
||||||
|
|
||||||
|
delete: (id: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/labels/${id}`),
|
||||||
|
|
||||||
|
addLabelsToType: (typeId: number, labelIds: number[]) =>
|
||||||
|
request.post<void>(`/groupCourse/types/${typeId}/labels`, labelIds),
|
||||||
|
|
||||||
|
removeLabelFromType: (typeId: number, labelId: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/types/${typeId}/labels/${labelId}`),
|
||||||
|
|
||||||
|
clearLabelsFromType: (typeId: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/types/${typeId}/labels`),
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 团课推荐 ====================
|
||||||
|
|
||||||
|
export interface GroupCourseRecommend {
|
||||||
|
id?: number
|
||||||
|
courseId: number
|
||||||
|
recommendTitle?: string
|
||||||
|
recommendContent?: string
|
||||||
|
recommendReason?: string
|
||||||
|
priority?: number
|
||||||
|
isActive?: boolean
|
||||||
|
createBy?: string
|
||||||
|
updateBy?: string
|
||||||
|
createdAt?: string
|
||||||
|
updatedAt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const groupCourseRecommendApi = {
|
||||||
|
getAll: () =>
|
||||||
|
request.get<GroupCourseRecommend[]>('/groupCourse/recommend/list'),
|
||||||
|
|
||||||
|
getActive: () =>
|
||||||
|
request.get<GroupCourseRecommend[]>('/groupCourse/recommend/active'),
|
||||||
|
|
||||||
|
getById: (id: number) =>
|
||||||
|
request.get<GroupCourseRecommend>(`/groupCourse/recommend/${id}`),
|
||||||
|
|
||||||
|
getByCourseId: (courseId: number) =>
|
||||||
|
request.get<GroupCourseRecommend[]>(`/groupCourse/recommend/course/${courseId}`),
|
||||||
|
|
||||||
|
create: (data: GroupCourseRecommend) =>
|
||||||
|
request.post<GroupCourseRecommend>('/groupCourse/recommend', data),
|
||||||
|
|
||||||
|
update: (id: number, data: GroupCourseRecommend) =>
|
||||||
|
request.put<GroupCourseRecommend>(`/groupCourse/recommend/${id}`, data),
|
||||||
|
|
||||||
|
delete: (id: number) =>
|
||||||
|
request.delete<void>(`/groupCourse/recommend/${id}`),
|
||||||
|
|
||||||
|
enable: (id: number) =>
|
||||||
|
request.post<void>(`/groupCourse/recommend/${id}/enable`),
|
||||||
|
|
||||||
|
disable: (id: number) =>
|
||||||
|
request.post<void>(`/groupCourse/recommend/${id}/disable`),
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 团课预约 ====================
|
||||||
|
|
||||||
|
export interface GroupCourseBooking {
|
||||||
|
id?: number
|
||||||
|
courseId: number
|
||||||
|
memberId: number
|
||||||
|
memberCardId: number
|
||||||
|
bookingTime?: string
|
||||||
|
status?: string
|
||||||
|
cancelTime?: string
|
||||||
|
courseName?: string
|
||||||
|
courseStartTime?: string
|
||||||
|
courseEndTime?: string
|
||||||
|
location?: string
|
||||||
|
createBy?: string
|
||||||
|
updateBy?: string
|
||||||
|
createdAt?: string
|
||||||
|
updatedAt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const groupCourseBookingApi = {
|
||||||
|
book: (data: GroupCourseBooking) =>
|
||||||
|
request.post<GroupCourseBooking>('/groupCourse/book', data),
|
||||||
|
|
||||||
|
cancel: (bookingId: number) =>
|
||||||
|
request.post<void>(`/groupCourse/booking/${bookingId}/cancel`),
|
||||||
|
|
||||||
|
getByMemberId: (memberId: number) =>
|
||||||
|
request.get<GroupCourseBooking[]>(`/groupCourse/bookings/member/${memberId}`),
|
||||||
|
|
||||||
|
getByCourseId: (courseId: number) =>
|
||||||
|
request.get<GroupCourseBooking[]>(`/groupCourse/bookings/course/${courseId}`),
|
||||||
|
|
||||||
|
getById: (bookingId: number) =>
|
||||||
|
request.get<GroupCourseBooking>(`/groupCourse/bookings/${bookingId}`),
|
||||||
|
}
|
||||||
@@ -93,6 +93,30 @@ const routes: RouteRecordRaw[] = [
|
|||||||
name: 'ExceptionLog',
|
name: 'ExceptionLog',
|
||||||
component: () => import('@/views/audit/ExceptionLog.vue'),
|
component: () => import('@/views/audit/ExceptionLog.vue'),
|
||||||
meta: { title: '异常日志' }
|
meta: { title: '异常日志' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'courses',
|
||||||
|
name: 'GroupCourseManagement',
|
||||||
|
component: () => import('@/views/groupcourse/GroupCourseManagement.vue'),
|
||||||
|
meta: { title: '团课管理' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'courses/types',
|
||||||
|
name: 'CourseTypeManagement',
|
||||||
|
component: () => import('@/views/groupcourse/CourseTypeManagement.vue'),
|
||||||
|
meta: { title: '团课类型' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'courses/labels',
|
||||||
|
name: 'CourseLabelManagement',
|
||||||
|
component: () => import('@/views/groupcourse/CourseLabelManagement.vue'),
|
||||||
|
meta: { title: '团课标签' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'courses/recommend',
|
||||||
|
name: 'CourseRecommendManagement',
|
||||||
|
component: () => import('@/views/groupcourse/CourseRecommendManagement.vue'),
|
||||||
|
meta: { title: '团课推荐' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,227 @@
|
|||||||
|
<template>
|
||||||
|
<div class="course-label-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-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%"
|
||||||
|
>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="labelName" label="标签名称" min-width="140">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag
|
||||||
|
:color="row.color"
|
||||||
|
effect="dark"
|
||||||
|
style="font-weight: 500; font-size: 14px; border-color: transparent;"
|
||||||
|
>
|
||||||
|
{{ row.labelName }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="color" label="颜色" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div style="display: flex; align-items: center; gap: 6px;">
|
||||||
|
<span
|
||||||
|
:style="{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
backgroundColor: row.color,
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<span>{{ row.color }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link size="small" @click="handleEdit(row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" link size="small" @click="handleDelete(row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="modalVisible"
|
||||||
|
:title="modalTitle"
|
||||||
|
width="500px"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="标签名称" prop="labelName">
|
||||||
|
<el-input v-model="formState.labelName" placeholder="请输入标签名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签颜色" prop="color">
|
||||||
|
<el-color-picker v-model="formState.color" show-alpha />
|
||||||
|
<span style="margin-left: 8px; color: #909399;">{{ formState.color }}</span>
|
||||||
|
</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 { courseLabelApi, type CourseLabel } from '@/api/groupCourse.api'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const dataSource = ref<CourseLabel[]>([])
|
||||||
|
const searchKeyword = ref('')
|
||||||
|
|
||||||
|
const modalVisible = ref(false)
|
||||||
|
const modalTitle = ref('')
|
||||||
|
const formRef = ref()
|
||||||
|
const formState = reactive<CourseLabel>({
|
||||||
|
labelName: '',
|
||||||
|
color: '#1890ff',
|
||||||
|
description: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = {
|
||||||
|
labelName: [
|
||||||
|
{ required: true, message: '请输入标签名称', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 50, message: '标签名称长度在 2 到 50 个字符', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
color: [{ required: true, message: '请选择标签颜色', trigger: 'change' }],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
dataSource.value = await courseLabelApi.getAll()
|
||||||
|
if (searchKeyword.value) {
|
||||||
|
dataSource.value = dataSource.value.filter((item) =>
|
||||||
|
item.labelName.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('加载数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => fetchData()
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
modalTitle.value = '新增标签'
|
||||||
|
Object.assign(formState, {
|
||||||
|
id: undefined,
|
||||||
|
labelName: '',
|
||||||
|
color: '#1890ff',
|
||||||
|
description: '',
|
||||||
|
})
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (row: CourseLabel) => {
|
||||||
|
modalTitle.value = '编辑标签'
|
||||||
|
Object.assign(formState, { ...row })
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (row: CourseLabel) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该标签吗？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
await courseLabelApi.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 courseLabelApi.update(formState.id, formState)
|
||||||
|
} else {
|
||||||
|
await courseLabelApi.create(formState)
|
||||||
|
}
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
modalVisible.value = false
|
||||||
|
fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => fetchData())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.course-label-management {
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,246 @@
|
|||||||
|
<template>
|
||||||
|
<div class="course-recommend-management">
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-title">
|
||||||
|
<span>团课推荐管理</span>
|
||||||
|
<el-button type="primary" @click="handleAdd">
|
||||||
|
新增推荐
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="dataSource"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="courseId" label="团课ID" width="100" />
|
||||||
|
<el-table-column prop="recommendTitle" label="推荐标题" min-width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column label="优先级" width="100" sortable="custom">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag
|
||||||
|
:type="row.priority >= 5 ? 'danger' : row.priority >= 3 ? 'warning' : 'info'"
|
||||||
|
effect="dark"
|
||||||
|
style="font-weight: 500; font-size: 14px;"
|
||||||
|
>
|
||||||
|
{{ row.priority }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="启用状态" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag
|
||||||
|
:type="row.isActive ? 'success' : 'danger'"
|
||||||
|
effect="dark"
|
||||||
|
style="font-weight: 500; font-size: 14px;"
|
||||||
|
>
|
||||||
|
{{ row.isActive ? '启用' : '停用' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="recommendReason" label="推荐理由" min-width="180" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="280" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link size="small" @click="handleEdit(row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="row.isActive"
|
||||||
|
type="warning"
|
||||||
|
link
|
||||||
|
size="small"
|
||||||
|
@click="handleToggleActive(row)"
|
||||||
|
>
|
||||||
|
停用
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-else
|
||||||
|
type="success"
|
||||||
|
link
|
||||||
|
size="small"
|
||||||
|
@click="handleToggleActive(row)"
|
||||||
|
>
|
||||||
|
启用
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" link size="small" @click="handleDelete(row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="modalVisible"
|
||||||
|
:title="modalTitle"
|
||||||
|
width="550px"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
: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>
|
||||||
|
<el-form-item label="推荐标题" prop="recommendTitle">
|
||||||
|
<el-input v-model="formState.recommendTitle" placeholder="请输入推荐标题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="推荐内容">
|
||||||
|
<el-input
|
||||||
|
v-model="formState.recommendContent"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入推荐内容"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="推荐理由">
|
||||||
|
<el-input
|
||||||
|
v-model="formState.recommendReason"
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
placeholder="请输入推荐理由"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优先级" prop="priority">
|
||||||
|
<el-input-number v-model="formState.priority" :min="0" :max="999" style="width: 100%" />
|
||||||
|
</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 { groupCourseRecommendApi, type GroupCourseRecommend } from '@/api/groupCourse.api'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const dataSource = ref<GroupCourseRecommend[]>([])
|
||||||
|
|
||||||
|
const modalVisible = ref(false)
|
||||||
|
const modalTitle = ref('')
|
||||||
|
const formRef = ref()
|
||||||
|
const formState = reactive<GroupCourseRecommend>({
|
||||||
|
courseId: 0,
|
||||||
|
recommendTitle: '',
|
||||||
|
recommendContent: '',
|
||||||
|
recommendReason: '',
|
||||||
|
priority: 0,
|
||||||
|
isActive: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = {
|
||||||
|
courseId: [{ required: true, message: '请输入团课ID', trigger: 'blur' }],
|
||||||
|
recommendTitle: [
|
||||||
|
{ required: true, message: '请输入推荐标题', trigger: 'blur' },
|
||||||
|
{ max: 200, message: '标题长度不能超过200个字符', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
priority: [{ required: true, message: '请设置优先级', trigger: 'blur' }],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
dataSource.value = await groupCourseRecommendApi.getAll()
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('加载数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
modalTitle.value = '新增推荐'
|
||||||
|
Object.assign(formState, {
|
||||||
|
id: undefined,
|
||||||
|
courseId: 0,
|
||||||
|
recommendTitle: '',
|
||||||
|
recommendContent: '',
|
||||||
|
recommendReason: '',
|
||||||
|
priority: 0,
|
||||||
|
isActive: true,
|
||||||
|
})
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (row: GroupCourseRecommend) => {
|
||||||
|
modalTitle.value = '编辑推荐'
|
||||||
|
Object.assign(formState, { ...row })
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleActive = async (row: GroupCourseRecommend) => {
|
||||||
|
try {
|
||||||
|
const actionText = row.isActive ? '停用' : '启用'
|
||||||
|
await ElMessageBox.confirm(`确定要${actionText}该推荐吗？`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
if (row.isActive) {
|
||||||
|
await groupCourseRecommendApi.disable(row.id!)
|
||||||
|
} else {
|
||||||
|
await groupCourseRecommendApi.enable(row.id!)
|
||||||
|
}
|
||||||
|
ElMessage.success(`${actionText}成功`)
|
||||||
|
fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (row: GroupCourseRecommend) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该推荐吗？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
await groupCourseRecommendApi.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 groupCourseRecommendApi.update(formState.id, formState)
|
||||||
|
} else {
|
||||||
|
await groupCourseRecommendApi.create(formState)
|
||||||
|
}
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
modalVisible.value = false
|
||||||
|
fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => fetchData())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.course-recommend-management .card-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,269 @@
|
|||||||
|
<template>
|
||||||
|
<div class="course-type-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="searchCategory"
|
||||||
|
placeholder="筛选分类"
|
||||||
|
clearable
|
||||||
|
style="width: 160px"
|
||||||
|
@change="handleSearch"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="cat in categories"
|
||||||
|
:key="cat"
|
||||||
|
:value="cat"
|
||||||
|
:label="cat"
|
||||||
|
/>
|
||||||
|
</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%"
|
||||||
|
>
|
||||||
|
<el-table-column prop="id" label="ID" width="80" />
|
||||||
|
<el-table-column prop="typeName" label="类型名称" min-width="180" />
|
||||||
|
<el-table-column label="基础难度" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-rate
|
||||||
|
v-model="row.baseDifficulty"
|
||||||
|
disabled
|
||||||
|
show-score
|
||||||
|
:max="10"
|
||||||
|
text-color="#ff9900"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="category" label="分类" width="140">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag effect="dark" style="font-weight: 500; font-size: 14px;">
|
||||||
|
{{ row.category || '-' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link size="small" @click="handleEdit(row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" link size="small" @click="handleDelete(row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="modalVisible"
|
||||||
|
:title="modalTitle"
|
||||||
|
width="500px"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="类型名称" prop="typeName">
|
||||||
|
<el-input v-model="formState.typeName" placeholder="请输入类型名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="基础难度" prop="baseDifficulty">
|
||||||
|
<el-slider v-model="formState.baseDifficulty" :min="1" :max="10" show-stops style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="分类" prop="category">
|
||||||
|
<el-select
|
||||||
|
v-model="formState.category"
|
||||||
|
placeholder="请选择分类"
|
||||||
|
allow-create
|
||||||
|
filterable
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="cat in categories"
|
||||||
|
:key="cat"
|
||||||
|
:value="cat"
|
||||||
|
:label="cat"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</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 { groupCourseTypeApi, type GroupCourseType } from '@/api/groupCourse.api'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const dataSource = ref<GroupCourseType[]>([])
|
||||||
|
const searchKeyword = ref('')
|
||||||
|
const searchCategory = ref('')
|
||||||
|
const categories = ref<string[]>([])
|
||||||
|
|
||||||
|
const modalVisible = ref(false)
|
||||||
|
const modalTitle = ref('')
|
||||||
|
const formRef = ref()
|
||||||
|
const formState = reactive<GroupCourseType>({
|
||||||
|
typeName: '',
|
||||||
|
baseDifficulty: 3,
|
||||||
|
description: '',
|
||||||
|
category: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = {
|
||||||
|
typeName: [
|
||||||
|
{ required: true, message: '请输入类型名称', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 100, message: '类型名称长度在 2 到 100 个字符', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
baseDifficulty: [
|
||||||
|
{ required: true, message: '请设置基础难度', trigger: 'change' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchCategories = async () => {
|
||||||
|
try {
|
||||||
|
categories.value = await groupCourseTypeApi.getCategories()
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
if (searchCategory.value) {
|
||||||
|
dataSource.value = await groupCourseTypeApi.getByCategory(searchCategory.value)
|
||||||
|
} else {
|
||||||
|
dataSource.value = await groupCourseTypeApi.getAll()
|
||||||
|
}
|
||||||
|
if (searchKeyword.value) {
|
||||||
|
dataSource.value = dataSource.value.filter((item) =>
|
||||||
|
item.typeName.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('加载数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => fetchData()
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
modalTitle.value = '新增类型'
|
||||||
|
Object.assign(formState, {
|
||||||
|
id: undefined,
|
||||||
|
typeName: '',
|
||||||
|
baseDifficulty: 3,
|
||||||
|
description: '',
|
||||||
|
category: '',
|
||||||
|
})
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (row: GroupCourseType) => {
|
||||||
|
modalTitle.value = '编辑类型'
|
||||||
|
Object.assign(formState, { ...row })
|
||||||
|
modalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (row: GroupCourseType) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定要删除该团课类型吗？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
await groupCourseTypeApi.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 groupCourseTypeApi.update(formState.id, formState)
|
||||||
|
} else {
|
||||||
|
await groupCourseTypeApi.create(formState)
|
||||||
|
}
|
||||||
|
ElMessage.success('操作成功')
|
||||||
|
modalVisible.value = false
|
||||||
|
fetchCategories()
|
||||||
|
fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchCategories()
|
||||||
|
fetchData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.course-type-management {
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.search-section {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user