machinery-admin/src/pages/GPSDevice/GPS/index.jsx

import { history, Link } from 'umi';
import { useRef } from 'react';
import { Button, Modal, message, Popconfirm, Tooltip } from 'antd';
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';


export default (props) => {
  const dataSource = [
    {
      id: 9,
      key: '1',
      name: '胡彦斌',
      age: 32,
      zz: '西湖区湖底公园1号',
    },

  ];


  // 测试内容👆-------------------------

  const actionRef = useRef();
  const gotoDetail = (id) => {
    history.push(`./GPS/GPSEdit`)
  }


  const handleDelete = (e) => {
    deleteNote(e.noteId).then(res => {
      message.success('删除成功');
      actionRef.current.reload();
    })
  }

  const handleOK = (record, data) => {
    const titleCourse = record.status ? '您确定要禁用该用户吗? 禁用后该用户不能在后台登陆!' : '您确定要启用该用户吗? 启用后该用户将允许在后台登陆!';
    Modal.confirm({
      title: titleCourse,
      okText: '确认',
      cancelText: '取消',
      onOk () {
        publishNote(record.noteId, record.status ? 'off' : 'on').then(res => {
          message.success('操作成功');
          actionRef.current.reload()
        })
      },
    });
  }
  const actions = () => [
    <Button key='add' type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>新增</Button>,
  ]
  const columns = [
    {
      title: 'ID',
      key: 'zz',
      dataIndex: 'zz',
    },
    {
      title: '设备号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (t, record) => record.noteType === 1 ? '已启用' : '已禁用',
      valueEnum: {
        online: { text: '已启用', status: 'Success' },
        error: { text: '已禁用', status: 'Error' },
      }
    },


    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      ellipsis: true,
      width: 200,
      render: (_, record) => [
        <Link key={2} to={`./GPS/GPSEdit`}>编辑</Link>,
        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record)}
          okText="确定"
          cancelText="取消"
        >
          <a href="#"  >删除</a>
        </Popconfirm>,
      ]
    },
  ]

  return (
    <PageHeaderWrapper>
      <ProTable
        dataSource={dataSource}
        columns={columns}
        // request={getNoteList} 请求
        // rowKey="noteId"
        options={false}
        toolBarRender={actions}
        actionRef={actionRef}
      />
    </PageHeaderWrapper>
  )
}