# @beisen/tasklist-meta-filter

> ## 列表设计

Latest version **1.0.0** (published 2019-07-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen/tasklist-meta-filter
pnpm add @beisen/tasklist-meta-filter
yarn add @beisen/tasklist-meta-filter
bun add @beisen/tasklist-meta-filter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-07-02 |
| First published | 2019-07-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 495.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp, lgm, neozw |

## Links

- npm: https://www.npmjs.com/package/@beisen/tasklist-meta-filter
- Repository: git@gitlab.beisencorp.com:app-center/tasklist-meta-filter
- npm.io page: https://npm.io/package/@beisen/tasklist-meta-filter

## Recent versions

- 1.0.0 (latest) — 2019-07-02

## README

# 任务列表元数据解析器

## 列表设计

<img src="./assets/design.png">

## 说明

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

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

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

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

```js
([
  {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和每一行数据做对应

### 渲染组件层级划分：

#### 网络层：

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

#### 解析层：
根据产品需求，从表头数据中解析出不同布局区域需要渲染的字段，解析规则基于字段下的关键字段值，
* 比如标题行对应frozen为true的字段。
* 比如短字段行的字段类型(cmp_type),
* 任务状态的字段名称(cmp_name)，
* 剩下的放到长字段区域 (限定cmp_type)

#### container

**调用网络层**

state{
* 解析后表头数据
* 存储表格数据

}

**调用渲染器**

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

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

---
_Source: https://npm.io/package/@beisen/tasklist-meta-filter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._