antd的使用 自定义 hooks 表格增删查改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

import { message } from 'antd'
import React, { useEffect, useState } from 'react'

import Request from '../../api/Request'

const useTeacherSearchCourse = (config) => {
  const [orderBy, setOrderBy] = useState(  config.orderBy||'')
  const [page, setPage] = useState( config.page||1)
  const [size, setSize] = useState(config.size|| 5)
  const [keyword, setKeyword] = useState( config.keyword||config.q||'');
  //-----状态
  const [resultList, setResultList] = useState([])
  const [total,setTotal] = useState(config.total||0)
  
  useEffect(() => {
    //请求 获取 教师信息
    Request({
      url: `/api/courses/getUserCourse`,
      method: `GET`,
      params: {
        keyword,
        page,
        size,
      }
    }).then(({ r,json,code}) => {
      // console.log(json);
      if (code != 200) {
        message.warn('服务异常，请重试');
        return
      }
      let data = json.data;
      console.log(data)
      setResultList(data.data||[])
      setTotal(data.totalCount)
      setPage(data.curPage)
      // setSize(data.siz)
      // setResultList(data)
    })
  }, [page,size,keyword])

  return {
    resultList,
    page,
    size,
    keyword,
    orderBy,
    setOrderBy,
    setPage,
    setSize,
    setKeyword,
    setResultList,
    setTotal,
    pageSize:size,
    current:page,
    total,

  }

}


export {
  useTeacherSearchCourse,
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

import React from "react";
import { Table, Space, Modal, message, Input, Form, Button } from 'antd';

import { useTeacherSearchCourse } from "../../../hooks/teacher/useTeacherCourse";

const SearchTable = (props) => {
  const {
    keyword, setKeyword,
    page, setPage,
    size, setSize,
    orderBy, setOrderBy,
    total,
    resultList,
  } = useTeacherSearchCourse({ keyword: '', orderBy: '', page: 1, size: 5 })

  const RequestPage = (event) => {
    let {
      current,
      pageSize
    } = event;
    setPage(current)
    setSize(pageSize)
  }
  const formatTime = (text) => {
    if (!text) {
      return ""
    }
    let date = new Date(text);
    return `${date.getFullYear()}年 ${date.getMonth() + 1} 月 ${date.getDate()} 日 ${date.getHours()}时 ${date.getMinutes()}分`
  }
  const columnsConfig = [
    {
      key: 'courseId',
      title: '课程ID',
      dataIndex: 'courseId'
    },
    {
      key: 'courseName',
      title: '课程名字',
      dataIndex: 'courseName'
    },
    {
      title: '封面图片',
      key: 'courseCoverImg',
      dataIndex: 'courseCoverImg',
      render: text => <a>{text}</a>,
    },
    {
      title: '创建时间',
      key: 'gmtCreate',
      dataIndex: 'gmtCreate',
      render: text => <a>{formatTime(text)}</a>
    },
    {
      title: '操作',
      key: 'courseId',
      dataIndex: 'courseId',
      render: courseId => (
        <>
          <a data-id={courseId} >操作</a>
        </>
      )
    }
  ]
  return (
    <>
      <div>

        <Table columns={columnsConfig} dataSource={resultList} {...props}
          rowKey="courseId"
          onChange={RequestPage}
          pagination={
            {
              current:page,
              pageSize:size,
              total,
              showSizeChanger:true,
              showTotal:()=> {
                return `有 ${total}条数据`
              },
              
              pageSizeOptions: [5, 10, 15],
              defaultPageSize: 5
            }
          }
        />
      </div>
    </>
    // <Table columns={columns} dataSource={roleList} {...props}
    //   rowKey="roleId"
    //   pagination={
    //     {
    //       ...pageInfo,
    //       pageSizeOptions: [5, 10, 15],
    //       defaultPageSize: 5
    //     }


    //   }
    //   onChange={RequestPage}
    // />

  )
}

const MyCourse = (props) => {
  // console.log(props)
  return (
    <div>
      <SearchTable />
    </div>
  )
}


export default MyCourse