{"_id":"@beisen-cmps/ux-task-list-template","_rev":"1-639a3215db8c740d354de41904d09c45","name":"@beisen-cmps/ux-task-list-template","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@beisen-cmps/ux-task-list-template","version":"1.2.0","description":"<img src='./assest/demo.png'>","main":"lib/index.js","scripts":{"start":"italent-thunder start","build":"italent-thunder build prod --mode development","build-prod":"italent-thunder build prod","lib":"stl build lib","examples":"sbl start --port 9001","prepublish":"npm run lib","commit":"git-cz"},"license":"ISC","repository":{"type":"git","url":"git@gitlab.beisencorp.com:app-center/ux-tl-template.git"},"peerDependencies":{"react":"16.x.x","react-dom":"16.x.x"},"devDependencies":{"@beisen/ts":"1.x.x","@beisen/build":"1.x.x","@beisen/babel":"7.x.x","@beisen/storybook":"1.x.x","@beisen/storybook-react":"4.x.x","@beisen/italent-thunder":"1.x.x","@beisen/webpack":"4.x.x","commitizen":"2.x.x","cz-conventional-changelog":"2.x.x","styled-components":"^4.1.3","@types/styled-components":"4.1.1","@types/react":"16.x.x","@types/react-dom":"16.x.x","react":"16.x.x","react-dom":"16.x.x"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"@beisen-cmps/feature-utils":"^2.0.5","@beisen-phoenix/avatar":"^1.0.10","@beisen-phoenix/button":"^1.0.40","@beisen-phoenix/loading":"^1.0.16","@beisen-phoenix/pagination":"^1.0.7","@beisen-phoenix/single-select-list":"^1.1.19","@beisen-phoenix/style-token":"^1.0.38","@beisen-phoenix/tag":"^1.0.14","@beisen-phoenix/tooltip":"^1.0.33","@beisen/nade-style":"^1.0.20","@beisen/tasklist-meta-filter":"^1.0.0","i":"^0.3.6","npm":"^6.9.0","react-click-outside":"github:tj/react-click-outside"},"prettier":{"tabWidth":2,"singleQuote":true},"gitHead":"1a4c4039f4859975c9f909202743c2a6826d1828","_id":"@beisen-cmps/ux-task-list-template@1.2.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-SXNPNkCxVHEvCHqhl8FJihuth83o7kQElfkuF0yhfuEGKzYjHQ47UZErnG9OresHaw9Us9rA7iPRCFbKl86ogw==","shasum":"ae9e9392a7070403528500e6dc17a7f297d5bfaa","tarball":"https://registry.npmjs.org/@beisen-cmps/ux-task-list-template/-/ux-task-list-template-1.2.0.tgz","fileCount":68,"unpackedSize":380756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKDJoCRA9TVsSAnZWagAAHNcP/3jH9YRUnsf22yDpw6mA\njI5YqK7Ds12ecsEzJvroHouEQD1Q4cLKpIgafzzUsAle8wtbl9ZF7Wri4K9c\nCCxNa2nd7F0fXeufwVSMOthBOVIMUCfK0dwH8oYzWjbrdIx6r6fRzITbGtph\n+I58RItCcdx+U/0W86zIopRMAF+uozurapaYNONLh65ZSyGRA5EasYE3c7dB\nuvqMjnVsZLSBbE8yGqR/R9shfKorKPHLIk1Q9l/XkiaSRNwnC0gp8dMWsF9F\nX2FVXE4QEoxDwpLw5/n1bJoYQ0YIugMCQWuAhcgaU9qGOIv8yt3DhgFjx06i\nPRXBnL21B2j0jyF5jwWaVeqGDouBY65VQHXhWXtDQ+rtEKc4PGxWaQymtSa7\nJxSnrFVe5ULbURhIEqdlrI7LVedGnpWkW/A6dzlX+MEtHtgAIJofCm20XnFA\n+ScwNYEgR8fzmDPrNfaQOQHSS50uoXOn2pfZ39RBcanxlgsLlhZGuFuAcuS1\nTEtEsIlcmbVgtVE8/UpNa5SxoEDqMdt8zhwdKiMRJde/GNYmrQdjEGbtYMrU\nn31Rt6zfhcftsccC0pmo+Sf9Ew4HwH/oZg/h+84+SLBWjOxmkeRd3r9NrTnN\np1qTuJrHBbfOwZyp5iK/dT6gY3ji/KjsmkCr085gQIGjWGSHY7TeBuWpqVsU\nqvU7\r\n=KQPP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHY+7UDNCVeVqzOyjaDqgc+ayxo2kK8u39XuI9cnnhYKAiBKVusWVZygsXaKO1PobL+CXmxURPC4+SF3qekM/ZaGMA=="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ux-task-list-template_1.2.0_1562915431842_0.40328053154030363"},"_hasShrinkwrap":false}},"time":{"created":"2019-07-12T07:10:31.788Z","1.2.0":"2019-07-12T07:10:32.064Z","modified":"2022-04-04T18:14:52.254Z"},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"}],"description":"<img src='./assest/demo.png'>","repository":{"type":"git","url":"git@gitlab.beisencorp.com:app-center/ux-tl-template.git"},"license":"ISC","readme":"# 列表模版\n\n<img src='./assest/demo.png'>\n\n基于 Thunder Page 流程开发的页面模版，支持元数据配置，可以理解为平台通用列表的第二种展示形态。\n\n# 对接方式\n\n提供了两种不同的对接方式，分别适用于不同的场景：\n\n#### 1. 基于模版\n\n该模版已经发布到[共享库](http://cmp.italent-inc.cn/details?id=1468)中，通过平台的应用页面流程，业务线可以基于该模版新建自己的应用页面，并通过属性配置，关联上自己的业务数据。之后，该页面可以通过`iframe`的形式内嵌到任何地方.\n\n#### 2.基于组件\n\n该模版已经发布为 npm 组件，如果业务线产品应用了平台最新的技术框架（React 16）,又不希望通过 iframe 的形式对接该模版的话，可以通过原生组件的方式接入。\n\n> 安装\n\n```\nnpm install @beisen-platform/table-layout-view\n```\n\n> 接入\n\n```javascript\nimport {View} from '@beisen-cmps/ux-task-list-template';\n// 对接参数查看 interface\nexport interface IView {\n  fieldGruop: {\n    // 字group\n    head: IField[],\n    short: IField[],\n    long: IField[]\n  };\n  value: IValue; // view渲染相关的一些状态， 可以从下面拆分的hook中直接导出该value\n  onChange: (value: IValue) => void; // value的变化回到， 直接指向hook中的setValue即可\n  onOpen: (data: IDataPoolItem, id: string) => void; // 节点展开时的的回调，可以动态请求子节点\n  eventHandler: (data: BtnSubcmp, bizData: IBizData) => () => void; // 操作区按钮点击事件回调\n  onRenderPreSlot: (id: string) => React.ReactElement | null; // 展开收起前面的元素渲染函数 比如任务列表中扩展的「任务状态」\n  isLoading: boolean; // 是否显示loading\n  onClickTitle?: (data: IBizData) => void; // 标题的点击事件 不传的化 走cloud配置的事件 比如 打开详情页 (任务列表中是调用推屏)\n}\nexport interface IValue {\n  dataPool: IDataPool; // 数据 是一个对象，key为数据ID，value查看 IDataPoolItem\n  total: number; // 总数\n  capacity: number; // 页面容量\n  page: number; // 当前页码 从0 开始\n  capacityList: number[]; // 页面容量列表\n  opend: string[]; // 展开的节点的ID\n}\n\nexport interface IDataPoolItem {\n  metaData: {\n    // 元数据信息\n    bizData: IBizData, // 字段内容\n    row: Row // 操作列\n  };\n  childrenIds: string[]; // 子节点的IDs\n  hasChildren: boolean; // 是否有子节点\n  pid: string; // 父节点ID\n}\n```\n\n另外，该模版还发布了其他独立的模块，方便复用和快速对接\n\n##### 1. 元数据解析模块\n\n> 安装\n\n```\nnpm i @beisen/tasklist-meta-filter\n```\n\n调用该模块并传入数据解析函数，可以生成期望的数据格式，比如这里`View`需要的 `head` `short` 以及 `long`参数 ， 调用示例可以查看`./src/dataParser`\n\n##### 2. TableList 元数据请求 hooks\n\n> 安装\n\n```\nnpm i @beisen-platform/table-list-hooks\n```\n\n> 接入\n\n```javascript\nimport { useDynamicTableListMetaData } from '@beisen-cmps/ux-task-list-template';\n// 获取元数据\nconst {\n  metaData, // tableList 接口返回的元数据 未经过任何处理\n  isLoading, // 是否在loading\n  getTableListDataByPid, // 功能函数  调用并传入父ID可获取子列表\n  value, // 上面提到的View需要的value\n  setValue, // 更新value\n  fieldGruop // View需要的fieldGroup\n} = useDynamicTableListMetaData({\n  appName: 'xxx', // 应用名称\n  metaObjName: 'xxx', // 实体名称\n  viewName: 'xxx' // 视图名称\n  // 后续可能还需要扩展筛选条件\n});\n```\n\n## code review\n\n- 整体设计 container => data parser => view | layout\n- hooks 请求列表元数据\n- dataPool 数据结构\n- layout 虚线的实现：伪元素 以及虚线对齐\n\n## 调试\n\n- 使用 chenchen204233@beisen.com 123456 登陆 www.italet-inc.cn\n- 打开页面 [测试页面](http://www.italent-inc.cn/ThunderPageForEdit?pageCode=TaskList&platform=0&&superCode=XogKGk38h4GjhQYZ7hP7UnTcbIIr23LntixyBpzmAGxRO5Qy7C0LkRvlAMGH)\n- 将组件的代码代理到本地调试\n\n## 发版\n\n## 提测\n\n## 上线\n\n> App Center\n\n# todo\n\n4. flex 布局的问题 https://blog.csdn.net/zgh0711/article/details/78270555\n5. 操作区域按钮点击的回调\n","readmeFilename":"README.md"}