|
|
<script setup lang="ts">
|
|
|
import PageTitle from '@/components/PageTitle.vue'
|
|
|
import { computed, ref, watch } from 'vue'
|
|
|
import { usePageLoad } from '@/composables/usePageLoad'
|
|
|
import { fetchDictByCode } from '@/api/admin/dict'
|
|
|
import {
|
|
|
convertMiniappUserToTeacher,
|
|
|
fetchMiniappUser,
|
|
|
fetchMiniappUsersList,
|
|
|
type MiniappUserDetail,
|
|
|
type MiniappUserRow,
|
|
|
} from '@/api/admin/miniapp-users'
|
|
|
import {
|
|
|
fetchTeacherFilterOptions,
|
|
|
fetchUniversities,
|
|
|
type DictItemBrief,
|
|
|
type ResearchDirectionBrief,
|
|
|
type UniversityOption,
|
|
|
} from '@/api/admin/teachers'
|
|
|
import { previewNextFollowDate } from '@/utils/teacherFollowRule'
|
|
|
import { starDisplay } from '@/utils/teacherStar'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
const loading = ref(false)
|
|
|
const items = ref<MiniappUserRow[]>([])
|
|
|
const meta = ref({ current_page: 1, per_page: 20, total: 0 })
|
|
|
const page = ref(1)
|
|
|
const keyword = ref('')
|
|
|
const filterConverted = ref<'' | '0' | '1'>('')
|
|
|
|
|
|
const starOptions = ref<DictItemBrief[]>([])
|
|
|
const statusOptions = ref<DictItemBrief[]>([])
|
|
|
const directionOptions = ref<ResearchDirectionBrief[]>([])
|
|
|
const universityOptions = ref<UniversityOption[]>([])
|
|
|
|
|
|
const detailVisible = ref(false)
|
|
|
const detail = ref<MiniappUserDetail | null>(null)
|
|
|
|
|
|
const convertVisible = ref(false)
|
|
|
const convertRow = ref<MiniappUserRow | null>(null)
|
|
|
const convertSaving = ref(false)
|
|
|
const convertForm = ref({
|
|
|
name: '',
|
|
|
university_id: undefined as number | undefined,
|
|
|
city: '',
|
|
|
title: '',
|
|
|
research_direction_ids: [] as number[],
|
|
|
phone: '',
|
|
|
email: '',
|
|
|
star_level_dict_item_id: undefined as number | undefined,
|
|
|
status_dict_item_id: undefined as number | undefined,
|
|
|
next_follow_date: '',
|
|
|
})
|
|
|
|
|
|
const pendingStarId = computed(() => starOptions.value.find((s) => s.value === 'pending')?.id)
|
|
|
|
|
|
function formatEnrollments(titles: string[]): string {
|
|
|
if (!titles?.length) return '—'
|
|
|
return titles.join('、')
|
|
|
}
|
|
|
|
|
|
async function loadDicts() {
|
|
|
const [star, status, dirs, unis] = await Promise.all([
|
|
|
fetchDictByCode('teacher_level'),
|
|
|
fetchDictByCode('teacher_status'),
|
|
|
fetchTeacherFilterOptions(),
|
|
|
fetchUniversities({ page: 1, page_size: 500 }),
|
|
|
])
|
|
|
starOptions.value = star.items
|
|
|
statusOptions.value = status.items
|
|
|
directionOptions.value = dirs.research_directions
|
|
|
universityOptions.value = unis.items
|
|
|
}
|
|
|
|
|
|
async function load() {
|
|
|
loading.value = true
|
|
|
try {
|
|
|
const params: Record<string, unknown> = { page: page.value, page_size: meta.value.per_page }
|
|
|
if (keyword.value) params.keyword = keyword.value
|
|
|
if (filterConverted.value !== '') params.converted = filterConverted.value
|
|
|
const res = await fetchMiniappUsersList(params)
|
|
|
items.value = res.items
|
|
|
meta.value = res.meta
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function resetFilters() {
|
|
|
keyword.value = ''
|
|
|
filterConverted.value = ''
|
|
|
page.value = 1
|
|
|
load()
|
|
|
}
|
|
|
|
|
|
function searchList() {
|
|
|
page.value = 1
|
|
|
load()
|
|
|
}
|
|
|
|
|
|
async function openDetail(row: MiniappUserRow) {
|
|
|
detail.value = await fetchMiniappUser(row.id)
|
|
|
detailVisible.value = true
|
|
|
}
|
|
|
|
|
|
function openConvert(row: MiniappUserRow) {
|
|
|
if (row.teacher_id) {
|
|
|
ElMessage.warning('该学员已转入老师库')
|
|
|
return
|
|
|
}
|
|
|
convertRow.value = row
|
|
|
convertForm.value = {
|
|
|
name: row.name || '',
|
|
|
university_id: undefined,
|
|
|
city: '',
|
|
|
title: row.job_title || '',
|
|
|
research_direction_ids: [...(row.research_direction_ids || [])],
|
|
|
phone: row.mobile || '',
|
|
|
email: '',
|
|
|
star_level_dict_item_id: pendingStarId.value,
|
|
|
status_dict_item_id: statusOptions.value.find((s) => s.value === 'active')?.id,
|
|
|
next_follow_date: '',
|
|
|
}
|
|
|
convertVisible.value = true
|
|
|
}
|
|
|
|
|
|
function onConvertStarChange() {
|
|
|
const item = starOptions.value.find((s) => s.id === convertForm.value.star_level_dict_item_id)
|
|
|
convertForm.value.next_follow_date = previewNextFollowDate(item?.value) || ''
|
|
|
}
|
|
|
|
|
|
function onUniversityPick(id: number | undefined) {
|
|
|
if (!id) return
|
|
|
const u = universityOptions.value.find((x) => x.id === id)
|
|
|
if (u?.city && !convertForm.value.city) {
|
|
|
convertForm.value.city = u.city
|
|
|
}
|
|
|
}
|
|
|
|
|
|
watch(
|
|
|
() => convertForm.value.university_id,
|
|
|
(id) => onUniversityPick(id),
|
|
|
)
|
|
|
|
|
|
async function saveConvert() {
|
|
|
if (!convertRow.value) return
|
|
|
const f = convertForm.value
|
|
|
if (!f.name.trim()) {
|
|
|
ElMessage.warning('请填写姓名')
|
|
|
return
|
|
|
}
|
|
|
if (!f.university_id) {
|
|
|
ElMessage.warning('请选择高校')
|
|
|
return
|
|
|
}
|
|
|
if (!f.city.trim() || !f.title.trim()) {
|
|
|
ElMessage.warning('请填写城市与职称')
|
|
|
return
|
|
|
}
|
|
|
if (!f.research_direction_ids.length) {
|
|
|
ElMessage.warning('请选择研究方向')
|
|
|
return
|
|
|
}
|
|
|
if (!f.status_dict_item_id) {
|
|
|
ElMessage.warning('请选择状态')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
convertSaving.value = true
|
|
|
try {
|
|
|
const res = await convertMiniappUserToTeacher(convertRow.value.id, {
|
|
|
name: f.name.trim(),
|
|
|
university_id: f.university_id,
|
|
|
city: f.city.trim(),
|
|
|
title: f.title.trim(),
|
|
|
research_direction_ids: f.research_direction_ids,
|
|
|
phone: f.phone || null,
|
|
|
email: f.email || null,
|
|
|
star_level_dict_item_id: f.star_level_dict_item_id ?? null,
|
|
|
status_dict_item_id: f.status_dict_item_id,
|
|
|
next_follow_date: f.next_follow_date || null,
|
|
|
recalc_next_follow_date: true,
|
|
|
})
|
|
|
ElMessage.success(`已转入老师库（老师 ID：${res.teacher_id}）`)
|
|
|
convertVisible.value = false
|
|
|
await load()
|
|
|
} finally {
|
|
|
convertSaving.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
usePageLoad(async () => {
|
|
|
await loadDicts()
|
|
|
await load()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="list-page students-page">
|
|
|
<div class="page-header">
|
|
|
<PageTitle />
|
|
|
</div>
|
|
|
|
|
|
<el-card shadow="never" class="admin-list-card">
|
|
|
<div class="list-filter-bar">
|
|
|
<el-input
|
|
|
v-model="keyword"
|
|
|
class="filter-search"
|
|
|
placeholder="搜索姓名、手机号、公司…"
|
|
|
clearable
|
|
|
@keyup.enter="searchList"
|
|
|
/>
|
|
|
<el-select v-model="filterConverted" placeholder="转入状态" clearable class="filter-select-wide">
|
|
|
<el-option label="未转入老师库" value="0" />
|
|
|
<el-option label="已转入老师库" value="1" />
|
|
|
</el-select>
|
|
|
<el-button type="primary" class="btn-create" @click="searchList">搜索</el-button>
|
|
|
<el-button @click="resetFilters">重置</el-button>
|
|
|
</div>
|
|
|
|
|
|
<el-table v-loading="loading" :data="items" row-key="id">
|
|
|
<el-table-column prop="name" label="姓名" width="100" />
|
|
|
<el-table-column prop="mobile" label="手机号" width="120" />
|
|
|
<el-table-column prop="company" label="公司" min-width="140" show-overflow-tooltip />
|
|
|
<el-table-column label="研究方向" min-width="160" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
{{ row.research_direction || '—' }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="报名课程" min-width="160" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
{{ formatEnrollments(row.course_titles) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="报名活动" min-width="160" show-overflow-tooltip>
|
|
|
<template #default="{ row }">
|
|
|
{{ formatEnrollments(row.activity_titles) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="转入状态" width="110" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<span v-if="row.teacher_id" class="status-badge status-published">已转入</span>
|
|
|
<span v-else class="status-badge status-unpublished">未转入</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="200" fixed="right">
|
|
|
<template #default="{ row }">
|
|
|
<div class="table-row-actions">
|
|
|
<el-button size="small" class="btn-action-secondary table-inline-btn" @click="openDetail(row)">
|
|
|
详情
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
v-if="!row.teacher_id"
|
|
|
size="small"
|
|
|
class="btn-action-brand table-inline-btn"
|
|
|
@click="openConvert(row)"
|
|
|
>
|
|
|
转入老师库
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
v-else
|
|
|
size="small"
|
|
|
class="btn-action-secondary table-inline-btn"
|
|
|
disabled
|
|
|
>
|
|
|
已转入
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<div class="list-pager">
|
|
|
<el-pagination
|
|
|
v-model:current-page="page"
|
|
|
:page-size="meta.per_page"
|
|
|
:total="meta.total"
|
|
|
layout="total, prev, pager, next"
|
|
|
@current-change="load"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<el-dialog v-model="detailVisible" title="学员详情" width="720px" destroy-on-close>
|
|
|
<template v-if="detail">
|
|
|
<el-descriptions :column="2" border size="small">
|
|
|
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="手机号">{{ detail.mobile || '—' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="公司" :span="2">{{ detail.company || '—' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="职务">{{ detail.job_title || '—' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="研究方向">{{ detail.research_direction || '—' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="微信昵称">{{ detail.nickname || '—' }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="转入老师">
|
|
|
{{ detail.teacher_name ? `${detail.teacher_name}（ID ${detail.teacher_id}）` : '未转入' }}
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<h3 class="sub-title">报名课程</h3>
|
|
|
<el-table :data="detail.courses" size="small" empty-text="暂无报名">
|
|
|
<el-table-column prop="title" label="课程" min-width="180" />
|
|
|
<el-table-column prop="signed_up_at" label="报名时间" width="110" />
|
|
|
<el-table-column prop="company" label="报名时公司" width="140" show-overflow-tooltip />
|
|
|
</el-table>
|
|
|
|
|
|
<h3 class="sub-title">报名活动</h3>
|
|
|
<el-table :data="detail.activities" size="small" empty-text="暂无报名">
|
|
|
<el-table-column prop="title" label="活动" min-width="180" />
|
|
|
<el-table-column prop="signed_up_at" label="报名时间" width="110" />
|
|
|
<el-table-column prop="company" label="报名时公司" width="140" show-overflow-tooltip />
|
|
|
</el-table>
|
|
|
</template>
|
|
|
<template #footer>
|
|
|
<el-button @click="detailVisible = false">关闭</el-button>
|
|
|
<el-button
|
|
|
v-if="detail && !detail.teacher_id"
|
|
|
type="primary"
|
|
|
class="btn-create"
|
|
|
@click="detailVisible = false; openConvert(detail)"
|
|
|
>
|
|
|
转入老师库
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog
|
|
|
v-model="convertVisible"
|
|
|
title="转入老师库"
|
|
|
width="960px"
|
|
|
destroy-on-close
|
|
|
@closed="convertRow = null"
|
|
|
>
|
|
|
<div v-if="convertRow" class="follow-teacher-summary">
|
|
|
学员：{{ convertRow.name }}
|
|
|
<span v-if="convertRow.mobile"> · {{ convertRow.mobile }}</span>
|
|
|
<span v-if="convertRow.company"> · {{ convertRow.company }}</span>
|
|
|
<span v-if="convertRow.research_direction"> · 研究方向：{{ convertRow.research_direction }}</span>
|
|
|
</div>
|
|
|
<el-form label-position="top" class="form-small" style="margin-top: 12px">
|
|
|
<el-row :gutter="12">
|
|
|
<el-col :xs="24" :md="4">
|
|
|
<el-form-item label="姓名" required>
|
|
|
<el-input v-model="convertForm.name" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="8">
|
|
|
<el-form-item label="高校" required>
|
|
|
<el-select
|
|
|
v-model="convertForm.university_id"
|
|
|
filterable
|
|
|
placeholder="选择高校"
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-option v-for="u in universityOptions" :key="u.id" :label="u.name" :value="u.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="4">
|
|
|
<el-form-item label="城市" required>
|
|
|
<el-input v-model="convertForm.city" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="8">
|
|
|
<el-form-item label="职称" required>
|
|
|
<el-input v-model="convertForm.title" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="8">
|
|
|
<el-form-item label="研究方向" required>
|
|
|
<el-select
|
|
|
v-model="convertForm.research_direction_ids"
|
|
|
multiple
|
|
|
filterable
|
|
|
collapse-tags
|
|
|
collapse-tags-tooltip
|
|
|
placeholder="选择研究方向（可多选）"
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-option v-for="d in directionOptions" :key="d.id" :label="d.name" :value="d.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="6">
|
|
|
<el-form-item label="电话">
|
|
|
<el-input v-model="convertForm.phone" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="6">
|
|
|
<el-form-item label="邮箱">
|
|
|
<el-input v-model="convertForm.email" type="email" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="4">
|
|
|
<el-form-item label="星级">
|
|
|
<el-select
|
|
|
v-model="convertForm.star_level_dict_item_id"
|
|
|
style="width: 100%"
|
|
|
@change="onConvertStarChange"
|
|
|
>
|
|
|
<el-option v-for="o in starOptions" :key="o.id" :label="o.label" :value="o.id" />
|
|
|
</el-select>
|
|
|
<span class="star-preview">
|
|
|
{{
|
|
|
starDisplay(
|
|
|
starOptions.find((s) => s.id === convertForm.star_level_dict_item_id)?.value,
|
|
|
starOptions.find((s) => s.id === convertForm.star_level_dict_item_id)?.label,
|
|
|
)
|
|
|
}}
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="6">
|
|
|
<el-form-item label="状态" required>
|
|
|
<el-select v-model="convertForm.status_dict_item_id" placeholder="请选择状态" style="width: 100%">
|
|
|
<el-option v-for="o in statusOptions" :key="o.id" :label="o.label" :value="o.id" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :md="6">
|
|
|
<el-form-item label="下次跟进日期">
|
|
|
<el-date-picker
|
|
|
v-model="convertForm.next_follow_date"
|
|
|
type="date"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
style="width: 100%"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="convertVisible = false">取消</el-button>
|
|
|
<el-button type="primary" class="btn-create" :loading="convertSaving" @click="saveConvert">
|
|
|
确认转入老师库
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
.follow-teacher-summary {
|
|
|
padding: 10px 12px;
|
|
|
border-left: 4px solid var(--brand-primary, #b11e23);
|
|
|
background: #fdf3f3;
|
|
|
border-radius: 6px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.sub-title {
|
|
|
margin: 16px 0 8px;
|
|
|
font-size: 15px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.star-preview {
|
|
|
display: block;
|
|
|
margin-top: 4px;
|
|
|
color: #e6a23c;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
.form-small :deep(.el-form-item__label) {
|
|
|
font-size: 13px;
|
|
|
padding-bottom: 4px;
|
|
|
}
|
|
|
</style>
|
