前后端关于多维嵌套对象数组数据的处理

Question

前端在界面上要展示一个三维的对象数组选项列表：

后端底层定义的是一个枚举类型：

enum Permission {
    // 周转物    周转物列表
    PERMISSION_XXX_YYY_ZZZ_20 = 20; // 查看周转物
    PERMISSION_XXX_YYY_ZZZ_21 = 21; // 新建周转物
    PERMISSION_XXX_YYY_ZZZ_22 = 22; // 编辑周转物
    PERMISSION_XXX_YYY_ZZZ_23 = 23; // 删除周转物

    // 周转物    借出归还记录
    PERMISSION_XXX_YYY_ZZZ_30 = 30; // 查看借出条目
    PERMISSION_XXX_YYY_ZZZ_31 = 31; // 新建借出条目
    PERMISSION_XXX_YYY_ZZZ_32 = 32; // 编辑借出条目
    PERMISSION_XXX_YYY_ZZZ_33 = 33; // 删除借出条目
    
    ...
}

后端枚举的命名规范是根据他们微服务的模块来命名的。目前我的想法是前端定义一个三维对象数组，来达到和后端的枚举值一一对应：

interface PermissionOption {
  text: string
  value: string
  children: {
    text: string
    value: string
    children: { text: string; value: string }[]
  }[]
}

export const permissionOptionList: PermissionOption[] = [
  {
    text: '周转物',
    value: 'product',
    children: [
      {
        text: '周转物列表',
        value: 'product_quotation',
        children: [
          { text: '查看周转物', value: 'PERMISSION_XXX_YYY_ZZZ_20' },
          { text: '新建周转物', value: 'PERMISSION_XXX_YYY_ZZZ_21' },
          { text: '编辑周转物', value: 'PERMISSION_XXX_YYY_ZZZ_22' },
          { text: '删除周转物', value: 'PERMISSION_XXX_YYY_ZZZ_23' },
        ],
      },
      {
        text: '借出归还记录',
        value: 'product_product',
        children: [
          { text: '查看借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_30' },
          { text: '新建借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_31' },
          { text: '编辑借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_32' },
          { text: '删除借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_34' },
        ],
      },
    ],
  }
]

但是这样做的问题是这个选项列表很长，前端这样去定义一个三维对象数组很累。而且当界面的选项需要做改动的时候，前后端要维护两套数据，感觉不太好。请问有什么更好的解决方案吗？

Answer 1

1. 尽量保持数据源统一：
   既然后端也要用，那就统一放后端维护吧。让后端提供个接口以供前端调用获取这些数据。

2. 如果后端下发这些数据，那下发数据的结构要看前端怎么使用这些数据。看题目貌似前端需要一个树状的结构：

   • 如果你说服了后端小哥哥直接提供树状结构的数据，那就奉上一杯咖啡；
   • 如果后端不能提供树状结构的数据，那就前端自己处理下格式吧，可以考虑使用缓存技术缓存下转化后的结果。