system-copyright-react/src/route/Contract/Contract.tsx

import { useEffect, useState } from 'react'
import {  // Table,
  Pagination,
  Table,
  // message, Spin,
  Empty,
} from 'antd';
import { get, Axios } from "../../util/AjaxUtils.ts";
import type { TableProps } from 'antd';
import useMessage from "antd/es/message/useMessage";
interface DataType {
  contractManagementId: string;
  firstPartyName: string;
  firstPartyPhone: string;
  firstPartyAddress: string;
  gmtCreate: string;
}
import { useSelector, useDispatch } from 'react-redux'
export default function CONTRACT() {
  const dispath = useDispatch()
  const redxuState: any = useSelector(state => state)
  const contractArray = redxuState.contractArray
  const total = redxuState.contractTotal
  const [messageApi, messageApiHolder] = useMessage();
  const height = window.innerHeight - 180;
  // const [contractArray, setContractArray] = useState<any[]>([])
  // 分页 
  const [page, setPage] = useState(1)
  const getContractArray = (page: any) => {
    get({
      messageApi,
      url: `/api/contract/management/listpage/self`,
      config: {
        params: {
          page: page,
          rows: 10
        }
      },
      onSuccess(data: any) {
        // console.log(data);
        dispath({
          type: 'upContractArray',
          val: data.data.rows
        })
        dispath({
          type: 'upContractTotal',
          val: data.data.total
        })
        // setContractArray(data.data.rows)

      }
    })
  }

  // 表格
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 100,
      render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始

    },
    {
      title: '甲方姓名',
      dataIndex: 'firstPartyName',
      key: 'firstPartyName',
      align: 'center',
      ellipsis: {
        showTitle: true,
      },

    },
    {
      title: '联系电话',
      dataIndex: 'firstPartyPhone',
      key: 'firstPartyPhone',
      align: 'center',
      width: 320
    },
    {
      title: '联系地址',
      dataIndex: 'firstPartyAddress',
      align: 'center',
      key: 'firstPartyAddress',
      ellipsis: {
        showTitle: true,
      },
    },
    {
      title: '创建日期',
      dataIndex: 'gmtCreate',
      align: 'center',
      key: 'gmtCreate',
      width: 320
    },
    {
      title: '操作',
      dataIndex: 'contractManagementId',
      align: 'center',
      key: 'contractManagementId',
      width: 200,
      render: (text) => (
        <div style={{
          cursor: 'pointer',
          color: '#007FFF',
        }} onClick={() => {

          window.open(`${Axios.defaults?.baseURL}/api/contract/management/download/${text}`)

        }}>下载</div>
      )

    },
  ]

  useEffect(() => {
    getContractArray(page)
  }, [])
  return (
    <div>
      {messageApiHolder}
      <div style={{
        height: height - 60,
        background: 'white',
        overflow: 'auto', marginTop: 18, marginBottom: -10
      }}>
        {/* 表格 */}
        <div style={{ display: contractArray.length > 0 ? 'block' : 'none', padding: 10 }}>
          <Table<DataType> columns={columns}
            dataSource={contractArray}
            scroll={{ y: height - 160 }}
            pagination={false} rowKey="contractManagementId" />
        </div>
        <div style={{ display: contractArray.length <= 0 ? 'block' : 'none' }}>
          <div style={{ height: height - 60, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Empty description="暂无数据" />
          </div>
        </div>
      </div>
      <div className='pagination' >
        <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
          setPage(page)
          getContractArray(page)
        }} />
      </div>
    </div>
  )
}