56 lines
2.2 KiB
Markdown
56 lines
2.2 KiB
Markdown
# 实现店铺管理页面优化
|
||
|
||
## 需求分析
|
||
1. 移除新增和编辑弹窗中的经纬度填写项
|
||
2. 将省市区的输入框改为下拉选择组件，实现三级联动
|
||
3. 确保编辑弹窗中省市区数据能正确回显
|
||
|
||
## 技术方案
|
||
|
||
### 1. 移除经纬度填写项
|
||
- 修改`shop.vue`文件中的表单部分，删除经纬度相关的表单项
|
||
- 移除表单验证规则中的经纬度验证
|
||
- 确保在提交表单时不会传递经纬度数据
|
||
|
||
### 2. 实现省市区下拉选择
|
||
- 由于项目已使用Element Plus，我们可以实现一个三级联动的省市区选择组件
|
||
- 使用Element Plus的级联选择器(`el-cascader`)实现省市区选择
|
||
- 准备省市区数据，支持三级联动
|
||
|
||
### 3. 实现编辑弹窗回显
|
||
- 在编辑店铺时，将后端返回的省市区数据转换为级联选择器所需的格式
|
||
- 确保级联选择器能正确回显已选择的省市区数据
|
||
- 实现数据转换逻辑，将级联选择器的输出转换为后端所需的格式
|
||
|
||
## 实现步骤
|
||
|
||
1. **修改表单结构**
|
||
- 移除`shop.vue`中表单的经纬度输入项
|
||
- 将省市区的`el-input`替换为`el-cascader`组件
|
||
- 调整表单布局，确保组件样式一致
|
||
|
||
2. **准备省市区数据**
|
||
- 实现省市区数据的加载逻辑
|
||
- 确保数据格式符合Element Plus级联选择器的要求
|
||
|
||
3. **实现联动和回显逻辑**
|
||
- 实现级联选择器的基本功能
|
||
- 实现编辑时省市区数据的回显逻辑
|
||
- 实现数据转换，将级联选择器输出转换为后端所需格式
|
||
|
||
4. **更新表单处理**
|
||
- 更新表单验证规则
|
||
- 更新表单提交逻辑，确保省市区数据正确传递
|
||
- 更新编辑店铺时的数据填充逻辑
|
||
|
||
5. **测试功能完整性**
|
||
- 测试新增店铺功能，确保省市区选择正常
|
||
- 测试编辑店铺功能，确保省市区数据正确回显
|
||
- 测试表单提交，确保数据格式正确
|
||
|
||
## 预期效果
|
||
- 新增和编辑弹窗中不再显示经纬度输入项
|
||
- 省市区选择使用Element Plus级联选择器，支持三级联动
|
||
- 编辑弹窗中省市区数据能正确回显
|
||
- 表单提交时正确传递省市区数据
|
||
- 页面样式保持一致，交互流畅 |