v1.0.0
This commit is contained in:
198
发票信息回显问题修复说明.md
Normal file
198
发票信息回显问题修复说明.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 发票信息回显问题修复说明
|
||||
|
||||
## 问题描述
|
||||
|
||||
用户反馈前端页面中，公司名称和纳税人识别号没有回显，即使用户还没有进行过开票信息的提交，也应该从企业认证信息中自动回显这些字段。
|
||||
|
||||
## 问题分析
|
||||
|
||||
### 1. 后端问题
|
||||
在 `GetUserInvoiceInfoWithEnterpriseInfo` 方法中，当用户还没有开票信息记录时，会创建一个新的实体，但是公司名称和纳税人识别号字段被设置为空字符串，而不是使用传入的企业认证信息。
|
||||
|
||||
### 2. 前端问题
|
||||
前端页面没有正确处理只读字段的显示，公司名称和纳税人识别号字段在编辑状态下没有禁用，也没有显示相应的提示信息。
|
||||
|
||||
## 修复方案
|
||||
|
||||
### 1. 后端修复
|
||||
|
||||
#### 修复 `GetUserInvoiceInfoWithEnterpriseInfo` 方法
|
||||
```go
|
||||
// 修复前
|
||||
if info == nil {
|
||||
info = &entities.UserInvoiceInfo{
|
||||
ID: uuid.New().String(),
|
||||
UserID: userID,
|
||||
CompanyName: "", // 空字符串
|
||||
TaxpayerID: "", // 空字符串
|
||||
// ... 其他字段
|
||||
}
|
||||
}
|
||||
|
||||
// 修复后
|
||||
if info == nil {
|
||||
info = &entities.UserInvoiceInfo{
|
||||
ID: uuid.New().String(),
|
||||
UserID: userID,
|
||||
CompanyName: companyName, // 使用企业认证信息填充
|
||||
TaxpayerID: taxpayerID, // 使用企业认证信息填充
|
||||
// ... 其他字段
|
||||
}
|
||||
} else {
|
||||
// 如果已有记录，使用传入的企业认证信息覆盖公司名称和纳税人识别号
|
||||
if companyName != "" {
|
||||
info.CompanyName = companyName
|
||||
}
|
||||
if taxpayerID != "" {
|
||||
info.TaxpayerID = taxpayerID
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 修复效果
|
||||
- ✅ 用户首次访问发票页面时，公司名称和纳税人识别号会自动从企业认证信息中回显
|
||||
- ✅ 即使用户还没有提交过开票信息，也能看到企业认证信息
|
||||
- ✅ 企业认证信息更新后，发票信息也会自动更新
|
||||
|
||||
### 2. 前端修复
|
||||
|
||||
#### 添加只读字段标识
|
||||
```javascript
|
||||
// 开票信息（只读）
|
||||
const invoiceInfo = reactive({
|
||||
company_name: '',
|
||||
taxpayer_id: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
company_address: '',
|
||||
company_phone: '',
|
||||
receiving_email: '',
|
||||
company_name_read_only: false, // 新增：公司名称只读标识
|
||||
taxpayer_id_read_only: false // 新增：纳税人识别号只读标识
|
||||
})
|
||||
```
|
||||
|
||||
#### 修改表单字段显示
|
||||
```vue
|
||||
<el-form-item label="公司名称" prop="company_name">
|
||||
<el-input
|
||||
v-model="editingInfo.company_name"
|
||||
placeholder="请输入公司名称"
|
||||
:disabled="invoiceInfo.company_name_read_only"
|
||||
:class="{ 'readonly-field': invoiceInfo.company_name_read_only }"
|
||||
/>
|
||||
<div v-if="invoiceInfo.company_name_read_only" class="field-note">
|
||||
<i class="el-icon-info"></i>
|
||||
公司名称从企业认证信息自动获取，不可修改
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="纳税人识别号" prop="taxpayer_id">
|
||||
<el-input
|
||||
v-model="editingInfo.taxpayer_id"
|
||||
placeholder="请输入纳税人识别号"
|
||||
:disabled="invoiceInfo.taxpayer_id_read_only"
|
||||
:class="{ 'readonly-field': invoiceInfo.taxpayer_id_read_only }"
|
||||
/>
|
||||
<div v-if="invoiceInfo.taxpayer_id_read_only" class="field-note">
|
||||
<i class="el-icon-info"></i>
|
||||
纳税人识别号从企业认证信息自动获取，不可修改
|
||||
</div>
|
||||
</el-form-item>
|
||||
```
|
||||
|
||||
#### 修改验证规则
|
||||
```javascript
|
||||
// 开票信息验证规则
|
||||
const infoRules = computed(() => ({
|
||||
company_name: invoiceInfo.company_name_read_only ? [] : [
|
||||
{ required: true, message: '请输入公司名称', trigger: 'blur' }
|
||||
],
|
||||
taxpayer_id: invoiceInfo.taxpayer_id_read_only ? [] : [
|
||||
{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }
|
||||
],
|
||||
receiving_email: [
|
||||
{ required: true, message: '请输入接收邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
]
|
||||
}))
|
||||
```
|
||||
|
||||
#### 添加样式
|
||||
```css
|
||||
/* 只读字段样式 */
|
||||
.readonly-field .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.field-note {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.field-note i {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
#### 修复效果
|
||||
- ✅ 公司名称和纳税人识别号字段在编辑状态下显示为禁用状态
|
||||
- ✅ 只读字段有明显的视觉区分（灰色背景）
|
||||
- ✅ 显示友好的提示信息，说明字段来源
|
||||
- ✅ 只读字段不需要验证，避免验证错误
|
||||
|
||||
## 测试场景
|
||||
|
||||
### 1. 首次访问场景
|
||||
- 用户完成企业认证后，首次访问发票页面
|
||||
- 公司名称和纳税人识别号应该自动回显
|
||||
- 字段显示为只读状态
|
||||
|
||||
### 2. 编辑场景
|
||||
- 用户点击"编辑信息"按钮
|
||||
- 公司名称和纳税人识别号字段应该禁用
|
||||
- 显示提示信息说明字段来源
|
||||
|
||||
### 3. 保存场景
|
||||
- 用户填写其他字段后保存
|
||||
- 只读字段不会被验证
|
||||
- 保存成功后，只读字段仍然保持禁用状态
|
||||
|
||||
### 4. 企业认证信息更新场景
|
||||
- 用户更新企业认证信息
|
||||
- 重新访问发票页面
|
||||
- 公司名称和纳税人识别号应该自动更新
|
||||
|
||||
## 技术要点
|
||||
|
||||
### 1. 数据流向
|
||||
```
|
||||
企业认证信息 → 应用服务层 → 领域服务层 → 前端页面
|
||||
```
|
||||
|
||||
### 2. 权限控制
|
||||
- 公司名称和纳税人识别号只能从企业认证信息获取
|
||||
- 用户不能手动修改这些字段
|
||||
- 前端和后端都有相应的权限控制
|
||||
|
||||
### 3. 用户体验
|
||||
- 清晰的视觉反馈（禁用状态、提示信息）
|
||||
- 友好的错误提示
|
||||
- 自动数据回显，减少用户输入
|
||||
|
||||
## 总结
|
||||
|
||||
通过这次修复，我们实现了：
|
||||
|
||||
1. ✅ **数据回显**：公司名称和纳税人识别号自动从企业认证信息回显
|
||||
2. ✅ **权限控制**：只读字段不能被用户修改
|
||||
3. ✅ **用户体验**：清晰的视觉反馈和友好的提示信息
|
||||
4. ✅ **数据一致性**：确保发票信息与企业认证信息保持一致
|
||||
|
||||
这个修复既解决了用户反馈的问题，又提升了整体的用户体验。
|
||||
Reference in New Issue
Block a user