张延森 2 anni fa
parent
commit
f204fd6172
4 ha cambiato i file con 123 aggiunte e 37 eliminazioni
  1. 6
    0
      config/routes.js
  2. 42
    0
      src/pages/monitor/edit.jsx
  3. 38
    37
      src/pages/monitor/index.jsx
  4. 37
    0
      src/services/api/monitor.js

+ 6
- 0
config/routes.js Vedi File

@@ -43,6 +43,12 @@
43 43
     hideInMenu: true,
44 44
     component: './rotationChart/edit',
45 45
   },
46
+  {
47
+    path: '/monitor',
48
+    name: '监控管理',
49
+    icon: 'VideoCameraOutlined',
50
+    component: './monitor/index',
51
+  },
46 52
   {
47 53
     component: './404',
48 54
   },

+ 42
- 0
src/pages/monitor/edit.jsx Vedi File

@@ -0,0 +1,42 @@
1
+import {
2
+  ModalForm,
3
+  ProFormText,
4
+} from '@ant-design/pro-components';
5
+import { Button, Form, message } from 'antd';
6
+import { useEffect } from 'react';
7
+
8
+export default (props) => {
9
+  const {onSubmit, onCancel, dataSource = {}, visible} = props;
10
+  const [form] = Form.useForm();
11
+
12
+  const handleSubmit = (values) => {
13
+    if (typeof onSubmit === 'function') {
14
+      onSubmit({
15
+        status: '1',
16
+        ...(dataSource || {}),
17
+        ...values
18
+      })
19
+    }
20
+  }
21
+
22
+  useEffect(() => {
23
+    console.log('----------', dataSource.title)
24
+    form.setFieldsValue({ title: dataSource.title, url: dataSource.url })
25
+  }, [dataSource.title, dataSource.url, form])
26
+
27
+  return (
28
+    <ModalForm
29
+      title="新建表单"
30
+      visible={visible}
31
+      form={form}
32
+      modalProps={{
33
+        destroyOnClose: true,
34
+        onCancel: onCancel,
35
+      }}
36
+      onFinish={handleSubmit}
37
+    >
38
+      <ProFormText name="title" label="监控名称" />
39
+      <ProFormText name="url" label="视频地址" />
40
+    </ModalForm>
41
+  );
42
+};

+ 38
- 37
src/pages/monitor/index.jsx Vedi File

@@ -1,28 +1,47 @@
1
-import { deleteBanner, getBannerList, updataBanner } from '@/services/api/rotationChart';
1
+import { deleteMonitor, getMonitorList, updataMonitor, addMonitor } from '@/services/api/monitor';
2 2
 import { queryTable } from '@/utils/request';
3 3
 import { PageContainer, ProTable } from '@ant-design/pro-components';
4 4
 import { history } from '@umijs/max';
5 5
 import { Button, message, Popconfirm } from 'antd';
6 6
 import { useRef, useState } from 'react';
7
+import EditForm from './edit'
7 8
 
8 9
 const List = (props) => {
9 10
   console.log(props, '===');
10
-  const [showDetail, setShowDetail] = useState(false);
11
+  const [visible, setVisible] = useState(false);
12
+  const [current, setCurrent] = useState({});
11 13
   const [activeKey, setActiveKey] = useState('');
12 14
   const actionRef = useRef();
13 15
 
14 16
   const updata = (row) => {
15 17
     if (row.id) {
16
-      updataBanner(row.id, { state: row.state === '1' ? '2' : '1' }).then((res) => {
18
+      updataMonitor(row.id, { status: row.status === '1' ? '2' : '1' }).then((res) => {
17 19
         message.success('修改成功');
18 20
         actionRef.current.reload();
19 21
       });
20 22
     }
21 23
   };
22 24
 
25
+  const onSubmit = (values) => {
26
+    if (!Object.prototype.hasOwnProperty.call(values, 'id')) {
27
+      addMonitor(values).then((res) => {
28
+        setCurrent(res);
29
+        setVisible(false);
30
+        message.success('操作成功');
31
+        actionRef.current.reload();
32
+      })
33
+    } else {
34
+      updataMonitor(values.id, values).then((res) => {
35
+        setVisible(false);
36
+        message.success('操作成功');
37
+        actionRef.current.reload();
38
+      });
39
+    }
40
+  }
41
+
23 42
   const handleDelete = (id) => {
24 43
     if (id) {
25
-      deleteBanner(id).then((res) => {
44
+      deleteMonitor(id).then((res) => {
26 45
         message.success('删除成功');
27 46
         actionRef.current.reload();
28 47
       });
@@ -39,19 +58,12 @@ const List = (props) => {
39 58
       dataIndex: 'title',
40 59
     },
41 60
     {
42
-      title: '封面图',
43
-      dataIndex: 'image',
44
-      render: t => !t || '-' === t ? t : <img src={t}  style={{ width: '96px', borderRadius: '6px' }} />
45
-    },
46
-
47
-    {
48
-      title: '视频',
49
-      dataIndex: 'video',
50
-      render: () => '-',
61
+      title: '地址',
62
+      dataIndex: 'url',
51 63
     },
52 64
     {
53 65
       title: '状态',
54
-      dataIndex: 'state',
66
+      dataIndex: 'status',
55 67
       valueEnum: {
56 68
         1: {
57 69
           text: '上架',
@@ -63,14 +75,6 @@ const List = (props) => {
63 75
         },
64 76
       },
65 77
     },
66
-    // {
67
-    //   title: '描述',
68
-    //   dataIndex: 'desc',
69
-    // },
70
-    {
71
-      title: '权重',
72
-      dataIndex: 'qz',
73
-    },
74 78
     {
75 79
       title: '操作',
76 80
       valueType: 'option',
@@ -84,15 +88,15 @@ const List = (props) => {
84 88
             updata(record);
85 89
           }}
86 90
         >
87
-          {record.state === '1' ? '下架' : '上架'}
91
+          {record.status === '1' ? '下架' : '上架'}
88 92
         </Button>,
89 93
         <Button
90 94
           key={2}
91 95
           style={{ padding: 0 }}
92 96
           type="link"
93 97
           onClick={() => {
94
-            console.log(record, ']]');
95
-            history.push(`/rotationChart/add?id=${record.id}`);
98
+            setCurrent(record);
99
+            setVisible(true);
96 100
           }}
97 101
         >
98 102
           编辑
@@ -116,6 +120,12 @@ const List = (props) => {
116 120
 
117 121
   return (
118 122
     <PageContainer>
123
+      <EditForm
124
+        visible={visible}
125
+        dataSource={current}
126
+        onCancel={() => setVisible(false)}
127
+        onSubmit={onSubmit}
128
+      />
119 129
       <ProTable
120 130
         // headerTitle={'中高风险地区库'}
121 131
         search={false}
@@ -125,26 +135,17 @@ const List = (props) => {
125 135
           <Button
126 136
             key="2"
127 137
             type="primary"
128
-            onClick={() => {
129
-              history.push('/rotationChart/add');
130
-            }}
138
+            onClick={() => { setCurrent({}); setVisible(true);  }}
131 139
           >
132 140
             新增
133 141
           </Button>,
134
-          // <EditForm
135
-          //   key="2"
136
-          //   type="add"
137
-          //   butttomTitle="新增轮播图"
138
-          //   onSuccess={() => actionRef.current.reload()}
139
-          //   butttomProps={{}}
140
-          // />,
141 142
         ]}
142 143
         // search={false}
143
-        request={queryTable(getBannerList)}
144
+        request={queryTable(getMonitorList)}
144 145
         columns={columns}
145 146
       />
146 147
     </PageContainer>
147 148
   );
148 149
 };
149 150
 
150
-export default RotationChartList;
151
+export default List;

+ 37
- 0
src/services/api/monitor.js Vedi File

@@ -0,0 +1,37 @@
1
+import { request } from '@umijs/max';
2
+
3
+/**
4
+ * 查询列表
5
+ * @param {*} params
6
+ * @returns
7
+ */
8
+export const getMonitorList = (params) => request('/monitor', { params });
9
+
10
+/**
11
+ * 详情
12
+ * @param {*} id
13
+ * @returns
14
+ */
15
+export const getMonitordById = (id) => request(`/monitor/${id}`);
16
+
17
+/**
18
+ * 新增
19
+ * @param {*} data
20
+ * @returns
21
+ */
22
+export const addMonitor = (data) => request('/monitor', { method: 'post', data });
23
+
24
+/**
25
+ * 新增
26
+ *  @param {*} id
27
+ * @param {*} data
28
+ * @returns
29
+ */
30
+export const updataMonitor = (id, data) => request(`/monitor/${id}`, { method: 'put', data });
31
+
32
+/**
33
+ * 删除
34
+ * @param {*} id
35
+ * @returns
36
+ */
37
+export const deleteMonitor = (id) => request(`/monitor/${id}`, { method: 'delete' });