yoe-srm-web/src/utils

地区数据系统架构说明

双地区数据系统设计

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

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

使用场景：

• 供应商基本信息中的注册地址
• 供应商办公地址
• 联系人地址等基本信息

数据源：

• element-china-area-data 组件库
• 或本地 src/utils/regionData.ts 文件

特点：

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

数据格式：

interface FrontendRegionItem {
  value: string;    // 地区代码
  label: string;    // 地区名称
  children?: FrontendRegionItem[];
}

2. 供应区域管理系统

使用场景：

• 供货区域管理
• 授权区域设置
• 复杂的地区业务逻辑

数据源：

• 后端数据库（通过 chinaAreaList API）
• /system/addressarea/getChinaList 接口

特点：

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

数据格式：

interface BackendRegionItem {
  id: number;
  areaCode: string;
  areaName: string;
  parentCode: number;
  level: number;
  children?: BackendRegionItem[];
}

为什么需要两套系统？

业务需求不同

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

性能考虑

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

维护成本

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

使用指南

基本地址选择

<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>

供应区域管理

<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. 保证系统稳定性：基本功能不依赖网络请求

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