列表模版
开发者未提供任何描述性文档
Storybook
SUCCESS0 DEPENDENCIES0

列表模版

基于 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 虚线的实现:伪元素 以及虚线对齐

调试

发版

提测

上线

  1. 使用page BUilder 导入导出工具,设置组件版本:[{"name":"ux-tl-template", "version":"x.x.x"}] 返回结果无错误则执行成功

  2. 再导入文件,见附件 (/Sprint05/pageBuilder/任务列表.pad)

App Center

todo

  1. flex 布局的问题 https://blog.csdn.net/zgh0711/article/details/78270555
  2. 操作区域按钮点击的回调
  3. 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&