# @beisen-cmps/ux-task-list-template

Latest version **1.2.0** (published 2019-07-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-cmps/ux-task-list-template
pnpm add @beisen-cmps/ux-task-list-template
yarn add @beisen-cmps/ux-task-list-template
bun add @beisen-cmps/ux-task-list-template
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-07-12 |
| First published | 2019-07-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 371.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-cmps/ux-task-list-template
- Repository: git@gitlab.beisencorp.com:app-center/ux-tl-template
- npm.io page: https://npm.io/package/@beisen-cmps/ux-task-list-template

## Dependencies (14)

- [i](https://npm.io/package/i.md) ^0.3.6
- [npm](https://npm.io/package/npm.md) ^6.9.0
- [@beisen/nade-style](https://npm.io/package/@beisen/nade-style.md) ^1.0.20
- [@beisen-phoenix/tag](https://npm.io/package/@beisen-phoenix/tag.md) ^1.0.14
- [react-click-outside](https://npm.io/package/react-click-outside.md) github:tj/react-click-outside
- [@beisen-phoenix/avatar](https://npm.io/package/@beisen-phoenix/avatar.md) ^1.0.10
- [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^1.0.40
- [@beisen-phoenix/loading](https://npm.io/package/@beisen-phoenix/loading.md) ^1.0.16
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^1.0.33
- [@beisen-cmps/feature-utils](https://npm.io/package/@beisen-cmps/feature-utils.md) ^2.0.5
- [@beisen-phoenix/pagination](https://npm.io/package/@beisen-phoenix/pagination.md) ^1.0.7
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^1.0.38
- [@beisen/tasklist-meta-filter](https://npm.io/package/@beisen/tasklist-meta-filter.md) ^1.0.0
- [@beisen-phoenix/single-select-list](https://npm.io/package/@beisen-phoenix/single-select-list.md) ^1.1.19

## Recent versions

- 1.2.0 (latest) — 2019-07-12

## README

# 列表模版

<img src='./assest/demo.png'>

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

# 对接方式

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

#### 1. 基于模版

该模版已经发布到[共享库](http://cmp.italent-inc.cn/details?id=1468)中，通过平台的应用页面流程，业务线可以基于该模版新建自己的应用页面，并通过属性配置，关联上自己的业务数据。之后，该页面可以通过`iframe`的形式内嵌到任何地方.

#### 2.基于组件

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

> 安装

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

> 接入

```javascript
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
```

> 接入

```javascript
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
- 打开页面 [测试页面](http://www.italent-inc.cn/ThunderPageForEdit?pageCode=TaskList&platform=0&&superCode=XogKGk38h4GjhQYZ7hP7UnTcbIIr23LntixyBpzmAGxRO5Qy7C0LkRvlAMGH)
- 将组件的代码代理到本地调试

## 发版

## 提测

## 上线

> App Center

# todo

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

---
_Source: https://npm.io/package/@beisen-cmps/ux-task-list-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._