feat: 服务提醒弹窗

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

@@ -1,7 +1,29 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { Modal } from 'antd'
+import consts from '@/consts'
+import { connect } from 'dva'
 import ProTable from '@ant-design/pro-table'
+import { queryReminderList } from '@/services/dashboard'
 
-const ReminderList = () => {
+const ReminderList = props => {
+  const { visible, onCancel, loading, dataId = '' } = props
+  const [state, setState] = useState({
+    loading: false,
+    client: []
+  })
+  const initData = async id => {
+    setState({ ...state, loading: true })
+    const {
+      data: { client = [] },
+      code = -1
+    } = await queryReminderList(id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, client, loading: false })
+    }
+  }
+  useEffect(() => {
+    visible && initData(dataId)
+  }, [visible])
   const columns = [
     {
       title: '客户名称',
@@ -42,16 +64,20 @@ const ReminderList = () => {
   ]
   return (
     <div>
-      <ProTable
-        rowKey={record => record.rank}
-        columns={columns}
-        // dataSource={}
-        search={false}
-        toolBarRender={false}
-        pagination={false}
-      />
+      <Modal visible={visible} confirmLoading={loading} onCancel={onCancel} width={800}>
+        <ProTable
+          rowKey={record => record.rank}
+          columns={columns}
+          // dataSource={}
+          search={false}
+          toolBarRender={false}
+          pagination={false}
+        />
+      </Modal>
     </div>
   )
 }
 
-export default ReminderList
+export default connect(({ single }) => ({
+  visible: single.drawer.visible
+}))(ReminderList)

src/pages/workbench/Dashboard/index.jsx

@@ -5,10 +5,12 @@ import { AddressBook, City, Finance, Comment } from '@icon-park/react'
 import { DualAxes } from '@ant-design/charts'
 import consts from '@/consts'
 import { queryDashboard } from '@/services/dashboard'
+import ReminderList from './components/ReminderList'
 
 const Dashboard = () => {
   const { Option } = Select
   const [state, setState] = useState({
+    visible: false,
     reminderData: [],
     leaderboard: [],
     clientChainRatio: {},
@@ -19,6 +21,24 @@ const Dashboard = () => {
     char: [],
     thread: []
   })
+  const [reminderList, setReminderList] = useState({
+    type: '',
+    visible: false,
+    loading: false
+  })
+  // 展示服务弹窗详情
+  const showModal = id => {
+    setReminderList({
+      children: (
+        <ReminderList
+          dataId={id}
+          loading={reminderList.loading}
+          visible={reminderList.visible}
+          onCancel={() => setReminderList({ ...reminderList, visible: false })}
+        />
+      )
+    })
+  }
   const initData = async payload => {
     const {
       code = -1,
@@ -59,7 +79,15 @@ const Dashboard = () => {
     },
     {
       title: '7天',
-      dataIndex: 'day7'
+      dataIndex: 'day7',
+      render: (name, record) => (
+        // console.log(record)
+        <span
+          onClick={() => showModal(record.day7)}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          {name}
+        </span>
+      )
     },
     {
       title: '15天',

src/services/dashboard.js

@@ -11,3 +11,11 @@ export async function queryDashboard(payload) {
   })
   return data
 }
+
+/** 获得提醒列表数据 */
+export async function queryReminderList(payload) {
+  const data = await request.get('/dashboard/reminder/list', {
+    params: { ...payload }
+  })
+  return data
+}