README
列表模版
基于 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
todo
- flex 布局的问题 https://blog.csdn.net/zgh0711/article/details/78270555
- 操作区域按钮点击的回调
- http://www.italent.link/u/201138374/Home#widget%2Fitalent%3FiTalentFrameType%3Diframe%26iTalentNavId%3D12292%26iTalentNavCode%3Ditalent-home%26iTalentFrame%3Dhttp://www.italent.link/ThunderPage?pageCode=Task.TaskList&platform=0&loadType=1&superCode=XogKGk38h4GjhQYZ7hP7UnTcbIIr23LntixyBpzmAGxRO5Qy7C0LkRvlAMGH&