Ant Design Pro

前言

以下文章纯属个人理解，便于记录学习，肯定有理解错误或理解不到位的地方欢迎指正， 分享个人对技术的通俗理解，共同成长！

Author:君吟

Email: [email protected]

github: https://github.com/zmj0920/FleetingTime

运行

npm run start

打包

npm run build

ProTable 基础使用规则

import { PureComponent, createRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
  Button,
  Tag,
  Space,
  Divider,
  message,
  Input,
  Drawer,
  Badge,
  Card,
  Descriptions
} from 'antd';
import { LightFilter, ProFormDatePicker } from '@ant-design/pro-form';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import { testData } from '@/services/user'
import request from 'umi-request';
class ProTableCustom extends PureComponent {
  actionRef = createRef();
  constructor(props) {
    super(props);
    this.state = {
      createModalVisible: false,
      updateModalVisible: false,
      updateFormValues: null,
      selectedRows: [],
      selectedRowKeys: [],
    }
  }

  /**

加载更多

/
fetchMore = () => {
if (this.actionRef.current) {
  this.actionRef.current.fetchMore();
}
}
/**

刷新数据

/
reloadData = () => {
 if (this.actionRef.current) {
   this.actionRef.current.reload();
 }
}
/**

重置到默认状态

/
fromReset = () => {
if (this.actionRef.current) {
  this.actionRef.current.reset();
}
}
/**

清空选中项

/
clearSelected = () => {
if (this.actionRef.current) {
  this.actionRef.current.clearSelected();
}
}
/**

批量操作选择

@param {选择key*} selectedRowKeys 

@param {选择的行数据*} selectedRows 

/
handleSelectRows = (selectedRowKeys, selectedRows) => {
console.log(selectedRowKeys)
this.setState({
  selectedRows: selectedRows,
  selectedRowKeys
})
}
/**

清空选择数据

/
cleanSelectedRows = () => {
this.setState({ selectedRows: [] })
};


  /**

重写表格列表配置

/
getColumn = () => [];
/**

新增弹框

/
onAdd = (visible) => {
this.setState({ createModalVisible: visible })
};
/**

修改表单弹窗

@param {} visible 

/
onUpdate = (visible) => {
this.setState({ updateModalVisible: visible })
}
/**

表单提交

/
handleAdd = (value) => {
}


  /**

修改表单提交

/
handleUpdate = (value) => {
}
/**

修改方法获取数据更新

@param {*} record 

/
setUpdateFormValues = (record) => {
this.setState({
  updateFormValues: record
})
}
/**

批量删除

/
handleBatchRemove = (selectedRows) => {
}
/**

自定义批量操作工具栏右侧选项区域, false 时不显示

@param {*} param0 

/
tableAlertOptionRender = ({ selectedRowKeys, selectedRows, onCleanSelected }) => {
return (
  
    导出数据
    
      取消选择
    
  
);
}

/**

自定义批量操作工具栏左侧信息区域, false 时不显示

/
toolBarRender = () => {
return [
   this.onAdd(true)}>

<plusoutlined></plusoutlined> 新建
  
,
]
}

/**

分页配置 false 不显示分页

/
// pagination = true
/**

分页配置

/
pagination = {
 showQuickJumper: false,//是否显示跳转页
 pageSize: 10,        //配置默认显示数据条数
}


  /**

表格数据配置

/
dataSource = [{
"id": 99, 
"key": 99, 
"disabled": false, 
"href": "https://ant.design",
"avatar": "https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png",
"name": "TradeCode 99", 
"owner": "曲丽丽", 
"desc": "这是一段描述",
"callNo": 510, 
"status": 2, 
"updatedAt": "2020-10-26T06:34:17.289Z", 
"createdAt": "2020-10-26T06:34:17.289Z", 
"progress": 19
},
{
"id": 98, 
"key": 98, 
"disabled": false, 
"href": "https://ant.design", 
"avatar":"https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png",
"name": "TradeCode 98", 
"owner": "曲丽丽", 
"desc": "这是一段描述", 
"callNo": 416,
"status": 1, 
"updatedAt": "2020-10-26T06:34:17.289Z", 
"createdAt": "2020-10-26T06:34:17.289Z", 
"progress": 97
}]
/**

转化 moment 格式数据为特定类型，false 不做转化

/
dateFormatter = "string"
/**

表头显示配置可以返回jsx模板

/
headerTitle = "高级表格"
/**

对request 请求数据进行处理

@param {*} data 

/
postFn = (data) => {
let array = data
for (let index = 0; index < array.length; index++) {
  array[index].city = "郑州"
}
console.log(array)
return array
}
/**

搜索前处理操作

@param {搜索参数} params 

/
beforeSearchSubmit = (params) => {
console.log(params)
return params
}
/**

table 工具栏，设为 false 时不显示

/
options = { 
fullScreen: true, 
reload: true, 
setting: true, 
search: true, 
}
/**

不同屏幕显示方式

/
defaultColConfig = {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 8,
xxl: 6,
};
/**

设置搜索显示不显示search=false

/
search = {
 labelWidth: 120,//标签的宽度
 span: this.defaultColConfig,//搜索栏显示方式
 // searchText:'搜索',
 //resetText：'重置',
 // submitText:'提交'
 // defaultCollapsed: false,//设置面板默认值
 // filterType: 'light',//轻量级表格查询配置
 // collapsed:false,  //是否收起
 //是否收起事件
 // onCollapse: (collapsed)=>{
 //    console.log(collapsed)
 // },
 //搜索栏工具重写
 // optionRender: ({ searchText, resetText }, { form }) => [
 //    {
 //       form?.submit();
 //     }}
 //   >
 //     {searchText}
 //   ,
 //    {
 //       form?.resetFields();
 //     }}
 //   >
 //     {resetText}
 //   ,
 //   导出,
 // ],
 //收起按钮配置
 // collapseRender: (collapsed, showCollapseButton) => {
 //   return null
 // }
}
/**

搜索表单数据获取antd form 的配置

/
form = {
onValuesChange: (values, all) => {
  console.log(values, all);
},
};
/**

重置表单事件

/
resetFn = () => {
console.log("重置表单")
}


  /**

表格嵌套

/
// expandedRowRender = () => {
//   const data = [];
//   for (let i = 0; i < 3; i += 1) {
//     data.push({
//       key: i,
//       date: '2014-12-24 23:12:00',
//       name: 'This is production name',
//       upgradeNum: 'Upgraded: 56',
//     });
//   }
//   return (
//      [Pause, Stop],
//         },
//       ]}
//       headerTitle={false}
//       search={false}
//       options={false}
//       dataSource={data}
//       pagination={false}
//     />
//   );
// };
/**

关闭表格嵌套

/
expandedRowRender = false


  renderBadge = count => (
    
  );
  /**

自定义工具栏渲染

/
toolbar = {
multipleLine: true,
filter: (
  
    
  
),
tabs: {
  items: [
    {
      key: 'tab1',
      tab: '标签一',
    },
    {
      key: 'tab2',
      tab: '标签二',
    },
  ],
},
menu: {
  type: 'inline',
  items: [
    {
      label: 全部应用{this.renderBadge(101)},
      key: 'all',
    },
    {
      label: 我创建的应用{this.renderBadge(3)},
      key: 'todo',
    },
  ],
},
actions: [
  
    新建应用
  ,
],
}

/**

自定义工具栏渲染

/
toolbar = false
/**

配置主题显示数据

@param {*} _ 

@param {*} data 

/
tableExtraRender = (_, data) => {
// return null
return (
  <>
<card>
  <descriptions size="small" column="{3}">
    <descriptions.item label="Row">
    {data.length}
    </descriptions.item>
    <descriptions.item label="Created">
    Lili Qu
    </descriptions.item>
    <descriptions.item label="Association">
      <a>421421</a>
    </descriptions.item>
    <descriptions.item label="Creation Time">
    2017-01-10
    </descriptions.item>
    <descriptions.item label="Effective Time">
    2017-10-10
    </descriptions.item>
  </descriptions>
</card>
  >
)
}
/**

用于查询多余参数

/
params = {}
/**

数据加载失败

/
onRequestError = (error) => {
}
render() {
const {
  createModalVisible,
  updateModalVisible,
  updateFormValues,
  selectedRowKeys,
  selectedRows,
} = this.state
/**

多选配置
/
const rowSelection = {
selectedRowKeys,
onChange: this.handleSelectRows,
};

/**

嵌套表格配置
/
const expandable = {
 expandedRowRender: this.expandedRowRender
}

return (
  <>
<pagecontainer>
  <protable columns="{this.getColumn()}" pagination="{this.pagination}" search="{this.search}" options="{this.options}" actionref="{this.actionRef}" request="{(params)"> testData({ ...params })}
    postData={this.postFn}
    dataSource={this.dataSource}
    rowKey="key"
    dateFormatter={this.dateFormatter}
    headerTitle={this.headerTitle}
    rowSelection={rowSelection}
    tableAlertOptionRender={this.tableAlertOptionRender}
    toolBarRender={this.toolBarRender}
    beforeSearchSubmit={this.beforeSearchSubmit}
    form={this.form}
    onReset={this.resetFn}
    expandable={expandable}
    toolbar={this.toolbar}
    tableExtraRender={this.tableExtraRender}
    params={this.params}
    onRequestError={this.onRequestError}
  /&gt;
  {selectedRows?.length &gt; 0 &amp;&amp; (
    <footertoolbar extra="{">
          已选择{' '}
          <a style="{{" fontweight:>
            {selectedRowKeys.length}
          </a>{' '} 项  
           <span>
            服务调用次数总计 {selectedRows.reduce((pre, item) =&gt; pre + item.callNo, 0)} 万
          </span>

      }
    &gt;
      <button onclick="{()"> {
          this.handleBatchRemove(selectedRows);
          this.cleanSelectedRows();
          this.actionRef.current?.reloadAndRest?.();
        }}
      &gt;
        批量删除
    </button>
      <button type="primary">批量审批</button>
    </footertoolbar>
  )
  }
  <createform oncancel="{()"> this.onAdd(false)}
    modalVisible={createModalVisible}
    modalTitle={"新建表单"}
  &gt;
    <protable onsubmit="{(value)"> {
        this.handleAdd(value);
      }}
      rowKey="key"
      type="form"
      columns={this.getColumn()}
    /&gt;
  </protable></createform>
  {updateFormValues &amp;&amp; Object.keys(updateFormValues).length ? (
    <updateform oncancel="{()"> {
        this.onUpdate(false);
        this.setUpdateFormValues([]);
      }}
      modalTitle={"修改表单"}
      updateModalVisible={updateModalVisible}
    &gt;
      <protable onsubmit="{(value)"> {
          this.handleUpdate(value);
        }}
        rowKey="key"
        type="form"
        values={updateFormValues}
        columns={this.getColumn()}
      /&gt;
    </protable></updateform>
  ) : null}
</protable></pagecontainer>
  >
);
}
}


export default ProTableCustom;

继承ProTableCustom使用方式

import React, { Component, createRef } from 'react';
import { connect, history } from 'umi';
import { 
  Row, 
  Col, 
  Divider, 
  Form, 
  Input, 
  Icon, 
  Button, 
  message, 
  Popconfirm 
  } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import ProTableCustom from '@/customComponents/ProTableCustom';
import request from 'umi-request';
@connect(({ user, global, loading }) => ({
  global,
  user,
  loading: loading.models.user,
}))
class Index extends ProTableCustom {

  constructor(props) {
    super(props)
    this.state = {
      ...this.state,
      ...{
        dataLoading: false,
  },
};
  }
  handleAdd = (value) => {
    console.log(value)
    if (value) {
      this.reloadData()
    }
  }
  handleBatchRemove = (selectedRows) => {
  }
  handleDelete = (value) => {
  }
  getColumn = () => [
    {
      title: "id",
      dataIndex: 'id',
       width: 100,
      align: 'center',
      hideInForm: true,
    },
    {
      title: '描述',
      dataIndex: 'desc',
      copyable: true,//是否支持复制
      ellipsis: true,//是否自动缩略
      // valueEnum: { //枚举值显示
      //   all: {
      //     text: '全部',
      //     status: 'Default',
      //   },
      //}
      // valueType:'',//值的显示类型 
      // | money | 转化值为金额 | ¥10,000.26 |
      // | date | 日期 | 2019-11-16 |
      // | dateRange | 日期区间 | 2019-11-16 2019-11-18 |
      // | dateTime | 日期和时间 | 2019-11-16 12:50:00 |
      // | dateTimeRange | 日期和时间区间 | 2019-11-16 12:50:00 2019-11-18 12:50:00 |
      // | time | 时间 | 12:50:00 |
      // | option | 操作项，会自动增加 marginRight，只支持一个数组,
      //表单中会自动忽略 | [<a>操作a</a>,<a>操作b</a>] |
      // | text | 默认值，不做任何处理 | - |
      // | select | 选择 | - |
      // | textarea | 与 text 相同， form 转化时会转为 textarea 组件 | - |
      // | index | 序号列 | - |
      // | indexBorder | 带 border 的序号列 | - |
      // | progress | 进度条 | - |
      // | digit | [格式化]
      //(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/
      //Reference/Global_Objects/Intl/NumberFormat)
      //数字展示，form 转化时会转为 inputNumber | - |
      // | percent | 百分比 | +1.12 |
      // | code | 代码块 | const a = b |
      // | avatar | 头像 | 展示一个头像 |
      // | password | 密码框 | 密码相关的展示 |
      // hideInSearch:true,//在查询表单中不展示此项
      // hideInTable:true,//在查询表格中不展示此项
      // hideInForm:true,//在表单中不展示此项
      // filters:true,表头的筛选菜单项，当值为 true 时，自动使用 valueEnum 生成
      // order:1, //查询表单中的权重，权重大排序靠前
      // renderFormItem: (item, { defaultRender, ...rest }, form) => { //渲染查询表单的输入组件
      //   const status = form.getFieldValue('status');
  //   if (`${status}` === '0') {
  //     return false;
  //   }

  //   if (`${status}` === '3') {
  //     return <input placeholder="请输入异常原因！">;
  //   }

  //   return defaultRender(item);
  // },
  tooltip: '会在 title 之后展示一个 icon，hover 之后提示一些信息',
  // search: false,
},
{
  title: '时间区间',
  key: 'dateTimeRange',
  dataIndex: 'createdAtRange',
  valueType: 'dateTimeRange',
  search: {
    transform: value =&gt; ({//转化值的 key, 一般用于事件区间的转化
      startTime: value[0],
      endTime: value[1],
    }),
  },
},
{
  title: '服务调用次数',
  dataIndex: 'callNo',
  // width: 200,
  sorter: true,
  hideInForm: true,
  renderText: (val) =&gt; `${val} 万`,
},
{
  title: '状态',
  dataIndex: 'status',
  // width: 100,
  hideInForm: false,
  // initialValue: 'all',
  initialValue: ['all'], //多选
  // valueType: 'select', // 表单类型和request一起使用
  // valueType: 'radio', //单选状态
  // valueType: 'radioButton', //单选按钮状态
  valueType: 'checkbox',//多选
  request: async () =&gt; [  //请求接口使用方式
    {
      label: '全部',
      value: 'all',
      status: 'Default',
    },
    {
      label: '未解决',
      value: 'error',
      status: 'Error',
    },
    {
      label: '已解决',
      value: 'close',
      status: 'Success',
    },
    {
      label: '已上线',
      value: 'online',
      status: 'Success',
    },
    {
      label: '解决中',
      value: 'running',
      status: 'Processing',
    },

  ],
  // valueEnum: {
  //   all: {
  //     text: '全部',
  //     status: 'Default',
  //   },
  //   close: {
  //     text: '关闭',
  //     status: 'Default',
  //   },
  //   running: {
  //     text: '运行中',
  //     status: 'Processing',
  //   },
  //   online: {
  //     text: '已上线',
  //     status: 'Success',
  //   },
  //   error: {
  //     text: '异常',
  //     status: 'Error',
  //   },
  // },
},
{
  title: '上次调度时间',
  dataIndex: 'updatedAt',
  // width: 100,
  sorter: true,
  valueType: 'dateTime',
  hideInForm: false,
  renderFormItem: (item, { defaultRender, ...rest }, form) =&gt; {
    const status = form.getFieldValue('status');

    if (`${status}` === '0') {
      return false;
    }

    if (`${status}` === '3') {
      return <input placeholder="请输入异常原因！">;
    }

    return defaultRender(item);
  },
},
{
  title: '操作',
  dataIndex: 'option',
  valueType: 'option',
  render: (_, record) =&gt; (
    &lt;&gt;
      <a onclick="{()"> {
          this.onUpdate(true);
          this.setUpdateFormValues(record);
        }}
      &gt;
        配置
      </a>
      <divider type="vertical"></divider>
      <popconfirm placement="top" title="确定要删除吗？" onconfirm="{this.handleDelete(record)}" oktext="确定" canceltext="取消">
        <a>
          删除
        </a>
      </popconfirm>
      <divider type="vertical"></divider>
      <a onclick="{()"> {
          this.clearSelected();
        }}
      &gt;
        清空选中
      </a>
      <divider type="vertical"></divider>
    &gt;
  ),
},
  ];
}
export default Index