---
title: 搜索列表组件
sidemenu: true
---

## 搜索列表组件

这个组件固定了批量处理模块和全局处理模块

```tsx
/**
 * background: '#f0f2f5'
 */
import React from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { list, tree, deleteFunc, download, batchDel } from '@/services/feature/api';
import { Tooltip, Typography, Popconfirm, Space, Button, Switch, message } from 'antd';
import { FormattedMessage, useRequest, useParams, useIntl } from 'umi';
import { CustomTable } from '@/components/CustomTable';
import { PlusOutlined } from '@ant-design/icons';
import { formatPostData } from '@/utils/index';
import CustomLink from '@/components/CustomLink';

export default () => {
  const columns: ProColumns<API.FuncListItem>[] = [
    {
      title: <FormattedMessage id="pages.funcList.id" defaultMessage="编号" />,
      dataIndex: 'id',
      fixed: 'left',
      width: 100,
      ellipsis: true,
      copyable: true,
    },
    {
      title: <FormattedMessage id="pages.funcList.name" defaultMessage="名称" />,
      dataIndex: 'name',
      ellipsis: true,
      width: 120,
    },
    {
      title: <FormattedMessage id="pages.funcList.uniqueKey" defaultMessage="唯一编号" />,
      dataIndex: 'uniqueKey',
      ellipsis: true,
      copyable: true,
      width: 120,
    },
    {
      title: <FormattedMessage id="pages.funcList.auditTemplateName" defaultMessage="审批流" />,
      dataIndex: 'auditTemplateName',
      search: false,
      filters: true,
      width: 120,
      render(dom, entity) {
        return (
          <Tooltip title={`发起-${entity.name}-完成`}>
            <Typography.Text ellipsis underline>
              {dom}
            </Typography.Text>
          </Tooltip>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.type" defaultMessage="类型" />,
      dataIndex: 'type',
      valueType: 'select',
      filters: true,
      width: 70,
      valueEnum: {
        1: {
          text: '菜单',
        },
        2: {
          text: '按钮',
        },
        3: {
          text: '报表',
        },
        4: {
          text: '其他',
        },
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.isPublic" defaultMessage="公开" />,
      dataIndex: 'isPublic',
      valueType: 'select',
      filters: true,
      width: 70,
      valueEnum: {
        0: {
          text: '否',
          status: 'Error',
        },
        1: {
          text: '是',
          status: 'Success',
        },
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.sensitiveLevel" defaultMessage="敏感度" />,
      dataIndex: 'sensitiveLevel',
      search: false,
      filters: true,
      width: 80,
      valueType: 'select',
      valueEnum: {
        0: {
          text: '非敏感',
        },
        1: {
          text: '敏感',
        },
        2: {
          text: '高度敏感',
        },
      },
    },
    {
      title: <FormattedMessage id="pages.funcList.owner" defaultMessage="创始人" />,
      dataIndex: 'owner',
      width: 120,
      renderText: (val) => (val ? `${val.name}(${val.account})` : ''),
      ellipsis: true,
      copyable: true,
    },
    {
      title: <FormattedMessage id="pages.funcList.updatedAt" defaultMessage="修改时间" />,
      dataIndex: 'updatedAt',
      search: false,
      valueType: 'dateTime',
      width: 180,
      sorter: true,
    },
    {
      title: (
        <FormattedMessage id="pages.funcList.permission.operation" defaultMessage="权限操作" />
      ),
      dataIndex: 'permissionOption',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      render: (_, record) => [
        <a key="role">
          <FormattedMessage id="pages.funcList.role" defaultMessage="角色" />
        </a>,
        <a key="user">
          <FormattedMessage id="pages.funcList.user" defaultMessage="用户" />
        </a>,
      ],
    },
    {
      title: <FormattedMessage id="pages.funcList.operation" defaultMessage="操作" />,
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      render: (text, record, _, action) => [
        <a key="editable" onClick={() => {}}>
          <FormattedMessage id="pages.funcList.edit" defaultMessage="编辑" />
        </a>,
        <Popconfirm key={`del-${record.id}`} title="是否确认删除?" onConfirm={() => {}}>
          <a key="delete">
            <FormattedMessage id="pages.funcList.del" defaultMessage="删除" />
          </a>
        </Popconfirm>,
      ],
    },
  ];
  const toolbar = {
    actions: [
      <Button type="primary" key="create" onClick={() => {}}>
        <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
      </Button>,
      <Button key="import" onClick={() => {}}>
        <FormattedMessage id="component.table.import" defaultMessage="导入" />
      </Button>,
      <CustomLink
        key="export"
        conf={{
          label: <FormattedMessage id="component.table.export" defaultMessage="导出" />,
          isNotGroup: true,
          childrens: [
            {
              label: '导出并修改',
              onClick: async () => {},
            },
            {
              label: '导出到其他环境',
              onClick: async () => {},
            },
          ],
        }}
      />,
    ],
  };
  const postData = (data: API.FuncListItem[]): API.FuncListItem[] =>
    formatPostData(data, (item) => {
      return {
        ...item,
        updatedAt: item.updatedAt ? item.updatedAt * 1000 : 0,
        createdAt: item.createdAt ? item.createdAt * 1000 : 0,
        children: item?.children && item?.children?.length > 0 ? item.children : undefined,
      };
    });
  const tableAlert = ({ selectedRowKeys, selectedRows, onCleanSelected }) => [
    {
      label: <FormattedMessage id="component.table.batchDeletion" defaultMessage="批量删除" />,
      onClick: async () => {
        message.success(formatMessage({ id: 'component.table.batchDeletion' }) + '成功!');
      },
    },
    {
      label: <FormattedMessage id="component.table.batchOpen" defaultMessage="开放申请设置" />,
      groupTitle: '全部设置为：', // defeault: '全部设置为：'
      childrens: [
        {
          label: '放开',
          onClick: () => {},
        },
        {
          label: '关闭',
          onClick: () => {},
        },
      ],
    },
    {
      label: <FormattedMessage id="component.table.batchPublick" defaultMessage="公开设置" />,
      childrens: [
        {
          label: '公开',
          onClick: () => {},
        },
        {
          label: '不公开',
          onClick: () => {},
        },
      ],
    },
    {
      label: <FormattedMessage id="component.table.batchShow" defaultMessage="显示设置" />,
      childrens: [
        {
          label: '显示',
          onClick: () => {},
        },
        {
          label: '不显示',
          onClick: () => {},
        },
      ],
    },
    {
      label: <FormattedMessage id="component.table.batchSensitive" defaultMessage="敏感等级设置" />,
      childrens: [
        {
          label: '非敏感',
          onClick: () => {},
        },
        {
          label: '敏感',
          onClick: () => {},
        },
        {
          label: '非常敏感',
          onClick: () => {},
        },
      ],
    },
  ];
  return (
    <>
    <CustomTable
      draggerable
      columns={columns}
      toolbar={toolbar}
      postData={postData}
      tableAlert={tableAlert}
      params={{appId: 4294967530}}
      request={list}
    />
    <br />
    <CustomTable
      columns={columns}
      toolbar={toolbar}
      postData={postData}
      tableAlertRender={()=> false}
      params={{appId: 4294967530}}
      request={list}
      rowSelection={{}}
    />
    </>
  );
};
```

<API src="./index.tsx"></API>