组件设计

前言

本来之前部门那边有这样类似的框，我还以为这个组件是通用组件，结果发现并不是。而且选择部门那块业务相关代码实在太多。所以此次需求里，我准备写个通用的

设计

成品图

image

组件实例之CustomTransfer组件设计

设计思路

内容布局

image

数据处理
  • 通用数据格式:
1
2
3
4
5
6
7
{ 
    key: '',  // 索引，做diff用
    value: '', // 变量value
    label: '', // 变量名称
    type: '', // 变量类型
    children:[] // 变量子级数组
}
  • 数据获取方式
    • 外部传入dataSource
    • 外部传入method, getUrl, extraParams, searchKey
  • 数据转换方式：
    • 传入labelKey，valueKey，childKey，typeKey然后通过formater转换数据格式。

交互

  • 未弹框显示一个multiple模式的select控件
  • 点击Select 出现Modal弹框
  • 左上Input可以实时模糊查询
  • 搜索出的列表展示在左下方，点击列表item来选择控件，若传入typeCheck，则点击时对选择做类型校验
  • 已选择的列表展示在右下方，可以点击右侧X样式的icon删除
  • 点击取消 不保存已选择控件列表
  • 点击确定，保存已选择控件列表

优点

  • 布局清晰，各模块功能思路清楚，可读性好。
  • 在外部加载数据传入组件内，由于组件在外部可能并发使用较多，所以为了避免同时调用此接口，建议在外部传入dataSource。

不足

  • 传入的typeCheck和isError属性，这里并不符合我的预期。因为这里是业务的需求，而不是组件本身的需求。但由于外部页面布局未使用FormItem包裹，不好做处理保存的报错提示处理。
  • 组件设计也许可以更好

思考

  • 对组件做一个大致的布局，可以清晰的知道有哪些交互需要实现。
  • 对传入的数据作适配处理，这里也是暂时有点困惑我的地方，因为不同接口数据格式可能不同，目前设计中，是在外部传入valueKey，labelKey，childKey来判断。这里可以思考下是否有更好的处理方式
  • 在加入业务需求处理时，这里更好的处理方式是写一个新的业务组件，然后把customTransfer作为一个子组件加进去，其它地方加入业务处理。 而不应该直接加进来。