feats

config/routes.js

     hideInMenu: true,
     component: './rotationChart/edit',
   },
+  {
+    path: '/monitor',
+    name: '监控管理',
+    icon: 'VideoCameraOutlined',
+    component: './monitor/index',
+  },
   {
     component: './404',
   },

src/pages/monitor/edit.jsx

+import {
+  ModalForm,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Button, Form, message } from 'antd';
+import { useEffect } from 'react';
+
+export default (props) => {
+  const {onSubmit, onCancel, dataSource = {}, visible} = props;
+  const [form] = Form.useForm();
+
+  const handleSubmit = (values) => {
+    if (typeof onSubmit === 'function') {
+      onSubmit({
+        status: '1',
+        ...(dataSource || {}),
+        ...values
+      })
+    }
+  }
+
+  useEffect(() => {
+    console.log('----------', dataSource.title)
+    form.setFieldsValue({ title: dataSource.title, url: dataSource.url })
+  }, [dataSource.title, dataSource.url, form])
+
+  return (
+    <ModalForm
+      title="新建表单"
+      visible={visible}
+      form={form}
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: onCancel,
+      }}
+      onFinish={handleSubmit}
+    >
+      <ProFormText name="title" label="监控名称" />
+      <ProFormText name="url" label="视频地址" />
+    </ModalForm>
+  );
+};

src/pages/monitor/index.jsx

-import { deleteBanner, getBannerList, updataBanner } from '@/services/api/rotationChart';
+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 [showDetail, setShowDetail] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [current, setCurrent] = useState({});
   const [activeKey, setActiveKey] = useState('');
   const actionRef = useRef();
 
   const updata = (row) => {
     if (row.id) {
-      updataBanner(row.id, { state: row.state === '1' ? '2' : '1' }).then((res) => {
+      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) {
-      deleteBanner(id).then((res) => {
+      deleteMonitor(id).then((res) => {
         message.success('删除成功');
         actionRef.current.reload();
       });
       dataIndex: 'title',
     },
     {
-      title: '封面图',
-      dataIndex: 'image',
-      render: t => !t || '-' === t ? t : <img src={t}  style={{ width: '96px', borderRadius: '6px' }} />
-    },
-
-    {
-      title: '视频',
-      dataIndex: 'video',
-      render: () => '-',
+      title: '地址',
+      dataIndex: 'url',
     },
     {
       title: '状态',
-      dataIndex: 'state',
+      dataIndex: 'status',
       valueEnum: {
         1: {
           text: '上架',
         },
       },
     },
-    // {
-    //   title: '描述',
-    //   dataIndex: 'desc',
-    // },
-    {
-      title: '权重',
-      dataIndex: 'qz',
-    },
     {
       title: '操作',
       valueType: 'option',
             updata(record);
           }}
         >
-          {record.state === '1' ? '下架' : '上架'}
+          {record.status === '1' ? '下架' : '上架'}
         </Button>,
         <Button
           key={2}
           style={{ padding: 0 }}
           type="link"
           onClick={() => {
-            console.log(record, ']]');
-            history.push(`/rotationChart/add?id=${record.id}`);
+            setCurrent(record);
+            setVisible(true);
           }}
         >
           编辑
 
   return (
     <PageContainer>
+      <EditForm
+        visible={visible}
+        dataSource={current}
+        onCancel={() => setVisible(false)}
+        onSubmit={onSubmit}
+      />
       <ProTable
         // headerTitle={'中高风险地区库'}
         search={false}
           <Button
             key="2"
             type="primary"
-            onClick={() => {
-              history.push('/rotationChart/add');
-            }}
+            onClick={() => { setCurrent({}); setVisible(true);  }}
           >
             新增
           </Button>,
-          // <EditForm
-          //   key="2"
-          //   type="add"
-          //   butttomTitle="新增轮播图"
-          //   onSuccess={() => actionRef.current.reload()}
-          //   butttomProps={{}}
-          // />,
         ]}
         // search={false}
-        request={queryTable(getBannerList)}
+        request={queryTable(getMonitorList)}
         columns={columns}
       />
     </PageContainer>
   );
 };
 
-export default RotationChartList;
+export default List;

src/services/api/monitor.js

+import { request } from '@umijs/max';
+
+/**
+ * 查询列表
+ * @param {*} params
+ * @returns
+ */
+export const getMonitorList = (params) => request('/monitor', { params });
+
+/**
+ * 详情
+ * @param {*} id
+ * @returns
+ */
+export const getMonitordById = (id) => request(`/monitor/${id}`);
+
+/**
+ * 新增
+ * @param {*} data
+ * @returns
+ */
+export const addMonitor = (data) => request('/monitor', { method: 'post', data });
+
+/**
+ * 新增
+ *  @param {*} id
+ * @param {*} data
+ * @returns
+ */
+export const updataMonitor = (id, data) => request(`/monitor/${id}`, { method: 'put', data });
+
+/**
+ * 删除
+ * @param {*} id
+ * @returns
+ */
+export const deleteMonitor = (id) => request(`/monitor/${id}`, { method: 'delete' });