feat: 111

package.json

@@ -57,7 +57,7 @@
     "@icon-park/react": "^1.3.3",
     "@umijs/route-utils": "^1.0.33",
     "ahooks": "^2.10.0",
-    "antd": "4.18.2",
+    "antd": "4.18.5",
     "antd-img-crop": "^3.16.0",
     "classnames": "^2.2.6",
     "crypto-js": "^4.0.0",

src/components/ModalStore/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createModalHook, ModalStore } from './src'
-import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
+import ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
 import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
 import ConnectCompany from '@/pages/Customer/Company/components/ConnectCompany'
 import AddClient from '@/pages/Customer/Client/components/AddClient'
@@ -16,12 +16,14 @@ import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord
 import OpreateLock from '@/pages/Product/Lock/LockStore/components/LockDetail/OpreateLock'
 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'
 
 const modalMap = {
   M_CLIENT_ADD: AddClient, // 添加客户弹窗
   M_COMPANY_ADD: AddCompany, // 添加单位弹窗
   M_BUSINESS_ADD: AddBusiness, // 添加商机弹窗
-  D_CLIENT_DETAIL: ContactDetail, // 客户详情抽屉
+  D_CLIENT_DETAIL: ClientDetail, // 客户详情抽屉
   D_COMPANY_DETAIL: CompanyDetail, // 单位详情抽屉
   D_BUSINESS_DETAIL: BusinessDetail, // 商机详情抽屉
   M_CONNECT_CLIENT: ConnectClient, // 关联客户弹窗
@@ -33,7 +35,9 @@ const modalMap = {
   D_LOCK_DETAIL: LockDetail, // 锁库详情抽屉
   D_SOFTWARE_DETAIL: SoftwareDetail, // 软件锁详情抽屉
   M_ADD_RECORD: AddRecord, // 添加服务记录
-  M_OPREATE_LOCK: OpreateLock // 操作锁库弹窗
+  M_OPREATE_LOCK: OpreateLock, // 操作锁库弹窗
+  M_RECEIVE_LOCK: ReceiveLock, // 接受锁库弹窗
+  M_CUSTOM_PERM: CustomPerm // 自定义数据权限弹窗
 }
 
 export const useModal = createModalHook<typeof modalMap>()

src/components/ModalStore/src/CreateProvider.tsx

@@ -1,6 +1,6 @@
+import { message } from 'antd'
 import React from 'react'
 import { ModalContext } from './context'
-
 export interface ModalFullConfig<T = any> {
   destroyOnClose?: boolean | string
   visiblePropName?: string
@@ -36,11 +36,12 @@ class ModalStore extends React.Component<ModalStoreProps, ModalStoreState> {
   // 获取modal的config
   private getModalConfig(key: string) {
     const { modalMap = {}, visiblePropName = 'visible' } = this.props
-    let config = modalMap[key]
+    const componentKey = key.split('@')?.[0]
+    let config = modalMap[componentKey]
     if (typeof config === 'function') config = { component: config }
     let onClosePropName = 'onCancel'
     let destroyOnClose = 'afterClose'
-    if (key.startsWith('D')) {
+    if (componentKey.startsWith('D')) {
       onClosePropName = 'onClose'
       destroyOnClose = 'afterVisibleChange'
     }
@@ -79,11 +80,13 @@ class ModalStore extends React.Component<ModalStoreProps, ModalStoreState> {
   }
 
   private push = (key: string, state: any) => {
+    // eslint-disable-next-line no-param-reassign
+    key = state?.dataId ? `${key}@${state?.dataId}` : key
     const { visiblePropName, onClosePropName, destroyOnClose } = this.getModalConfig(key)
 
     this.setModalState(prevModals => {
       const defaultProps: any = {
-        [visiblePropName]: true,
+        [visiblePropName]: key.startsWith('D') ? false : true,
         [onClosePropName]: this.getCloseFunction(key, state?.[onClosePropName])
       }
 
@@ -95,14 +98,40 @@ class ModalStore extends React.Component<ModalStoreProps, ModalStoreState> {
             ? (visible: boolean) => !visible && this.getDestroyFunction(key)()
             : this.getDestroyFunction(key)
       }
-      const newModal = { ...state, ...defaultProps, key }
+
+      const newModal = {
+        ...state,
+        ...defaultProps,
+        key
+      }
       const nextModals = prevModals.slice()
+
       const index = nextModals.findIndex(item => item.key === key)
-      if (index !== -1) nextModals.splice(index, 1)
+
+      if (index !== -1) {
+        if (key.startsWith('D')) {
+          message.warning('当前窗口正在运行中，请勿重复打开')
+          return prevModals
+        }
+        nextModals.splice(index, 1)
+      }
       nextModals.push(newModal)
 
       return nextModals
     })
+    if (key.startsWith('D')) {
+      // 利用事件循环，先让dom元素渲染出来再使其展示动画(否则可能导致抽屉无动画直接出现)
+      setTimeout(() => {
+        this.setModalState(prevModals =>
+          prevModals.map(item => {
+            if (item.key === key) {
+              return { ...item, visible: true }
+            }
+            return item
+          })
+        )
+      }, 0)
+    }
   }
 
   private renderModal = (item: ModalItem) => {

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

@@ -9,18 +9,17 @@ import { connect } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
-const ContactDetail = props => {
+const ClientDetail = props => {
   const {
     refresh,
     visible,
-    onClose,
     dispatch,
     updateKey = 'client',
     dataId = '',
     orderIds = [],
     ...resetDrawerProps
   } = props
-  const shouldUpdate = refresh[updateKey] || false
+  const shouldUpdate = refresh?.[updateKey] || false
   const [state, setState] = useState({
     loading: false,
     client: {},
@@ -57,7 +56,7 @@ const ContactDetail = props => {
   }, [visible])
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} onClose={onClose} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>
@@ -122,4 +121,4 @@ const ContactDetail = props => {
 
 export default connect(({ refresh }) => ({
   refresh
-}))(ContactDetail)
+}))(ClientDetail)

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

@@ -5,7 +5,7 @@ import { apiCompanyDetail } from '@/services/customer'
 import CompanyForm from './Form'
 import CompanyLowerList from './LowerList'
 import CompanyTabList from './TabList'
-import { useStore } from 'umi'
+import { connect } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
@@ -16,9 +16,10 @@ const CompanyDetail = props => {
     updateKey = 'company',
     dataId = '',
     orderIds = [],
+    refresh,
     ...resetDrawerProps
   } = props
-  const { [updateKey]: shouldUpdate = false } = useStore()?.getState()?.refresh
+  const shouldUpdate = refresh?.[updateKey] || false
   const [state, setState] = useState({
     loading: false,
     customer: {},
@@ -121,4 +122,6 @@ const CompanyDetail = props => {
   )
 }
 
-export default CompanyDetail
+export default connect(({ refresh }) => ({
+  refresh
+}))(CompanyDetail)

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

@@ -3,11 +3,9 @@
 }
 
 .modalContent {
-  height: 63vh;
   max-height: 63vh;
-  padding: 1.5rem;
+  padding: 0;
   overflow-y: auto;
-  border-bottom: 1px solid #dee2e6;
   :global(.ant-transfer-operation > .ant-btn) {
     height: 20rem;
     padding: 0 5px;

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

@@ -1,15 +1,11 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable consistent-return */
-import { Button, message, Transfer, Tree } from 'antd'
+import { Button, message, Modal, Transfer, Tree } from 'antd'
 import React, { useMemo, useState, useEffect } from 'react'
 import styles from './ConnectCompany/index.less'
 import { DeleteOutlined } from '@ant-design/icons'
 import consts from '@/basic/consts'
-import { useDispatch } from 'umi'
 import { queryDepartmentStaffList } from '@/services/hr'
 import { useWindowSizeFn } from '@/hooks/event/useWindomSizeFn'
 import { isEmpty, isNull, isNullOrUnDef } from '@/utils/is'
-import CustomModal from '@/components/Modal/src/components/CustomModal'
 
 const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey)
 
@@ -41,7 +37,7 @@ const generateTree = (treeNodes = [], checkedKeys = []) =>
     return node
   })
 
-const CustomPerm = ({ onConfirm, defaultValues = [] }) => {
+const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProps }) => {
   const [state, setState] = useState({
     dataSource: [],
     leftTargetId: null,
@@ -89,12 +85,6 @@ const CustomPerm = ({ onConfirm, defaultValues = [] }) => {
     const height = calcTreeHeight()
     setState({ ...state, height })
   })
-  const dispatch = useDispatch()
-  const closeModal = () => {
-    dispatch({
-      type: 'single/changeModal'
-    })
-  }
 
   const handleOnSearch = (direction, value) => {
     const targetNode = state.transferDataSource.find(item => item.title.indexOf(value) > -1)
@@ -201,7 +191,34 @@ const CustomPerm = ({ onConfirm, defaultValues = [] }) => {
     return []
   }, [state.leftTargetId, state.treeKeys.length, state.targetKeys.length])
   return (
-    <CustomModal title="自定义展示数据">
+    <Modal
+      {...resetModalProps}
+      onCancel={onCancel}
+      width="60vw"
+      title="自定义展示数据"
+      footer={
+        <>
+          <Button className="mr-4" onClick={onCancel}>
+            取消
+          </Button>
+
+          <Button
+            type="primary"
+            onClick={() => {
+              if (!state.targetKeys.length) {
+                return message.warning('目标栏尚未有员工，操作无效')
+              }
+              if (onConfirm) {
+                onConfirm({ staffIds: state.targetKeys, dataPermission: 'custom' })
+              }
+              onCancel()
+            }}
+          >
+            确定
+          </Button>
+        </>
+      }
+    >
       <div className={styles.modalContent}>
         <Transfer
           showSearch
@@ -338,27 +355,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [] }) => {
           }}
         </Transfer>
       </div>
-      <div className={[styles.modalFooter, 'text-right'].join(' ')}>
-        <Button className="mr-4" onClick={closeModal}>
-          取消
-        </Button>
-
-        <Button
-          type="primary"
-          onClick={() => {
-            if (!state.targetKeys.length) {
-              return message.warning('目标栏尚未有员工，操作无效')
-            }
-            if (onConfirm) {
-              onConfirm({ staffIds: state.targetKeys, dataPermission: 'custom' })
-            }
-            closeModal()
-          }}
-        >
-          确定
-        </Button>
-      </div>
-    </CustomModal>
+    </Modal>
   )
 }
 

src/pages/Customer/Company/components/PermSelect.tsx

@@ -1,13 +1,12 @@
-import { useModal } from '@/components/Modal'
 import { useModel } from 'umi'
 import { Button, Dropdown, Menu } from 'antd'
-import CustomPerm from './CustomPerm'
 import { getPermAuthCache, setAuthCache } from '@/utils/auth'
 import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'
 import type { SelectProps } from 'antd'
 import type { MainMenuKeyEnum } from '@/utils/cache/cacheEnum'
 import { DownOutlined } from '@ant-design/icons'
 import { useState } from 'react'
+import { useModal } from '@/components/ModalStore'
 
 export const PermDataTypeEunm = {
   CUSTOMER: 'customer',
@@ -21,8 +20,8 @@ interface PermSelectProps extends SelectProps {
 }
 
 const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm }) => {
+  const dispatchModal = useModal()
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
-  const { toggleModal, setModalProps } = useModal()
   const options = [...(permData[dataType] || [])]
   const [defaultValue, defaultStaffIds, permAuthCache] = getPermAuthCache(dataType)
 
@@ -34,21 +33,14 @@ const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm }) => {
 
   const handleOnChange = e => {
     if (e === 'custom') {
-      setModalProps({
-        width: '60vw',
-        modalRender: () => (
-          <CustomPerm
-            defaultValues={state.staffIds || []}
-            onConfirm={({ staffIds, dataPermission }) => {
-              setState({ ...state, staffIds, currKey: e })
-              onConfirm({ staffIds, dataPermission })
-              setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: staffIds })
-            }}
-          />
-        ),
-        onCancel: () => toggleModal()
+      dispatchModal('M_CUSTOM_PERM', {
+        defaultValues: state.staffIds || [],
+        onConfirm: ({ staffIds, dataPermission }) => {
+          setState({ ...state, staffIds, currKey: e })
+          onConfirm({ staffIds, dataPermission })
+          setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: staffIds })
+        }
       })
-      toggleModal()
 
       return
     }

src/pages/Hr/Employee/index.jsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react'
 import consts from '@/consts'
 import { Button, Popconfirm, message } from 'antd'
-import { useModal } from '@/components/Modal'
 import RoleMenu from '@/pages/Hr/Employee/components/RoleMenu'
 import { queryStaff } from '@/services/staff'
-import EmployeeDetail from '@/pages/Hr/Employee/components/EmployeeDetail'
 import { delDepartment } from '@/services/hr'
 import { connect, useAccess } from 'umi'
 import BasicTable from '@/components/Table'
+import { useModal } from '@/components/ModalStore'
 
 const Employee = props => {
   const { dispatch } = props
+  const dispatchModal = useModal()
   const [state, setState] = useState({
     params: { id: '0' }
   })
@@ -19,20 +19,7 @@ const Employee = props => {
       type: 'staff/fetchDepartments'
     })
   }
-  const { toggleDrawer, setDrawerProps } = useModal()
-  // 展示员工详情
-  const showDrawer = id => {
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh',
-        overflowY: 'hidden'
-      },
-      children: <EmployeeDetail dataId={id} />
-    })
-    toggleDrawer()
-  }
+
   const columns = [
     {
       title: '工号',
@@ -47,7 +34,7 @@ const Employee = props => {
       width: 50,
       render: (username, record) => (
         <span
-          onClick={() => showDrawer(record.id)}
+          onClick={() => dispatchModal('D_EMPLOYEE_DETAIL', { dataId: record.id })}
           className="text-primary cursor-pointer hover:text-[#967bbd]"
         >
           {username}

src/pages/Product/Cloud/components/Detail/index.jsx

@@ -1,17 +1,16 @@
 import React, { useState, useEffect } from 'react'
-import { Row, Col, Button, Tooltip, Spin, Modal } from 'antd'
+import { Row, Col, Button, Tooltip, Spin, Modal, Drawer } from 'antd'
 import { LinkOne, LinkInterrupt } from '@icon-park/react'
 import { connect } from 'umi'
-import { useModal } from '@/components/Modal'
 import consts from '@/consts'
 import Form from './Form'
 import ClientDetail from '@/pages/Customer/Client/components/ClientDetail/Form'
 import LowerList from './LowerList'
 import TabList from './TabList'
-import ConnectClient from '@/pages/Customer/Client/components/ConnectClient'
 import { apiRoadpricingDetail, apiRoadPricingUnLinkClient } from '@/services/product'
+import { useModal } from '@/components/ModalStore'
 
-const Detail = props => {
+const CloudDetail = props => {
   const {
     dispatch,
     updateKey = 'cloud',
@@ -19,10 +18,11 @@ const Detail = props => {
     visible,
     dataId = '',
     projectType,
-    filterTag = true
+    filterTag = true,
+    ...resetDrawerProps
   } = props
-  const { toggleModal, setModalProps } = useModal()
-  const shouldUpdate = refresh[updateKey] || false
+  const dispatchModal = useModal()
+  const shouldUpdate = refresh?.[updateKey] || false
   const refreshClient = () => {
     dispatch({
       type: 'refresh/commitAction',
@@ -54,21 +54,13 @@ const Detail = props => {
     }
   }
   const handleConnectClient = () => {
-    setModalProps({
-      zIndex: 1200,
-      width: '60vw',
-      modalRender: () => (
-        <ConnectClient
-          onSelect={refreshClient}
-          dataId={state.cloudUser.ssoId}
-          preUrl="RoadPricing"
-          showFooter={false}
-          otherParams={{ projectType }}
-        />
-      ),
-      onCancel: () => toggleModal()
+    dispatchModal('M_CONNECT_CLIENT', {
+      onSelect: refreshClient,
+      dataId: state.cloudUser.ssoId,
+      preUrl: 'RoadPricing',
+      showFooter: false,
+      otherParams: { projectType }
     })
-    toggleModal(true)
   }
   // 移除cld客户
   const pricingUnLinkClient = clientId => {
@@ -97,72 +89,70 @@ const Detail = props => {
   useEffect(() => {
     visible && initData(dataId)
   }, [visible])
+
   return (
-    <Spin spinning={state.loading}>
-      <div className="sheet-box">
-        <Row>
-          <Col
-            span={9}
-            // sm={{ span: 24 }}
-            // md={{ span: 24 }}
-            // lg={{ span: 9 }}
-            // xl={{ span: 9 }}
-            className="sheet-box-left">
-            <div className="sheet-left-panel pr-4">
-              <Form cloudUser={state.cloudUser} updateKey={updateKey} projectType={projectType} />
-              {state.cloudUser.cld?.clientId ? (
-                <>
-                  <div className="mt-4">
-                    <ClientDetail client={state.client} filterTag={filterTag} />
-                  </div>
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
+      <Spin spinning={state.loading}>
+        <div className="sheet-box">
+          <Row>
+            <Col span={9} className="sheet-box-left">
+              <div className="sheet-left-panel pr-4">
+                <Form cloudUser={state.cloudUser} updateKey={updateKey} projectType={projectType} />
+                {state.cloudUser.cld?.clientId ? (
+                  <>
+                    <div className="mt-4">
+                      <ClientDetail client={state.client} filterTag={filterTag} />
+                    </div>
+                    <div className="text-center mt-6">
+                      <Tooltip placement="right" title="移除CLD客户">
+                        <Button
+                          type="primary"
+                          ghost
+                          size="small"
+                          onClick={() => {
+                            pricingUnLinkClient(state.cloudUser.cld?.clientId)
+                          }}
+                        >
+                          <LinkInterrupt size="14" />
+                          <span className="ml-5px">移除CLD客户</span>
+                        </Button>
+                      </Tooltip>
+                    </div>
+                  </>
+                ) : (
                   <div className="text-center mt-6">
-                    <Tooltip placement="right" title="移除CLD客户">
-                      <Button
-                        type="primary"
-                        ghost
-                        size="small"
-                        onClick={() => {
-                          pricingUnLinkClient(state.cloudUser.cld?.clientId)
-                        }}>
-                        <LinkInterrupt size="14" />
-                        <span className="ml-5px">移除CLD客户</span>
-                      </Button>
-                    </Tooltip>
+                    <Button type="primary" ghost size="small" onClick={handleConnectClient}>
+                      <LinkOne size="14" />
+                      <span className="ml-5px">关联CLD客户</span>
+                    </Button>
                   </div>
-                </>
-              ) : (
-                <div className="text-center mt-6">
-                  <Button type="primary" ghost size="small" onClick={handleConnectClient}>
-                    <LinkOne size="14" />
-                    <span className="ml-5px">关联CLD客户</span>
-                  </Button>
-                </div>
-              )}
-            </div>
-          </Col>
-          <Col
-            span={15}
-            // sm={{ span: 24 }}
-            // md={{ span: 24 }}
-            // lg={{ span: 15 }}
-            // xl={{ span: 15 }}
-            flex={{ flexDirection: 'column' }}
-            className="sheet-box-right">
-            <TabList
-              compilationList={state.compilationList}
-              cloudUser={state.cloudUser}
-              projectType={projectType}
-              ssoId={state.cloudUser.ssoId}
-            />
-            <LowerList log={state.log} serviceLog={state.serviceLog} />
-          </Col>
-        </Row>
-      </div>
-    </Spin>
+                )}
+              </div>
+            </Col>
+            <Col
+              span={15}
+              // sm={{ span: 24 }}
+              // md={{ span: 24 }}
+              // lg={{ span: 15 }}
+              // xl={{ span: 15 }}
+              flex={{ flexDirection: 'column' }}
+              className="sheet-box-right"
+            >
+              <TabList
+                compilationList={state.compilationList}
+                cloudUser={state.cloudUser}
+                projectType={projectType}
+                ssoId={state.cloudUser.ssoId}
+              />
+              <LowerList log={state.log} serviceLog={state.serviceLog} />
+            </Col>
+          </Row>
+        </div>
+      </Spin>
+    </Drawer>
   )
 }
 
-export default connect(({ refresh, single }) => ({
-  refresh,
-  visible: single.drawer.visible
-}))(Detail)
+export default connect(({ refresh }) => ({
+  refresh
+}))(CloudDetail)

src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx

@@ -12,7 +12,6 @@ import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 const LockDetail = props => {
   const {
     visible,
-    onClose,
     dispatch,
     dataId = '',
     refresh,
@@ -20,9 +19,7 @@ const LockDetail = props => {
     updateKey = 'software',
     ...resetDrawerProps
   } = props
-  console.log(resetDrawerProps)
-  const shouldUpdate = refresh[updateKey] || false
-
+  const shouldUpdate = refresh?.[updateKey] || false
   const [state, setState] = useState({
     loading: false,
     longle: {},
@@ -61,7 +58,7 @@ const LockDetail = props => {
   const { flipFn, flipConsts } = useFlipOver(initData, dataId, orderIds)
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} onClose={onClose} className="zh-drawer">
+    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer">
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

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

@@ -1,14 +1,12 @@
-import { Button, Input, message } from 'antd'
+import { Button, Input, message, Modal } from 'antd'
 import React, { useState, useRef } from 'react'
 import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
 import consts from '@/basic/consts'
 import { apiReceiveOldLock, queryOldLockList } from '@/services/product'
 import { ProductLabel } from '../index'
 import ProTable from '@ant-design/pro-table'
-import CustomModal from '@/components/Modal/src/components/CustomModal'
-// import { Attention } from '@icon-park/react'
 
-const ReceiveLock = ({ refresh }) => {
+const ReceiveLock = ({ refresh, ...resetModalProps }) => {
   const tRef = useRef()
   const [tParams, setParams] = useState({
     search: null
@@ -52,7 +50,10 @@ const ReceiveLock = ({ refresh }) => {
     setParams({ ...tParams, search: val })
   }
   return (
-    <CustomModal
+    <Modal
+      width="50vw"
+      {...resetModalProps}
+      bodyStyle={{ padding: '24px 24px 0' }}
       title={
         <div className="flex items-center justify-between">
           <span>
@@ -62,7 +63,7 @@ const ReceiveLock = ({ refresh }) => {
             </Tooltip> */}
           </span>
           <Input.Search
-            style={{ width: '300px' }}
+            style={{ width: '300px', marginRight: '50px' }}
             placeholder="输入锁号/产品进行搜索"
             allowClear
             onSearch={handleOnSearch}
@@ -91,7 +92,7 @@ const ReceiveLock = ({ refresh }) => {
           }}
         />
       </div>
-    </CustomModal>
+    </Modal>
   )
 }
 

src/pages/Product/Lock/LockStore/index.jsx

@@ -4,7 +4,6 @@ import consts from '@/consts'
 import { connect, useModel } from 'umi'
 import { queryLock } from '@/services/product'
 import { generateSortField } from '@/utils/utils'
-import ReceiveLock from './components/ReceiveLock'
 import { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'
 import BasicTable from '@/components/Table'
 import { getPermAuthCache } from '@/utils/auth'
@@ -53,14 +52,6 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
   const refreshData = () => {
     tRef.current?.reload()
   }
-  const showReceiveLockModal = () => {
-    setModalProps({
-      width: '60vw',
-      modalRender: () => <ReceiveLock refresh={refreshData} />,
-      onCancel: () => toggleModal()
-    })
-    toggleModal()
-  }
 
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const [state, setState] = useState({
@@ -278,14 +269,6 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
     }
   }
 
-  // const dropDownMenClick = ({ key }) => {
-  //   if (key === '1') {
-  //     showReceiveLockModal()
-  //   } else {
-  //     showReceiveNewLockModal()
-  //   }
-  // }
-
   const [defaultPermAuthCache] = getPermAuthCache(PermDataTypeEunm.PRODUCT)
   return (
     <BasicTable
@@ -331,7 +314,10 @@ const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
         //   </Button>
         // </Dropdown>
         state.totalOld ? (
-          <Button type="primary" onClick={showReceiveLockModal}>
+          <Button
+            type="primary"
+            onClick={() => dispatchModal('M_RECEIVE_LOCK', { refresh: refreshData })}
+          >
             接收旧锁({state.totalOld})
           </Button>
         ) : null

src/pages/Workbench/Dashboard/components/RatioPanels.jsx

@@ -237,7 +237,7 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...res
         width: '16%',
         render: (companyName, record) => (
           <span
-            onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
+            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.id })}
             className="text-primary cursor-pointer hover:text-[#967bbd]"
           >
             {companyName}