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 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>
<template #footer>
@ -94,8 +104,7 @@ const initialForm = {
schoolId: null,
schoolGradeId: null,
schoolClassId: null,
memberId: null,
memberDisplay: ''
members: []
}
const form = reactive({ ...initialForm })
@ -153,6 +162,7 @@ const open = async (row = null) => {
//
Object.assign(form, initialForm)
form.schoolPath = []
form.members = []
formRef.value?.clearValidate()
//
@ -169,8 +179,7 @@ const open = async (row = null) => {
form.studentNo = data.studentNo
form.gender = data.gender || '0'
form.birthday = data.birthday ? formatBirthday(data.birthday) : ''
form.memberId = data.memberId
form.memberDisplay = data.memberNickname ? `${data.memberNickname}${data.memberPhone || ''}` : ''
form.members = data.members || []
//
if (data.schoolId && data.schoolGradeId && data.schoolClassId) {
@ -212,8 +221,7 @@ const handleSubmit = async () => {
birthday: form.birthday,
schoolId: form.schoolId,
schoolGradeId: form.schoolGradeId,
schoolClassId: form.schoolClassId,
memberId: form.memberId
schoolClassId: form.schoolClassId
}
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="gradeName" 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 }">
<span v-if="row.memberNickname">{{ row.memberNickname }}</span>
<span v-else-if="row.memberPhone">{{ row.memberPhone }}</span>
<template v-if="row.members && row.members.length > 0">
<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>
</template>
</el-table-column>