Merge branch 'dev' of http://192.168.1.41:3000/outaozhen/cldV2react into dev

.stylelintrc.js

@@ -1,7 +1,7 @@
 const fabric = require('@umijs/fabric')
 
 module.exports = {
-  ...fabric.stylelint,
+  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
   rules: {
     indentation: 2,
     'block-no-empty': null,

package.json

@@ -88,11 +88,15 @@
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "^2.6.2",
+    "@umijs/fabric": "^2.10.1",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.1",
     "@umijs/plugin-sass": "^1.1.1",
     "@umijs/preset-ant-design-pro": "^1.2.0",
+    "eslint-plugin-javascript": "^1.3.4",
+    "eslint-plugin-jsx": "^0.1.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-typescript": "^0.14.0",
     "@umijs/preset-react": "1.8.12",
     "@umijs/yorkie": "^2.0.3",
     "agent-base": "^6.0.2",
@@ -108,10 +112,6 @@
     "enzyme": "^3.11.0",
     "eslint": "^7.18.0",
     "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-javascript": "^1.3.4",
-    "eslint-plugin-jsx": "^0.1.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-typescript": "^0.14.0",
     "express": "^4.17.1",
     "gh-pages": "^3.0.0",
     "jsdom-global": "^3.0.2",

src/components/Modal/index.jsx

@@ -1,6 +0,0 @@
-import BasicDrawer from './src/BasicDrawer'
-import BasicModal from './src/BasicModal'
-import { useModal } from './src/index'
-
-export { useModal, BasicDrawer }
-export default BasicModal

src/components/Modal/src/BasicDrawer.jsx

@@ -1,40 +0,0 @@
-import { Drawer } from 'antd'
-import { connect } from 'umi'
-import React, { Fragment, useEffect } from 'react'
-
-const BasicDrawer = props => {
-  const {
-    visible,
-    config: { children, ...resetProps }
-  } = props
-  // 浏览器实际宽度
-  // const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
-
-  useEffect(() => {
-    // window.addEventListener('resize', () => {
-    //   setClientWidth(document.body.clientWidth * 0.7)
-    // })
-    // return () => {
-    //   window.removeEventListener('resize', () => {})
-    // }
-  }, [])
-
-  return (
-    <Fragment>
-      <Drawer
-        className="my-drawer"
-        visible={visible}
-        {...resetProps}
-        // width={clientWidth}
-        getContainer={false}
-      >
-        {children}
-      </Drawer>
-    </Fragment>
-  )
-}
-
-export default connect(({ single }) => ({
-  visible: single.drawer.visible,
-  config: single.drawer.config
-}))(BasicDrawer)

src/components/Modal/src/BasicModal.jsx

@@ -1,36 +0,0 @@
-// import { createUid } from '@/utils/utils'
-import { Modal } from 'antd'
-import { connect } from 'umi'
-import React, { Fragment } from 'react'
-// import DragIniter from './components/DragIniter'
-
-const BasicModal = props => {
-  const {
-    visible,
-    config: { children, wrapClassName, title = '', ...resetProps }
-  } = props
-
-  // let modalTitle = null
-  // if (!props.modalRender) {
-  //   modalTitle = <DragIniter title={title} uid={uid} />
-  // }
-  // const uid = createUid(10)
-  return (
-    <Fragment>
-      <Modal
-        title={title}
-        visible={visible}
-        {...resetProps}
-        getContainer={false}
-        // wrapClassName={`d_${uid} ${wrapClassName}`}
-      >
-        {children}
-      </Modal>
-    </Fragment>
-  )
-}
-
-export default connect(({ single }) => ({
-  visible: single.modal.visible,
-  config: single.modal.config
-}))(BasicModal)

src/components/Modal/src/components/CustomModal.tsx

@@ -1,34 +0,0 @@
-/* eslint-disable */
-/** 此处组件应用的是完全的modalRender */
-
-import { PropsWithChildren } from 'react'
-import { useDispatch } from 'umi'
-import { CloseOutlined } from '@ant-design/icons'
-// import DragIniter from './DragIniter'
-interface CustomModalProps {
-  title?: string | React.ReactNode
-  children?: ReactNode
-}
-const CustomModal = ({ title, children }) => {
-  const dispatch = useDispatch()
-  const closeModal = () => {
-    dispatch({
-      type: 'single/changeModal'
-    })
-  }
-  return (
-    <div className="ant-modal-content">
-      <div className="ant-modal-close" onClick={closeModal}>
-        <span className="ant-modal-close-x">
-          <CloseOutlined />
-        </span>
-      </div>
-      <div className="ant-modal-header">
-        <div className="max-w-[90%]">{title}</div>
-      </div>
-      {children}
-    </div>
-  )
-}
-
-export default CustomModal

src/components/Modal/src/components/DragIniter.tsx

@@ -1,22 +0,0 @@
-// /* eslint-disable */
-// import React, { PureComponent } from 'react'
-// import DragM from 'dragm'
-
-// export default class DragIniter extends PureComponent<{ uid: string; title?: string }> {
-//   updateTransform = transformStr => {
-//     this.modalDom.style.transform = transformStr
-//   }
-
-//   componentDidMount() {
-//     this.modalDom = document.getElementsByClassName(`d_${this.props.uid}`)[0]
-//   }
-
-//   render() {
-//     const { title } = this.props
-//     return (
-//       <DragM updateTransform={this.updateTransform}>
-//         <div className="py-16px px-24px w-full min-h-56px">{title}</div>
-//       </DragM>
-//     )
-//   }
-// }

src/components/Modal/src/components/ModalDragForm.tsx

@@ -1,26 +0,0 @@
-/* eslint-disable */
-import { ModalForm, ModalFormProps } from '@ant-design/pro-form'
-import React from 'react'
-// import { createUid } from '@/utils/utils'
-// import DragIniter from './DragIniter'
-
-const ModalDragForm: React.FC<ModalFormProps> = ({
-  title,
-  children,
-  modalProps,
-  ...resetProps
-}) => {
-  // const uid = createUid(10)
-  return (
-    <ModalForm
-      // title={<DragIniter title={title} uid={uid}></DragIniter>}
-      title={title}
-      // modalProps={{ ...modalProps, wrapClassName: `d_${uid}` }}
-      modalProps={{ ...modalProps }}
-      {...resetProps}>
-      {children}
-    </ModalForm>
-  )
-}
-
-export default ModalDragForm

src/components/Modal/src/index.ts

@@ -1,32 +0,0 @@
-import type { ModalProps } from 'antd'
-import type { DraggerProps } from 'antd/lib/upload'
-import { useDispatch } from 'dva'
-
-export function useModal() {
-  const dispath = useDispatch()
-  function setDrawerProps(options: DraggerProps) {
-    dispath({
-      type: 'single/setProps',
-      payload: { type: 'drawer', config: options }
-    })
-  }
-  function setModalProps(options: ModalProps) {
-    dispath({
-      type: 'single/setProps',
-      payload: { type: 'modal', config: options }
-    })
-  }
-  function toggleDrawer(show?: boolean) {
-    dispath({
-      type: 'single/toggleDrawer',
-      payload: show
-    })
-  }
-  function toggleModal(show?: boolean) {
-    dispath({
-      type: 'single/toggleModal',
-      payload: show
-    })
-  }
-  return { toggleDrawer, toggleModal, setDrawerProps, setModalProps }
-}

src/components/ModalStore/index.tsx

@@ -18,7 +18,8 @@ import LockDetail from '@/pages/Product/Lock/LockStore/components/LockDetail'
 import ConnectClient from '@/pages/Customer/Client/components/ConnectClient'
 import ReceiveLock from '@/pages/Product/Lock/LockStore/components/ReceiveLock'
 import CustomPerm from '@/pages/Customer/Company/components/CustomPerm'
-
+import MessageDrawer from '@/pages/Hr/Notification/components/MessageDrawer'
+import CloudDetail from '@/pages/Product/Cloud/components/Detail'
 const modalMap = {
   M_CLIENT_ADD: AddClient, // 添加客户弹窗
   M_COMPANY_ADD: AddCompany, // 添加单位弹窗
@@ -37,7 +38,9 @@ const modalMap = {
   M_ADD_RECORD: AddRecord, // 添加服务记录
   M_OPREATE_LOCK: OpreateLock, // 操作锁库弹窗
   M_RECEIVE_LOCK: ReceiveLock, // 接受锁库弹窗
-  M_CUSTOM_PERM: CustomPerm // 自定义数据权限弹窗
+  M_CUSTOM_PERM: CustomPerm, // 自定义数据权限弹窗
+  D_NOTICE_DETAIL: MessageDrawer, // 通知详情
+  D_CLOUD_DETAIL: CloudDetail // 云版详情
 }
 
 export const useModal = createModalHook<typeof modalMap>()

src/components/RightContent/NoticeIcon/index.tsx

@@ -2,13 +2,12 @@ import { useCallback, useEffect, useState } from 'react'
 import { Tag, message } from 'antd'
 import { groupBy } from 'lodash-es'
 import { useModel, history } from 'umi'
-import { useModal } from '@/components/Modal'
 import NoticeIcon from './NoticeIcon'
 import styles from './index.less'
 import dayjs from 'dayjs'
 import { queryNoticeList, updateNotice } from '@/services/login'
 import consts from '@/consts'
-import MessageDrawer from '@/pages/Hr/Notification/components/MessageDrawer'
+import { useModal } from '@/components/ModalStore'
 
 export type GlobalHeaderRightProps = {
   fetchingNotices?: boolean
@@ -44,7 +43,8 @@ const getNoticeData = notices => {
           color={color}
           style={{
             marginRight: 0
-          }}>
+          }}
+        >
           {newNotice.extra}
         </Tag>
       ) as any
@@ -75,7 +75,7 @@ const NoticeIconView = () => {
   const { initialState, setInitialState } = useModel('@@initialState')
   const { currentUser } = initialState || {}
   const [notices, setNotices] = useState([])
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const getNotices = useCallback(async () => {
     const { code = -1, data } = await queryNoticeList({ current: 1, pageSize: 50 })
     if (code === consts.RET_CODE.SUCCESS) {
@@ -107,16 +107,7 @@ const NoticeIconView = () => {
         currentUser: { ...currentUser, unreadCount: currentUser.unreadCount - 1 }
       })
     }
-    setDrawerProps({
-      zIndex: 1056,
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-      },
-      children: <MessageDrawer item={item} />
-    })
-    toggleDrawer()
+    dispatchModal('D_NOTICE_DETAIL', { item })
   }
 
   const clearReadState = async (title: string, key: string) => {
@@ -159,7 +150,8 @@ const NoticeIconView = () => {
       clearText="清空"
       viewMoreText="查看更多"
       onViewMore={() => history.push('/hr/notification')}
-      clearClose>
+      clearClose
+    >
       <NoticeIcon.Tab
         tabKey="notification"
         count={unreadMsg.notification}

src/pages/Customer/Business/components/BusinessDetail/TabList.jsx

@@ -6,47 +6,24 @@ import { useDispatch } from 'umi'
 import { Plus } from '@icon-park/react'
 import ProTable from '@ant-design/pro-table'
 import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord'
-import ConnectClient from '@/pages/Customer/Client/components/ConnectClient'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
-import { useModal } from '@/components/Modal'
-import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
+import { useModal } from '@/components/ModalStore'
 
 const ContanctTabList = ({ businessId, clientList, isOwner }) => {
-  const { toggleModal, setModalProps, toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const dispatch = useDispatch()
   const [state, setState] = useState({
     params: {},
     visible: false
   })
 
-  // 展示drawer
-  const showDrawer = id => {
-    toggleDrawer()
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh',
-        overflowY: 'hidden'
-      },
-      children: <ContactDetail dataId={id} />
-    })
-    toggleDrawer()
-  }
-
-  // const tRef = useRef()
   const columns = [
-    // {
-    //   dataIndex: 'index',
-    //   valueType: 'indexBorder',
-    //   width: 48
-    // },
     {
       title: '姓名',
       dataIndex: 'clientName',
       render: (clientName, record) => (
         <span
-          onClick={() => showDrawer(record.id)}
+          onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
           className="text-primary cursor-pointer hover:text-[#967bbd]"
         >
           {clientName}
@@ -88,22 +65,6 @@ const ContanctTabList = ({ businessId, clientList, isOwner }) => {
     })
   }
 
-  const showConnectClientModal = () => {
-    setModalProps({
-      zIndex: 1002,
-      width: '60vw',
-      modalRender: () => (
-        <ConnectClient
-          dataId={businessId}
-          onSelect={refreshClient}
-          preUrl={ChangeCompMap.BUSINESS.key}
-        />
-      ),
-      onCancel: () => toggleModal()
-    })
-    toggleModal(true)
-  }
-
   const { TabPane } = Tabs
   return (
     <div>
@@ -137,7 +98,13 @@ const ContanctTabList = ({ businessId, clientList, isOwner }) => {
               ghost
               size="small"
               className="mr-1"
-              onClick={() => showConnectClientModal()}
+              onClick={() =>
+                dispatchModal('M_CONNECT_CLIENT', {
+                  dataId: businessId,
+                  onSelect: refreshClient,
+                  preUrl: ChangeCompMap.BUSINESS.key
+                })
+              }
             >
               <Plus className="mr-1" /> 客户
             </Button>

src/pages/Customer/Client/components/AddClient/TelephoneFormItem.jsx

@@ -1,14 +1,13 @@
-import { useModal } from '@/components/Modal'
 import consts from '@/consts'
 import { queryClientWithTelephone } from '@/services/customer'
 import { useDebounceFn } from 'ahooks'
 import { Input, Alert, Popover } from 'antd'
-import ClientDetail from '../ClientDetail'
 import { useState } from 'react'
 import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
+import { useModal } from '@/components/ModalStore'
 
 const TelephoneFormItem = ({ value, onChange, validateFn }) => {
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const [state, setState] = useState({
     inputVal: value,
     visible: false,
@@ -54,19 +53,6 @@ const TelephoneFormItem = ({ value, onChange, validateFn }) => {
     triggerChange(val)
   }
 
-  const showClientDrawer = id => {
-    setDrawerProps({
-      zIndex: 1004,
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-      },
-      children: <ClientDetail dataId={id} />
-    })
-    toggleDrawer(true)
-  }
-
   const { visible, list, inputVal } = state
   return (
     <Popover
@@ -89,7 +75,7 @@ const TelephoneFormItem = ({ value, onChange, validateFn }) => {
               <p key={item.id}>
                 <span
                   className="text-primary cursor-pointer hover:text-hex-967bbd"
-                  onClick={() => showClientDrawer(item.id)}
+                  onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: item.id })}
                 >
                   {item.clientName}
                 </span>

src/pages/Customer/Company/components/AddCompany/CompanyFormItem.jsx

@@ -1,10 +1,9 @@
-import { useModal } from '@/components/Modal'
 import consts from '@/consts'
 import { queryCompany } from '@/services/customer'
 import { useDebounceFn } from 'ahooks'
 import { Input, Alert, Popover } from 'antd'
-import CompanyDetail from '../CompanyDetail'
 import { useState } from 'react'
+import { useModal } from '@/components/ModalStore'
 
 export const validateEnum = {
   Success: 'success',
@@ -13,8 +12,7 @@ export const validateEnum = {
   Validating: 'validating'
 }
 const CompanyFormItem = ({ value, onChange, validateFn }) => {
-  // const ref = useRef(null)
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const [state, setState] = useState({
     inputVal: value,
     visible: false,
@@ -59,19 +57,6 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
     triggerChange(val)
   }
 
-  const showCompanyDrawer = id => {
-    setDrawerProps({
-      zIndex: 1004,
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-      },
-      children: <CompanyDetail dataId={id} />
-    })
-    toggleDrawer(true)
-  }
-
   const { visible, list, inputVal } = state
   return (
     <Popover
@@ -94,7 +79,7 @@ const CompanyFormItem = ({ value, onChange, validateFn }) => {
               <p key={item.id}>
                 <span
                   className="text-primary cursor-pointer hover:text-hex-967bbd"
-                  onClick={() => showCompanyDrawer(item.id)}
+                  onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: item.id })}
                 >
                   {item.companyName}
                 </span>

src/pages/Hr/Employee/components/ChangeSupervisor/index.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 import { Switch, LinkInterrupt, LinkOne } from '@icon-park/react'
-import { useModal } from '@/components/Modal'
 import { Card, Tooltip } from 'antd'
 import consts from '@/basic/consts'
 import { useDispatch } from 'dva'
-import StaffModal from '@/pages/Hr/Employee/components/StaffModal'
 import styles from './index.less'
 import { apiChangeSupervisor } from '@/services/staff'
+import { useModal } from '@/components/ModalStore'
 
 export const ChangeCompMap = {
   STAFF: {
@@ -17,7 +16,7 @@ export const ChangeCompMap = {
 
 const ChangeSupervisor = props => {
   const dispatch = useDispatch()
-  const { toggleModal, setModalProps } = useModal()
+  const dispatchModal = useModal()
   const {
     dataSource: {
       staffId,
@@ -35,14 +34,11 @@ const ChangeSupervisor = props => {
     })
   }
   const handleConnectStaff = () => {
-    setModalProps({
-      width: '60vw',
-      modalRender: () => (
-        <StaffModal onSelect={refreshStaff} id={clientId} postUrl={actionPayload} />
-      ),
-      onCancel: () => toggleModal()
+    dispatchModal('M_CONNECT_CLIENT', {
+      onSelect: refreshStaff,
+      id: clientId,
+      postUrl: actionPayload
     })
-    toggleModal()
   }
   const notValueRender = (
     <div onClick={handleConnectStaff} className={styles.notCompanyContent}>
@@ -84,7 +80,8 @@ const ChangeSupervisor = props => {
             placement="right"
             title="更换上司"
             className="ml-5px"
-            onClick={handleConnectStaff}>
+            onClick={handleConnectStaff}
+          >
             <span className={styles.switchIcon}>
               <Switch />
             </span>

src/pages/Hr/Employee/components/RoleMenu/index.jsx

@@ -4,8 +4,7 @@ import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
 import { apiaddDepartment } from '@/services/hr'
 import { connect, useAccess } from 'umi'
-import { ProFormText } from '@ant-design/pro-form'
-import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
 
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
@@ -28,7 +27,6 @@ const RoleMenu = props => {
   const handleAddDepartment = async values => {
     const { code = -1 } = await apiaddDepartment({ ...values })
     if (code === consts.RET_CODE.SUCCESS) {
-      // message.success('新增成功')
       initData()
     }
   }
@@ -40,7 +38,6 @@ const RoleMenu = props => {
   }, [])
 
   const saveActiveId = id => {
-    // console.log(keys)
     if (onSelect) {
       onSelect(id)
     }
@@ -55,7 +52,7 @@ const RoleMenu = props => {
       <div className="p-4 pb-3 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
         <span className="text-[0.9375rem]">组织架构</span>
         {hasPerm && (
-          <ModalDragForm
+          <ModalForm
             title="创建部门"
             width="500px"
             trigger={
@@ -87,7 +84,7 @@ const RoleMenu = props => {
             name="parentId"
             label="上级部门"
           /> */}
-          </ModalDragForm>
+          </ModalForm>
         )}
       </div>
       <div className="py-4 pt-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>

src/pages/Hr/Notification/index.jsx

@@ -5,18 +5,14 @@ import { queryMessageList, sendMessage } from '@/services/staff'
 import AddMessage from './components/AddMessage'
 import consts from '@/consts'
 import { useRequest, useIntl, useAccess } from 'umi'
-import { useModal } from '@/components/Modal'
-import MessageDrawer from './components/MessageDrawer'
 import ws, { CmdType } from '@/utils/ws'
 import MarkDown from 'react-markdown'
-import { isMobile } from '@/utils/is'
+import { useModal } from '@/components/ModalStore'
 
 const Notification = () => {
   const intl = useIntl()
-  const { toggleDrawer, setDrawerProps } = useModal()
-  // const { sendMsg } = useWebSocketFn()
+  const dispatchModal = useModal()
   const { Paragraph } = Typography
-  const [ellipsis] = React.useState(true)
   const [state, setState] = useState({
     loading: false,
     list: [],
@@ -55,7 +51,6 @@ const Notification = () => {
     manual: true,
     onSuccess: result => {
       initData({ current: state.current })
-      // tRef.current?.reload()
       ws.sendMessage({
         cmd: CmdType.NoticeOrMessage,
         ...result
@@ -66,20 +61,6 @@ const Notification = () => {
     }
   })
 
-  // 展示drawer
-  const showMessageDrawer = item => {
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-        // overflowY: 'hidden'
-      },
-      children: <MessageDrawer item={item} />
-    })
-    toggleDrawer()
-  }
-
   const hasPerm = useAccess()?.validatePermByType('notification_add')
 
   return (
@@ -92,19 +73,20 @@ const Notification = () => {
         id="scrollableDiv"
         className="pr-4"
         style={{
-          height: `calc(100vh - ${isMobile() ? '108px' : '156px'} - 1.5rem)`,
+          height: `calc(100vh - 156px - 1.5rem)`,
           overflowY: 'auto'
-        }}>
+        }}
+      >
         <InfiniteScroll
           dataLength={state.total}
           next={loadMoreData}
           hasMore={state.hasMore}
           loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
           endMessage={<Divider plain>别再滚啦，已是尽头</Divider>}
-          scrollableTarget="scrollableDiv">
+          scrollableTarget="scrollableDiv"
+        >
           <List
             itemLayout="vertical"
-            // pagination={{ pageSize: 5 }}
             dataSource={state.list}
             renderItem={item => (
               <List.Item
@@ -113,13 +95,15 @@ const Notification = () => {
                   <span width={200} className="mt-1 text-hex-aaa">
                     {item.createTime}
                   </span>
-                }>
+                }
+              >
                 <List.Item.Meta
                   avatar={<Avatar src={item.avatar} />}
                   title={
                     <span
                       className="cursor-pointer text-primary"
-                      onClick={() => showMessageDrawer(item)}>
+                      onClick={() => dispatchModal('D_NOTICE_DETAIL', { item })}
+                    >
                       {item.title}
                     </span>
                   }
@@ -134,14 +118,7 @@ const Notification = () => {
                   }
                 />
 
-                <Paragraph
-                  ellipsis={
-                    ellipsis
-                      ? {
-                          rows: 4
-                        }
-                      : false
-                  }>
+                <Paragraph ellipsis={{ rows: 4 }}>
                   <MarkDown>{item.content}</MarkDown>
                 </Paragraph>
                 {/* <div className="mt-1 text-hex-aaa">{item.createTime}</div> */}

src/pages/Product/Cloud/index.jsx

@@ -5,9 +5,8 @@ import { dayjsFormat, generateSortField } from '@/utils/utils'
 import { queryRoadpricingList } from '@/services/product'
 import { Input, Tag, Tooltip } from 'antd'
 import consts from '@/consts'
-import { useModal } from '@/components/Modal'
 import { useLocation, useSelector, useDispatch } from 'umi'
-import Detail from '@/pages/Product/Cloud/components/Detail'
+import { useModal } from '@/components/ModalStore'
 
 export const roadpricingEnum = {
   CURING: 1, // 养护云
@@ -21,7 +20,7 @@ const Cloud = () => {
   const tRef = useRef()
   const columnStateType = pathname?.match(/\/([^/]*)$/)[1]?.toUpperCase()
   const dispatch = useDispatch()
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const { cloud } = useSelector(state => ({
     cloud: state.cloud,
     shouldUpdate: state.refresh.cloud
@@ -55,20 +54,6 @@ const Cloud = () => {
     }
   }, [])
 
-  // 展示DrawerClient
-  const showDrawerRoadpricing = id => {
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-        // overflowY: 'hidden'
-      },
-      children: <Detail dataId={id} projectType={roadpricingEnum[columnStateType]} />
-    })
-    toggleDrawer()
-  }
-
   const columns = [
     {
       title: '通行账号',
@@ -78,7 +63,12 @@ const Cloud = () => {
       width: 110,
       render: (text, record) => (
         <span
-          onClick={() => showDrawerRoadpricing(record.ssoId)}
+          onClick={() =>
+            dispatchModal('D_CLOUD_DETAIL', {
+              dataId: record.ssoId,
+              projectType: roadpricingEnum[columnStateType]
+            })
+          }
           className="text-primary cursor-pointer hover:text-[#967bbd]"
         >
           {text}