feat: 学生管理页面展示多会员绑定信息
- 列表页"归属用户"列:单人显示昵称/手机号,多人显示"N人绑定"并用tooltip展示详情 - 编辑弹窗:使用Tag组件展示所有绑定的会员信息
This commit is contained in:
parent
df1f2932c4
commit
bf67282825
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue