调用接口实现Table 增删改查并且动态适内容

最新推荐文章于 2024-12-07 15:16:22 发布

原创

最新推荐文章于 2024-12-07 15:16:22 发布 · 801 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ant pro #Table增删改查

本文介绍了如何在Ant Design Pro项目中，利用Table组件实现数据的增加、删除、修改和查询功能，并详细阐述了在主页、添加页面和详情页面中的具体实现过程。

主页

import React from 'react';
import {
   
    connect } from 'dva';
import {
   
    Breadcrumb, Table, Divider, Row, Col, DatePicker, Button, Form ,Popconfirm} from 'antd';
import router from 'umi/router';
import moment from 'moment';

@connect(({
   
    add }) => ({
   
   
  add
}))
@Form.create()
// eslint-disable-next-line react/prefer-stateless-function
class Once extends React.Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.state = {
   
   
      pagination: {
   
   
        pageSize: 10,
        pageNumber: 1,
      },
      list: []
    }
  }

  componentDidMount() {
   
   
    this.query();
  }

  //当页码切换的时候触发
  pageNumChange = ({
   
    pageSize, current }) => {
   
   
    const pagination = this.state.pagination;
    pagination.pageSize = pageSize;
    pagination.pageNumber = current;
    this.setState({
   
   
      pagination
    })
    this.query({
   
    pageSize, pageNumber: current })
  }

  //点击查询按钮调用查询接口 
  //在component中运行 点击后再次运行并携带参数page
  query = (page) => {
   
   
    console.log(page, "查询");
    let values = this.props.form.getFieldsValue().yearMonth;
    // console.log(moment(values.yearMonth).format("YYYY-MM"))
    let yearMonth = moment(values).format('YYYY-MM');
    console.log(yearMonth, values)
    let data = {
   
   
      yearMonth:values?yearMonth:"",
      pageSize: 10,
      pageNumber: 1,
      status: ''
    }
    //如果携带参数page data和page会迭代
    if (page) {
   
   
      data = {
   
    ...data, ...page }
    }
    //调用----我提交的请求列表
    const {
   
    dispatch } = this.props;
    dispatch({
   
   
      type: 'add/Add',
      payload: {
   
   
        // "status": "",
        ...data
      },
    }).then((res) => {
   
   
      console.log(res , res,"活动经费申请res")
      if (res.code == "0" && res.message == "请求成功！") {
   
   

        const pagination = this.state.pagination;
        pagination.pageNumber = res.data.pageNumber;//请求数据的当前页码
        pagination.pageSize = res.data.pageSize;//每页多少条数据
        pagination.current = res.data.pageNumber;//当前页数
        console.log(res.data.list, "我是数据")

        //如果页面信息为空 跳到上一页
        if (!res.data.list[0]&&pagination.pageNumber!==1) {
   
   
          pagination.current = pagination.current - 1;
          this.query({
   
   pageSize:pagination.pageSize,pageNumber:pagination.current})
        } 

        console.log(pagination.current, "我是当前页数")


        //数据总数
        pagination.total = res.data.totalRow;
        this.setState({
   
   
          list: res.data.list,
          pagination
        })
      } else {
   
   
        alert("请求失败")
      }
    })
  }

  //详情  点击之后发送请求，进入到详情页面
  details = (record) => {
   
   
    const {
   
    dispatch } = this.props;
    dispatch({
   
   
      type: 'add/Detalis',
      payload: {
   
   
        id: record.id
      },
    }).then((res) => {
   
   
      if (res.code == 0 && res.message == "请求成功！") {
   
    //提示信息 1成功。0失败。
        // this.notification(1, "成功进入详情页面")
        router.push('/manage/details', res.data);
      } else {
   
   
        // this.notification(0, "进入详情页面失败")
      }
    })
  }

  //删除按钮
  delete = (record) => {
   
   
    const {
   
    dispatch } = this.props;
    dispatch({
   
   
      type: 'add/Button',
      payload: {
   
   
        id: record.id,
        actionType: 5,//删除
      },
    }).then((res) => {
   
   
      const {
   
    pageSize, pageNumber } = this.state.pagination;
      this.query({
   
    pageSize, pageNumber });
    })
  }

  //撤回按钮
  withdraw=(record)=>{
   
   
    const {
   
    dispatch } = this.props;
    dispatch({
   
   
      type: 'add/Button',
      payload