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"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="handleClose"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form
|
||||
|
|
@ -176,30 +177,29 @@ import {
|
|||
} from '@/api/member'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import StudentBindDialog from './StudentBindDialog.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
memberId: {
|
||||
type: [Number, null],
|
||||
default: null
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
const visible = ref(false)
|
||||
const memberId = ref(null)
|
||||
|
||||
const formRef = ref(null)
|
||||
const submitLoading = ref(false)
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {Object} row - 编辑时传入会员数据
|
||||
*/
|
||||
const open = (row) => {
|
||||
memberId.value = row?.memberId || null
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({ open })
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
memberId: null,
|
||||
|
|
@ -303,9 +303,9 @@ const handleOpen = async () => {
|
|||
}
|
||||
|
||||
// 编辑模式加载会员数据
|
||||
if (props.memberId) {
|
||||
if (memberId.value) {
|
||||
try {
|
||||
const res = await getMember(props.memberId)
|
||||
const res = await getMember(memberId.value)
|
||||
if (res.code === 200 && res.data) {
|
||||
const data = res.data
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 监听弹窗关闭,重置表单
|
||||
watch(visible, (val) => {
|
||||
if (!val) {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
</el-row>
|
||||
|
||||
<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">
|
||||
<template #default="{ row }">
|
||||
{{ maskPhone(row.phone) }}
|
||||
|
|
@ -60,7 +60,11 @@
|
|||
{{ row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知' }}
|
||||
</template>
|
||||
</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">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.identityType === '1' ? 'success' : 'warning'">
|
||||
|
|
|
|||
Loading…
Reference in New Issue