(data: T[], tranConf: recursionDataKeyTransformConf = { isChildrenKey: 'children' }, options: recursionDataKeyTransformOpt = {\r\n needDeleteBefore: true\r\n}): T[]\r\n```\r\n\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\nconst { dateTransformer, mergeUrl, ArrayVeidooTransfrom } = Bamboo;\r\n\r\n// 日期转换器 - dateTransformer\r\ndateTransformer = (dt: Date | number, viewMode?: enumDataMode): string;\r\n\r\n// 路径合并, 去除拼接处 多或少的 '/'\r\nmergeUrl = (arr: string[]): string;\r\n\r\n// 一维数组转二维切割\r\nArrayVeidooTransfrom = (list: any[], mo: number) :array[];\r\n```\r\n\r\n\r\n\r\n##### RegExpValidator - 校验器\r\n\r\n###### 基本使用\r\n\r\n针对{}对象进行校验。\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\n\r\nconst { RegExpValidator, RegExpType } = Bamboo;\r\n\r\n// 初始化配置\r\nconst creatValidtor = new Validtor({\r\n regConfig: [\r\n {\r\n key: 'name',\r\n type: RegExpType.CN,\r\n name: '姓名',\r\n require: true\r\n }, {\r\n key: 'phone',\r\n type: RegExpType.PHONE,\r\n name: '手机',\r\n require: true\r\n }, {\r\n key: 'enCode',\r\n type: RegExpType.EN,\r\n name: '英文代号',\r\n require: true\r\n }\r\n ]\r\n});\r\n\r\n\r\n// 执行校验数据\r\nlet validResult = creatValidtor.exceValid({\r\n name: '刘德华2',\r\n phone: '18163741749',\r\n enCode: 'code'\r\n});\r\n\r\nconsole.log(validResult);\r\n\r\n// 验证结果 - 执行后的 console - validResult\r\n{\t// 如果 - 校验失败\r\n validErrors: [\r\n {\r\n key: \"name\"\r\n msg: \"仅允许中文汉字\"\r\n name: \"姓名\"\r\n require: true\r\n type: 0\r\n value: \"刘德华2\"\r\n }\r\n ],\r\n validPassState: false\r\n}\r\n\r\n{\t// 如果 - 校验成功\r\n validErrors: [],\r\n validPassState: true\r\n}\r\n```\r\n\r\n###### 多项联合校验\r\n\r\n支持多重联合校验，下例中分别写了CN/EN/PHONE，当然你甚至可以写更多；\r\n\r\n```typescript\r\n// 初始化配置 - 多重联合校验\r\nconst creatValidtor = new Validtor({\r\n regConfig: [\r\n {\r\n key: 'name',\r\n type: [\r\n RegExpType.CN,\r\n RegExpType.EN,\r\n RegExpType.PHONE\r\n ],\r\n name: '姓名',\r\n require: true\r\n }\r\n ]\r\n});\r\n```\r\n\r\n###### 便捷调用\r\n\r\n同时支持单数据快捷校验，无需实例化直接调用。\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\n\r\nconst { RegExpValidator, RegExpType } = Bamboo;\r\n\r\n// 单数据的便捷校验\r\nlet singleValid = Validtor.exceOnce('', RegExpType.CN);\t\t\t\t\t\t\t// 单项校验\r\nlet multiSingleValid = Validtor.exceOnce('', [ RegExpType.CN, RegExpType.IP]);\t// 多项校验\r\n\r\n// 分别的打印结果\r\n/* is singleValid\r\n{\r\n\tvalidErrors: \"仅允许中文汉字\"\r\n\tvalidPassState: false\r\n}\r\n*/\r\n\r\n/* is multiSingleValid\r\n{\r\n\tvalidErrors: {type: 'CN', msg: '仅允许中文汉字'},\r\n\t\t\t\t {type: 'IP', msg: '必须是正确ip格式'}\r\n\tvalidPassState: false\r\n}\r\n*/\r\n```\r\n\r\n###### 配置项说明\r\n\r\n可支持的内置校验类型。\r\n\r\n```typescript\r\n\r\n// 校验单元格配置格式\r\ninterface RegExpValidatorConfItem {\r\n key: string; // 关键key\r\n type: RegExpType | RegExpType[]; // 校验内置类型\r\n name: string; // 校验项名称\r\n require?: boolean; // 是否必填\r\n}\r\n\r\nexport enum RegExpType {\r\n CN, // 中文\r\n EN, // 英文字母\r\n EN_NUMBER, // 任意英文+数字\r\n DECIMAL, // 小数浮点数类型\r\n INTEGER, // 整数类型 - 正负都可以\r\n POSITIVE_INTEGER, // 整数类型 - 正数\r\n UP_ZERO_INTEGER, // 0+正数 (<=0)\r\n UP_ONE_INTEGER, // 1+正数 (<=1)\r\n NUMBER, // 数字类型\r\n EMAIL, // 电子邮箱\r\n PHONE, // 手机 18165221849\r\n TEL, // 电话 0731-5632575\r\n PHONE_TEL, // 手机 + 电话\r\n POSTCODE, // 邮政编码\r\n HTTP, // http (支持 - :post,www,ip,http,https)\r\n IP, // ip地址\r\n IDENTITY_CARD, // 身份证\r\n SYMBOL_CN, \t// 全角\r\n SYMBOL_EN \t// 半角\r\n}\r\n```\r\n\r\n返回格式\r\n\r\n```\r\n// 校验返回格式\r\ninterface RegExpValidatorErrorResponse {\r\n validPassState: boolean;\t\t\t\t\t// 校验结果状态\r\n validErrors: RegExpValidatorErrorItem[];\t// 校验错误项集合\r\n}\r\n```\r\n\r\n\r\n\r\n##### CollectionElementCtrl - HTML元素集合控制器\r\n\r\n###### 基本使用\r\n\r\n针对元素对象集合进行遍历操作。\r\n\r\n内置索引记录器，可以通过使用指令对其进行遍历，对遍历目标元素进行 Attr 属性赋值（如class、style），对非当前active元素进行清理值。\r\n\r\n支持对目标元素进行class/ style的配置自定义。\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\n\r\nconst { CollectionElementCtrl } = Bamboo;\r\n\r\n// 元素集合操作\r\nconst $CollectionElementCtrl = new CollectionElementCtrl({\r\n collectionsElements: [],\t// dom对象集合 （可初始化设置/ 通过.setCollectionsElements()插入调用）\r\n indexRecord: 0,\t\t\t// 行索引 - rowIndex\r\n columnIndex: 4,\t\t\t// 列索引 - 锁定单元格\r\n needFoucusHTMLElementInput: true\t// 是否聚焦input - 是否需要检查当前 纵及列单元格内是否包含input\r\n});\r\n\r\n```\r\n\r\n###### 组合使用\r\n\r\n可结合 **Bamboo.KeywordsContrl** 的键盘事件组件搭配使用。（如：操作表格，通过键盘（上下左右）指令在表格的row及td中的元素进行操作。）\r\n\r\n演示表格行通过 ↑ ↓ 键盘来做到行来回选中效果。\r\n\r\n```typescript\r\n\r\nconst TableScanRef = React.createRef(); // TABLE - 表格 (用于控制-rowSelected)\r\n\r\n// 获取Element集合\r\nconst tbody = (TableRef.current as HTMLDivElement).children[0].querySelector('.ant-table-tbody');\r\nlet trNodes: HTMLTableRowElement[] = [];\r\ntbody?.querySelectorAll('tr').forEach((trElement: HTMLTableRowElement, index: number) => {\r\n if (index > 0) {\r\n trNodes.push(trElement);\r\n }\r\n});\r\n\r\n// 装载DOM元素集合到 组件内\r\n$CollectionElementCtrl.setCollectionsElements(trNodes);\r\n\r\n// print 是 Bamboo.KeywordsContrl 事件回调里的按键标识\r\nif (print === 'top') {\r\n $CollectionElementCtrl.reduce();\r\n} else if (print === 'bottom') {\r\n $CollectionElementCtrl.addition();\r\n}\r\n```\r\n\r\n\r\n\r\n##### AccessorOverdue - 存取器 - 过期限制 （save data to localSession）：\r\n\r\n###### 基本使用\r\n\r\n让存储在 localStorage/ sessionStorage 的数据具备过期能力，满足一些需要数据失效的应用场景。\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\nconst { AccessorOverdue } = Bamboo;\r\n\r\n// 创建实例\r\nconst xAccessorOverdue = new AccessorOverdue({ // 过期存储\r\n overdueTimeSecond: 3600 // 设置过期时间 - 单位-秒\r\n});\r\n\r\n/* 默认的配置 component default optiosn [可选]\r\n\r\n{\r\n projectAlias: 'baseToolAccessOverdue', // 命名空间\r\n saveObject: accessOverdue_saveObjectEnum.sessionStorage, // 存储对象 'sessionStorage' | 'localStorage'\r\n overdueTimeSecond: 60 // 过期时间 - 1 = 1s (单位/秒)\r\n}\r\n*/\r\n\r\n// 写入存储\r\nxAccessorOverdue.setItem('mockKey', {name: '我是需要保持的数据'});\r\n\r\n// 提取存储\r\nxAccessorOverdue.getItem('mockKey');\t\t// 根据 [配置项-过期时间] 判断是否过期\r\nxAccessorOverdue.getItem('mockKey', 1);\t\t// 根据本次形参 - 判断是否过期 (单位/秒 = 1s过期)\r\n\r\n// 指定删除\r\nxAccessorOverdue.removeItem('mockKey');\t\t\t// 删除一项\r\nxAccessorOverdue.removeItem(['mockKey', 'mockKey1', 'mockKey2']);\t// 删除多选\r\n\r\n```\r\n\r\n配置项中，projectAlias 有效防止命名冲突，saveObject可以指定存储的方式。\r\n\r\n###### 提取返回\r\n\r\n不管isInvalid状态是否过期，数据永远是会保留返回。\r\n\r\n```typescript\r\n// 执行 .getItem('mockKey')\r\n{\r\n isInvalid: boolean;\t\t\t// 是否已过期 - (true-无效已过期、false有效)\r\n value: any;\t\t\t\t\t// setItem 之前存储的数据内容\r\n}\r\n```\r\n\r\n###### 配置项说明\r\n\r\n```typescript\r\n// 配置props - options\r\nexport interface accessOverdue_defaultOption {\r\n projectAlias?: string;\r\n saveObject?: accessOverdue_saveObjectEnum;\r\n overdueTimeSecond?: number;\r\n}\r\n\r\nexport enum accessOverdue_saveObjectEnum {\r\n sessionStorage = 'sessionStorage',\r\n localStorage = 'localStorage'\r\n}\r\n\r\n// 实例可调用的api\r\n{\r\n setItem (key: string, data: any): void // 写入存储\r\n getItem (key: string, overdueTimeSecond?: number): { isInvalid: boolean, value: { creatertime: number, value: any }} // 提取存储\r\n removeItem (keys: string | string[]): void // 指定删除\r\n}\r\n```\r\n\r\n\r\n\r\n##### Debounced / Throttle - 防抖/ 节流 （control event frequency）：\r\n\r\n防止高频触发、开销；\r\n防抖 - 短暂时间内的多次执行，以最后一次执行为触发；\r\n节流 - 一段周期内只执行一次；\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\nconst { Debounced, Throttle } = Bamboo;\r\n\r\n// 防抖 - 创建实例\r\nconst debounced = new Debounced().use((fn: Function) => {\r\n typeof fn === 'function' && fn();\r\n}, 500);\r\n\r\n// 调用-防抖\r\ndebounced(() => {\r\n // u can do any things...\r\n});\r\n\r\n// 实例可调用的api\r\n{\r\n /**\r\n * @param func 需要包装的函数\r\n * @param delay 延迟时间，单位ms\r\n * @param immediate 是否默认执行一次(第一次不延迟)\r\n */\r\n use = (func: Function, delay: number, immediate: boolean = false): Function\r\n}\r\n\r\n---------------------------[ 不华丽且低调的分割线 ]----------------------------------\r\n\r\n// 节流 - 创建实例\r\nconst throttle = new Throttle().use((fn: Function) => {\r\n typeof fn === 'function' && fn();\r\n}, 500);\r\n\r\n// 调用\r\ndestroy(); // 销毁\r\nopen(); // 开启\r\nclose(); // 关闭\r\n\r\n{\r\n /**\r\n * @param func 需要包装的函数\r\n * @param delay 延迟时间，单位ms\r\n * @param immediate 是否默认执行一次(第一次不延迟)\r\n */\r\n use = (func: Function, delay: number, immediate: boolean = false): Function\r\n}\r\n\r\n```\r\n\r\n\r\n\r\n##### KeywordsContrl - 键盘事件捕捉器\r\n\r\n方便快捷的获取按键捕捉及回调事件。\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\n\r\nconst { KeywordsContrl } = Bamboo;\r\n\r\n// 键盘事件\r\nconst $keywordsContrl = new KeywordsContrl();\r\n\r\n// 按键事件回调\r\n$keywordsContrl.allEventCallback = (eventName, data) => {\r\n const { keyCode, print } = data;\r\n \r\n // keyCode if enter -> 13\r\n // print if up -> 'top | bottom | enter ... keywordsContrl_eventType'\r\n}\r\n\r\n// 事件类型定义\r\nexport enum keywordsContrl_eventType {\r\n prev = 'prev',\r\n next = 'next',\r\n top = 'top',\r\n right = 'right',\r\n bottom = 'bottom',\r\n left = 'left',\r\n delete = 'delete',\r\n enter = 'enter',\r\n focus = 'focus',\r\n blur = 'blur',\r\n tableIsReady = 'tableIsReady',\r\n init = 'init'\r\n}\r\n```\r\n\r\n\r\n\r\n##### CreatTableHtmlElement - 打印模板表格\r\n\r\n适用于生成表格相关的纸质打印单据。\r\n\r\n此组件会很方便快速构造一个表格，并将数据渲染在表格内，有需要时可以达成纸质分页及各处自定义内容插槽（为了更符合单据的各种样式），同时支持尺寸自定义。\r\n\r\n###### 基本使用\r\n\r\n下列示例仅根据 [ 表头配置 + 数据 ] 就能快速生成一个表格。\r\n\r\n```typescript\r\nimport { CreatTableHtmlElement } from 'bamboosnaketool';\r\n\r\n// 配置表头 width 29.7cm\r\nconst printColumns = [\r\n {\r\n key: 'mainBarcode',\r\n name: '条码',\r\n width: 3\r\n }, {\r\n key: 'goodsName',\r\n name: '品名、剂型号、规格、生产企业',\r\n width: 5.5\r\n }, {\r\n key: 'permitHolder',\r\n name: '上市许可持有人',\r\n width: 3.7\r\n }\r\n];\r\n\r\n// 模拟数据\r\nconst mockDatas = [\r\n { mainBarcode: '98500001', goodsName: '阿莫西林-5g*20/盒-江苏制药六厂', permitHolder: '刘备' },\r\n { mainBarcode: '98500002', goodsName: '云南白药牙膏250g/支-云南利民制药厂', permitHolder: '孙权' },\r\n { mainBarcode: '98500003', goodsName: '天然养生枸杞 500g/罐-六元堂股份药业', permitHolder: '曹操' },\r\n // more...\r\n];\r\n\r\nlet TABLEhtml = CreatTableHtmlElement(printColumns, mockDatas)();\r\n\r\n```\r\n\r\n可以自定义尺寸属性，如示例\r\n\r\n```typescript\r\nlet options = {\r\n cssUnit: 'cm',\t\t// 内置默认是 'px'，这里的单位会影响 printColumns[ item.width ]\r\n ...\t\t\t\t\t// ’欧佛阔斯‘，还有很多其他的属性\r\n};\r\nlet TABLEhtml = CreatTableHtmlElement(printColumns, mockDatas, options)(/** 有需的话可配置插槽对象 **/);\r\n```\r\n\r\n\r\n\r\n###### 插槽 Slot\r\n\r\n该组件中插槽其实是满足打印需求非常关键的一个功能，因为很多实际应用场景下，需要打印的纸质单据并不是内容仅有表格，可能会有下列罗列情况：\r\n\r\n1.打印多张，但第一张有个额外的小表格或一段前言声明之类的（那么第一张纸由于被其他内容占据可能表格被裁切高度只能有50%高，而后面其他页都是100%全高）；\r\n\r\n2.打印多张，需要在每一张都盖上 印章；\r\n\r\n3.打印的每一张，内容表格的前后都需要添加一些内容（可能是一个元素结构，也可能是一段文本内容）；\r\n\r\n不再多举例，下面我们看看如何达成这些需求：\r\n\r\n```typescript\r\nimport { CreatTableHtmlElement, CreatTableHtmlElement_InnterSlotModeEnum } from 'bamboosnaketool';\r\n\r\n// 复制一份上述示例，增加插槽内容演示\r\nlet TABLEhtml = CreatTableHtmlElement(printColumns, mockDatas, options)(\r\n {\r\n slotInner: [ // 表格集合组插槽 - 每个表格单元中的内容\r\n {\r\n mode: CreatTableHtmlElement_InnterSlotModeEnum.ONLY_FIRST_BEFORE,\r\n HTMLtext: '仅第一个表格前方渲染的内容'\r\n },\r\n {\r\n mode: CreatTableHtmlElement_InnterSlotModeEnum.ONLY_LAST_BEFORE,\r\n HTMLtext: '仅最后一个表格的前方渲染的内容'\r\n }，\r\n // has more...\r\n ],\r\n // 表格集合组外部插槽\r\n slotStamp: `![](\"${setimageDataUrl}\") `,\r\n slotBefore: '开端xxx内容',\r\n slotAfter: '落款xxxx内容',\r\n});\r\n```\r\n\r\n\r\n\r\n###### 打印单据示例\r\n\r\n下面是一个带有表头的单据打印需求场景（由于无法上图）\r\n\r\n```typescript\r\nimport CreatTableHtmlElement, { CreatTableHtmlElement_InnterSlotModeEnum } from 'bamboosnaketool';\r\n\r\nlet setimageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......';\r\n\r\nlet title = {\r\n billName: '大标题XXXXX单据',\r\n storeName: '香樟东路门店',\r\n billCode: '90000816',\r\n shippingDate: '2021-10-21 19:58:23'\r\n};\r\nlet deliveryHTMLtext = `\r\n \r\n ${ title.billName }\r\n \r\n \r\n 收货门店：${title.storeName}\r\n \r\n \r\n 单据编号：${title.billCode}\r\n \r\n \r\n 开票日期：${title.shippingDate}\r\n \r\n \r\n
功能与模态框类似可自定义文本内容及事件绑定。 |\r\n\r\n**物料：**\r\n\r\n{ ..., eventSubstance: [?] }\r\n\r\n配套对应不同 eventType , 配置完全不同； \r\n\r\n| 对象 | 名称 | 配置格式 | 说明 |\r\n| ------------------------------ | ---------- | ------------------------------------------------------------ | ---- |\r\n| Table_enumEventType.CALLBACK | 函数回调 | ( record: any ) => void; | - |\r\n| Table_enumEventType.MODALBOX | 模态框 | {
title: (string \\| JSX.html),
content: (string \\| JSX.html),
ok: Function,
cancel: Function
} | - |\r\n| Table_enumEventType.POPCONFIRM | 气泡确认框 | 与 [模态框] 一致。↑↑↑ | - |\r\n\r\n**显示方式：**\r\n\r\n{..., condition: { [?key]: boolean | evalString }}\r\n\r\n渲染条件允许配置多个，内含 { hide, transparent, locked }, 优先级按此序列；条件书写为 eval(string), 内置关键字为 'record'; \r\n\r\n| 对象 | 名称 | 优先级权重 | 说明 |\r\n| ----------- | -------- | ---------- | ------------------------------------ |\r\n| hide | 隐藏 | 1（最高） | 条件成立则不显示，不干涉元素布局占位 |\r\n| transparent | 占位隐藏 | 2 | 条件成立则不显示，干涉元素布局占位 |\r\n| locked | 锁定 | 3 | 条件成立则禁用置灰 |\r\n\r\n**渲染方式：**\r\n\r\n{ ..., viewMode: [?] }\r\n\r\n渲染显示模式有三种，文字/ icon, { Table_enumViewMode.DEFAULT, Table_enumViewMode.ICON, Table_enumViewMode.ICONTEXT }。\r\n\r\n| 对象 | 名称 | 说明 |\r\n| --------------------------- | ---------- | -------------------------- |\r\n| Table_enumViewMode.DEFAULT | 默认 | 只显示文本 |\r\n| Table_enumViewMode.ICON | 仅图标 | 只显示自定义配置的图标 |\r\n| Table_enumViewMode.ICONTEXT | 图标兼文本 | 同时显示图标和文本的组合体 |\r\n\r\n\r\n\r\n代码参考如下：\r\n\r\n```javascript\r\n// tableMock.tsx \r\nimport { HomeOutlined } from '@ant-design/icons';\r\nimport { Table_enumEventType, Table_enumViewMode, Table_sActions as ActionInterface } from 'bamboosnaketool';\r\n\r\n\r\n// 这是一个配置好的 操作栏 - ACTIONS\r\nexport const setActionsTestMock : ActionInterface[] = [\r\n // 事件交互\r\n {\r\n text: '点击回调',\r\n condition: {\r\n hide: `['2', '3'].includes(record.key)`\r\n },\r\n eventType: Table_enumEventType.CALLBACK,\r\n eventSubstance(record: RowProps) {\r\n alert('can run xxx function event.');\r\n }\r\n }, {\r\n text: '模态框',\r\n condition: {\r\n hide: `['2', '3'].includes(record.key)`\r\n },\r\n eventType: Table_enumEventType.MODALBOX,\r\n eventSubstance: {\r\n title: '模态框标题',\r\n content: (\r\n \r\n 这是一段询问的内容，吧啦吧啦。。。\r\n ),\r\n ok(record) {\r\n alert('ok')\r\n },\r\n cancel() {\r\n alert('cancel')\r\n }\r\n }\r\n }, {\r\n text: '气泡确认框',\r\n condition: {\r\n hide: `['2', '3'].includes(record.key)`\r\n },\r\n eventType: Table_enumEventType.POPCONFIRM,\r\n eventSubstance: {\r\n title: '气泡标题',\r\n content: '嗯哼？',\r\n ok(record) {\r\n alert('ok')\r\n },\r\n cancel() {\r\n alert('cancel')\r\n }\r\n }\r\n },\r\n\r\n // 按鈕狀態\r\n {\r\n text: '隐藏且占位',\r\n condition: {\r\n transparent: `true`,\r\n hide: `['1', '3'].includes(record.key)`\r\n },\r\n eventType: Table_enumEventType.CALLBACK,\r\n eventSubstance(record: RowProps) {\r\n alert('can run xxx function event.');\r\n }\r\n },\r\n {\r\n text: '显示图标',\r\n icon: ,\r\n condition: {\r\n hide: `['1', '2'].includes(record.key)`\r\n },\r\n eventType: Table_enumEventType.CALLBACK,\r\n eventSubstance() {\r\n\r\n },\r\n viewMode: Table_enumViewMode.ICONTEXT\r\n }\r\n .... /* 还有非常多种 */\r\n]\r\n\r\n```\r\n\r\n上述还有非常多种，具体可以参考 `后期补全，示例文件删了`。（同时你可以使用该文件内的数据生成示例参考，datasource、columns、actions 都是齐全的）\r\n\r\neventType : 事件响应模式 { Table_enumEventType.CALLBACK, Table_enumEventType.MODALBOX, Table_enumEventType.POPCONFIRM }； \r\neventSubstance : 配套对应不同 eventType , 配置完全不同； \r\ncondition : 渲染条件，内含 { hide, transparent, locked }, 优先级按此序列；条件书写为 eval(string), 内置关键字为 'record'; \r\nviewMode : 渲染显示模式，文字/ icon, { Table_enumViewMode.DEFAULT, Table_enumViewMode.ICON, Table_enumViewMode.ICONTEXT }。\r\n\r\n\r\n\r\n将配置完成的 [操作栏] 数据与 [column] 数据进行数组合并。 \r\n\r\n```javascript\r\n\r\nimport { setActionsTestMock } from '../tableMock.tsx';\r\nimport { ColumnRender_operationAction } from 'bamboosnaketool';\r\n\r\nexport const setColumns = [\r\n {\r\n title: '创建人',\r\n dataIndex: 'str3',\r\n key: 'str3',\r\n },\r\n {\r\n title: '操作',\r\n key: 'action',\r\n render: (text: string, record: any, index: number) => {\r\n\r\n let setActionsTest = setActionsTestMock;\r\n\r\n // if 条件变更 setActions ...\r\n return ColumnRender_operationAction(text, record, index, setActionsTest);\r\n }\r\n }\r\n];\r\n\r\n```\r\n\r\n更多细节建议利用mock数据做一个例子，并花30分逐个尝试并理解为最佳。这里就没有逐一全部写清楚了。\r\n\r\n\r\n\r\n\r\n###### column-Item - 配置定制化模板\r\n\r\n支持表格单元格渲染，输入框类型、货币格式转换、时间戳转字符串、进度条（节状、直条、或任意款式）、高亮link内容等错综复杂的万象需求...，都可按照目前组件提供的内置模板模式达成。\r\n\r\n配置示例：\r\n\r\n```javascript\r\n\r\n// 这里就写局部结构，完整内容参考已上述过的【列头配置】\r\n{\r\n [keys.salesForecast]: {\r\n name: '链接文本', // 其实这里是 列头名称，为方便理解这个改为了 ’示例模板名称‘\r\n condition: [\r\n 'record.id !== \"3\"',\r\n {\r\n customType: Table_ColumnCustomType.LINKBUTTON,\r\n customSettings: {\r\n style: {\r\n fontWeight: 'bold'\r\n }\r\n }\r\n }\r\n ]\r\n },\r\n\r\n [keys.replenishNumber]: {\r\n name: '输入框', // 其实这里是 列头名称，为方便理解这个改为了 ’示例模板名称‘\r\n condition: [\r\n 'record.id !== \"3\"',\r\n {\r\n customType: Table_ColumnCustomType.INPUT,\r\n optionsApi: {\r\n style: { width: 56 },\r\n maxLength: 4\r\n }\r\n },\r\n { // 其实该处整个{}对象配置可以省略，组件内部会默认使用 NORMALRENDER 渲染正常文本显示。\r\n customType: Table_ColumnCustomType.NORMALRENDER, // 默认渲染普通文本 - 该处可不设\r\n }\r\n ]\r\n }\r\n}\r\n\r\n```\r\n\r\n上述代码示例中出现了三个组件内置模板，Table_ColumnCustomType { LINKBUTTON, INPUT, NORMALRENDER }。\r\n\r\noptionsApi 为antd-api，这里的设置参数全部是直接 setProps 到 antd-DOM 上的。根据不同的组件查看官方具体的api。\r\ncustomSettings 设置一些自定义的dom属性，比如 customSettings.style， 这些最终也会以 setProps 方式应用到 DOM 的行间样式属性中；\r\n\r\n为了方便理解，从概念上 optionsApi 可看作【setApis】，customSettings可看作【setPropertys】。\r\n\r\n\r\n\r\n###### 渲染条件 condition\r\n\r\n这里condition（条件）要特别说下，它决定了每个列配置的最终渲染结果，根据条件满足与否执行A/ B；`类似if else 无限递归`\r\n\r\ncondition本身是数组，参考概念格式为 condition = [ boolean, A, B ] 或 [ boolean, A ] 。\r\n\r\n```\r\nc[0] 是布尔类型，成功则执行A，否则执行B； \r\nA/B 是一个单个模板完整的配置方案； \r\nB 非必填，不填时则渲染默认模板 Table_ColumnCustomType.NORMALRENDER（默认文本显示）; \r\n\r\nc[0]：书写可以是 true/ false/ 表达式， 或 eval(string)，string数据关键字为 'record';\r\n```\r\n\r\n\r\n\r\n同时为满足相对复杂的业务需求，这里支持无限层级的类似 if else 嵌套，代码如下：\r\n\r\n```javascript\r\n\r\n// 类似 if else 方式\r\n{\r\n name: '补货数量',\r\n condition: [\r\n true,\r\n {\r\n customType: Table_ColumnCustomType.INPUT,\r\n optionsApi: {\r\n style: { width: 56 },\r\n maxLength: 4\r\n }\r\n },{\r\n customType: Table_ColumnCustomType.TEXT,\r\n optionsApi: {\r\n style: { width: 56 },\r\n maxLength: 4\r\n }\r\n }\r\n ]\r\n}\r\n\r\n// 伪代码理解\r\n// [false, 3, [false, 5, [true, 18]]] - 结果：18\r\n// [true, 996, [true, 42, [false, 23]]] - 结果：996\r\n// [false, 5]\t\t\t\t\t\t - 结果：由于未设置B，则指向默认Table_ColumnCustomType.NORMALRENDER，或优先外部配置的 isItemRender\r\n\r\n\r\n// 递归无限层级\r\n{\r\n name: '补货数量',\r\n condition: [\r\n true,\r\n {\r\n customType: Table_ColumnCustomType.INPUT,\r\n optionsApi: {\r\n style: { width: 56 },\r\n maxLength: 4\r\n }\r\n },[\r\n true,\r\n {\r\n customType: Table_ColumnCustomType.TEXT,\r\n optionsApi: {\r\n style: { width: 56 },\r\n maxLength: 4\r\n }\r\n }, [ 无限层级... ]\r\n ]\r\n ]\r\n}\r\n\r\n```\r\n\r\n###### 模板 template\r\n\r\n目前使用的模板都是内置的。在 ./template.tsx 中。\r\n需要新增则需要扩展 Table_ColumnCustomType 类型名称 及 对应的 render 函数。 \r\n\r\n理想的最优解为之后迭代，让今后使用者能够外部定义追加扩展模板及模板类型名称。 \r\n\r\n\r\n\r\n###### 表格事件 eventHandle\r\n\r\n通过配置表格组件Props - ALLEVENTCallback, 传入一个方法，该方法仅会响应 template 模板事件。 \r\n\r\n```javascript\r\n\r\n// 全表格事件回调捕捉函数\r\nconst tableLLEVENTCallback: ALLEVENTCallbackType = (TYPE, data) => {\r\n\r\n // 输入框 - 每次输入\r\n if (TYPE === Enum_ALLEVENT.INPUT_onChange) {\r\n const { e, record, columnItem, index } = data;\r\n let key = columnItem.key;\r\n let value = e.target.value;\r\n \r\n //...\r\n }\r\n // 输入框 - 回车 / 失焦\r\n else if (TYPE === Enum_ALLEVENT.INPUT_onPressEnter || TYPE === Enum_ALLEVENT.INPUT_onBlur) {\r\n\r\n }\r\n // 点击 预测销量\r\n else if (TYPE === Enum_ALLEVENT.LINKBUTTON_onClick) {\r\n // do anything...\r\n }\r\n}\r\n\r\n```\r\n\r\n顺便提一嘴，操作栏 ACTION 的事件回调函数为 eventSubstance。在配置 ACTION-item 时被一并配置，根据ACTION类型不同会有所不同。\r\n\r\n###### Props Api\r\n\r\n```javascript\r\n\r\ninterface IProps {\r\n dispatch: Dispatch;\r\n\r\n columns: ColumnsType; // 表格列头\r\n dataSource: any[]; // 表格数据\r\n rowKey?: string | undefined; // 自定义关键参数 default: id\r\n isShowPagination?: boolean; // 是否显示分页组件\r\n defaultFirstPage?: number | undefined; // 默认开始页码\r\n pageCurrent?: number | undefined; // 当前页码\r\n pageTotal?: number | undefined; // 总页码数\r\n pageLimit?: number | undefined; // 单页数据数量\r\n pageSizeOptions?: string[] | undefined; // 单页数量变更\r\n\r\n onPaginationChange?: ((page: number, pageSize: number) => void) | undefined; \t\t// 分页组件事件回调\r\n onPaginationShowSizeChange?: ((current: number, size: number) => void) | undefined;\t// 是否显示分页组件\r\n ALLEVENTCallback?: ALLEVENTCallbackType; // 公共回调函数 (可用于解决column-render组合任何组件的无限触发事件回调)\r\n\r\n reloadApiTable?: TableProps; // antd - table - api\r\n reloadApiPagination?: PaginationProps; // antd - pagination- api\r\n}\r\n\r\n```\r\n\r\n\r\n\r\n###### TS报错\r\n\r\n参数声明 isItemRender 是 [boolean, ColumnCustomType]，但如果直接写成 isItemRender: [true, ColumnCustomType.TEXTLINESINGLE]，会造成props报错，原因是TS自动解析为 联合类型，而不是索引指定类型；\r\n\r\n```typescript\r\nimport Bamboo from 'bamboosnaketool';\r\nconst { Table: BamTable } = Bamboo;\r\n// 这样指定个声明可以解决TS报错误识别问题\r\n// 如不额外将 setIsItemRender 拿出来做TS会自动认为 [true, ColumnCustomType.TEXTLINESINGLE] 是 (boolean | ColumnCustomType)[]，fuok！\r\nconst setIsItemRender: [boolean, ColumnCustomType] = [true, ColumnCustomType.TEXTLINESINGLE];\r\n\r\n// table setProps - FAST\r\nconst setTableProps = {\r\n dataSource: dataSourceList,\r\n columns: saColumns,\r\n isItemRender: setIsItemRender,\r\n // isItemRender: [true, ColumnCustomType.TEXTLINESINGLE]\r\n}\r\n\r\n// render\r\n\r\n```\r\n\r\n解决其它含antd@type 的报错解决。页面调用时由于TS默认会识别 ‘small’ | ‘checkbox’ 为 string 类型。\r\n\r\n```typescript\r\nimport { SizeType } from 'antd/lib/config-provider/SizeContext.d';\r\nimport { RowSelectionType } from 'antd/lib/table/interface.d';\r\nimport Bamboo from 'bamboosnaketool';\r\nconst { Table: BamTable } = Bamboo;\r\n\r\nconst sizeType: SizeType = 'small';\r\nconst rowSelectionType: RowSelectionType = 'checkbox';\r\n\r\n/* 或亦可如此，更爲简洁\r\n{ \r\n\tsize: ('small' as SizeType),\r\n\trowSelection: {\r\n\t\ttype: 'checkbox' as RowSelectionType\r\n\t}\r\n}\r\n*/\r\n\r\n// table setProps - FAST\r\nconst setTableProps = {\r\n dataSource: dataSourceList,\r\n columns: saColumns,\r\n reloadApiTable: {\r\n size: sizeType,\r\n rowSelection: {\r\n type: rowSelectionType,\r\n onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {\r\n setCheckeds(prev => {\r\n return [...selectedRowKeys]\r\n });\r\n },\r\n getCheckboxProps: (record: any) => ({\r\n // disabled: record.name === 'Disabled User', // Column configuration not to be checked\r\n name: record.name,\r\n }),\r\n }\r\n }\r\n}\r\n\r\n// render\r\n\r\n\r\n```\r\n\r\n\r\n\r\n\r\n\r\n##### TreeAbundant - 丰富的树组件 （Tabs + Tree）：\r\n\r\n使用antd的 tree + tabs 组件拼搭的封装组件。\r\n\r\n###### 基本使用\r\n\r\n```typescript\r\nimport Bamboo, { Components } from 'bamboosnaketool';\r\n\r\nconst { TreeAbundant, TreeAbundant_enumEVENTTYPE, TreeAbundant_eventHandle } = Bamboo;\r\n\r\n// 丰富树组件 - 全事件回调\r\nconst treeAbundant_eventHandle: TreeAbundant_eventHandle = (TYPE, data) => {\r\n if (TreeAbundant_enumEVENTTYPE.RADIO_CHANGE === TYPE) {\r\n let value = data;\r\n } else if (TreeAbundant_enumEVENTTYPE.TREE_CHECKED === TYPE) {\r\n let { checkedKeysValue, checkedNodes } = data;\r\n }\r\n}\r\n\r\n// 门店-丰富树props配置\r\nconst setTreeAbund = {\r\n treeDataSource: storeTreeDatasource, // 树状嵌套数组数据\r\n defaultTreeExpandedKeys: storeTreeDatasource.length > 0 ? [storeTreeDatasource[0].key] : [], // 默认展开yf首层级\r\n effectTreeCheckedKeys: storeConfrimCodes, // array\r\n isShowTabs: false, // 是否显示tabs\r\n eventHandle: treeAbundant_eventHandle\r\n};\r\n\r\n// render ...\r\n\r\n\r\n```\r\n\r\n*为确保同步更新，effectTreeCheckedKeys必须始终配置，如果有没配置则填入空数组“[]”。\r\n\r\napi参考\r\n```typescript\r\ninterface IProps {\r\n dispatch: Dispatch;\r\n \r\n treeDataSource: any[]; // tree组件数据\r\n eventHandle: intfEventHandle; // 公共回调事件\r\n effectTreeCheckedKeys: React.Key[]; // 再次定义多选 (default: 'key')\r\n\r\n dataNodeKeyConf?: intfDataNodeKeyConf; // 关键字段自定义配置 [title, key, children]\r\n isShowTabs?: boolean; // tab选项卡 - 是否显示\r\n tabsItems?: intfTabsItem[]; // tab选项卡渲染数据 [{ label: string, value: string }, ...]\r\n defaultRadioValue?: string; // 默认radioValue\r\n defaultTreeExpandedKeys?: React.Key[]; // 设置默认展开 (default: 'key')\r\n defaultTreeCheckedKeys?: React.Key[]; // 设置默认多选 (default: 'key')\r\n defaultSelectedKeys?: React.Key[]; // 设置默认选中 (default: 'key')\r\n treeOptiosApis?: TreeProps; // 树组件 apis - antd\r\n\r\n mainStyle?: React.CSSProperties; // 主结构样式自定义\r\n tabBoxStyle?: React.CSSProperties; // tab容器结构样式自定义\r\n treeBoxStyle?: React.CSSProperties; // 树容器结构样式自定义\r\n}\r\n```\r\n\r\n\r\n\r\n##### TableColumnsLayer - 表格列显示/隐藏组件\r\n\r\n###### 功能\r\n1. 动态变动表格列数据；\r\n2. 支持列数据存储/取赋值；\r\n3. 支持列数据拖动排序；\r\n\r\n###### 基本使用\r\n1. 给定表格列数据，此列数据需要可以变动\r\n``` typescript\r\nimport Bamboo, { Utiles, Components } from 'bamboosnaketool';\r\nimport initColumn from './columns';\t\t\t// 附属xx页面模块的表格配置\r\n\r\nconst { default: TableColumnsLayer } = Components;\r\nconst [ columns, setColumns ] = useState(initColumn); // 声明\r\n\r\n// 定义列变动通知方法\r\nconst onColumnChange = (data:any, close:any) => {\r\n\t// 选择的列数据\r\n\tlet { columns, width } = data;\r\n\r\n\t// 如果操作列单独拿出来的，需要手动放进去\r\n\tsetColumns([...columns, ACTION_OPERATION]);\r\n\r\n\t// 关闭列选择弹出窗\r\n\tclose();\r\n}\r\n\r\n// JSX中渲染注册触发事件按钮，及参数配置项\r\n\r\n\t\r\n\r\n```\r\n\r\n###### 配置项\r\n| 配置项 | 类型 | 说明 | 默认值 |\r\n| ----------- | ------ | ------------------------------------------------------------------------------------- | ------ |\r\n| columns | 数组 | 表格的列数据 | 必填 |\r\n| onChange | 函数 | 回调函数，会回调给用户2个参数，一个data(包含columns和width)，一个是关闭弹出窗口的方法 | 必填 |\r\n| table | ref | 默认插件会自己去找table，用户也可以传入table的ref，这样会更加准确 | 非必填 |\r\n| needStorage | 布尔值 | 是否存储此次操作的列数据，如果存储，下次进来会读取存储中的数据 | false |\r\n\r\n###### 注意事项\r\n1. 未传入ref，组件会自己去找，多个表格的情况有可能会出错，最好把表格的ref传入\r\n2. 如果操作列没有放到column，而是后面加入，那么回调方法中回调的列数据不包含操作列，需要手动把列数据放入，否则可能会出现操作列不见的情况\r\n\r\n\r\n\r\n##### FileUploadExcelToData - 上传文件组件\r\n\r\n内置生成一个button按钮，点击该按钮后弹窗windows-fileSelectWindow（windows系统自带文件选择窗口）；\r\n可以配置一些导入数量的相关数量限制tips阻断；\r\n\r\n###### 基本使用\r\n\r\n```javascript\r\nimport Bamboo, { Components, FileUploadExcelToData_callback } from 'bamboosnaketool';\r\n\r\nconst { FileUploadExcelToData } = Bamboo;\r\n// 或 const { FileUploadExcelToData } = Components;\r\n\r\nconst excelAnaylsDataDispose: FileUploadExcelToData_callback = (\r\n data,\r\n options\r\n) => {\r\n const { file, onSuccess, onError } = options;\r\n}\r\n/*\r\nimport { UploadRequestOption } from 'rc-upload/lib/interface';\r\n(\r\n data: { jsonData: any[], excelColumns: string[] },\r\n options: UploadRequestOption\r\n) => any\r\n*/\r\n\r\n// 文件上传props\r\nconst fileExcelUploadProps = {\r\n isLoading: isLoadingImportExcel,\r\n isDisabled: isLockEdit,\r\n buttonText: '上传文件',\r\n singleUploadMaxLength: 100000,\r\n slowMaybeMaxLength: 100000,\r\n callback: excelAnaylsDataDispose,\r\n uploadApiOptions: {\r\n multiple: false,\r\n maxCount: 1\r\n },\r\n buttonApiOptions: {\r\n icon: \r\n }\r\n};\r\n\r\n// render...\r\n\r\n \r\n// 前置拦截功能待未来实现 （比如点击不是直接选择文件，而是判断条件）\r\n```\r\n\r\n###### 功能\r\n\r\n校验导入的文件类型MIME是否正确；\r\n\r\n将导入文件的二进制类型转换为可读JSON数据对象；\r\n\r\n对超出预设数量的导入操作进行拦截/提示；\r\n\r\n自定义按钮；\r\n\r\n\r\n\r\n###### 配置项说明\r\n\r\n| 配置项 | 类型 | 说明 | 默认值 | 必填 |\r\n| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------ | ---- |\r\n| isDisabled | boolean | 是否禁用 | false | 否 |\r\n| isLoading | boolean | 是否是载入状态 | false | 否 |\r\n| fileTypeStr | {
override: boolean; // 是否覆盖
names: string[]; // 文件类型编码
} | 文件类型编码,MIME | { false, [] } | 否 |\r\n| singleUploadMaxLength | number | 单次上传最大数量，超过限制时候会msg.warn + 逻辑阻断； | 3000 | 否 |\r\n| slowMaybeMaxLength | number | 执行时可能较慢提示，modal.confrim，确认后再执行 | 2000 | 否 |\r\n| buttonText | string | 按钮文本 | \"导入\" | 否 |\r\n| callback | function | | null | 否 |\r\n| uploadApiOptions | { ...antd-options } | antd-Upload，的相关再定义api。（不要覆盖customRequest） | {} | 否 |\r\n| buttonApiOptions | { ...antd-options } | antd-Button，的相关再定义api。 | { type: 'primary', ghost: true, title: '选择一份excel文件' } | 否 |\r\n\r\n###### \r\n\r\n##### ImportFileExcelDataVerifyTool - Excel导入数据校验与转换\r\n\r\n场景：想把excel的中文列头转成英文字段并且拿到转换后的数组，key是excel的列头中文，toKey是需要将原来的中文列头转成什么字段，type表示列值的类型，如果设置了type，那么转换后的数据类型会转成设置的type类型，类型枚举可使用ExcelType，目前包括的枚举(STRING, NUMBER, BOOLEAN, DATETIME, DATE, TIME, FLOAT)\r\n\r\n###### 基本使用\r\n\r\n``` javascript\r\nimport Bamboo, { Utiles, Components } from 'bamboosnaketool';\r\nconst { ImportFileExcelDataVerifyTool } = Bamboo; \r\nconst { ExcelRule } = Utiles;\r\n\r\nnew importFileExcelDataVerifyTool({\r\n file: ev.target.files[0], //file对象 必传\r\n columns: [\r\n { \r\n key: \"列名比如商品编码\", \r\n type: ExcelType.STRING, //数据类型，用于转换数据，具体类型可以查看ExcelType枚举\r\n toKey: \"把列头字段转换成的字段比如goodCode\", \r\n },\r\n ],\r\n})\r\n.valid() // 开始进行数据校验 必须有\r\n.then((res)=>{\r\n // 没有任何错误，将返回数据\r\n // res 为 { total: 总行数, data: 数据数组 }\r\n console.log(res);\r\n})\r\n```\r\n\r\n###### 设置预警值\r\n场景：有限定用户excel数据量大小，并且需要告知用户数据量已经超出询问用户是否继续导入\r\n``` javascript\r\nimport Bamboo, { Utiles, Components } from 'bamboosnaketool';\r\nconst { ImportFileExcelDataVerifyTool } = Bamboo; \r\nconst { ExcelRule } = Utiles;\r\n\r\nnew importFileExcelDataVerifyTool({\r\n file: ev.target.files[0], //file对象 必传\r\n columns: [\r\n { \r\n key: \"列名比如商品编码\", \r\n type: 'string|number|boolean|float', //数据类型，用于转换数据\r\n toKey: \"把列头字段转换成的字段比如goodCode\", \r\n },\r\n ],\r\n})\r\n.warn((msg, confirm, cancel)=>{\r\n //配置了warn字段必须加\r\n // confirm() // 调用此函数表示继续操作\r\n // cancel() // 此函数表示取消操作\r\n})\r\n.valid() // 开始进行数据校验 必须有\r\n.then((res)=>{\r\n // 没有任何错误，将返回数据\r\n // res 为 { total: 总行数, data: 数据数组 }\r\n console.log(res);\r\n})\r\n```\r\n###### 设置起始行\r\n场景：需要从指定的excel行开始读取数据，可以设置startIndex配置，默认从第一行开始\r\n``` javascript\r\nimport Bamboo, { Utiles, Components } from 'bamboosnaketool';\r\n\r\nconst { ImportFileExcelDataVerifyTool } = Bamboo; \r\nconst { ExcelRule } = Utiles;\r\n\r\nimportFileExcelDataVerifyTool({\r\n startIndex:0, //开始行数\r\n file: ev.target.files[0], //file对象 必传\r\n columns: [\r\n { \r\n key: \"列名比如商品编码\", \r\n },\r\n ],\r\n})\r\n.valid()\r\n.then((res)=>{\r\n // 没有任何错误，将返回数据\r\n // res 为 { total: 总行数, data: 数据数组 }\r\n console.log(res);\r\n})\r\n```\r\n\r\n###### 验证\r\n场景：需要对上传的excel数据字段值进行校验，插件本身提供内置的验证，具体可使用插件暴露出的ExcelRule枚举查看，如果想要自己定义验证，可以使用ExcelRule.Customer，然后定义valid回调函数，回调函数会传入读取到的行数据（注：如果定义了转换的key，那么读取到的行数据中的列字段是经过转换的，不是excel显示的中文），回调函数如果返回true，表示验证通过，验证结束后，错误的验证消息会通过catch方法来进行捕捉，错误的消息可以通过配置msg字段来提示，如果不配置插件会使用自己定义的消息提示，一般来说如果使用了内置的验证会提示内置的验证提示，比如使用身份证号验证将默认提示xxx必须是身份证号，没有的内置验证将提示xxx格式错误\r\n``` javascript\r\nimport Bamboo, { Utiles, Components } from 'bamboosnaketool';\r\nconst { ImportFileExcelDataVerifyTool } = Bamboo; \r\nconst { ExcelRule } = Utiles;\r\n\r\nnew importFileExcelDataVerifyTool({\r\n file: ev.target.files[0], //file对象 必传\r\n columns: [\r\n { \r\n key: \"列名比如商品编码\", \r\n toKey: \"把列头字段转换成的字段比如goodCode\", \r\n rules:[\r\n {type:ExcelRule.CUSTOMER, valid:(row)=>{return row.goodCode=='a'}, msg:'自定义错误消息'}, //自定义校验\r\n {type:ExcelRule.NUMBER, msg:'商品编码必须是数字'}, //使用内部校验规则 可以使用 ExcelRule枚举提供的校验规则\r\n ]\r\n },\r\n ],\r\n})\r\n.valid() // 开始进行数据校验 必须有\r\n.then((res)=>{\r\n // 没有任何错误，将返回数据\r\n // res 为 { total: 总行数, data: 数据数组 }\r\n console.log(res);\r\n}).catch((error)=>{ \r\n\r\n // 1.校验规则错误 2.interceptor设置的函数返回false\r\n console.log(error); // {msg:}\r\n})\r\n\r\n```\r\n\r\n###### 手动添加数据\r\n场景：1. 需要在行数据上添加字段 2. 想要遍历指定字段然后中断读取操作 可以使用interceptor方法，此方法会回调给用户行数据和验证过后的错误消息，此函数如果返回false则表示中断excel读取操作，如果返回false此函数会触发catch回调\r\n``` javascript\r\n\r\nnew importFileExcelDataVerifyTool({\r\n file: ev.target.files[0], //file对象 必传\r\n columns: [\r\n { \r\n key: \"列名比如商品编码\", \r\n type: 'string|number|boolean|float', //数据类型，用于转换数据\r\n toKey: \"把列头字段转换成的字段比如goodCode\", \r\n },\r\n ],\r\n})\r\n.interceptor((rowData:any, err:[])=>{\r\n // 此方法不是必需要要有的，如果有数据转换或者要在行数据里面加些字段可以使用\r\n // 使用interceptor来进行数据装换， data为行数据\r\n rowData.field = Math.random();\r\n console.log(rowData);\r\n\r\n // return false直接中断操作抛出异常\r\n return true;\r\n})\r\n.valid() // 开始进行数据校验 必须有\r\n.then((res)=>{\r\n // 没有任何错误，将返回数据\r\n // res 为 { total: 总行数, data: 数据数组 }\r\n console.log(res);\r\n}).catch((error)=>{ \r\n\r\n // 1.校验规则错误 2.interceptor设置的函数返回false\r\n console.log(error); // {msg:}\r\n})\r\n```\r\n\r\n###### 配置项说明\r\n| 配置项 | 类型 | 说明 | 默认 |\r\n| ------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |\r\n| file | file对象 | file对象 | 必填 |\r\n| sheet | 数字 | excel中如果有多个工作簿，可以通过sheet配置项来配置读取第几个工作簿的数据 | 0 |\r\n| isDebugger | 布尔 | 是否显示警告在控制台中 | false |\r\n| mimeType | 数组 | 设置可以读取的文件类型，默认 | [\"application/vnd.ms-excel\", \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\", ] |\r\n| max | 数字 | 最大行数 | 500 |\r\n| warn | 数字 | 预警行数 | 500 |\r\n| columns | 数组 | 配置excel列 | 必填 |\r\n| columns.key | 字符串 | 列名比如商品编码 | |\r\n| columns.type | ExcelType | 列名类型，描述此列数值的类型 | |\r\n| columns.toKey | 字符串 | 重命名key，比如key为商品编码，toKey为goodCode，那么导出的数据就是{goodCode:''}这种形式 | |\r\n| columns.rules | 数组 | rules:[{type:ExcelRule.CUSTOMER, valid:(row)=>{return row.goodCode=='a'}, msg:'自定义错误消息'},{type:ExcelRule.NUMBER, msg:'商品编码必须是数字'}] 注：msg可以为空，如果为空则会采用插件自带的提示 验证类型的可使用ExcelRule的枚举类型| |\r\n\r\n\r\n###### 方法说明\r\n| 方法 | 说明 |\r\n| ----------- | ----------------------------------------------------------------------------------------------------------------------------- |\r\n| valid | 校验方法，必须调用 |\r\n| warn | 配置了warn字段必须调用，会有三个参数回调给用户(msg, confirm, cancel) msg为消息，confirm为用户继续操作，cancel表示取消数据读取 |\r\n| interceptor | 此方法会回调给用户当前行数据和错误消息，如果用户在此方法中返回false，会中断读取数据操作，并且会调用catch抛出异常 |\r\n| then | 数据读取完成无错误会回调给用户一个对象，{ total: 总行数, data: 数据数组 } |\r\n| catch | 数据读取中如果有校验错误或者在intercepotor里返回false都会触发此方法，并回调给用户一个对象{type:'error', msg:['错误消息']} |\r\n\r\n\r\n\r\n###### 枚举类型\r\n| 类型 | 说明 |\r\n| --------- | ---------- |\r\n| ExcelRule | 内置规则枚举(NUMBER整数验证 MOBILE手机号验证 IDCARD身份证验证 NUMERIC小数验证 NOT_EMPTY非空验证 CUSTOMER自定义验证) |\r\n| ExcelType | 列类型枚举(STRING字符串 NUMBER整数数值包括负数 FLOAT小数 BOOLEAN布尔类型 DATETIME年月日时分秒格式 DATE年月日格式 TIME时分秒格式) |\r\n\r\n\r\n\r\n##### FreeCustomRowLine - 增减行自由定义配置组件\r\n\r\n支持能预先自由配置各种元素组合的单行模板（文字/ antd组件/ 自定义元素...）。\r\n根据配置的单行模板，能够去生成n行该模板的独立数据控制，排序样式，单元素填值时的基础校验，最终生成表单数据。\r\n同时支持单行的删除。（未来会支持 up down调序）。\r\n\r\n###### 基本使用\r\n\r\n如下述示例，组成的是支持`整单满[?]元，赠送[x?],[number?]`的设置项；\r\n\r\n```javascript\r\nimport Bamboo, { FreeCustomRowLine, FreeCustomRowLine_EVENTTYPE, FreeCustomRowLine_ELEMENTTEMP } from 'bamboosnaketool';\r\nconst { FreeCustomRowLine } = Bamboo;\r\n\r\n// 配置增减行\r\nconst freeCustomRowLineConfProps = {\r\n templateRow: [\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INNERHTML,\r\n style: { width: 38, marginRight: 8 }\r\n },\r\n '整单满',\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INPUTNUMBER,\r\n placeholder: '价格',\r\n maxLength: 8,\r\n style: { width: 100, marginLeft: 4, marginRight: 4 },\r\n apiOptions: {\r\n min: 0\r\n }\r\n },\r\n '元，赠送',\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INPUT,\r\n placeholder: '搜索商品',\r\n maxLength: 10,\r\n style: { width: 200, marginLeft: 4, marginRight: 4 }\r\n },\r\n '，',\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INPUTNUMBER,\r\n placeholder: '数量',\r\n maxLength: 4,\r\n style: { width: 90, marginLeft: 4, marginRight: 4 },\r\n apiOptions: {\r\n min: 0\r\n }\r\n }\r\n ],\r\n callback: (TYPE: EVENTTYPE, data: any) => {\r\n console.log(TYPE, data)\r\n }\r\n};\r\n\r\n// render...\r\n\r\n```\r\n\r\n如何简单理解上述呢？templateRow 是确定单行模板的如下：\r\n\r\n```javascript\r\n// 支持类型\r\n{\r\n templateRow: [ string文本 | 内置模板对象 | JSX.Element ]\r\n}\r\n```\r\n\r\n最终组件内部会平铺该数组内的所有内容组成完整的单行预模板；\r\n\r\n\r\n\r\n###### 初始化插入数据\r\n\r\n支持通过数据对组件进行首次初始化的渲染生成。\r\n\r\n下面的配置会初始化生成下列文本（由于无法附图，文字描述）：\r\n\r\n条件1：整单满 [inputNumber] 元，赠送 [input-autocomplate] ，数量 [inputNumber] 责任人 [select]，备注：[input] (删除、锁定、向上移动、向下移动)\r\n\r\n```typescript\r\nimport Bamboo, { FreeCustomRowLine_ELEMENTTEMP } from 'bamboosnaketool';\r\n\r\nconst __awardLineMockDatas = [\r\n [\r\n { \"value\": `类型` },\r\n { \"value\": 128, disabled: true },\r\n {\r\n \"value\": \"异步2\",\r\n \"valueId\": \"async2\",\r\n \"options\": [\r\n { \"value\": \"async1\", \"label\": \"异步1\" },\r\n { \"value\": \"async2\", \"label\": \"异步2\" },\r\n { \"value\": \"async3\", \"label\": \"异步3\" }\r\n ]\r\n },\r\n { \"value\": 1 },\r\n { \"value\": \"选项1\", \"valueId\": \"a1\" },\r\n { \"value\": \"撒大大\" }\r\n ]\r\n];\r\n\r\n// 配置增减行\r\nconst shoppingAwardGiftConfProps = {\r\n datasource: __awardLineMockDatas,\r\n templateRow: [\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INNERHTML,\r\n style: { width: 38, marginRight: 8 }\r\n },\r\n '整单满',\r\n {\r\n stamp: 'PRICE',\r\n elementTEMP: ELEMENTTEMP.INPUTNUMBER,\r\n placeholder: '价格',\r\n maxLength: 8,\r\n style: { width: 100, marginLeft: 4, marginRight: 4 },\r\n apiOptions: {\r\n min: 0\r\n }\r\n },\r\n '元，赠送',\r\n {\r\n stamp: 'SEARCH_GOODS',\r\n elementTEMP: ELEMENTTEMP.AUTOCOMPLETE,\r\n placeholder: '搜索商品',\r\n maxLength: 10,\r\n style: { width: 200, marginLeft: 4, marginRight: 4 }\r\n },\r\n '，数量',\r\n {\r\n stamp: 'NUMBER',\r\n elementTEMP: ELEMENTTEMP.INPUTNUMBER,\r\n placeholder: '数量',\r\n maxLength: 4,\r\n style: { width: 90, marginLeft: 4, marginRight: 4 },\r\n apiOptions: {\r\n min: 0\r\n }\r\n },\r\n '责任人',\r\n {\r\n stamp: 'PRINCIPAL',\r\n elementTEMP: ELEMENTTEMP.SELECT,\r\n placeholder: '选择性',\r\n style: { width: 90, marginLeft: 4, marginRight: 4 },\r\n options: [\r\n { value: 'fzr1', label: '吴亦凡' },\r\n { value: 'fzr2', label: '鹿晗' },\r\n { value: 'fzr3', label: '黄子韬' }\r\n ],\r\n apiOptions: {}\r\n },\r\n '，备注：',\r\n {\r\n stamp: 'REMARK',\r\n elementTEMP: ELEMENTTEMP.INPUT,\r\n placeholder: '请输入备注内容',\r\n maxLength: 10,\r\n style: { width: 200, marginLeft: 4, marginRight: 4 }\r\n }\r\n ]\r\n}\r\n```\r\n\r\n\r\n\r\n###### 顶部按钮组\r\n\r\n组件内置了顶部按钮组 ，该组可配置 [新增一行]、 [重置]、[自定义];\r\n\r\n其中 [新增一行]、 [重置]为内置，组件Props { showAddButton, showResetButton } 为 true 时显示，否则隐藏；\r\n\r\n同时也支持配置多个自定义按钮，通过配置后可以更灵活的实现应用。\r\n\r\n```typescript\r\n// 可通过配置属性 customManaButtons 实现\r\nimport Bamboo, { FreeCustomRowLine_ManaButton } from 'bamboosnaketool';\r\nimport { PlusOutlined, DeleteOutlined } from '@ant-design/icons';\r\nlet freeCustomRowLineConfProps = {\r\n ...,\r\n customManaButtons: [\r\n \t{\r\n \t\ttext: '自定义按钮1',\r\n \t\ttype: FreeCustomRowLine_ManaButton.CUSTOM,\r\n \t\tstamp: 'ANY_NAME_1',\r\n \t\tstyle: {\r\n \t\t\tcolor: 'red'\r\n\t\t\t},\r\n \t\tapiOptions: {\r\n icon: \r\n }\r\n\t\t},\r\n {\r\n \t\ttext: '自定义按钮2',\r\n \t\ttype: FreeCustomRowLine_ManaButton.CUSTOM,\r\n \t\tstamp: 'ANY_NAME_2',\r\n \t\tstyle: {\r\n \t\t\tcolor: 'yellow'\r\n\t\t\t},\r\n \t\tapiOptions: {\r\n icon: \r\n }\r\n\t\t}\r\n ]\r\n}\r\n\r\n// render...\r\n\r\n\r\n```\r\n\r\n```typescript\r\n// 事件响应回调 - 顶部按钮组\r\n\r\nimport Bamboo, { FreeCustomRowLine_ManaButtonProps } from 'bamboosnaketool';\r\nlet freeCustomRowLineConfProps = {\r\n ...,\r\n buttonsCallback: (TYPE: FreeCustomRowLine_ManaButton, data?: Pick) => {\r\n if (TYPE === FreeCustomRowLine_ManaButton.CUSTOM) {\r\n // 这里使用配置的stamp值进行多个自定义按钮情况的区别\r\n let stamp = data?.stamp;\r\n // do somethings ...\r\n }\r\n }\r\n};\r\n```\r\n\r\n\r\n\r\n###### 选项的构成 - options\r\n\r\n我们把配置项中 templateRow 里的每一个索引内容称之为 '单元'。\r\n\r\noptions配置合法字段使用 { value: any, label: string };\r\n\r\n那么单元目前除String文本外，就都是antd的封装组件了，其中 autocomplate、selecet都会是涉及到多选的options选项，那么这个怎么配？\r\n\r\n下拉选项首先我们分为两种 **初始配置** 和 **异步设置** 的，这两者带来的方式上也是不一样的，初始配置的只需配置一次覆盖所有生成行，异步设置的可以支持到 每一行的都不一样；\r\n\r\n初始配置：适合固定的选择内容，比如每行都需要指定的选择 '负责人'，而关联这次数据的的所有负责人池一共8人，那么原则上所有行的下拉负责人选项都可以是一致的；\r\n\r\n异步配置：适合非固定选择内容，比如每行都需要模糊搜索到某个指定的内容，然后从模糊匹配到的下拉结果中选出一项，那么每一行最终选中的对象可能都不一致；\r\n\r\n（!!!异步配置优先级高于初始配置，故异步配置动作是后置于初始配置，最终数据的渲染显示会是异步配置动作为准）\r\n\r\n\r\n\r\n**初始配置\r\n\r\n```typescript\r\n// 方式一 - 初始配置\r\nconst shoppingAwardGiftConfProps = {\r\n templateRow: [\r\n '选择责任人',\r\n {\r\n stamp: 'PRINCIPAL',\r\n elementTEMP: ELEMENTTEMP.SELECT,\r\n placeholder: '请选择负责人',\r\n style: { width: 90, marginLeft: 4, marginRight: 4 },\r\n options: [\r\n { value: 'fzr1', label: '吴亦凡' },\r\n { value: 'fzr2', label: '鹿晗' },\r\n { value: 'fzr3', label: '黄子韬' }\r\n ],\r\n apiOptions: {}\r\n }\r\n ],\r\n // other - config\r\n}\r\n```\r\n\r\n**异步配置\r\n\r\n异步的数据插入是根据行的，需要在回调内进行插入。\r\n\r\n下面模拟在INPUT框输入后，模拟请求获取XX数据，使用内置函数options进行插入。\r\n\r\n（!!!函数 slotFn ，在部分回调事件中不存在，只在具体行被操作后的响应动作存在，这是一个闭包函数，内置包裹了当前操作的rowIndex行索引和rItemIndex单元索引，直接对其进行数据操作插入即可）\r\n\r\n```typescript\r\nimport { FreeCustomRowLine_EVENTTYPE, FreeCustomRowLine_callBackProps } from 'bamboosnaketool';\r\n\r\n// 方式二 - 异步配置\r\nconst shoppingAwardGiftConfProps = {\r\n templateRow: [\r\n '选择商品',\r\n {\r\n stamp: 'SEARCH_GOODS',\r\n elementTEMP: ELEMENTTEMP.AUTOCOMPLETE,\r\n placeholder: '搜索商品',\r\n maxLength: 10,\r\n style: { width: 200, marginLeft: 4, marginRight: 4 }\r\n }\r\n ],\r\n callback: (TYPE: FreeCustomRowLine_EVENTTYPE, data: FreeCustomRowLine_callBackProps) => {\r\n \r\n const { stamp, slotFn } = data;\r\n \r\n if (TYPE === FreeCustomRowLine_EVENTTYPE.INPUT) {\r\n if (stamp === 'SEARCH_GOODS') {\r\n let arr = [\r\n { value: 'async1', label: '异步1'},\r\n { value: 'async2', label: '异步2'},\r\n { value: 'async3', label: '异步3'}\r\n ];\r\n slotFn && slotFn({ options: arr });\r\n }\r\n }\r\n }\r\n // other - config\r\n}\r\n```\r\n\r\n\r\n\r\n###### 内置模板\r\n\r\n演示内置模板单元的使用；\r\n\r\n```javascript\r\n[\r\n\t...,\r\n {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP.INPUTNUMBER,\r\n placeholder: '数量',\r\n maxLength: 4,\r\n style: { width: 90, marginLeft: 4, marginRight: 4 },\r\n apiOptions: {\r\n min: 0\r\n }\r\n }\r\n]\r\n\r\n// 内置的模板 elementTEMP 作为它的type类型指定，可通过枚举 ELEMENTTEMP 来选取指定 （完整的单模板内容参考下面#完整参数类型）\r\n// 目前支持 几种应用场景\r\n// 普通输入框、纯数字输入框、支持搜索下拉的自动完成输入框、和普通文本SPAN标签元素，如下\r\nenum FreeCustomRowLine_ELEMENTTEMP {\r\n INPUT, // 输入框 - 普通\r\n INPUTNUMBER, // 输入框 - 数字\r\n AUTOCOMPLETE, // 输入框 - 自动完成\r\n SELECT, // 下拉选择项\r\n SPAN, // 文本内容\r\n INNERHTML // 元素方式\r\n}\r\n\r\n// 根据对元素类型的规范理解使用 [placeholder/ maxLength/ value ]；\r\n// [style] 为通用类型，可对样式进行实际展示需要微调；\r\n// apiOptions - 是antd的内置API支持，这些单元模板枚举完整的对应了antd的实际组件，具体可参考官方文档；\r\n\r\n```\r\n\r\n###### 配置按钮\r\n\r\n配置单行模板后缀（右侧）的控制按钮组。\r\n\r\n支持删除一行，锁定一行（貌似没有需求会用到，暂未开发），向上移动一行，向下移动一行，\r\n\r\n```javascript\r\nimport { FreeCustomRowLine_LINEBUTTONS } from 'bamboosnaketool';\r\n\r\n// 默认仅显示[删除]按钮，目前完整按钮包含4个 [ 删除/ 锁定行/ 向上移动/ 向下移动 ]\r\n{\r\n lineButtons: [\r\n \t [ true, { type: FreeCustomRowLine_LINEBUTTONS.DELETE }],\r\n \t [ false, { type: FreeCustomRowLine_LINEBUTTONS.LOCK }],\r\n \t [ false, { type: FreeCustomRowLine_LINEBUTTONS.MOVE_UP }],\r\n \t [ false, { type: FreeCustomRowLine_LINEBUTTONS.MOVE_DOWN }]\r\n ],\r\n // ...\r\n}\r\n// 为 true 则显示反之隐藏，渲染顺序会根据当前配置内的数组排序为准\r\n\r\n// 按钮会默认赋值内置的中文文本名称，也可以对text属性进行自定义，例↓：\r\n[ true, { type: FreeCustomRowLine_LINEBUTTONS.DELETE, text: '剔除' }]\r\n\r\n// 如需隐藏文本名称，可使用 hideText 配置如下：\r\n[ true, { type: FreeCustomRowLine_LINEBUTTONS.DELETE, hideText: true }]\r\n \r\n// 如何给按钮配置icon，且能同时结合 hideText 达到效果 (apiOptions - 参考antd组件api)\r\nimport { DeleteOutlined } from '@ant-design/icons';\r\n[ true, { type: FreeCustomRowLine_LINEBUTTONS.DELETE, hideText: true, apiOtions: { icon: } }]\r\n\r\n```\r\n\r\n\r\n\r\n###### 禁用\r\n\r\n对单元进行禁用属性设置。（仅对支持disabled的对象有效）\r\n\r\n方式有两种：渲染数据内 / 初始配置； \r\n\r\n{ disabled: true }\r\n\r\n\r\n\r\n###### 回调响应\r\n\r\n所有事件的响应都会**callback**统一抛出，可根据返回的行号几行内单元号进行具体的需求操作。\r\n\r\n```javascript\r\nimport { FreeCustomRowLine_callBackProps } from 'bamboosnaketool';\r\nconst freeCustomRowLineConfProps = {\r\n templateRow: [\r\n ...\r\n ],\r\n callback: (TYPE: FreeCustomRowLine_EVENTTYPE, data: FreeCustomRowLine_callBackProps) => {\r\n const { allLineDatas, rowIndex, valIndex, value, slotFn?, prevAllLineDatas?, stamp? } = data;\r\n console.log(TYPE, data);\r\n }\r\n};\r\n\r\n// 回调响应事件类型\r\nexport enum FreeCustomRowLine_EVENTTYPE {\r\n INIT ='INIT', // 初始化\r\n INPUT = 'INPUT', // 输入响应\r\n SELECT = 'SELECT', // 选中\r\n ADD = 'ADD', // 新增一行\r\n DELETE = 'DELETE', // 删除一行\r\n FOCUS = 'FOCUS', // INPUT类型聚焦\r\n BLUR = 'BLUR' // INPUT类型失焦\r\n}\r\n\r\n// 响应回调返回的data数据\r\ndata = {\r\n allLineDatas,\t\t// 完整的数据\r\n rowIndex,\t\t\t// 行的下标\r\n valIndex, // 单行内的下标\r\n value,\t\t\t// 响应 value / id\r\n slotFn, // 行数据设置函数 - 闭包(直接设参，内置精确索引)\r\n stamp\t\t\t\t// 印章 - 可用户多一种途径区别单元类型\r\n}\r\n\r\n```\r\n\r\n\r\n\r\n###### 完整参数类型\r\n\r\n```javascript\r\n// 控件模板类型(antd)\r\nexport enum FreeCustomRowLine_ELEMENTTEMP {\r\n INPUT, // 输入框 - 普通\r\n INPUTNUMBER, // 输入框 - 数字\r\n AUTOCOMPLETE, // 输入框 - 自动完成\r\n SELECT, // 下拉选择项\r\n SPAN, // 文本内容\r\n INNERHTML // 元素方式\r\n}\r\n\r\n// 模板单item配置\r\nexport interface templateRowItemConf {\r\n elementTEMP: FreeCustomRowLine_ELEMENTTEMP; // 模板类型\r\n stamp?: string; // 印记 - 可用于回调事件做单元区别（多提供一种定位单元手动，处index定位外）\r\n text?: string; // 文本\r\n value?: string | number; // inputValue - 仅input [select/ input/ textarea/ ...]类型支持\r\n options?: any[]; // select-options / autocomplate-options (仅支持antd - select/ autocomplate 组件)\r\n disabled?: boolean; // 是否禁用该单元\r\n style?: CSSStyleDeclaration | {}; // 样式\r\n placeholder?: string; // 框内描述 - 仅input类型支持\r\n maxLength?: string | number; // 最大输入长度 - 仅input类型支持\r\n apiOptions?: {[x:string]: any} // antd-ui api\r\n}\r\n\r\n// 完整单行描述\r\nexport type templateRows = Array\r\n\r\n// 回调响应事件类型\r\nexport enum FreeCustomRowLine_EVENTT","readmeFilename":"README.md","author":{"name":"liuyunqi","email":"283373960@qq.com"}} |