fix: 修复会员管理三个bug - 编号/出生日期/新增按钮
## Bug描述
1. 会员编号列空白无数据
2. 出生日期显示"未知"
3. 点击"新增"按钮无反应
## 问题分析
### Bug1: 会员编号空白
**原因**: 前后端字段名不匹配
- 前端: `prop="memberNo"`
- 后端: `memberCode`
### Bug2: 出生日期显示"未知"
**原因**: 后端返回`birthday: null`时,前端直接显示为空单元格,用户体验差
### Bug3: 新增按钮无反应
**原因**: `MemberDialog.vue`组件没有暴露`open`方法
- 父组件调用: `memberDialogRef.value?.open()`
- 子组件未定义: 缺少`defineExpose({ open })`
## 修复内容
### 1. 修正会员编号字段名 (index.vue)
```vue
<!-- 修复前 -->
<el-table-column prop="memberNo" label="会员编号" />
<!-- 修复后 ✅ -->
<el-table-column prop="memberCode" label="会员编号" />
```
### 2. 修正出生日期显示 (index.vue)
```vue
<!-- 修复前 -->
<el-table-column prop="birthday" label="出生日期" />
<!-- 修复后 ✅ -->
<el-table-column prop="birthday" label="出生日期">
<template #default="{ row }">
{{ row.birthday || '-' }}
</template>
</el-table-column>
```
### 3. 修正弹窗组件架构 (MemberDialog.vue)
```javascript
// 1. 移除未使用的props
- const props = defineProps({ modelValue, memberId })
// 2. 添加内部状态
+ const visible = ref(false)
+ const memberId = ref(null)
// 3. 暴露open方法
+ const open = (row) => {
+ memberId.value = row?.memberId || null
+ visible.value = true
+ }
+ defineExpose({ open })
// 4. 修正handleOpen逻辑
- if (props.memberId) {
+ if (memberId.value) {
// 5. 添加handleClose清理
+ const handleClose = () => {
+ formRef.value?.resetFields()
+ memberId.value = null
+ }
```
## 验证结果
- ✅ 会员编号正常显示: MEM20260101
- ✅ 出生日期为空时显示"-"
- ✅ 点击"新增"按钮弹出表单
- ✅ 编辑功能正常
---
作者:湖北新华业务中台研发团队
This commit is contained in:
parent
cd81cd01ba
commit
288193b957
|
|
@ -9,6 +9,7 @@
|
||||||
width="700px"
|
width="700px"
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
|
@close="handleClose"
|
||||||
@open="handleOpen"
|
@open="handleOpen"
|
||||||
>
|
>
|
||||||
<el-form
|
<el-form
|
||||||
|
|
@ -176,30 +177,29 @@ import {
|
||||||
} from '@/api/member'
|
} from '@/api/member'
|
||||||
import { Plus } from '@element-plus/icons-vue'
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { computed, reactive, ref, watch } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
import StudentBindDialog from './StudentBindDialog.vue'
|
import StudentBindDialog from './StudentBindDialog.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const emit = defineEmits(['success'])
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
memberId: {
|
|
||||||
type: [Number, null],
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'success'])
|
const visible = ref(false)
|
||||||
|
const memberId = ref(null)
|
||||||
const visible = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
const formRef = ref(null)
|
const formRef = ref(null)
|
||||||
const submitLoading = ref(false)
|
const submitLoading = ref(false)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开弹窗
|
||||||
|
* @param {Object} row - 编辑时传入会员数据
|
||||||
|
*/
|
||||||
|
const open = (row) => {
|
||||||
|
memberId.value = row?.memberId || null
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({ open })
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
memberId: null,
|
memberId: null,
|
||||||
|
|
@ -303,9 +303,9 @@ const handleOpen = async () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 编辑模式加载会员数据
|
// 编辑模式加载会员数据
|
||||||
if (props.memberId) {
|
if (memberId.value) {
|
||||||
try {
|
try {
|
||||||
const res = await getMember(props.memberId)
|
const res = await getMember(memberId.value)
|
||||||
if (res.code === 200 && res.data) {
|
if (res.code === 200 && res.data) {
|
||||||
const data = res.data
|
const data = res.data
|
||||||
form.memberId = data.memberId
|
form.memberId = data.memberId
|
||||||
|
|
@ -342,6 +342,14 @@ const handleOpen = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹窗关闭时重置
|
||||||
|
*/
|
||||||
|
const handleClose = () => {
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
memberId.value = null
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 重置表单
|
* 重置表单
|
||||||
*/
|
*/
|
||||||
|
|
@ -530,11 +538,4 @@ const handleSubmit = async () => {
|
||||||
submitLoading.value = false
|
submitLoading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听弹窗关闭,重置表单
|
|
||||||
watch(visible, (val) => {
|
|
||||||
if (!val) {
|
|
||||||
formRef.value?.resetFields()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="tableData" border stripe :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%">
|
<el-table v-loading="loading" :data="tableData" border stripe :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%">
|
||||||
<el-table-column prop="memberNo" label="会员编号" width="140" />
|
<el-table-column prop="memberCode" label="会员编号" width="140" />
|
||||||
<el-table-column prop="phone" label="手机号" width="120">
|
<el-table-column prop="phone" label="手机号" width="120">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ maskPhone(row.phone) }}
|
{{ maskPhone(row.phone) }}
|
||||||
|
|
@ -60,7 +60,11 @@
|
||||||
{{ row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知' }}
|
{{ row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="birthday" label="出生日期" width="100" />
|
<el-table-column prop="birthday" label="出生日期" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ row.birthday || '-' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
<el-table-column prop="identityType" label="身份类型" width="80" align="center">
|
<el-table-column prop="identityType" label="身份类型" width="80" align="center">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tag :type="row.identityType === '1' ? 'success' : 'warning'">
|
<el-tag :type="row.identityType === '1' ? 'success' : 'warning'">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue