543 lines
18 KiB
Vue
543 lines
18 KiB
Vue
<template>
|
|
<div class="coach-management">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<div class="search-section">
|
|
<el-input
|
|
v-model="searchKeyword"
|
|
placeholder="搜索教练用户名或昵称"
|
|
clearable
|
|
style="width: 300px"
|
|
@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="filteredData" style="width: 100%" :row-class-name="getRowClass">
|
|
<el-table-column prop="username" label="用户名" />
|
|
<el-table-column prop="nickname" label="昵称" />
|
|
<el-table-column prop="email" label="邮箱" />
|
|
<el-table-column prop="phone" label="手机号" />
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag
|
|
:type="row.status === 1 ? 'success' : 'danger'"
|
|
effect="dark"
|
|
>
|
|
{{ row.status === 1 ? '正常' : '禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="违规次数" width="100" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getViolationTag(Number(row.id))" effect="dark" round>
|
|
{{ violationCounts[Number(row.id)] ?? 0 }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createdAt" label="创建时间">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.createdAt) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="380">
|
|
<template #default="{ row }">
|
|
<el-button type="primary" link @click="handleEdit(row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button type="info" link @click="handleViewCourses(row)">
|
|
查看团课
|
|
</el-button>
|
|
<el-button type="success" link @click="handleViewDetail(row)">
|
|
详情
|
|
</el-button>
|
|
<el-button
|
|
v-if="row.status === 1"
|
|
type="danger"
|
|
link
|
|
@click="handleDisable(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="80px"
|
|
>
|
|
<el-form-item label="用户名" prop="username" required>
|
|
<el-input v-model="formState.username" :disabled="!!formState.id" />
|
|
</el-form-item>
|
|
<el-form-item v-if="!formState.id" label="密码" prop="password" required>
|
|
<el-input v-model="formState.password" type="password" show-password />
|
|
</el-form-item>
|
|
<el-form-item label="昵称">
|
|
<el-input v-model="formState.nickname" />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="formState.email" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="formState.phone" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleModalCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleModalOk">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 查看团课弹窗 -->
|
|
<el-dialog
|
|
v-model="coursesDialogVisible"
|
|
:title="'教练团课 - ' + selectedCoachName"
|
|
width="900px"
|
|
>
|
|
<el-table v-loading="coursesLoading" :data="coachCourses" style="width: 100%" max-height="400">
|
|
<el-table-column prop="id" label="ID" width="60" />
|
|
<el-table-column prop="courseName" label="课程名称" />
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getCourseStatusTag(row.status)" effect="dark">
|
|
{{ getCourseStatusText(row.status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="开课时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.startTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结课时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.endTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="预约人数" width="100">
|
|
<template #default="{ row }">
|
|
{{ coachCourseMemberCounts[row.id!] ?? row.currentMembers }} / {{ row.maxMembers }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="location" label="上课地点" />
|
|
</el-table>
|
|
<template #footer>
|
|
<el-button @click="coursesDialogVisible = false">关闭</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 教练详情弹窗 -->
|
|
<el-dialog
|
|
v-model="detailDialogVisible"
|
|
:title="'教练详情 - ' + (detailCoach?.nickname || detailCoach?.username || '')"
|
|
width="960px"
|
|
destroy-on-close
|
|
>
|
|
<template v-if="detailCoach">
|
|
<!-- 基本信息 -->
|
|
<el-descriptions :column="3" border size="small" style="margin-bottom: 20px">
|
|
<el-descriptions-item label="用户名">{{ detailCoach.username }}</el-descriptions-item>
|
|
<el-descriptions-item label="昵称">{{ detailCoach.nickname }}</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<el-tag :type="detailCoach.status === 1 ? 'success' : 'danger'" effect="dark">
|
|
{{ detailCoach.status === 1 ? '正常' : '禁用' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="邮箱">{{ detailCoach.email }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">{{ detailCoach.phone }}</el-descriptions-item>
|
|
<el-descriptions-item label="教练ID">{{ detailCoach.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="违规次数">
|
|
<el-tag :type="getViolationTag(Number(detailCoach.id))" effect="dark" round>
|
|
{{ violationCounts[Number(detailCoach.id)] ?? 0 }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ formatDateTime(detailCoach.createdAt) }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ formatDateTime(detailCoach.updatedAt) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<!-- 违规记录 -->
|
|
<h4 style="margin-bottom: 10px; color: #E6A23C;">违规记录</h4>
|
|
<el-table v-loading="detailViolationsLoading" :data="detailViolations" style="width: 100%" max-height="240" empty-text="暂无违规记录">
|
|
<el-table-column prop="course_name" label="课程名称" min-width="120" />
|
|
<el-table-column prop="course_id" label="课程ID" width="80" />
|
|
<el-table-column label="违规类型" width="120">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getViolationTypeTag(row.violation_reason)" effect="dark">
|
|
{{ getViolationTypeText(row.violation_reason) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="违规时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.violation_time) }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 团课记录 -->
|
|
<h4 style="margin-top: 20px; margin-bottom: 10px; color: #409EFF;">团课记录</h4>
|
|
<el-table v-loading="detailCoursesLoading" :data="detailCourses" style="width: 100%" max-height="240" empty-text="暂无团课记录">
|
|
<el-table-column prop="courseName" label="课程名称" min-width="120" />
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getCourseStatusTag(row.status)" effect="dark">
|
|
{{ getCourseStatusText(row.status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="开课时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.startTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结课时间" width="180">
|
|
<template #default="{ row }">
|
|
{{ formatDateTime(row.endTime) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="预约人数" width="100">
|
|
<template #default="{ row }">
|
|
{{ coachCourseMemberCounts[row.id!] ?? row.currentMembers }} / {{ row.maxMembers }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="location" label="上课地点" />
|
|
</el-table>
|
|
</template>
|
|
<template #footer>
|
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import { coachApi, type Coach, type CoachCreateRequest, type CoachUpdateRequest, type GroupCourse, type ViolationCountItem, type ViolationRecord } from '@/api/coach.api'
|
|
import { groupCourseBookingApi } from '@/api/groupCourse.api'
|
|
import { handleApiError } from '@/utils/errorHandler'
|
|
import { formatDateTime } from '@/utils/dateFormat'
|
|
|
|
const loading = ref(false)
|
|
const dataSource = ref<Coach[]>([])
|
|
const searchKeyword = ref('')
|
|
const violationCounts = reactive<Record<number, number>>({})
|
|
|
|
const filteredData = computed(() => {
|
|
if (!searchKeyword.value) return dataSource.value
|
|
const keyword = searchKeyword.value.toLowerCase()
|
|
return dataSource.value.filter(
|
|
(c) =>
|
|
c.username.toLowerCase().includes(keyword) ||
|
|
c.nickname.toLowerCase().includes(keyword) ||
|
|
c.email.toLowerCase().includes(keyword)
|
|
)
|
|
})
|
|
|
|
// 新增/编辑表单
|
|
const modalVisible = ref(false)
|
|
const modalTitle = ref('')
|
|
const formRef = ref()
|
|
const formState = reactive<CoachCreateRequest & { id?: string }>({
|
|
username: '',
|
|
password: '',
|
|
nickname: '',
|
|
email: '',
|
|
phone: '',
|
|
})
|
|
|
|
const formRules = {
|
|
username: [
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|
{ min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' },
|
|
{ pattern: /^[a-zA-Z0-9_-]+$/, message: '用户名只能包含字母、数字、下划线和横线', trigger: 'blur' },
|
|
],
|
|
password: [
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|
{ min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' },
|
|
{ pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/, message: '密码必须包含大小写字母和数字', trigger: 'blur' },
|
|
],
|
|
email: [
|
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
|
],
|
|
}
|
|
|
|
// 团课查看
|
|
const coursesDialogVisible = ref(false)
|
|
const coursesLoading = ref(false)
|
|
const coachCourses = ref<GroupCourse[]>([])
|
|
const selectedCoachName = ref('')
|
|
const coachCourseMemberCounts = reactive<Record<number, number>>({})
|
|
|
|
// 团课状态映射
|
|
const courseStatusMap: Record<number, { text: string; tag: string }> = {
|
|
0: { text: '正常', tag: 'success' },
|
|
1: { text: '已取消', tag: 'info' },
|
|
2: { text: '已结束', tag: 'warning' },
|
|
3: { text: '进行中', tag: 'danger' },
|
|
5: { text: '教练缺席', tag: 'danger' },
|
|
6: { text: '自动结束', tag: 'info' },
|
|
7: { text: '教练迟到', tag: 'warning' },
|
|
}
|
|
|
|
// 违规类型映射
|
|
const violationTypeMap: Record<string, { text: string; tag: string }> = {
|
|
COACH_LATE: { text: '教练迟到', tag: 'warning' },
|
|
COACH_ABSENT: { text: '教练缺席', tag: 'danger' },
|
|
NOT_MANUAL_END: { text: '未手动结课', tag: 'info' },
|
|
}
|
|
|
|
function getViolationTypeText(reason: string) {
|
|
return violationTypeMap[reason]?.text || reason
|
|
}
|
|
|
|
function getViolationTypeTag(reason: string) {
|
|
return violationTypeMap[reason]?.tag || 'info'
|
|
}
|
|
|
|
function getCourseStatusText(status: number) {
|
|
return courseStatusMap[status]?.text || '未知'
|
|
}
|
|
|
|
function getCourseStatusTag(status: number) {
|
|
return courseStatusMap[status]?.tag || 'info'
|
|
}
|
|
|
|
const fetchData = async () => {
|
|
loading.value = true
|
|
try {
|
|
dataSource.value = await coachApi.getAll()
|
|
// 同步获取违规次数统计
|
|
const counts = await coachApi.getViolationCounts()
|
|
// 清空旧数据
|
|
Object.keys(violationCounts).forEach(key => delete violationCounts[Number(key)])
|
|
counts.forEach(item => {
|
|
violationCounts[item.coach_id] = item.count
|
|
})
|
|
} catch (error) {
|
|
handleApiError(error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSearch = () => {
|
|
// 前端过滤，无需重新请求
|
|
}
|
|
|
|
const handleAdd = () => {
|
|
modalTitle.value = '新增教练'
|
|
Object.assign(formState, {
|
|
id: undefined,
|
|
username: '',
|
|
password: '',
|
|
nickname: '',
|
|
email: '',
|
|
phone: '',
|
|
})
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const handleEdit = (row: Coach) => {
|
|
modalTitle.value = '编辑教练'
|
|
Object.assign(formState, {
|
|
id: row.id,
|
|
username: row.username,
|
|
nickname: row.nickname,
|
|
email: row.email,
|
|
phone: row.phone,
|
|
})
|
|
modalVisible.value = true
|
|
}
|
|
|
|
const handleDisable = async (row: Coach) => {
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
`确定要禁用教练「${row.nickname || row.username}」吗？\n\n禁用后：\n1. 该教练正在进行中的团课不会被影响\n2. 该教练非进行中的团课将被自动取消\n3. 该教练将无法再被关联到团课`,
|
|
'禁用教练确认',
|
|
{
|
|
confirmButtonText: '确定禁用',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: false,
|
|
}
|
|
)
|
|
await coachApi.disable(row.id)
|
|
ElMessage.success('教练已禁用')
|
|
fetchData()
|
|
} catch (error: any) {
|
|
if (error !== 'cancel') {
|
|
handleApiError(error)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleModalOk = async () => {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
await formRef.value.validate()
|
|
|
|
if (formState.id) {
|
|
const updateData: CoachUpdateRequest = {
|
|
nickname: formState.nickname,
|
|
email: formState.email,
|
|
phone: formState.phone,
|
|
}
|
|
await coachApi.update(formState.id, updateData)
|
|
ElMessage.success('更新成功')
|
|
} else {
|
|
const createData: CoachCreateRequest = {
|
|
username: formState.username,
|
|
password: formState.password,
|
|
nickname: formState.nickname,
|
|
email: formState.email,
|
|
phone: formState.phone,
|
|
}
|
|
await coachApi.create(createData)
|
|
ElMessage.success('创建成功')
|
|
}
|
|
modalVisible.value = false
|
|
fetchData()
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
handleApiError(error)
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleModalCancel = () => {
|
|
modalVisible.value = false
|
|
}
|
|
|
|
const handleViewCourses = async (row: Coach) => {
|
|
selectedCoachName.value = row.nickname || row.username
|
|
coursesDialogVisible.value = true
|
|
coursesLoading.value = true
|
|
try {
|
|
coachCourses.value = await coachApi.getCourses(row.id)
|
|
await fetchCoachRealMemberCounts(coachCourses.value)
|
|
} catch (error) {
|
|
handleApiError(error)
|
|
} finally {
|
|
coursesLoading.value = false
|
|
}
|
|
}
|
|
|
|
const fetchCoachRealMemberCounts = async (courses: GroupCourse[]) => {
|
|
const results = await Promise.allSettled(
|
|
courses.map(course =>
|
|
groupCourseBookingApi.getByCourseId(course.id!).then(bookings => ({
|
|
courseId: course.id!,
|
|
count: bookings.filter(b => b.status === '0' || b.status === '2').length,
|
|
}))
|
|
)
|
|
)
|
|
results.forEach(r => {
|
|
if (r.status === 'fulfilled') {
|
|
coachCourseMemberCounts[r.value.courseId] = r.value.count
|
|
}
|
|
})
|
|
}
|
|
|
|
// 违规次数标签颜色
|
|
function getViolationTag(coachId: number) {
|
|
const count = violationCounts[coachId] ?? 0
|
|
if (count === 0) return 'success'
|
|
if (count <= 2) return 'warning'
|
|
return 'danger'
|
|
}
|
|
|
|
// 违规行高亮
|
|
function getRowClass({ row }: { row: Coach }) {
|
|
const count = violationCounts[Number(row.id)] ?? 0
|
|
return count > 0 ? 'row--has-violation' : ''
|
|
}
|
|
|
|
// 详情弹窗
|
|
const detailDialogVisible = ref(false)
|
|
const detailCoach = ref<Coach | null>(null)
|
|
const detailViolations = ref<ViolationRecord[]>([])
|
|
const detailViolationsLoading = ref(false)
|
|
const detailCourses = ref<GroupCourse[]>([])
|
|
const detailCoursesLoading = ref(false)
|
|
|
|
const handleViewDetail = async (row: Coach) => {
|
|
detailCoach.value = row
|
|
detailDialogVisible.value = true
|
|
// 并行加载违规记录和团课记录
|
|
detailViolationsLoading.value = true
|
|
detailCoursesLoading.value = true
|
|
try {
|
|
const [violations, courses] = await Promise.all([
|
|
coachApi.getViolations(row.id),
|
|
coachApi.getCourses(row.id),
|
|
])
|
|
detailViolations.value = violations
|
|
detailCourses.value = courses
|
|
await fetchCoachRealMemberCounts(courses)
|
|
} catch (error) {
|
|
handleApiError(error)
|
|
} finally {
|
|
detailViolationsLoading.value = false
|
|
detailCoursesLoading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="css">
|
|
.coach-management {
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
|
|
.search-section {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 有违规记录的教练行：左侧红色边框 + 浅色背景 */
|
|
:deep(.row--has-violation) {
|
|
border-left: 3px solid #F56C6C;
|
|
background-color: #fef0f0 !important;
|
|
}
|
|
</style>
|