feats

config/routes.js

@@ -20,40 +20,28 @@
   //   component: './Welcome',
   // },
   {
-    path: '/rotationChart',
+    path: '/',
+    redirect: '/rotationChart/list',
+  },
+  {
+    path: '/rotationChart/list',
     name: '轮播图管理',
     icon: 'smile',
-    // access: 'canAdmin',
-    routes: [
-      {
-        path: '/rotationChart/list',
-        name: '轮播图管理',
-        icon: 'smile',
-        component: './rotationChart/list',
-      },
-      {
-        path: '/rotationChart/add',
-        name: '轮播图新增',
-        icon: 'smile',
-        hideInMenu: true,
-        component: './rotationChart/edit',
-      },
-      {
-        path: '/rotationChart/edit',
-        name: '轮播图编辑',
-        icon: 'smile',
-        hideInMenu: true,
-        component: './rotationChart/edit',
-      },
-      {
-        component: './404',
-      },
-    ],
+    component: './rotationChart/list',
   },
-
   {
-    path: '/',
-    redirect: '/rotationChart/list',
+    path: '/rotationChart/add',
+    name: '轮播图新增',
+    icon: 'smile',
+    hideInMenu: true,
+    component: './rotationChart/edit',
+  },
+  {
+    path: '/rotationChart/edit',
+    name: '轮播图编辑',
+    icon: 'smile',
+    hideInMenu: true,
+    component: './rotationChart/edit',
   },
   {
     component: './404',

src/pages/monitor/index.jsx

@@ -0,0 +1,150 @@
+import { deleteBanner, getBannerList, updataBanner } from '@/services/api/rotationChart';
+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';
+
+const List = (props) => {
+  console.log(props, '===');
+  const [showDetail, setShowDetail] = useState(false);
+  const [activeKey, setActiveKey] = useState('');
+  const actionRef = useRef();
+
+  const updata = (row) => {
+    if (row.id) {
+      updataBanner(row.id, { state: row.state === '1' ? '2' : '1' }).then((res) => {
+        message.success('修改成功');
+        actionRef.current.reload();
+      });
+    }
+  };
+
+  const handleDelete = (id) => {
+    if (id) {
+      deleteBanner(id).then((res) => {
+        message.success('删除成功');
+        actionRef.current.reload();
+      });
+    }
+  };
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '监控',
+      dataIndex: 'title',
+    },
+    {
+      title: '封面图',
+      dataIndex: 'image',
+      render: t => !t || '-' === t ? t : <img src={t}  style={{ width: '96px', borderRadius: '6px' }} />
+    },
+
+    {
+      title: '视频',
+      dataIndex: 'video',
+      render: () => '-',
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      valueEnum: {
+        1: {
+          text: '上架',
+          status: 'Processing',
+        },
+        2: {
+          text: '下架',
+          status: 'Error',
+        },
+      },
+    },
+    // {
+    //   title: '描述',
+    //   dataIndex: 'desc',
+    // },
+    {
+      title: '权重',
+      dataIndex: 'qz',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 200,
+      render: (_, record) => [
+        <Button
+          key={1}
+          style={{ padding: 0 }}
+          type="link"
+          onClick={() => {
+            updata(record);
+          }}
+        >
+          {record.state === '1' ? '下架' : '上架'}
+        </Button>,
+        <Button
+          key={2}
+          style={{ padding: 0 }}
+          type="link"
+          onClick={() => {
+            console.log(record, ']]');
+            history.push(`/rotationChart/add?id=${record.id}`);
+          }}
+        >
+          编辑
+        </Button>,
+
+        <Popconfirm
+          key={3}
+          title="您是否确认删除 ?"
+          onConfirm={() => handleDelete(record.id)}
+          okText="确定"
+          cancelText="取消"
+        >
+          {/* manualPush */}
+          <Button style={{ padding: 0 }} type="link">
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <ProTable
+        // headerTitle={'中高风险地区库'}
+        search={false}
+        actionRef={actionRef}
+        rowKey="id"
+        toolBarRender={() => [
+          <Button
+            key="2"
+            type="primary"
+            onClick={() => {
+              history.push('/rotationChart/add');
+            }}
+          >
+            新增
+          </Button>,
+          // <EditForm
+          //   key="2"
+          //   type="add"
+          //   butttomTitle="新增轮播图"
+          //   onSuccess={() => actionRef.current.reload()}
+          //   butttomProps={{}}
+          // />,
+        ]}
+        // search={false}
+        request={queryTable(getBannerList)}
+        columns={columns}
+      />
+    </PageContainer>
+  );
+};
+
+export default RotationChartList;