feat: 仪表盘

src/pages/workbench/Dashboard/components/ReminderList/index.jsx

@@ -1,10 +1,15 @@
 import React, { useState, useEffect } from 'react'
+import { Button } from 'antd'
 import consts from '@/consts'
+import { useDispatch } from 'dva'
 import { connect } from 'dva'
 import ProTable from '@ant-design/pro-table'
 import { queryReminderList } from '@/services/dashboard'
+import { CloseOutlined } from '@ant-design/icons'
+import styles from './index.less'
 
 const ReminderList = props => {
+  const dispatch = useDispatch()
   const { visible, dataId = '' } = props
   const [state, setState] = useState({
     loading: false,
@@ -23,6 +28,12 @@ const ReminderList = props => {
   useEffect(() => {
     visible && initData(dataId)
   }, [visible])
+
+  const closeModal = () => {
+    dispatch({
+      type: 'single/changeModal'
+    })
+  }
   const columns = [
     {
       title: '客户名称',
@@ -62,15 +73,29 @@ const ReminderList = props => {
     }
   ]
   return (
-    <div>
-      <ProTable
-        rowKey={record => record.rank}
-        columns={columns}
-        // dataSource={}
-        search={false}
-        toolBarRender={false}
-        pagination={false}
-      />
+    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
+      <div className={styles.modalHeader}>
+        <span className={styles.closeIcon}>
+          <CloseOutlined onClick={closeModal} />
+        </span>
+      </div>
+      <div className="mx-4">
+        <ProTable
+          rowKey={record => record.rank}
+          columns={columns}
+          // dataSource={}
+          search={false}
+          toolBarRender={false}
+          pagination={false}
+        />
+      </div>
+      <div className={styles.modalFooter}>
+        <div className="text-right">
+          <Button type="button" onClick={closeModal}>
+            关闭
+          </Button>
+        </div>
+      </div>
     </div>
   )
 }

src/pages/workbench/Dashboard/components/ReminderList/index.less

@@ -0,0 +1,15 @@
+.modalContainer {
+  width: 90vw;
+  .modalHeader {
+    position: relative;
+    padding: 1.5rem;
+    .closeIcon {
+      position: absolute;
+      top: 5px;
+      right: 7px;
+    }
+  }
+  .modalFooter {
+    padding: 1.5rem;
+  }
+}

src/pages/workbench/Dashboard/index.jsx

@@ -22,11 +22,11 @@ const Dashboard = () => {
     char: [],
     thread: []
   })
-  const { toggleModal, setReminderList } = useModal()
+  const { toggleModal, setModalProps } = useModal()
   // 展示服务弹窗详情
   const handleReminderList = id => {
-    setReminderList({
-      width: '60vw',
+    setModalProps({
+      width: '90vw',
       modalRender: node => <ReminderList dataId={id} node={node} />,
       onCancel: () => toggleModal()
     })