README

任务列表元数据解析器

列表设计

说明

任务列表是平台标准列表的变体，使用的是平台标准的列表元数据，因为渲染规则不同，需要对原来的元数据做解析，以适配任务列表的渲染规则

布局

任务列表，与标准列表不同，他是以更方便美观的展示任务信息。每条任务数据的渲染分三个区域

标题区，只渲染负责人，任务标题，标签，以及任务和子任务状态，从元数据中过滤
短字段区，一行展示四个短字段，根据字段类型过滤短字段
其他字段区，一个字段一行

数据解析规则

自定义渲染需要片定义几个规则相同的渲染布局块，为每个块过滤出相应的字段，比如过滤标题行字段，再过滤出来短字段区域的字段，剩下的归为其他字段区字段，所以解析器的目前的需求就是根据渲染规则过滤拆分字段，所以目前的设计大概是这样的：

([
  {type: "head", filter: fn},
  {type: "short", filter: fn},
  {type: "rest", filter: fn}]) 
    =>
   ({
  head: [{field:xxx}, {field: xxx},...],
  short: [{field:xxx}, {field: xxx},...],
  rest: [{field:xxx}, {field: xxx},...]
})

渲染

渲染器根据字段解析的结果，遍历tablelist，获取需要的字段的数据，完成渲染

整个任务列表的渲染流程

数据源：TableList的元数据

字段及对应功能：

sub_cmps: 包含列信息（表头），也就是当前tableList需要渲染那些列表
biz_data: 行数据，每一行的字段及对应的数据
rows: 每行包含的操作按钮数据，渲染列的时候根据cmpId和每一行数据做对应

渲染组件层级划分：

网络层：

负责根据查询条件拼出请求地址
从地址请求到数据

解析层：

根据产品需求，从表头数据中解析出不同布局区域需要渲染的字段，解析规则基于字段下的关键字段值，

比如标题行对应frozen为true的字段。
比如短字段行的字段类型(cmp_type),
任务状态的字段名称(cmp_name)，
剩下的放到长字段区域 (限定cmp_type)

container

调用网络层

state{

解析后表头数据
存储表格数据

}

调用渲染器

渲染器：

不同的布局块下有对应的渲染方法（子组件）
遍历表格数据，根据解析器返回的结果调用不同的布局块的渲染方法（子组件）
布局块的渲染方法(子组件)，根据解析结果读取列表数据，根据字段类型（或名字）调用原子组件
每个布局块提供自定义渲染的方法，方便业务对接的时候插入自身的业务逻辑。

原子组件包含业务逻辑，比如打赏按钮，回复按钮。

@beisen/tasklist-meta-filter

Usage no npm install needed!