React-Antd Pro增删改查

基础功能无非是增删改查，用于熟悉路由，组件，传值等Antd Pro的常用功能

上文介绍了Antd Pro的基础搭建，再此基础上进行实践

Antd Pro默认版本V5

 

一.菜单

首先配置左侧菜单列表，文件夹config》config.ts中找到routes:

添加如下内容：

{
      path:'/myapp',
      name:'我的应用',
      icon:'AppstoreFilled', 
      routes:[
        {
          name:'应用列表',
          path:'./user/manage', 
          component:'./user/manage'
        }  
      ],
 }

结果下图所示：

二.模块

找到文件夹pages,创建文件夹user,再创建文件夹manage。

然后配置页面，请求，数据模型等。

最后结构如下图所示：

components:用于放置页面常用的组件

data.d.ts:用到的数据模型

index.tsx:模块的主页面

service.ts:封装了用到的Api请求函数

 

这种结构的细分对后期项目维护非常友好，缺点是前期开发速度受影响

 

（1）准备工作

1.1 封装数据模型data.d.ts

export type TableListItem = {
    id: string;
    rolename: string;
    account: string;
    username: string; 
  };
  export type TableListPagination = {
    total: number;
    pageSize: number;
    current: number;
  };

1.2 封装用到的API请求

在Antd Pro中是通过Mock实现，本篇用.net core Api进行替换，后端代码在下文附件中下载 

// @ts-ignore
/* eslint-disable */
import { request } from 'umi';
import { TableListItem } from './data';

/** 获取列表  */
export async function rule(
  params: {
    // query
    /** 当前的页码 */
    current?: number;
    /** 页面的容量 */
    pageSize?: number;
  },
  options?: { [key: string]: any },
) {
  return request<{
    data: TableListItem[];
    /** 列表的内容总数 */
    total?: number;
    success?: boolean;
  }>('http://localhost:4089/User', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

/** 更新 */
export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
  return request<TableListItem>('http://localhost:4089/User/Update', {
    data,
    method: 'PUT',
    ...(options || {}),
  });
}

/** 新建  */
export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) {
  return request<TableListItem>('http://localhost:4089/User/Add', {
    data,
    method: 'POST',
    ...(options || {}),
  });
}

/** 删除  */
export async function removeRule(data: {  key: string[]  }, options?: { key: string[] }) {
   return request<Record<string,string[]>>('http://localhost:4089/User', {  
   data,
    method: 'DELETE',
    ...(options || {}),
  });
}

（2）列表 index.tsx

实现效果如下：

 代码如下：

import { PlusOutlined } from '@ant-design/icons';
import { Button, message  } from 'antd';
import React, { useState } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table'; 
import { rule, addRule,updateRule,removeRule } from './service';
import type { TableListItem, TableListPagination } from './data';import  CreateForm   from './components/CreateForm';
import  UpdateForm   from './components/UpdateForm';
 

const handleRemove = async (selectedRows: TableListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  console.log( selectedRows);
  console.log( selectedRows.map((row) => row.id));
  try {
    await removeRule({
      key: selectedRows.map((row) => row.id),
    });
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const TableList: React.FC = () => { 
  const [visible, setVisible] = useState<boolean>(false);
  const [current, setCurrent] = useState<Partial<TableListItem> | undefined>(undefined); 
  const [updvisible, setUpdvisible] = useState<boolean>(false);
  const handleSubmit = (values: TableListItem) => 
  {
    addRule({ ...values });    
    message.success('添加成功'); 
    setVisible(false);
  };
  const handleUpdSubmit = (values: TableListItem) => 
  {
    updateRule({ ...values });    
    message.success('修改成功'); 
    setUpdvisible(false);
  }; 
   
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
  
  const columns: ProColumns<TableListItem>[] = [
    {
      title: 'id',
      dataIndex: 'id', 
      valueType: 'textarea',
      hideInForm: true,
      hideInTable: true
    },
    {
      title: '角色名称',
      dataIndex: 'rolename', 
      valueType: 'textarea',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      valueType: 'textarea',
    },
    {
      title: '账号',
      dataIndex: 'account',
      valueType: 'textarea',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="Id"
          onClick={(e) => {
            e.preventDefault();
            setUpdvisible(true); 
            setCurrent(record); 
          }}
        >
          修改
        </a> 
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem, TableListPagination>
        headerTitle="查询表格" 
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={( ) => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setVisible(true); 
            }}
          >
            <PlusOutlined /> 
            新建
          </Button> 
      ]}
        request={rule}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {
            console.log("选择开始："+selectedRows.length);
            setSelectedRows(selectedRows);
          },
        }}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              项 &nbsp;&nbsp;
            
            </div>
          }
        >
          <Button
            onClick={async () => {
               
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
          
            }}
          >
            批量删除
          </Button>
        
        </FooterToolbar>
      )} 
      <CreateForm
        done={true}
        visible={visible}
        current={current} 
        onSubmit={handleSubmit}
        onVisibleChange={setVisible}
      />
      <UpdateForm
        done={true}
        updvisible={updvisible}
        current={current} 
        onSubmit={handleUpdSubmit}
        onVisibleChange={setUpdvisible}
      />
       
    </PageContainer>
  );
};

export default TableList;

ProTable：表格组件，具体使用参考：https://procomponents.ant.design/components/table/

ProColumns：表格列，注意dataIndex属性对应的大小写问题

request={rule}: rule对应到data.d.ts中的列表Api

 

后端模拟了一些数据用于显示：

其中的CreateForm和UpdateForm在下一步会介绍

 

（3）新增和修改

新增和修改用弹窗的形式显示，弹窗组件ModalForm,可以参考https://procomponents.ant.design/components/modal-form

在Antd Pro中弹窗的关闭和显示 通过其属性visible控制。需要注意的是，要配置参数属性onVisibleChange，否则可能会有弹窗无法关闭的问题

 

3.1 新增页面

实现效果：

 代码如下：

import type {FC} from 'react';
import {
    ModalForm, 
    ProFormText 
  } from '@ant-design/pro-form';
import type {TableListItem} from '../data.d' 
type CreateFormProps={
    done: boolean;
    visible: boolean;
    current: Partial<TableListItem>| undefined; 
    onSubmit: (values: TableListItem) => void;
    onVisibleChange?: (b: boolean) => void;
}

const CreateForm: FC<CreateFormProps>=(props)=>{
    const{done,visible,current,onSubmit,onVisibleChange}=props;
    if(!visible){
        return null;
    }
    return (
        <ModalForm<TableListItem>
            visible={visible}
            title={'添加'} 
            width={640}
            onFinish={async (values)=>{
                onSubmit(values)
            }}
            onVisibleChange={onVisibleChange}
            initialValues={current}
            modalProps={{
                onCancel: () => {return true;},
            destroyOnClose:true,
            bodyStyle:done?{padding:'72px o'}:{}
            }}
            >
             { 
                <>
                <ProFormText 
                  name="rolename"
                  label="角色名称"
                  placeholder="请输入"
                  />
                  <ProFormText 
                  name="account"
                  label="账号名称"
                  placeholder="请输入"/> 
                    <ProFormText 
                    name="username"
                    label="用户名称"
                    placeholder="请输入"/>
                    </>
              }
               
             
            </ModalForm>
    );
};
export default CreateForm;

点击"确定"，触发”onFinish“，调用父组件传来的方法handleSubmit提交数据,参数values拿到需要提交的能映射到data.d.ts中的TableListItem模型数据

 

3.2 修改页面

实现效果：

代码如下：

import type {FC} from 'react';
import {
    ModalForm, 
    ProFormText 
  } from '@ant-design/pro-form';
import type {TableListItem} from '../data.d' 
type UpdateFormProps={
    done: boolean;
    updvisible: boolean;
    current: Partial<TableListItem>| undefined; 
    onSubmit: (values: TableListItem) => void;
    onVisibleChange?: (b: boolean) => void;

}

const UpdateForm: FC<UpdateFormProps>=(props)=>{
    const{done,updvisible,current,onSubmit,onVisibleChange}=props;
    if(!updvisible){
        return null;
    }
    return (
        <ModalForm<TableListItem>
            visible={updvisible}
            title={'修改'} 
            width={640}
            onFinish={async (values)=>{
                onSubmit(values)
            }}
            onVisibleChange={onVisibleChange}
            initialValues={current}
            modalProps={{
            destroyOnClose:true,
            bodyStyle:done?{padding:'72px o'}:{}
            }}
            >
             { 
                <>
                <ProFormText 
                  name="rolename"
                  label="角色名称"
                  placeholder="请输入"
                  />
                  <ProFormText 
                  name="account"
                  label="账号名称"
                  placeholder="请输入"/> 
                    <ProFormText 
                    name="username"
                    label="用户名称"
                    placeholder="请输入"/>
                    </>
              }
               
             
            </ModalForm>
    );
};
export default UpdateForm;

修改和新增功能类似，多了数据显示的功能，选择后的数据通过current存储

最后提交至updateform组件的current属性

（4）删除

主要是针对批量删除，在表格中配置rowSelection，监听和记录选中的项

删除接口的传参是Request Payload，后端接收参数的是字典类型，后面还需优化

 Dictionary<string,string[]>接收待删除项

三.总结

以上简单记录了下基于Antd Pro的增删改查功能，涉及到React一些基础知识，比如创建组件，Hook的一些使用，

涉及到了ES6的一些常用函数map,set,async,Promise等，

最主要是Pro中6个基于Antd开发的模板组件，ProLayout,ProTable,ProForm,ProCard,ProDescriptions,ProSkeleton

 

以上仅用于学习和总结！

 

附:后端Api

链接：https://pan.baidu.com/s/1_ZAGB-WilXdrxiU9gdn47A
提取码：4m5w