feat: 学生管理页面展示多会员绑定信息

- 列表页"归属用户"列:单人显示昵称/手机号,多人显示"N人绑定"并用tooltip展示详情
- 编辑弹窗:使用Tag组件展示所有绑定的会员信息
This commit is contained in:
神码-方晓辉 2026-02-03 17:04:07 +08:00
parent df1f2932c4
commit bf67282825
2 changed files with 30 additions and 10 deletions

View File

@ -54,7 +54,17 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="归属用户"> <el-form-item label="归属用户">
<span style="color: #F56C6C;">{{ form.memberDisplay || '暂无归属用户' }}</span> <template v-if="form.members && form.members.length > 0">
<el-tag
v-for="(m, idx) in form.members"
:key="idx"
size="small"
style="margin-right: 6px; margin-bottom: 4px;"
>
{{ m.nickname || m.phone }}{{ m.relation ? `${m.relation}` : '' }}
</el-tag>
</template>
<span v-else style="color: #909399;">暂无归属用户</span>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -94,8 +104,7 @@ const initialForm = {
schoolId: null, schoolId: null,
schoolGradeId: null, schoolGradeId: null,
schoolClassId: null, schoolClassId: null,
memberId: null, members: []
memberDisplay: ''
} }
const form = reactive({ ...initialForm }) const form = reactive({ ...initialForm })
@ -153,6 +162,7 @@ const open = async (row = null) => {
// //
Object.assign(form, initialForm) Object.assign(form, initialForm)
form.schoolPath = [] form.schoolPath = []
form.members = []
formRef.value?.clearValidate() formRef.value?.clearValidate()
// //
@ -169,8 +179,7 @@ const open = async (row = null) => {
form.studentNo = data.studentNo form.studentNo = data.studentNo
form.gender = data.gender || '0' form.gender = data.gender || '0'
form.birthday = data.birthday ? formatBirthday(data.birthday) : '' form.birthday = data.birthday ? formatBirthday(data.birthday) : ''
form.memberId = data.memberId form.members = data.members || []
form.memberDisplay = data.memberNickname ? `${data.memberNickname}${data.memberPhone || ''}` : ''
// //
if (data.schoolId && data.schoolGradeId && data.schoolClassId) { if (data.schoolId && data.schoolGradeId && data.schoolClassId) {
@ -212,8 +221,7 @@ const handleSubmit = async () => {
birthday: form.birthday, birthday: form.birthday,
schoolId: form.schoolId, schoolId: form.schoolId,
schoolGradeId: form.schoolGradeId, schoolGradeId: form.schoolGradeId,
schoolClassId: form.schoolClassId, schoolClassId: form.schoolClassId
memberId: form.memberId
} }
if (isEdit.value) { if (isEdit.value) {

View File

@ -73,10 +73,22 @@
<el-table-column prop="schoolName" label="学校" min-width="150" show-overflow-tooltip /> <el-table-column prop="schoolName" label="学校" min-width="150" show-overflow-tooltip />
<el-table-column prop="gradeName" label="年级" width="80" /> <el-table-column prop="gradeName" label="年级" width="80" />
<el-table-column prop="className" label="班级" width="80" /> <el-table-column prop="className" label="班级" width="80" />
<el-table-column prop="memberNickname" label="归属用户" width="120" show-overflow-tooltip> <el-table-column label="归属用户" width="180">
<template #default="{ row }"> <template #default="{ row }">
<span v-if="row.memberNickname">{{ row.memberNickname }}</span> <template v-if="row.members && row.members.length > 0">
<span v-else-if="row.memberPhone">{{ row.memberPhone }}</span> <el-tooltip v-if="row.members.length > 1" placement="top">
<template #content>
<div v-for="(m, idx) in row.members" :key="idx" style="line-height: 1.6">
{{ m.nickname || m.phone }}{{ m.relation ? `${m.relation}` : '' }}
</div>
</template>
<el-tag size="small">{{ row.memberCount }}人绑定</el-tag>
</el-tooltip>
<span v-else>
{{ row.members[0].nickname || row.members[0].phone }}
<span v-if="row.members[0].relation" style="color: #909399">{{ row.members[0].relation }}</span>
</span>
</template>
<span v-else style="color: #909399">未绑定</span> <span v-else style="color: #909399">未绑定</span>
</template> </template>
</el-table-column> </el-table-column>