{"_id":"@beisen/tasklist-meta-filter","_rev":"3-be716221d3b41052cd6f7125509f9143","name":"@beisen/tasklist-meta-filter","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@beisen/tasklist-meta-filter","version":"1.0.0","description":"## 列表设计","main":"lib/index.js","scripts":{"start":"italent-thunder start","build":"italent-thunder build prod --mode development","build-prod":"italent-thunder build prod","lib":"stl build lib","examples":"sbl start --port 9001","prepublish":"npm run lib","commit":"git-cz"},"license":"ISC","repository":{"type":"git","url":"git@gitlab.beisencorp.com:app-center/tasklist-meta-filter.git"},"peerDependencies":{"react":"16.x.x","react-dom":"16.x.x"},"devDependencies":{"@beisen/ts":"1.x.x","@beisen/build":"1.x.x","@beisen/babel":"7.x.x","@beisen/storybook":"1.x.x","@beisen/storybook-react":"4.x.x","@beisen/italent-thunder":"1.x.x","@beisen/webpack":"4.x.x","commitizen":"2.x.x","cz-conventional-changelog":"2.x.x","@types/react":"16.x.x","@types/react-dom":"16.x.x","react":"16.x.x","react-dom":"16.x.x"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"8b85dca7869ade8539ad26fd2d84239ce5aeb052","_id":"@beisen/tasklist-meta-filter@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-WlLBxb+6/t9CbCC/tdnk/BLDnjtWauNwgZ1hk3s5oTt2CnPm22H2nhUty4inTQMt3Vwek5hfaIetAqtz7HIbpw==","shasum":"2a2f5c0bcf1384adfc78e0b5f4532b38c70fff8e","tarball":"https://registry.npmjs.org/@beisen/tasklist-meta-filter/-/tasklist-meta-filter-1.0.0.tgz","fileCount":7,"unpackedSize":507035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGwFlCRA9TVsSAnZWagAAkxUP/3L0kc/wR9+3+YSLgTr9\nV3v9t+lwhgESP8Zg79qMKalQd8GZ/gUQ+yR9+g9W7xJ5holwLIwQ/JDZzD8a\nifXVC6Ec+/Qvp3t9Zssv9ZJaTIyazDrQF3JS6jQpVf0VR6WPPfVZ7OdFLpml\nG101PdjOsC8YW56VukBfKHJV3oReG8K43Ahfo0ed2DLA/5c5D4evPDH3QhsD\nzimanC86p9ioKvRjodn5wQz0SmPHk379yqEn6hZKYht0zLeJu+XHCZoU4ttG\nFKvLL0jGa9UZXT2zoxozlqYh04ZbNflNcZklw+yZ6F6r2ByaIYRY4iTBm0/w\nBLZBxY+FRqfaI1HoTgt8+pxnCRJjXE7L2FMkqyXZJSzhKLOZP51qt4M0Vnvq\nsYvRix4gnq/his9sh/lkQOmIftVAVqnzN/LixPpRiQlp7mURrYOwuGibvbqt\njYYcYEmPrjfx3rjkLEe/I/Kl0wu8Zbh9YyKq2qxAnGeHv3jT45J3YfT+ICXQ\naNi1xvEEgad+FFfID2l7NIKIRpWGt9YtUK/22PmjVKwmwZbngn/ohX7npnck\nYiwtWaR/TCdN4+mkAKM/GHjf46j5393LNRD3KurlFdDmJ2KuGZ4p7EiOxJuP\ndXUtZi6hcJawEMb8U3IFKAGxp/GS+tJQZqYPNxVaIlFjO5XjBembfTJeikwR\nuyqV\r\n=MgYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHw4wANGcVGi3jHkvdTeA73Rn8ch9fRyD9onOuJycrkgCIQClPvjX7breh9R9fCeEEV3NCsX6r7dtVSu7i0M+NfHUNw=="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tasklist-meta-filter_1.0.0_1562050917056_0.5107249827615594"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-02T07:01:56.901Z","1.0.0":"2019-07-02T07:01:57.241Z","modified":"2022-04-04T18:19:25.753Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"## 列表设计","repository":{"type":"git","url":"git@gitlab.beisencorp.com:app-center/tasklist-meta-filter.git"},"license":"ISC","readme":"# 任务列表元数据解析器\n\n## 列表设计\n\n<img src=\"./assets/design.png\">\n\n## 说明\n\n任务列表是平台标准列表的变体，使用的是平台标准的列表元数据，因为渲染规则不同，需要对原来的元数据做解析，以适配任务列表的渲染规则\n\n## 布局\n任务列表，与标准列表不同，他是以更方便美观的展示任务信息。每条任务数据的渲染分三个区域\n\n* 标题区，只渲染负责人，任务标题，标签，以及任务和子任务状态，从元数据中过滤\n* 短字段区，一行展示四个短字段，根据字段类型过滤短字段\n* 其他字段区，一个字段一行\n\n## 数据解析规则\n自定义渲染需要片定义几个规则相同的渲染布局块，为每个块过滤出相应的字段，比如过滤标题行字段，再过滤出来短字段区域的字段，剩下的归为其他字段区字段，所以解析器的目前的需求就是根据渲染规则过滤拆分字段，所以目前的设计大概是这样的：\n\n```js\n([\n  {type: \"head\", filter: fn},\n  {type: \"short\", filter: fn},\n  {type: \"rest\", filter: fn}]) \n    =>\n   ({\n  head: [{field:xxx}, {field: xxx},...],\n  short: [{field:xxx}, {field: xxx},...],\n  rest: [{field:xxx}, {field: xxx},...]\n})\n```\n\n## 渲染\n渲染器根据字段解析的结果，遍历tablelist，获取需要的字段的数据，完成渲染\n\n## 整个任务列表的渲染流程\n\n### 数据源：TableList的元数据\n\n#### 字段及对应功能：\n* sub_cmps: 包含列信息（表头），也就是当前tableList需要渲染那些列表\n* biz_data: 行数据，每一行的字段及对应的数据\n* rows: 每行包含的操作按钮数据，渲染列的时候根据cmpId和每一行数据做对应\n\n### 渲染组件层级划分：\n\n#### 网络层：\n\n1. 负责根据查询条件拼出请求地址\n2. 从地址请求到数据\n\n#### 解析层：\n根据产品需求，从表头数据中解析出不同布局区域需要渲染的字段，解析规则基于字段下的关键字段值，\n* 比如标题行对应frozen为true的字段。\n* 比如短字段行的字段类型(cmp_type),\n* 任务状态的字段名称(cmp_name)，\n* 剩下的放到长字段区域 (限定cmp_type)\n\n#### container\n\n**调用网络层**\n\nstate{\n* 解析后表头数据\n* 存储表格数据\n\n}\n\n**调用渲染器**\n\n渲染器：\n* 不同的布局块下有对应的渲染方法（子组件）\n* 遍历表格数据，根据解析器返回的结果调用不同的布局块的渲染方法（子组件）\n* 布局块的渲染方法(子组件)，根据解析结果读取列表数据，根据字段类型（或名字）调用原子组件\n* 每个布局块提供自定义渲染的方法，方便业务对接的时候插入自身的业务逻辑。\n\n*原子组件包含业务逻辑，比如打赏按钮，回复按钮。*","readmeFilename":"README.md"}