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

发布于:2025-03-09 ⋅ 阅读:(22) ⋅ 点赞:(0)

场景业务:

多次运用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,以及自定义搜索功能。

重点是在于思路的拓展。