React antd组件Table的使用_react中table组件的用法

作者：2023面试高手 | 2024-02-25 11:00:05

踩

react中table组件的用法

常用功能：搜索、下拉搜索、批量删除、时间筛选、添加按钮、页码跳转查询和重置按钮

1、搜索功能

一般是Form表单结合Input两个一起使用，使用里面的Form表单的

表单的回填，使用就是利用下面这个方法回填


const [Form] = Form.useForm();//表单添加这个属性
Form.setFieldsValue({
          字段名：值
        });

回填还要配合着initialValues默认值，第一次进来就渲染，


<Form form={topForm} initialValues={formValues}>
内容
<Form/>

当有Modal使用的时候，有确认按钮时，要使用validateFields来获取Modal的值


  const handleOK = () => {
   //获取提交的值
    addForm
      .validateFields()
      .then((values) => {
        const { externalUserId = '', addReason = '' } = values;
        onConfirm({
          externalUserId,
          addReason
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };

也可以使用表单的getFieldsValue来获取


  const onOk = async () => {
    const { name, filterName, deptList, staffTagList } = form.getFieldsValue();
    const param = { name, filterName, deptList: deptList?.map((item: number) => ({ deptId: item })), staffTagList };
    const res = await requestAddGroupTag(param);
    if (res) {
      setAddTagParam({ visible: false });
      form.resetFields();
      updateList?.();
    }
  };

具体操作如下：有Modal弹出的使用


const saveAutoConfig = () => {
    autoConfigForm
      .validateFields()
      .then(async ({ weekChainRatio, autoSend }) => {
        const res = await savePointsSendConfig({ weekChainRatio, autoSend: autoSend ? 1 : 0 }); //获取到Modal的参数，把参数传入进去，进行网络请求
        if (res) {
          setAutoSendSetVisible(false);
          message.success('设置成功');
        }
      })
      .catch((e) => {
        console.log(e);
      });
  };
  
  <Modal
  title="标题"
  visible={autoSendSetVisible}
  onOk={saveAutoConfig}//提交字段的信息
  width={400}
  onCancel={() => {
    setAutoSendSetVisible(false);//关闭弹窗
  }}
>
  <Form className={style.autoSendForm} labelCol={{ span: 6 }} form={autoConfigForm}>
    <Form.Item
      label="周环比"
      name="weekChainRatio"
      rules={[{ required: true, message: '请设置周环比，必须大于0' }]}
    >
      <InputNumber
        width={80}
        min={1}
        max={10000}
        controls={false}
        addonAfter={<span>%</span>}
        onChange={(value) => {
          console.log(typeof value);
        }}
      />
    </Form.Item>
    <Form.Item label="自动发放" valuePropName="checked" name={'autoSend'}>
      <Switch checkedChildren="开" unCheckedChildren="关" />
    </Form.Item>
  </Form>
</Modal>

取消按钮


  const handleCancel = () => {
    displayForm.resetFields();
    onCancel();
  };


import { Button, Drawer, Form, Input, Divider, Space, Avatar, List, PaginationProps } from 'antd';
import React, { useState, useEffect } from 'react';
import { getChatSearchList } from 'src/apis/orgManage';
import moment from 'moment';
import style from './style.module.less';
interface CreateDrawerProps {
  visible: boolean;
  onClose: () => void;
  value?: any;
  chatProposalId?: string;
}
interface ChatListProps {
  avatar: string;
  content: string;
  dateCreated: string;
  dynamicId: string;
  name: string;
  source: string;
  staffName: string;
}
const CreateDrawer: React.FC<CreateDrawerProps> = ({ visible, onClose, value, chatProposalId }) => {
  const [list, setList] = useState<ChatListProps[]>([]);
  const [loading, setLoading] = useState(true);
  const [pagination, setPagination] = useState<PaginationProps>({
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: (total) => {
      return `共 ${total} 条记录`;
    }
  });
  const { Item } = Form;
  const [form] = Form.useForm();
 
  // 获取列表数据
  const getList = async (param: any) => {
    setLoading(true);
    const pageNum = param?.pageNum || pagination.current;
    const pageSize = param?.pageSize || pagination.pageSize;
    const params: any = {
      ...param,
      proposalId: chatProposalId,
      pageNum,
      pageSize
    };
    const res: any = await getChatSearchList({ ...params });
 
    if (res) {
      const { list, total } = res;
      setList(list || []);
      setPagination((pagination) => ({ ...pagination, current: pageNum, pageSize, total }));
    }
    setLoading(false);
  };
  const onSearch = (values: any) => {
    const param: any = {
      ...values,
      pageNum: 1,
      pageSize: 10
    };
    getList(param);
  };
  const paginationChange = (pageNum: number, pageSize?: number) => {
    getList({ pageNum, pageSize });
  };
  const showDrawer = () => {
    onClose();
    setPagination((pagination) => ({ ...pagination, current: 1, pageSize: 10 }));
    form.resetFields();
  };
  useEffect(() => {
    if (chatProposalId) {
      getList({ chatProposalId });
    }
  }, [chatProposalId, visible]);
  return (
    <>
      <Drawer
        title={`${moment(value?.dateCreated).format('YYYYMM-DD')}
        经理${value?.staffName}与${value?.externalName}的详细沟通记录`}
        placement="right"
        width={466}
        visible={visible}
        closable={true}
        onClose={showDrawer}
      >
        <div className={style.chatBox}>
          <div>
            <div className={style.chatTitle}>沟通内容</div>
            <div className={style.chatText}>
              <span className={style.chatWord}>车牌号：</span>
              <span className={style.chatNum}>{value?.carNumber}</span>
              <span className={style.chatWord} style={{ marginLeft: '8px' }}>
                创建时间：
              </span>
              <span className={style.chatNumTime}>{value?.dateCreated}</span>
            </div>
            <div className={style.chatFootText}>{value?.content}</div>
          </div>
          <Divider />
          <div>
            <div className={style.chatTitle}>沟通记录</div>
            <div className={style.formBox}>
              <Form form={form} onFinish={onSearch}>
                <Space>
                  <Item label="关键词" name={'sontent'}>
                    <Input type="text" placeholder="请输入" allowClear />
                  </Item>
                  <Item>
                    <Button type="primary" htmlType="submit" shape="round">
                      查询
                    </Button>
                  </Item>
                </Space>
              </Form>
            </div>
            <div className={style.formFootBox}>
              <List
                itemLayout="horizontal"
                loading={loading}
                dataSource={list}
                pagination={{
                  ...pagination,
                  hideOnSinglePage: true,
                  onChange: paginationChange
                }}
                renderItem={(item) => (
                  <List.Item key={item.dynamicId}>
                    <List.Item.Meta
                      avatar={<Avatar src={item.avatar} />}
                      title={
                        <>
                          <div className={style.chatName}>
                            <Space>
                              <div className={style.chatName}>{item.name}</div>
                              {item.source
                                ? (
                                <div className={style.chatcard1}>客户经理</div>
                                  )
                                : (
                                <div className={style.chatcard2}>客户</div>
                                  )}
                              <div className={style.chatTime}>{item.dateCreated}</div>
                            </Space>
                          </div>
                        </>
                      }
                      description={item.content}
                    />
                  </List.Item>
                )}
              />
            </div>
          </div>
        </div>
      </Drawer>
    </>
  );
};
 
export default CreateDrawer;
import { PaginationProps, Divider, PageHeader, Drawer } from 'antd';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { getChatList } from 'src/apis/orgManage';
import { AuthBtn, NgFormSearch, NgTable } from 'src/components';
import { useDocumentTitle } from 'src/utils/base';
import CreateDrawer from '../Components/CreateDrawer';
import { SceneColumns, searchCols, tableColumnsFun } from './ListConfig';
import { OperateType } from 'src/utils/interface';
import ChatLog from 'src/pages/Exception/DeletionReminder/ChatLog/ChatLog';
interface SearchParamsProps {
  carNumber: string;
  externalName: string;
  staffIds: string;
  startTime: string;
  endTime: string;
}
const ChatRecordList: React.FC<RouteComponentProps> = () => {
  const [tableSource, setTableSource] = useState<Partial<SceneColumns>[]>([]);
  const [visible, setVisible] = useState(false);
  const [visibleList, setVisibleList] = useState(false);
  const [chatValue, setChatValue] = useState<any>();
  const [drawerValue, setdrawerValue] = useState<any>();
  const [userId, setUserId] = useState<string>();
  const [externalUserId, setExternalUserId] = useState<string>();
  const [loading, setLoading] = useState(true);
  const [chatProposalId, setChatProposalId] = useState<string>();
  const [queryParams, setQueryParams] = useState<SearchParamsProps>({
    carNumber: '',
    externalName: '',
    staffIds: '',
    startTime: '',
    endTime: ''
  });
  useDocumentTitle('合规管理-聊天记录查询');
  const [pagination, setPagination] = useState<PaginationProps>({
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: (total) => {
      return `共 ${total} 条记录`;
    }
  });
 
  const getList = async (params?: any) => {
    setLoading(true);
    const pageNum = params?.pageNum || pagination.current;
    const pageSize = params?.pageSize || pagination.pageSize;
    const res: any = await getChatList({
      ...queryParams,
      ...params,
      pageNum,
      pageSize
    });
 
    if (res) {
      const { list, total } = res;
      setTableSource(list || []);
      setPagination((pagination) => ({ ...pagination, total, current: pageNum, pageSize }));
    }
    setLoading(false);
  };
 
  useEffect(() => {
    getList();
  }, []);
 
  const onSearch = (values: any) => {
    const { carNumber, externalName, staffList, rangePicker } = values;
    console.log(values, '--------------------values');
    const staffIds = staffList?.map((mapItem: { staffId: string }) => mapItem.staffId);
    let startTime = '';
    let endTime = '';
    if (rangePicker && rangePicker.length > 0) {
      startTime = rangePicker[0].format('YYYY-MM-DD HH:mm:ss');
      endTime = rangePicker[1].format('YYYY-MM-DD HH:mm:ss');
    }
    getList({ carNumber, externalName, staffIds, startTime, endTime, pageNum: 1 });
    setQueryParams((queryParams) => ({ ...queryParams, carNumber, externalName, staffIds, startTime, endTime }));
  };
 
  const paginationChange = (pageNum: number, pageSize?: number) => {
    getList({ pageNum, pageSize });
  };
 
  // 查询场景详情
  const chatDetail = async (operateType: OperateType, record: SceneColumns) => {
    if (operateType === 'view') {
      setChatProposalId(record.proposalId);
      setVisible(true);
      setChatValue({ ...record });
    } else if (operateType === 'edit') {
      setVisibleList(true);
      setUserId(record.userId);
      setExternalUserId(record.externalUserId);
      setdrawerValue({ ...record });
    }
  };
 
  return (
    <div className={'container'}>
      <PageHeader title="聊天记录查询" style={{ padding: '0' }}></PageHeader>
      <Divider style={{ marginTop: '21px' }} />
      <AuthBtn path="/query">
        <NgFormSearch searchCols={searchCols} isInline firstRowChildCount={3} onSearch={onSearch} />
      </AuthBtn>
 
      <div className="mt20">
        <NgTable
          columns={tableColumnsFun({
            onOperate: chatDetail
          })}
          loading={loading}
          dataSource={tableSource}
          pagination={pagination}
          paginationChange={paginationChange}
          setRowKey={(record: SceneColumns) => {
            return record.proposalId;
          }}
        />
      </div>
      <CreateDrawer
        visible={visible}
        value={chatValue}
        chatProposalId={chatProposalId}
        onClose={() => {
          setVisible(false);
        }}
      />
      <Drawer
        width={1200}
        visible={visibleList}
        onClose={() => {
          setVisibleList(false);
        }}
      >
        <ChatLog userId={userId} externalUserId={externalUserId} showDrawer={visibleList} drawerValue={drawerValue} />
      </Drawer>
    </div>
  );
};
 
export default ChatRecordList;
import React from 'react';
import { Button, Space, Form } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { SearchCol } from 'src/components/SearchComponent/SearchComponent';
import { AuthBtn } from 'src/components';
import { SelectStaff /* , TagModal */ } from 'src/pages/StaffManage/components';
import { OperateType } from 'src/utils/interface';
 
export const searchCols: SearchCol[] = [
  {
    name: 'carNumber',
    type: 'input',
    label: '号码',
    width: '160px',
    placeholder: '请输入'
  },
  {
    name: 'externalName',
    type: 'input',
    label: '名称',
    placeholder: '请输入',
    width: '160px'
  },
  {
    name: 'rangePicker',
    type: 'rangePicker',
    label: '时间',
    width: '160px'
  },
  {
    name: 'staffName',
    type: 'custom',
    width: '160px',
    label: '客户',
    customNode: (
      <Form.Item key={'staffList'} name="staffList" label="客户">
        <SelectStaff key={1} type="staff" />
      </Form.Item>
    )
  }
];
 
export interface SceneColumns {
  proposalId: string;
  staffId: string;
  sceneName: string;
  carNumber: string;
  externalName: string;
  dateCreated: string;
  externalUserId: string;
  userId: string;
  staffName: string;
  isChatsyn: number;
}
interface OperateProps {
  onOperate: (operateType: OperateType, proposalId: SceneColumns) => void;
}
export const tableColumnsFun = (args: OperateProps): ColumnsType<SceneColumns> => {
  return [
    { title: '编号', dataIndex: 'proposalId', key: 'proposalId', width: 200 },
    {
      title: '客户',
      dataIndex: 'staffName',
      key: 'staffId',
      width: 200
    },
 
    {
      title: '客户',
      dataIndex: 'externalName',
      width: 260,
      align: 'center'
    },
    {
      title: '号码',
      dataIndex: 'carNumber',
      width: 260,
      align: 'center'
    },
    {
      title: '时间',
      dataIndex: 'dateCreated',
      width: 260,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'fromSource',
      width: 260,
      align: 'center',
      render: (value, record) => {
        return (
          <Space>
            <AuthBtn path="/view">
              <Button type="link" key={record.proposalId} onClick={() => args.onOperate('view', record)}>
                查看
              </Button>
            </AuthBtn>
            <AuthBtn path="/query">
              <Button
                type="link"
                key={record.proposalId}
                disabled={record.isChatsyn === 0}
                onClick={() => args.onOperate('edit', record)}
              >
                查看其他
              </Button>
            </AuthBtn>
          </Space>
        );
      }
    }
  ];
};

表单的查看不能修改：readOnly

例如：

<Input type="text" placeholder="请输入" readOnly={true} />

单独使用Input和Button实现输入框


  const [inputValue, setInputValue] = useState<any>(null);
  const [queryParams, setQueryParams] = useState({
    name: '',
    typeId: '',
    pageNum: 1,
    pageSize: 12
  });
  const onChange = (e: any) => {
    setValue(e.target.value);
  };
 
  const inputChange = (e: any) => {
    console.log(e.target.value, '1111111111e');
    setInputValue(e.target.value);
  };
 
  const onSearch = () => {
    // setLoading(true);
    setData([]);
    setHasMore(true);
    const postData = {
      ...queryParams,
      name: inputValue,
      pageNum: 1
    };
    setQueryParams((queryParams) => ({ ...queryParams, name: inputValue, pageNum: 1 }));
    getList(postData);
  };
<Input
          className={style.searchWrap}
          placeholder="请输入"
          allowClear
          size="large"
          value={inputValue}
          onChange={inputChange}
          style={{ width: 772 }}
          onPressEnter={() => onSearch()}
          suffix={suffix}
        />
        <Button type="primary" className={style.searchBtn} onClick={onSearch} shape="round" size="large">
          搜索
        </Button>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】