场景业务:
多次运用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,以及自定义搜索功能。
重点是在于思路的拓展。