Merge branch 'master' of http://192.168.1.41:3000/outaozhen/cldV2react

src/components/Modal/src/BasicModal.jsx

@@ -1,16 +1,28 @@
+import { createUid } from '@/utils/utils'
 import { Modal } from 'antd'
 import { connect } from 'dva'
 import React, { Fragment } from 'react'
+import DragIniter from './components/DragIniter'
 
 const BasicModal = props => {
   const {
     visible,
-    config: { children, ...resetProps }
+    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 visible={visible} {...resetProps} getContainer={false}>
+      <Modal
+        title={modalTitle}
+        visible={visible}
+        {...resetProps}
+        getContainer={false}
+        wrapClassName={`d_${uid} ${wrapClassName}`}>
         {children}
       </Modal>
     </Fragment>

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

@@ -0,0 +1,38 @@
+/* eslint-disable */
+/** 此处组件应用的是完全的modalRender */
+
+import { createUid } from '@/utils/utils'
+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 uid = createUid(10)
+  const closeModal = () => {
+    dispatch({
+      type: 'single/changeModal'
+    })
+  }
+  return (
+    <div className={['ant-modal-content', `d_${uid}`].join(' ')}>
+      <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%]">
+          <DragIniter title={title} uid={uid} />
+        </div>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default CustomModal

src/components/DragModal/index.tsx

@@ -2,20 +2,20 @@
 import React, { PureComponent } from 'react'
 import DragM from 'dragm'
 
-export default class ModalDrag extends PureComponent<{ title?: string }> {
+export default class DragIniter extends PureComponent<{ uid: string; title?: string }> {
   updateTransform = transformStr => {
     this.modalDom.style.transform = transformStr
   }
 
   componentDidMount() {
-    this.modalDom = document.getElementsByClassName('ant-modal-content')[0]
+    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">{title}</div>
+        <div className="py-16px px-24px w-full min-h-56px">{title}</div>
       </DragM>
     )
   }

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

@@ -0,0 +1,24 @@
+/* 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>}
+      modalProps={{ ...modalProps, wrapClassName: `d_${uid}` }}
+      {...resetProps}>
+      {children}
+    </ModalForm>
+  )
+}
+
+export default ModalDragForm

src/pages/Customer/Business/components/AddBusiness.jsx

@@ -1,10 +1,10 @@
-import { ModalForm, ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form'
-import ModalDrag from '@/components/DragModal'
+import { ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form'
 import { Button, Row, Col, message } from 'antd'
 import { Plus } from '@icon-park/react'
 import React, { useRef } from 'react'
 import { connect } from 'umi'
 import { addBusiness } from '@/services/customer'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const AddBusiness = props => {
   const formRef = useRef(null)
@@ -14,7 +14,7 @@ const AddBusiness = props => {
     labelCol: { flex: '100px' }
   }
   return (
-    <ModalForm
+    <ModalDragForm
       {...layout}
       formRef={formRef}
       trigger={
@@ -23,7 +23,7 @@ const AddBusiness = props => {
           商机
         </Button>
       }
-      title={<ModalDrag title={'添加商机'} />}
+      title="添加商机"
       onFinish={async values => {
         try {
           await addBusiness(values)
@@ -67,7 +67,7 @@ const AddBusiness = props => {
         </Col>
       </Row>
       <ProFormText name="remark" label="备注" />
-    </ModalForm>
+    </ModalDragForm>
   )
 }
 

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

@@ -1,10 +1,10 @@
 import React, { useState, useRef } from 'react'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import { ProFormSelect, ProFormText } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
-import ModalDrag from '@/components/DragModal'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const AddClient = props => {
   const { onConfirm, buttonProps, dataId, dataType, btnTitle = '联系人', defaultValues } = props
@@ -16,10 +16,10 @@ const AddClient = props => {
   const [showDataItem, setShowDataItem] = useState(false)
 
   return (
-    <ModalForm
+    <ModalDragForm
       {...layout}
       formRef={formRef}
-      title={<ModalDrag title={'添加联系人'} />}
+      title="添加联系人"
       onVisibleChange={visible => {
         if (visible) {
           formRef.current?.setFieldsValue({ ...defaultValues })
@@ -100,7 +100,7 @@ const AddClient = props => {
         </Col>
       </Row>
       <ProFormText label="备注" name="remakrs" />
-    </ModalForm>
+    </ModalDragForm>
   )
 }
 

src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -1,10 +1,9 @@
 import React, { useRef, useState } from 'react'
 import { Form, Button, Input, Radio, DatePicker, Switch } from 'antd'
-import DragModal from '@/components/DragModal'
 import { dayjsFormat } from '@/utils/utils'
-import { ModalForm } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import dayjs from 'dayjs'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const AddRecord = props => {
   const formRef = useRef(null)
@@ -18,9 +17,9 @@ const AddRecord = props => {
     return current && current < dayjs().endOf('day')
   }
   return (
-    <ModalForm
+    <ModalDragForm
       layout="vertical"
-      title={<DragModal title="添加服务记录" />}
+      title="添加服务记录"
       formRef={formRef}
       trigger={
         <Button type="primary" ghost size="small" className="mr-1">
@@ -68,7 +67,7 @@ const AddRecord = props => {
           </Form.Item>
         </>
       ) : null}
-    </ModalForm>
+    </ModalDragForm>
   )
 }
 

src/pages/Customer/Client/components/ConnectClient/index.jsx

@@ -1,14 +1,14 @@
 import { Input, Button, Spin, message } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
-import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+import { SearchOutlined } from '@ant-design/icons'
 import { useDebounceFn } from 'ahooks'
 import { useDispatch } from 'dva'
 import { apiAddClient, apiChangeClient, queryClient } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import AddClient from '../AddClient'
-import DragModal from '@/components/DragModal'
+import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true }) => {
   const dispatch = useDispatch()
@@ -97,24 +97,15 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
   // const { run: listScroller } = useThrottleFn(handleListScroll)
 
   return (
-    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
-      <div className={styles.modalHeader}>
-        <DragModal
-          title={
-            <Input
-              prefix={<SearchOutlined />}
-              className={styles.inputSearch}
-              placeholder="输入联系人名称搜索"
-              onChange={handleInputChange}
-            />
-          }
+    <CustomModal
+      title={
+        <Input
+          prefix={<SearchOutlined />}
+          className={styles.inputSearch}
+          placeholder="输入联系人名称搜索"
+          onChange={handleInputChange}
         />
-        <div className="ant-modal-close">
-          <span className="ant-modal-close-x">
-            <CloseOutlined onClick={closeModal} />
-          </span>
-        </div>
-      </div>
+      }>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.laoding}>
           {state.client.map(item => (
@@ -143,7 +134,7 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
           />
         </div>
       ) : null}
-    </div>
+    </CustomModal>
   )
 }
 

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

@@ -1,15 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react'
-import DragModal from '@/components/DragModal'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
+import { ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import { connect } from 'dva'
 import { ChangeCompMap } from '../ChangeCompany'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const AddCompanyModal = ({ dataId, dataType, onConfirm, dispatch, natures }) => {
   const formRef = useRef()
-  // const [modalVisible, setModalVisible] = useState(false)
   const layout = {
     layout: 'horizontal',
     labelCol: { flex: '100px' }
@@ -24,12 +23,10 @@ const AddCompanyModal = ({ dataId, dataType, onConfirm, dispatch, natures }) =>
   }, [])
   const [showDataItem, setShowDataItem] = useState(false)
   return (
-    <ModalForm
+    <ModalDragForm
       formRef={formRef}
-      title={<DragModal title="添加新客户" />}
+      title="添加新客户"
       {...layout}
-      // visible={modalVisible}
-      // onVisibleChange={setModalVisible}
       submitter={{
         render: ({ submit }, defaultDoms) => [
           ...defaultDoms,
@@ -98,7 +95,7 @@ const AddCompanyModal = ({ dataId, dataType, onConfirm, dispatch, natures }) =>
           <ProFormText name="remarks" label="备注" placeholder="" />
         </Col>
       </Row>
-    </ModalForm>
+    </ModalDragForm>
   )
 }
 

src/pages/Customer/Company/components/ConnectCompany/index.jsx

@@ -1,7 +1,7 @@
 import { Input, Button, Spin, message } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
-import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+import { SearchOutlined } from '@ant-design/icons'
 import { useDebounceFn } from 'ahooks'
 import { useDispatch } from 'umi'
 import AddCompany from '@/pages/Customer/Company/components/AddCompany'
@@ -9,7 +9,7 @@ import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import { apiChangeCustomer } from '@/services/customer'
-import ModalDrag from '@/components/DragModal'
+import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
   const dispatch = useDispatch()
@@ -97,25 +97,15 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
   // const { run: listScroller } = useThrottleFn(handleListScroll)
 
   return (
-    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
-      <div className={styles.modalHeader}>
-        <ModalDrag
-          title={
-            <Input
-              prefix={<SearchOutlined />}
-              className={styles.inputSearch}
-              placeholder="输入客户名称搜索"
-              onChange={handleInputChange}
-            />
-          }
+    <CustomModal
+      title={
+        <Input
+          prefix={<SearchOutlined />}
+          className={styles.inputSearch}
+          placeholder="输入客户名称搜索"
+          onChange={handleInputChange}
         />
-
-        <div className="ant-modal-close">
-          <span className="ant-modal-close-x">
-            <CloseOutlined onClick={closeModal} />
-          </span>
-        </div>
-      </div>
+      }>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.laoding}>
           {state.customer.map(item => (
@@ -134,7 +124,7 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
       <div className={styles.modalFooter}>
         <AddCompany onConfirm={addConfirm} dataId={dataId} dataType={preUrl} />
       </div>
-    </div>
+    </CustomModal>
   )
 }
 

src/pages/Customer/Company/components/ConnectCompany/index.less

@@ -1,41 +1,26 @@
-.modalContainer {
-  width: 60vw;
-  .modalHeader {
-    .inputSearch {
-      width: 90%;
-    }
-    .closeIcon {
-      position: absolute;
-      top: 5px;
-      right: 8px;
-      font-size: 16px;
-    }
-  }
-  .modalContent {
-    height: 63vh;
-    max-height: 63vh;
-    padding: 1.5rem;
-    overflow-y: auto;
-    border-top: 1px solid #dee2e6;
-    border-bottom: 1px solid #dee2e6;
-    .card {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem;
-      word-wrap: break-word;
-      background-color: #ffffff;
-      background-clip: border-box;
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      border-radius: 4px;
-      box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
-      &:not(:last-of-type) {
-        margin-bottom: 1rem;
-      }
+.modalContent {
+  height: 63vh;
+  max-height: 63vh;
+  padding: 1.5rem;
+  overflow-y: auto;
+  border-bottom: 1px solid #dee2e6;
+  .card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    word-wrap: break-word;
+    background-color: #ffffff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
     }
   }
+}
 
-  .modalFooter {
-    padding: 1rem;
-  }
+.modalFooter {
+  padding: 1rem;
 }

src/pages/Customer/Company/components/CustomPerm.jsx

@@ -4,7 +4,7 @@ import { Button, Transfer, Tree } from 'antd'
 import React, { useMemo, useState, useEffect } from 'react'
 import styles from './ConnectCompany/index.less'
 import { CloseOutlined, DeleteOutlined } from '@ant-design/icons'
-import ModalDrag from '@/components/DragModal'
+import ModalDrag from '@/components/Modal/src/components/DragIniter'
 import consts from '@/basic/consts'
 import { useDispatch } from 'umi'
 import { queryDepartmentStaffList } from '@/services/department'

src/pages/Customer/Test/index.jsx

@@ -1,10 +1,19 @@
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
+import { Button } from 'antd'
 import React from 'react'
-import CustomPerm from '../Company/components/CustomPerm'
 
 export default function Index() {
   return (
     <div>
-      <CustomPerm />
+      <ModalDragForm
+        title="aaaaa"
+        trigger={
+          <Button type="primary" className="mr-1">
+            1111111
+          </Button>
+        }>
+        <div>111</div>
+      </ModalDragForm>
     </div>
   )
 }

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

@@ -1,7 +1,8 @@
-import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import { ProFormText } from '@ant-design/pro-form'
 import { Plus } from '@ant-design/icons'
 import { Button, Row, Col } from 'antd'
 import React from 'react'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const AddStaff = props => {
   const { onConfirm } = props
@@ -10,7 +11,7 @@ const AddStaff = props => {
     labelCol: { flex: '100px' }
   }
   return (
-    <ModalForm
+    <ModalDragForm
       {...layout}
       title="添加员工"
       trigger={
@@ -37,7 +38,7 @@ const AddStaff = props => {
           />
         </Col>
       </Row>
-    </ModalForm>
+    </ModalDragForm>
   )
 }
 

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

@@ -4,7 +4,8 @@ import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
 import { apiaddDepartment } from '@/services/department'
 import { connect } from 'dva'
-import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import { ProFormText } from '@ant-design/pro-form'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 
 const RoleMenu = props => {
   const { dispatch, departments = [], onSelect } = props
@@ -51,7 +52,7 @@ const RoleMenu = props => {
     <div className="h-full w-max-234px rounded-4px">
       <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>
-        <ModalForm
+        <ModalDragForm
           title="创建部门"
           width="500px"
           trigger={
@@ -82,7 +83,7 @@ const RoleMenu = props => {
             name="parentId"
             label="上级部门"
           /> */}
-        </ModalForm>
+        </ModalDragForm>
       </div>
       <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
         {departments.length ? (

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

@@ -3,10 +3,10 @@ import { Input, Button, Spin } from 'antd'
 import consts from '@/basic/consts'
 import { useDispatch } from 'dva'
 import { useDebounceFn } from 'ahooks'
-import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+import { SearchOutlined } from '@ant-design/icons'
 import { queryStaff, apiChangeSupervisor } from '@/services/staff'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
-import DragModal from '@/components/DragModal'
+import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const StaffModal = ({ id, onSelect, postUrl }) => {
   const scrollRef = useRef()
@@ -75,25 +75,15 @@ const StaffModal = ({ id, onSelect, postUrl }) => {
     }
   }
   return (
-    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
-      <div className={styles.modalHeader}>
-        <DragModal
-          title={
-            <Input
-              prefix={<SearchOutlined />}
-              className={styles.inputSearch}
-              placeholder="输入员工名称搜索"
-              onChange={handleInputChange}
-            />
-          }
+    <CustomModal
+      title={
+        <Input
+          prefix={<SearchOutlined />}
+          className={styles.inputSearch}
+          placeholder="输入员工名称搜索"
+          onChange={handleInputChange}
         />
-
-        <div className="ant-modal-close">
-          <span className="ant-modal-close-x">
-            <CloseOutlined onClick={closeModal} />
-          </span>
-        </div>
-      </div>
+      }>
       <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.loading}>
           {state.list.map(item => (
@@ -111,7 +101,7 @@ const StaffModal = ({ id, onSelect, postUrl }) => {
           ))}
         </Spin>
       </div>
-    </div>
+    </CustomModal>
   )
 }
 

src/pages/Product/Lock/Lockstore/components/LocksDetail/LockModal.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import DragModal from '@/components/DragModal'
+import DragModal from '@/components/Modal/src/components/DragIniter'
 import { Modal, Form, Select, Input, Spin, Button, Radio } from 'antd'
 import styles from './index.less'
 import { SearchOutlined } from '@ant-design/icons'

src/pages/Product/Lock/Lockstore/components/ReceiveLock.jsx

@@ -1,22 +1,14 @@
 import { Button, message } from 'antd'
-import { useDispatch } from 'umi'
 import React, { useRef } from 'react'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
-import { CloseOutlined } from '@ant-design/icons'
 import consts from '@/basic/consts'
 import { apiReceiveOldLock, queryOldLockList } from '@/services/lock'
 import { ProductLabel } from '../index'
 import ProTable from '@ant-design/pro-table'
-import DragModal from '@/components/DragModal'
+import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const ReceiveLock = () => {
-  const dispatch = useDispatch()
   const tRef = useRef(null)
-  const closeModal = () => {
-    dispatch({
-      type: 'single/changeModal'
-    })
-  }
 
   const receiveLongle = async (name, id, departmentIsNull) => {
     const { code = -1 } = await apiReceiveOldLock(departmentIsNull, { id })
@@ -59,15 +51,7 @@ const ReceiveLock = () => {
   ]
 
   return (
-    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
-      <div className={styles.modalHeader}>
-        <DragModal title="以下锁为系统升级前未接收的锁，请及时接收；新系统生成的锁，将在列表中按“本部门”展示。" />
-        <div className="ant-modal-close">
-          <span className="ant-modal-close-x">
-            <CloseOutlined onClick={closeModal} />
-          </span>
-        </div>
-      </div>
+    <CustomModal title="以下锁为系统升级前未接收的锁，请及时接收；新系统生成的锁，将在列表中按“本部门”展示。">
       <div className={styles.modalContent}>
         <ProTable
           columns={columns}
@@ -86,7 +70,7 @@ const ReceiveLock = () => {
           }}
         />
       </div>
-    </div>
+    </CustomModal>
   )
 }
 

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

@@ -4,8 +4,8 @@ import consts from '@/consts'
 import { useDispatch, connect } from 'umi'
 import ProTable from '@ant-design/pro-table'
 import { queryReminderList } from '@/services/dashboard'
-import { CloseOutlined } from '@ant-design/icons'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
+import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const ReminderList = props => {
   const dispatch = useDispatch()
@@ -141,12 +141,7 @@ const ReminderList = props => {
   }
 
   return (
-    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
-      {/* <div className={styles.modalHeader}>
-        <span className={styles.closeIcon}>
-          <CloseOutlined onClick={closeModal} />
-        </span>
-      </div> */}
+    <CustomModal>
       <div className="mx-4">
         <ProTable
           size="small"
@@ -172,7 +167,7 @@ const ReminderList = props => {
           </Button>
         </div>
       </div>
-    </div>
+    </CustomModal>
   )
 }
 

src/pages/workbench/Dashboard/consts.js

@@ -52,7 +52,9 @@ export const cyclicalOp = [
 ]
 
 export const cardTypeMap = {
-  CLIENT: 0, // 联系人
+  CLIENT: {
+    key: 'client'
+  }, // 联系人
   COMPANY: 1, // 客户
   BUSINESS: 2, // 商机
   SERVICE: 3 // 服务记录

src/pages/workbench/Dashboard/index.jsx

@@ -34,7 +34,7 @@ const Dashboard = () => {
   // 展示服务弹窗详情
   const handleReminderList = (dataType, reminderCyclical) => {
     setModalProps({
-      width: '90vw',
+      width: '50vw',
       modalRender: () => <ReminderList dataType={dataType} reminderCyclical={reminderCyclical} />,
       onCancel: () => toggleModal()
     })

src/utils/utils.js

@@ -49,3 +49,7 @@ export const refactorSortField = sort => {
   // eslint-disable-next-line consistent-return
   return {}
 }
+
+// 可控长度的随机数拼接时间戳成产唯一id
+export const createUid = length =>
+  Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)