更新后台管理系统，实现团课管理基础显示
This commit is contained in:
@@ -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',
|
||||
component: () => import('@/views/audit/ExceptionLog.vue'),
|
||||
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