列表模版

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

对接方式

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

1. 基于模版

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

2.基于组件

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

安装

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

接入

import {View} from '@beisen-cmps/ux-task-list-template';
// 对接参数查看 interface
export interface IView {
  fieldGruop: {
    // 字group
    head: IField[],
    short: IField[],
    long: IField[]
  };
  value: IValue; // view渲染相关的一些状态， 可以从下面拆分的hook中直接导出该value
  onChange: (value: IValue) => void; // value的变化回到， 直接指向hook中的setValue即可
  onOpen: (data: IDataPoolItem, id: string) => void; // 节点展开时的的回调，可以动态请求子节点
  eventHandler: (data: BtnSubcmp, bizData: IBizData) => () => void; // 操作区按钮点击事件回调
  onRenderPreSlot: (id: string) => React.ReactElement | null; // 展开收起前面的元素渲染函数 比如任务列表中扩展的「任务状态」
  isLoading: boolean; // 是否显示loading
  onClickTitle?: (data: IBizData) => void; // 标题的点击事件 不传的化 走cloud配置的事件 比如 打开详情页 (任务列表中是调用推屏)
}
export interface IValue {
  dataPool: IDataPool; // 数据 是一个对象，key为数据ID，value查看 IDataPoolItem
  total: number; // 总数
  capacity: number; // 页面容量
  page: number; // 当前页码 从0 开始
  capacityList: number[]; // 页面容量列表
  opend: string[]; // 展开的节点的ID
}

export interface IDataPoolItem {
  metaData: {
    // 元数据信息
    bizData: IBizData, // 字段内容
    row: Row // 操作列
  };
  childrenIds: string[]; // 子节点的IDs
  hasChildren: boolean; // 是否有子节点
  pid: string; // 父节点ID
}

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

1. 元数据解析模块

安装

npm i @beisen/tasklist-meta-filter

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

2. TableList 元数据请求 hooks

安装

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

接入

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

code review

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

调试

使用 chenchen204233@beisen.com 123456 登陆 www.italet-inc.cn

正则：

\/ux\/upaas\/ux\-tl\-template\/release\/dist\/([a-zA-Z]+|\d+)(?:\-\w+\-\d+\.\d+\.\d+)?(?:\.min)?(\.\w{2,4})

端口 3001

打开页面测试页面
将组件的代码代理到本地调试

发版

提测

上线

使用page BUilder 导入导出工具，设置组件版本：[{"name":"ux-tl-template", "version":"x.x.x"}] 返回结果无错误则执行成功
再导入文件，见附件 (/Sprint05/pageBuilder/任务列表.pad)

App Center