列表模版

基于 Thunder Page 流程开发的页面模版，支持元数据配置，可以理解为平台通用列表的第二种展示形态。

对接方式

提供了两种不同的对接方式，分别适用于不同的场景：

1. 基于模版

该模版已经发布到共享库中，通过平台的应用页面流程，业务线可以基于该模版新建自己的应用页面，并通过属性配置，关联上自己的业务数据。之后，该页面可以通过iframe的形式内嵌到任何地方.

2.基于组件

该模版已经发布为 npm 组件，如果业务线产品应用了平台最新的技术框架（React 16）,又不希望通过 iframe 的形式对接该模版的话，可以通过原生组件的方式接入。

安装

npm install @beisen-platform/table-layout-view

接入

1import {View} from '@beisen-cmps/ux-task-list-template';
2// 对接参数查看 interface
3export interface IView {
4  fieldGruop: {
5    // 字group
6    head: IField[],
7    short: IField[],
8    long: IField[]
9  };
10  value: IValue; // view渲染相关的一些状态， 可以从下面拆分的hook中直接导出该value
11  onChange: (value: IValue) => void; // value的变化回到， 直接指向hook中的setValue即可
12  onOpen: (data: IDataPoolItem, id: string) => void; // 节点展开时的的回调，可以动态请求子节点
13  eventHandler: (data: BtnSubcmp, bizData: IBizData) => () => void; // 操作区按钮点击事件回调
14  onRenderPreSlot: (id: string) => React.ReactElement | null; // 展开收起前面的元素渲染函数 比如任务列表中扩展的「任务状态」
15  isLoading: boolean; // 是否显示loading
16  onClickTitle?: (data: IBizData) => void; // 标题的点击事件 不传的化 走cloud配置的事件 比如 打开详情页 (任务列表中是调用推屏)
17}
18export interface IValue {
19  dataPool: IDataPool; // 数据 是一个对象，key为数据ID，value查看 IDataPoolItem
20  total: number; // 总数
21  capacity: number; // 页面容量
22  page: number; // 当前页码 从0 开始
23  capacityList: number[]; // 页面容量列表
24  opend: string[]; // 展开的节点的ID
25}
26
27export interface IDataPoolItem {
28  metaData: {
29    // 元数据信息
30    bizData: IBizData, // 字段内容
31    row: Row // 操作列
32  };
33  childrenIds: string[]; // 子节点的IDs
34  hasChildren: boolean; // 是否有子节点
35  pid: string; // 父节点ID
36}

另外，该模版还发布了其他独立的模块，方便复用和快速对接

1. 元数据解析模块

安装

npm i @beisen/tasklist-meta-filter

调用该模块并传入数据解析函数，可以生成期望的数据格式，比如这里View需要的 head short 以及 long参数 ， 调用示例可以查看./src/dataParser

2. TableList 元数据请求 hooks

安装

npm i @beisen-platform/table-list-hooks

接入

1import { useDynamicTableListMetaData } from '@beisen-cmps/ux-task-list-template';
2// 获取元数据
3const {
4  metaData, // tableList 接口返回的元数据 未经过任何处理
5  isLoading, // 是否在loading
6  getTableListDataByPid, // 功能函数  调用并传入父ID可获取子列表
7  value, // 上面提到的View需要的value
8  setValue, // 更新value
9  fieldGruop // View需要的fieldGroup
10} = useDynamicTableListMetaData({
11  appName: 'xxx', // 应用名称
12  metaObjName: 'xxx', // 实体名称
13  viewName: 'xxx' // 视图名称
14  // 后续可能还需要扩展筛选条件
15});

code review

• 整体设计 container => data parser => view | layout
• hooks 请求列表元数据
• dataPool 数据结构
• layout 虚线的实现：伪元素 以及虚线对齐

调试

• 使用 chenchen204233@beisen.com 123456 登陆 www.italet-inc.cn
• 打开页面 测试页面
• 将组件的代码代理到本地调试

发版

提测

上线

App Center

todo

4. flex 布局的问题 https://blog.csdn.net/zgh0711/article/details/78270555
5. 操作区域按钮点击的回调