# 地区数据系统架构说明

## 双地区数据系统设计

本项目采用双地区数据系统架构，分别服务于不同的业务场景：

### 1. 基本信息地址选择系统

**使用场景：**
- 供应商基本信息中的注册地址
- 供应商办公地址
- 联系人地址等基本信息

**数据源：**
- `element-china-area-data` 组件库
- 或本地 `src/utils/regionData.ts` 文件

**特点：**
- ✅ 简单快速，无需网络请求
- ✅ 数据稳定，适合基本地址选择
- ✅ 组件库支持良好
- ✅ 用户体验流畅

**数据格式：**
```typescript
interface FrontendRegionItem {
  value: string;    // 地区代码
  label: string;    // 地区名称
  children?: FrontendRegionItem[];
}
```

### 2. 供应区域管理系统

**使用场景：**
- 供货区域管理
- 授权区域设置
- 复杂的地区业务逻辑

**数据源：**
- 后端数据库（通过 `chinaAreaList` API）
- `/system/addressarea/getChinaList` 接口

**特点：**
- ✅ 支持复杂业务逻辑
- ✅ 数据可动态管理和更新
- ✅ 与后端业务系统保持一致
- ✅ 支持自定义地区数据

**数据格式：**
```typescript
interface BackendRegionItem {
  id: number;
  areaCode: string;
  areaName: string;
  parentCode: number;
  level: number;
  children?: BackendRegionItem[];
}
```

## 为什么需要两套系统？

### 业务需求不同

1. **基本地址选择**：只需要简单的省市区选择，用于填写基本信息
2. **供应区域管理**：涉及复杂的业务逻辑，如授权管理、供货范围等

### 性能考虑

1. **基本地址选择**：使用本地数据，响应速度快，用户体验好
2. **供应区域管理**：需要实时数据，支持动态更新

### 维护成本

1. **基本地址选择**：使用成熟的组件库，维护成本低
2. **供应区域管理**：需要与业务系统深度集成，但功能更强大

## 使用指南

### 基本地址选择

```vue
<template>
  <el-cascader
    v-model="selectedRegion"
    :options="regionOptions"
    :props="regionCascaderProps"
    placeholder="请选择省市区"
  />
</template>

<script setup>
import { regionData } from 'element-china-area-data';

const regionOptions = ref(regionData);
const regionCascaderProps = {
  value: 'value',
  label: 'label',
  children: 'children'
};
</script>
```

### 供应区域管理

```vue
<script setup>
import { chinaAreaList } from '@/api/system/addressarea/index';
import { convertRegionData } from '@/utils/regionDataConverter';

const supplyAreaOptions = ref([]);

const initSupplyAreaOptions = async () => {
  try {
    const res = await chinaAreaList();
    supplyAreaOptions.value = res.data;
    // 如果需要转换为级联选择器格式
    // const converted = convertRegionData(res.data);
  } catch (e) {
    console.error('获取供货区域数据失败:', e);
  }
};
</script>
```

## 工具函数

`src/utils/regionDataConverter.ts` 提供了数据格式转换和查询工具：

- `convertRegionData()`: 将后端数据转换为前端格式
- `findRegionCodes()`: 根据地区名称查找代码
- `findRegionNames()`: 根据代码查找地区名称
- `BackendRegionUtils`: 后端数据查询工具类

## 总结

这种双系统架构虽然需要维护两套地区数据，但能够：

1. **提升用户体验**：基本操作响应快速
2. **支持复杂业务**：满足不同场景的需求
3. **降低维护成本**：各自使用最适合的技术方案
4. **保证系统稳定性**：基本功能不依赖网络请求

这是一个经过深思熟虑的架构设计，符合实际业务需求。