hooks useModule自定义hooks (二次封装AgGridReact ag-table)自定义表头，自定义表头搜索

场景业务：

多次运用AgGridReact的table 列表

思路：

运用自定义hooks进行二次封装： 通用配置例如：传参的参数，传参的url，需要缓存的key这些键值类 定制化配置例如：需要对table 的一些定制化传参，是否需要分页，表头配置，表头搜索配置

通用配置：

const { SettingTableRender, TableListRender, getTableData,resetSesstion,tableData } = useTableModule({ renderKey: { companyName: renderContext, contacts: EllipsisCommont, industries: industriesCell, serviceTypes: bdInfosServiceTypes, businessProgress: bdInfosBusinessProgress, latestFollowUpDate, latestNoteCreatedTime, associationLabel, estimatedDealDate, dealDate:dealTime, website:websiteCell, salesLeadOwner:ownerCell, businessOpportunityLeader:ownerCell, accountManager:ownerCell }, configKey: ‘COMPANY_AFFILIATES’, tableUrl: ‘apiurl’, tableRequest: getTableList, setParamsList, sessionKey:’tableList’ });

定制配置：

{/* 列表 */} {TableListRender({ pagination: false, customColumn, key: tabActive, filterSearchRender: { companyName: { render: SelectCompanyName, }, contacts: { render: SelectCompanyName, }, associationLabel: { render: Select, tPropty: { options: associationLabelOp, }, }, industries: { render: TreeSelect, tPropty: { treeData: listEnum(‘industry’), showCheckedStrategy: TreeSelect.SHOW_PARENT, treeCheckable: true, treeNodeFilterProp: ’label’, fieldNames: { value: ‘id’, label: ’label’, children: ‘children’ }, }, }, serviceTypes: { render: TreeSelect, tPropty: { treeData: listEnum(‘serviceType’), showCheckedStrategy: TreeSelect.SHOW_PARENT, treeCheckable: true, treeNodeFilterProp: ’label’, fieldNames: { value: ’name’, label: ’label’, children: ‘children’ }, }, }, businessProgress: { render: TreeSelect, tPropty: { treeData: listEnum(‘businessProgress’).filter((i) => [ ‘ACCOUNT_BUSINESS_NOT_FOLLOWED_UP’, ‘ACCOUNT_BUSINESS_CUSTOMER_NOT_CONTACTED’, ‘ACCOUNT_BUSINESS_PLAN_COMMUNICATION’, ‘ACCOUNT_BUSINESS_PLAN_VERIFICATION’, ‘ACCOUNT_BUSINESS_NEGOTIATION’, ‘ACCOUNT_BUSINESS_CONTRACTED’, ‘ACCOUNT_BUSINESS_LOST’, ].includes(i.name) ), treeCheckable: true, treeNodeFilterProp: ’label’, fieldNames: { value: ‘value’, label: ’label’, children: ‘children’ }, }, }, salesLeadOwner: { render: TreeSelect, tPropty: { …OwnertProps(listEnum(‘companyUser’)), }, }, businessOpportunityLeader: { render: TreeSelect, tPropty: { …OwnertProps(listEnum(‘companyUser’)), }, }, accountManager: { render: TreeSelect, tPropty: { …OwnertProps(listEnum(‘companyUser’)), }, }, }, })} 非常灵活的表单，基于ag-table 的基础功能拖拽，自定义宽度的前提下额外拓展业务需求：自定义表头，自定义表头的sort，以及自定义搜索功能。 重点是在于思路的拓展。