admin/src/pages/monitor/index.jsx

import { deleteMonitor, getMonitorList, updataMonitor, addMonitor } from '@/services/api/monitor';
import { queryTable } from '@/utils/request';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Button, message, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import EditForm from './edit'

const List = (props) => {
  console.log(props, '===');
  const [visible, setVisible] = useState(false);
  const [current, setCurrent] = useState({});
  const [activeKey, setActiveKey] = useState('');
  const actionRef = useRef();

  const updata = (row) => {
    if (row.id) {
      updataMonitor(row.id, { status: row.status === '1' ? '2' : '1' }).then((res) => {
        message.success('修改成功');
        actionRef.current.reload();
      });
    }
  };

  const onSubmit = (values) => {
    if (!Object.prototype.hasOwnProperty.call(values, 'id')) {
      addMonitor(values).then((res) => {
        setCurrent(res);
        setVisible(false);
        message.success('操作成功');
        actionRef.current.reload();
      })
    } else {
      updataMonitor(values.id, values).then((res) => {
        setVisible(false);
        message.success('操作成功');
        actionRef.current.reload();
      });
    }
  }

  const handleDelete = (id) => {
    if (id) {
      deleteMonitor(id).then((res) => {
        message.success('删除成功');
        actionRef.current.reload();
      });
    }
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: '监控',
      dataIndex: 'title',
    },
    {
      title: '地址',
      dataIndex: 'url',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        1: {
          text: '上架',
          status: 'Processing',
        },
        2: {
          text: '下架',
          status: 'Error',
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (_, record) => [
        <Button
          key={1}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            updata(record);
          }}
        >
          {record.status === '1' ? '下架' : '上架'}
        </Button>,
        <Button
          key={2}
          style={{ padding: 0 }}
          type="link"
          onClick={() => {
            setCurrent(record);
            setVisible(true);
          }}
        >
          编辑
        </Button>,

        <Popconfirm
          key={3}
          title="您是否确认删除 ?"
          onConfirm={() => handleDelete(record.id)}
          okText="确定"
          cancelText="取消"
        >
          {/* manualPush */}
          <Button style={{ padding: 0 }} type="link">
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer>
      <EditForm
        visible={visible}
        dataSource={current}
        onCancel={() => setVisible(false)}
        onSubmit={onSubmit}
      />
      <ProTable
        // headerTitle={'中高风险地区库'}
        search={false}
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
          <Button
            key="2"
            type="primary"
            onClick={() => { setCurrent({}); setVisible(true); }}
          >
            新增
          </Button>,
        ]}
        // search={false}
        request={queryTable(getMonitorList)}
        columns={columns}
      />
    </PageContainer>
  );
};

export default List;