里程三：DSL总结

DSL 总结

• 核心是通过配置模版解读数据，去描述当前页面展示和功能交互的实现，通过这种方式去减少我们平时开发中重复开发的工作量，可以让我们在工作中重复的体力工作变成去维护一个框架的落地，提升自己的价值，而不是一直的 CRUD‌ 体力活。
• 下面以常见的后台页面为例，通过设计一份 json-schema 数据去构建出页面

• 通过上面常见的后台布局考虑，配置如下

DSL: {
  mode:'dashboard', // 模型类型，不同模版类型对应不一样的数据结构
  name: '', // 名称
  desc: '', // 描述
  icon: '', // icon
  homePage: '', // 首页（项目配置）
  menu: [] // 头部菜单配置
}

• 用于我们常见的菜单会有常见的一级菜单和二级菜单或者更多层级菜单的考虑
• 于是我们需要一个 key 用来描述，于是有了 menuType
• menuType = 'group' 用来描述二级菜单甚至更多层级的菜单，后续也需要通过便利去展示
• menuType = 'module' 用来描述一级菜单

menu

menu: {
  key: '', // 菜单唯一描述
  name: '', // 菜单名称
  menuType: '', // 枚举值 group / module
}

menuType: 'group' 时配置 subMenu ，用来描述子菜单，里面的内容和menu一致

// 当 menuType === group 时，可填
subMenu: [
  {
    // 可递归 menuItem
  },
  ...
]

• 由于考虑框架的扩展性层面，我们将页面区分出四类
• iframe（第三方页面）
• custom（自定义页面）
• schema（架构系统页面）
• sider 需要侧边栏菜单的页面

menuType: 'module' 时配置 moduleType 用描述当前页面展示什么

// 当 menuType === module 时，可填
moduleType: '' //  枚举 iframe（第三方页面）/custom（自定义页面）/schema（架构系统页面）/ sider 侧边栏菜单

moduleType: 'sider' 时，配置 siderConfig，描述侧边栏展示

siderConfig: {
  menu: [
    {
      // 可递归 menuItem (除 moduleType === sider)
    }
  ]
}

moduleType: 'iframe' 时，配置 iframeConfig，描述 iframe 页面加载路径

iframeConfig: {
  path: '' // iframe 路径
}

moduleType: 'custom' 时，配置 customConfig，描述自定义页面加载路由

customConfig: {
  path: 自定义路径页面
}

• 根据以上常见的后台页面我们设计出 header 和 table区域

moduleType: 'schema' 时，配置 schemaConfig，描述

• 在table 中 使用 properties 用来描述当前表格使用了什么 key 后续用来展示，并且当前的key 需要做什么

properties:{
  key: {
    type: 描述这个key的类型,
    label: 描述这个key的名称,
    tableOption: 描述这个 key 在 el-tabel 中的配置
    searchOption： 描述这个 key 在 search-bar 中的配置
  }
}

• 例如该 key 在 tabel 中需要做什么 我们添加一份 tableOption

tableOption: {
  ...elTableColumnConfig, // 标准 el-table-column
  toFixed: 0, // 保留小数点后几位
  visiable: true, // 默认为 true（false 表示不在表单中显示）
}

• 或者该 key 需要在 search 中需要添加搜索框等，我们添加一份 searchOption

searchOption: {
  ...eleComponentConfig, // 标准 el-component-column 配置
  comType: '', // 配置控件类型 input/select/...
  default: '', // 默认值
  // comType === 'select'
  enumList: [], // 下拉框可选项
  
  // comType === 'dynamicSelect',
  api:''
}

• 用 tableConfig 来描述当前表格需要什么按钮，并且当前按钮使用了什么参数等

tableConfig: {
  headerButtons:[{
    label: '', // 按钮中文名
    eventKey: '', // 按钮事件名
    eventOption: {}, // 按钮事件具体配置
    ...elButtonConfig // 标准的 el-botton 配置
  }, ...],
  rowButtons:[{
     label: '', // 按钮中文名
     eventKey: '', // 按钮事件名
     eventOption: {
      // 当 eventKey === 'remove或者其他的时候'
      params:{
        // paramKey = 参数的键值
        // rowValueKey = 参数值（当格式为 schema::tableKey 的时候，到table 中找到相应的字段）
        // 例如 user_id: schema::user_id
        paramKey: rowValueKey
       
      }
     }, // 按钮事件具体配置
     ...elButtonConfig // 标准的 el-botton 配置
  },...]
},

最后估计这个配置，我们解析出来后，在页面中根据描述呈现