فهرست منبع

fix: 将弹窗、抽屉的挂载节点放置root下

lanjianrong 4 سال پیش
والد
کامیت
d6909193a7
25فایلهای تغییر یافته به همراه119 افزوده شده و 182 حذف شده
  1. 3 8
      src/pages/Customer/Business/components/AddBusiness.jsx
  2. 5 1
      src/pages/Customer/Business/components/BusinessDetail/index.jsx
  3. 5 21
      src/pages/Customer/Client/components/AddClient/index.jsx
  4. 6 19
      src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx
  5. 5 1
      src/pages/Customer/Client/components/ClientDetail/index.jsx
  6. 6 20
      src/pages/Customer/Client/components/ConnectClient/index.jsx
  7. 5 11
      src/pages/Customer/Company/components/AddCompany/index.jsx
  8. 1 1
      src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx
  9. 5 1
      src/pages/Customer/Company/components/CompanyDetail/index.jsx
  10. 10 23
      src/pages/Customer/Company/components/CustomPerm.jsx
  11. 5 1
      src/pages/Hr/Employee/components/EmployeeDetail/index.jsx
  12. 4 12
      src/pages/Hr/Employee/components/StaffModal/index.jsx
  13. 1 1
      src/pages/Hr/Notification/components/MessageDetail.jsx
  14. 3 5
      src/pages/Product/Cloud/components/Detail/UpgradeModal.jsx
  15. 5 1
      src/pages/Product/Cloud/components/Detail/index.jsx
  16. 6 19
      src/pages/Product/Lock/LockStore/components/LockDetail/OpreateLock.jsx
  17. 5 1
      src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx
  18. 3 4
      src/pages/Product/Lock/LockStore/components/ReceiveLock.jsx
  19. 5 1
      src/pages/Product/Lock/LockStore/components/SoftwareDetail/index.jsx
  20. 3 6
      src/pages/Product/Road/Enterprise/components/AddEnterprise/index.jsx
  21. 5 1
      src/pages/Product/Road/Enterprise/components/Detail/index.jsx
  22. 1 1
      src/pages/Product/Road/Personal/components/Detail/UpgradeModal.jsx
  23. 5 1
      src/pages/Product/Road/Personal/components/Detail/index.jsx
  24. 6 10
      src/pages/Workbench/Dashboard/components/RatioPanels.jsx
  25. 11 12
      src/pages/Workbench/Dashboard/components/ReminderList.jsx

+ 3 - 8
src/pages/Customer/Business/components/AddBusiness.jsx

@@ -31,6 +31,7 @@ const AddBusiness = props => {
       width="43vw"
       visible={visible}
       onCancel={onCancel}
+      getContainer={() => document.getElementById('root')}
       footer={
         <div>
           <Button type="default" className="mr-2" onClick={onCancel}>
@@ -40,16 +41,10 @@ const AddBusiness = props => {
             确认
           </Button>
         </div>
-      }
-    >
+      }>
       <Form {...layout} form={formRef}>
         <ProFormText name="name" label="商机名称" required />
-        <ProFormSelect
-          fieldProps={{ options: groupList }}
-          name="businessGroupId"
-          label="商机状态组"
-          required
-        />
+        <ProFormSelect fieldProps={{ options: groupList }} name="businessGroupId" label="商机状态组" required />
         {/* <Col span={12}>
           <ProFormDependency name={['businessGroupId']}>
             {({ businessGroupId }) => (

+ 5 - 1
src/pages/Customer/Business/components/BusinessDetail/index.jsx

@@ -67,7 +67,11 @@ const Detail = props => {
   }, [visible])
 
   return (
-    <Drawer visible={visible} onClose={onClose} className="zh-drawer" getContainer={false}>
+    <Drawer
+      visible={visible}
+      onClose={onClose}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 5 - 21
src/pages/Customer/Client/components/AddClient/index.jsx

@@ -9,17 +9,8 @@ import TelephoneFormItem from './TelephoneFormItem'
 import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'
 
 const AddClient = props => {
-  const {
-    visible,
-    onCancel,
-    reload,
-    onConfirm,
-    dataId,
-    dataType,
-    defaultValues,
-    sourceList,
-    ...resetModalProps
-  } = props
+  const { visible, onCancel, reload, onConfirm, dataId, dataType, defaultValues, sourceList, ...resetModalProps } =
+    props
 
   const [formRef] = Form.useForm()
   const layout = {
@@ -87,6 +78,7 @@ const AddClient = props => {
       onCancel={onCancel}
       width="43vw"
       title="添加客户"
+      getContainer={() => document.getElementById('root')}
       footer={
         <div>
           <Button type="default" className="mr-2" onClick={onCancel}>
@@ -121,10 +113,7 @@ const AddClient = props => {
           placeholder="请输入客户名称"
           rules={[{ required: true, message: '请输入姓名' }]}
         />
-        <Form.Item
-          label="客户地区"
-          name="districtIds"
-          rules={[{ required: true, message: '请选择地区' }]}>
+        <Form.Item label="客户地区" name="districtIds" rules={[{ required: true, message: '请选择地区' }]}>
           <LazyCascader showFooter={true} />
         </Form.Item>
         <Row>
@@ -149,12 +138,7 @@ const AddClient = props => {
               rules={[{ required: true, message: '请输入手机号码' }]}>
               <TelephoneFormItem validateFn={status => setValidStatusFtl(status)} />
             </Form.Item>
-            <ProFormText
-              label="电话"
-              name="phone"
-              rules={[{ message: '请输入电话/座机号' }]}
-              placeholder=""
-            />
+            <ProFormText label="电话" name="phone" rules={[{ message: '请输入电话/座机号' }]} placeholder="" />
           </Col>
           <Col span={12}>
             <ProFormText label="昵称" name="niceName" placeholder="" />

+ 6 - 19
src/pages/Customer/Client/components/ClientDetail/AddRecord.jsx

@@ -21,6 +21,7 @@ const AddRecord = props => {
     <Modal
       {...resetModalProps}
       title="添加服务记录"
+      getContainer={() => document.getElementById('root')}
       onOk={() => {
         formRef?.validateFields().then(async values => {
           const newVal = { ...values }
@@ -34,14 +35,9 @@ const AddRecord = props => {
           const isSuccess = await onConfirm(newVal)
           isSuccess && resetModalProps.onCancel()
         })
-      }}
-    >
+      }}>
       <Form layout="vertical" form={formRef}>
-        <Form.Item
-          name="status"
-          label="服务类型"
-          rules={[{ required: true, message: '请选择类型' }]}
-        >
+        <Form.Item name="status" label="服务类型" rules={[{ required: true, message: '请选择类型' }]}>
           <Radio.Group>
             <Radio value={1}>上门服务</Radio>
             <Radio value={2}>电话拜访</Radio>
@@ -53,15 +49,10 @@ const AddRecord = props => {
           name="date"
           label="服务日期"
           initialValue={dayjs(new Date())}
-          rules={[{ required: true, message: '请选择服务日期' }]}
-        >
+          rules={[{ required: true, message: '请选择服务日期' }]}>
           <DatePicker style={{ width: '100%' }} />
         </Form.Item>
-        <ProFormTextArea
-          name="mark"
-          label="内容"
-          rules={[{ required: true, message: '请输入服务内容' }]}
-        />
+        <ProFormTextArea name="mark" label="内容" rules={[{ required: true, message: '请输入服务内容' }]} />
 
         <div className="pb-5">
           <Switch onChange={onChange} checked={showExtraItem} />
@@ -69,11 +60,7 @@ const AddRecord = props => {
         </div>
         {showExtraItem ? (
           <>
-            <Form.Item
-              name="remindTime"
-              label="备忘日期"
-              rules={[{ required: true, message: '请选择备忘日期' }]}
-            >
+            <Form.Item name="remindTime" label="备忘日期" rules={[{ required: true, message: '请选择备忘日期' }]}>
               <DatePicker style={{ width: '100%' }} disabledDate={disabledDate} />
             </Form.Item>
             <ProFormTextArea name="remarks" label="备忘内容" />

+ 5 - 1
src/pages/Customer/Client/components/ClientDetail/index.jsx

@@ -51,7 +51,11 @@ const ClientDetail = props => {
   }, [visible])
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 6 - 20
src/pages/Customer/Client/components/ConnectClient/index.jsx

@@ -87,10 +87,7 @@ const ConnectClient = ({
 
   const handleListScroll = () => {
     // 未滚动到底部
-    if (
-      scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
-      scrollRef.current.scrollTop
-    ) {
+    if (scrollRef.current.scrollHeight - scrollRef.current.clientHeight <= scrollRef.current.scrollTop) {
       // 已到底部
       if (state.current * state.pageSize > state.total) {
         setState({ ...state, noMore: true })
@@ -106,6 +103,7 @@ const ConnectClient = ({
       {...resetModalProps}
       onCancel={onCancel}
       width="50vw"
+      getContainer={() => document.getElementById('root')}
       title={
         <Input
           prefix={<SearchOutlined />}
@@ -125,19 +123,12 @@ const ConnectClient = ({
                 dataId,
                 dataType: preUrl
               })
-            }
-          >
+            }>
             添加并关联到新客户
           </Button>
         )
-      }
-    >
-      <div
-        className={styles.modalContent}
-        ref={scrollRef}
-        onScroll={handleListScroll}
-        style={{ paddingBottom: 0 }}
-      >
+      }>
+      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll} style={{ paddingBottom: 0 }}>
         <Spin spinning={state.laoding}>
           {state.client.map(item => (
             <div key={item.id} className={styles.card}>
@@ -146,12 +137,7 @@ const ConnectClient = ({
               <span className="w-1/6">{item.telephone}</span>
               <span className="w-1/2 flex justify-between">
                 <span>{item.companyName}</span>
-                <Popconfirm
-                  title="确认选择ta"
-                  onConfirm={() => connectClient(item.id)}
-                  okText="确认"
-                  cancelText="取消"
-                >
+                <Popconfirm title="确认选择ta" onConfirm={() => connectClient(item.id)} okText="确认" cancelText="取消">
                   <Button type="primary" size="small">
                     选择ta
                   </Button>

+ 5 - 11
src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -75,6 +75,7 @@ const AddCompanyModal = ({
       visible={visible}
       onCancel={onCancel}
       title="添加新单位"
+      getContainer={() => document.getElementById('root')}
       width="43vw"
       footer={
         <div>
@@ -98,30 +99,23 @@ const AddCompanyModal = ({
                 }
                 formRef?.setFieldsValue(values)
                 handleOnOk()
-              }}
-            >
+              }}>
               添加并关联
             </Button>
           ) : null}
         </div>
-      }
-    >
+      }>
       <Form {...layout} form={formRef}>
         <Form.Item
           name="companyName"
           label="单位名称"
           validateStatus={validStatusFcn}
           hasFeedback
-          rules={[{ required: true, message: '请输入单位全称' }]}
-        >
+          rules={[{ required: true, message: '请输入单位全称' }]}>
           <CompanyFormItem validateFn={status => setValidStatusFcn(status)} />
         </Form.Item>
         <ProFormText name={`${dataType}Id`} hidden />
-        <Form.Item
-          name="districtIds"
-          label="单位地区"
-          rules={[{ required: true, message: '请选择地区' }]}
-        >
+        <Form.Item name="districtIds" label="单位地区" rules={[{ required: true, message: '请选择地区' }]}>
           <LazyCascader showFooter={true} />
         </Form.Item>
         <ProFormText

+ 1 - 1
src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx

@@ -103,7 +103,7 @@ const SyncClient = ({ customer, client, actionPayload }) => {
       <Modal
         width="70%"
         title={`同步 ${customer.companyName} 信息`}
-        // getContainer={false}
+        // getContainer={() => document.getElementById('root')}
         visible={visible}
         onCancel={() => setState({ ...state, visible: false, loading: false })}
         onOk={handleOnConfirm}>

+ 5 - 1
src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -48,7 +48,11 @@ const CompanyDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 10 - 23
src/pages/Customer/Company/components/CustomPerm.jsx

@@ -133,9 +133,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
     // options-用于处理右侧自定义删除逻辑中,防止两个setState合并从而导致更新失败
     const node = state.transferDataSource.find(item => item.key === key)
     if (node?.isDepartment) {
-      const filterKeys = state.transferDataSource
-        .filter(item => item.parentId === node.key)
-        .map(item => item.key)
+      const filterKeys = state.transferDataSource.filter(item => item.parentId === node.key).map(item => item.key)
       setState({
         ...state,
         ...options,
@@ -173,9 +171,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
         if (state.treeKeys.findIndex(item => item === targetId) !== -1) {
           // treeKeys中有这个树节点
           return [
-            ...state.transferDataSource
-              .filter(item => item.parentId === targetId)
-              .map(item => item.key),
+            ...state.transferDataSource.filter(item => item.parentId === targetId).map(item => item.key),
             node.key
           ]
         }
@@ -196,6 +192,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
       onCancel={onCancel}
       width="60vw"
       title="自定义展示数据"
+      getContainer={() => document.getElementById('root')}
       footer={
         <>
           <Button className="mr-4" onClick={onCancel}>
@@ -212,13 +209,11 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
                 onConfirm({ staffIds: state.targetKeys, dataPermission: 'custom' })
               }
               onCancel()
-            }}
-          >
+            }}>
             确定
           </Button>
         </>
-      }
-    >
+      }>
       <div className={styles.modalContent}>
         <Transfer
           showSearch
@@ -231,8 +226,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
           dataSource={state.transferDataSource}
           targetKeys={state.targetKeys}
           onChange={onChange}
-          showSelectAll={false}
-        >
+          showSelectAll={false}>
           {({ direction, onItemSelectAll, onItemSelect }) => {
             if (direction === 'left') {
               return state.dataSource?.length ? (
@@ -262,9 +256,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
                         checkedNodes,
                         checkedKeys,
                         checked,
-                        state.transferDataSource
-                          .filter(item => item.parentId === key)
-                          .map(item => item.key)
+                        state.transferDataSource.filter(item => item.parentId === key).map(item => item.key)
                       )
                     } else {
                       onItemSelect(key, !isChecked(checkedKeys, key))
@@ -307,9 +299,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
                         state.transferDataSource.filter(item => item.parentId === key),
                         checkedKeys,
                         checked,
-                        state.transferDataSource
-                          .filter(item => item.parentId === key)
-                          .map(item => item.key)
+                        state.transferDataSource.filter(item => item.parentId === key).map(item => item.key)
                       )
                     } else {
                       onItemSelect(key, !isChecked(checkedKeys, key))
@@ -330,9 +320,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
                         ? state.transferDataSource
                             .filter(item => state.targetKeys?.includes(item.key))
                             .filter(item => item === state.rightTargetId)
-                        : state.transferDataSource.filter(item =>
-                            state.targetKeys?.includes(item.key)
-                          )
+                        : state.transferDataSource.filter(item => state.targetKeys?.includes(item.key))
                     )}
                     titleRender={item => (
                       <li className="ant-transfer-list-content-item">
@@ -342,8 +330,7 @@ const CustomPerm = ({ onConfirm, defaultValues = [], onCancel, ...resetModalProp
                           onClick={() => {
                             const currKeys = state.targetKeys.filter(i => i !== item.key)
                             handleUnCheckItem(state.treeKeys, item.key, { targetKeys: currKeys })
-                          }}
-                        >
+                          }}>
                           <DeleteOutlined />
                         </span>
                       </li>

+ 5 - 1
src/pages/Hr/Employee/components/EmployeeDetail/index.jsx

@@ -41,7 +41,11 @@ const EmployeeDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer visible={visible} onClose={onClose} className="zh-drawer" getContainer={false}>
+    <Drawer
+      visible={visible}
+      onClose={onClose}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <div className="sheet-box">
         <Row>
           <Col span={12} className="sheet-box-left">

+ 4 - 12
src/pages/Hr/Employee/components/StaffModal/index.jsx

@@ -62,10 +62,7 @@ const StaffModal = ({ visible, onCancel, id, onSelect, preUrl }) => {
 
   const handleListScroll = () => {
     // 未滚动到底部
-    if (
-      scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
-      scrollRef.current.scrollTop
-    ) {
+    if (scrollRef.current.scrollHeight - scrollRef.current.clientHeight <= scrollRef.current.scrollTop) {
       // 已到底部
       if (state.current * state.pageSize > state.total) {
         setState({ ...state, noMore: true })
@@ -80,6 +77,7 @@ const StaffModal = ({ visible, onCancel, id, onSelect, preUrl }) => {
       visible={visible}
       onCancel={onCancel}
       width="43vw"
+      getContainer={() => document.getElementById('root')}
       title={
         <Input
           prefix={<SearchOutlined />}
@@ -88,14 +86,8 @@ const StaffModal = ({ visible, onCancel, id, onSelect, preUrl }) => {
           onChange={handleInputChange}
         />
       }
-      footer={false}
-    >
-      <div
-        className={styles.modalContent}
-        ref={scrollRef}
-        onScroll={handleListScroll}
-        style={{ paddingBottom: 0 }}
-      >
+      footer={false}>
+      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll} style={{ paddingBottom: 0 }}>
         <Spin spinning={state.loading}>
           {state.list.map(item => (
             <div key={item.id} className={styles.card}>

+ 1 - 1
src/pages/Hr/Notification/components/MessageDetail.jsx

@@ -8,7 +8,7 @@ const MessageDetail = props => {
   const intl = useIntl()
   if (!id) return null
   return (
-    <Drawer {...otherProps} className="zh-drawer" getContainer={false}>
+    <Drawer {...otherProps} className="zh-drawer" getContainer={() => document.getElementById('root')}>
       <div className="px-5 vditor-reset h-full">
         <div className="max-h-20vh">
           <span className="pt-5 block">

+ 3 - 5
src/pages/Product/Cloud/components/Detail/UpgradeModal.jsx

@@ -92,7 +92,7 @@ const UpgradeModal = props => {
   }
   return (
     <Modal
-      getContainer={false}
+      getContainer={() => document.getElementById('root')}
       width={800}
       title={`确认${modalTitleEnum[type]}`}
       visible={visible}
@@ -102,13 +102,11 @@ const UpgradeModal = props => {
         onCancel()
         form?.resetFields()
       }}
-      onOk={handleonOk}
-    >
+      onOk={handleonOk}>
       {type === lockTypeEnum.GIVE || type === lockTypeEnum.LEND || type === lockTypeEnum.SALE ? (
         <div className="mb-6">
           <p className="pb-3">
-            为用户<b>{cloudUser.mobile}</b>,<b>{cloudUser.username}</b> {modalTitleEnum[type]}{' '}
-            <b>{compilationName}</b>
+            为用户<b>{cloudUser.mobile}</b>,<b>{cloudUser.username}</b> {modalTitleEnum[type]} <b>{compilationName}</b>
           </p>
           <div className="pb-5">
             <Switch onChange={onChange} checked={showDeadline} />

+ 5 - 1
src/pages/Product/Cloud/components/Detail/index.jsx

@@ -85,7 +85,11 @@ const CloudDetail = props => {
   }, [visible])
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 6 - 19
src/pages/Product/Lock/LockStore/components/LockDetail/OpreateLock.jsx

@@ -30,17 +30,7 @@ const placeholderEnum = {
 }
 
 const OpreateLock = props => {
-  const {
-    onConfirm,
-    onCancel,
-    loading,
-    type,
-    longleId,
-    keyNum,
-    prodList,
-    upgradeProduct,
-    ...resetModalProps
-  } = props
+  const { onConfirm, onCancel, loading, type, longleId, keyNum, prodList, upgradeProduct, ...resetModalProps } = props
   const [form] = Form.useForm()
   const dispatch = useDispatch()
   const scrollRef = useRef()
@@ -254,6 +244,7 @@ const OpreateLock = props => {
         )
       }
       width={800}
+      getContainer={() => document.getElementById('root')}
       footer={
         type !== lockTypeEnum.UPDATE &&
         type !== lockTypeEnum.RECOVER &&
@@ -268,8 +259,7 @@ const OpreateLock = props => {
             </Button>
           </div>
         )
-      }
-    >
+      }>
       {type === lockTypeEnum.SALE ? (
         <div className="text-center mb-6">
           <Radio.Group value={state.sellStatus} buttonStyle="solid" onChange={checkGroupOnChange}>
@@ -295,8 +285,7 @@ const OpreateLock = props => {
                         title="确认选择ta"
                         onConfirm={() => connectClient(item.id)}
                         okText="确认"
-                        cancelText="取消"
-                      >
+                        cancelText="取消">
                         <Button type="primary" size="small">
                           选择ta
                         </Button>
@@ -314,8 +303,7 @@ const OpreateLock = props => {
                         title="确认选择ta"
                         onConfirm={() => connectLongle(item.id)}
                         okText="确认"
-                        cancelText="取消"
-                      >
+                        cancelText="取消">
                         <Button type="primary" size="small">
                           更换
                         </Button>
@@ -348,8 +336,7 @@ const OpreateLock = props => {
                   return Promise.resolve(value)
                 }
               })
-            ]}
-          >
+            ]}>
             <Select
               placeholder="请选择产品"
               onDropdownVisibleChange={async e => {

+ 5 - 1
src/pages/Product/Lock/LockStore/components/LockDetail/index.jsx

@@ -51,7 +51,11 @@ const LockDetail = props => {
   const { flipFn, flipConsts } = useFlipOver(initData, dataId, orderIds)
 
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 3 - 4
src/pages/Product/Lock/LockStore/components/ReceiveLock.jsx

@@ -54,6 +54,7 @@ const ReceiveLock = ({ refresh, ...resetModalProps }) => {
       width="50vw"
       {...resetModalProps}
       bodyStyle={{ padding: '24px 24px 0' }}
+      getContainer={() => document.getElementById('root')}
       title={
         <div className="flex items-center justify-between">
           <span>
@@ -69,8 +70,7 @@ const ReceiveLock = ({ refresh, ...resetModalProps }) => {
             onSearch={handleOnSearch}
           />
         </div>
-      }
-    >
+      }>
       <div className={styles.modalContent}>
         <ProTable
           rowKey={record => record.id}
@@ -82,8 +82,7 @@ const ReceiveLock = ({ refresh, ...resetModalProps }) => {
           bordered={true}
           scroll={{ y: 460 }}
           request={async params => {
-            const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } =
-              await queryOldLockList(params)
+            const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } = await queryOldLockList(params)
             return {
               data: longle,
               success: code === consts.RET_CODE.SUCCESS,

+ 5 - 1
src/pages/Product/Lock/LockStore/components/SoftwareDetail/index.jsx

@@ -27,7 +27,11 @@ const SoftwareDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 3 - 6
src/pages/Product/Road/Enterprise/components/AddEnterprise/index.jsx

@@ -83,6 +83,7 @@ const AddEnterprise = ({
       onCancel={onCancel}
       title="创建企业"
       width="30vw"
+      getContainer={() => document.getElementById('root')}
       footer={
         <div>
           <Button type="default" className="mr-2" onClick={onCancel}>
@@ -102,9 +103,7 @@ const AddEnterprise = ({
           hasFeedback
           rules={[{ required: true }]}
           validateStatus={validStatus.companyName}
-          help={
-            validStatus.companyName === validateEnum.Error ? '当前企业名称已存在,请重新输入' : null
-          }>
+          help={validStatus.companyName === validateEnum.Error ? '当前企业名称已存在,请重新输入' : null}>
           <SearchCompanyInput
             validateFn={status => setValidStatus({ ...validStatus, companyName: status })}
             disabled={disabled}
@@ -128,9 +127,7 @@ const AddEnterprise = ({
           hasFeedback
           rules={[{ required: true }]}
           validateStatus={validStatus.adminID}
-          help={
-            validStatus.adminID === validateEnum.Error ? '当前账号非大司空用户,请重新输入' : null
-          }>
+          help={validStatus.adminID === validateEnum.Error ? '当前账号非大司空用户,请重新输入' : null}>
           <EnterpriseFormItem
             validateFn={status => setValidStatus({ ...validStatus, adminID: status })}
             disabled={disabled}

+ 5 - 1
src/pages/Product/Road/Enterprise/components/Detail/index.jsx

@@ -100,7 +100,11 @@ const EnterpriseDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 1 - 1
src/pages/Product/Road/Personal/components/Detail/UpgradeModal.jsx

@@ -83,7 +83,7 @@ const UpgradeModal = props => {
   }
   return (
     <Modal
-      getContainer={false}
+      getContainer={() => document.getElementById('root')}
       width={800}
       title={`确认${modalTitleEnum[type]}`}
       visible={visible}

+ 5 - 1
src/pages/Product/Road/Personal/components/Detail/index.jsx

@@ -93,7 +93,11 @@ const PersonalDetail = props => {
     visible && initData(dataId)
   }, [visible])
   return (
-    <Drawer {...resetDrawerProps} visible={visible} className="zh-drawer" getContainer={false}>
+    <Drawer
+      {...resetDrawerProps}
+      visible={visible}
+      className="zh-drawer"
+      getContainer={() => document.getElementById('root')}>
       <Spin spinning={state.loading}>
         <div className="sheet-box">
           <Row>

+ 6 - 10
src/pages/Workbench/Dashboard/components/RatioPanels.jsx

@@ -67,8 +67,7 @@ const ServiceRatioPanels = ({ dispatchModal, staffIds, cyclical, dataPermission
       render: (text, record) => (
         <span
           onClick={() => showDrawer(record[activeKeyMap[state.activeKey].id])}
-          className="text-primary cursor-pointer hover:text-hex-967bbd"
-        >
+          className="text-primary cursor-pointer hover:text-hex-967bbd">
           {text}
         </span>
       )
@@ -173,8 +172,7 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...res
         render: (clientName, record) => (
           <span
             onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
-            className="text-primary cursor-pointer hover:text-[#967bbd]"
-          >
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
             {clientName}
           </span>
         )
@@ -187,8 +185,7 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...res
         render: (companyName, record) => (
           <span
             className="text-primary cursor-pointer hover:text-[#967bbd]"
-            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.companyId })}
-          >
+            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.companyId })}>
             {companyName}
           </span>
         )
@@ -239,8 +236,7 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...res
         render: (companyName, record) => (
           <span
             onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.id })}
-            className="text-primary cursor-pointer hover:text-[#967bbd]"
-          >
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
             {companyName}
           </span>
         )
@@ -321,8 +317,8 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...res
       {...resetModalProps}
       title={`卡片详情(${dataTypeEunm[dataType].title})`}
       footer={false}
-      width="90vw"
-    >
+      getContainer={() => document.getElementById('root')}
+      width="90vw">
       {dataType === cardTypeMap.SERVICE ? (
         <ServiceRatioPanels
           dispatchModal={dispatchModal}

+ 11 - 12
src/pages/Workbench/Dashboard/components/ReminderList.jsx

@@ -17,8 +17,7 @@ const ReminderList = props => {
       render: (clientName, record) => (
         <span
           onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
-          className="text-primary cursor-pointer hover:text-hex-967bbd"
-        >
+          className="text-primary cursor-pointer hover:text-hex-967bbd">
           {clientName}
         </span>
       )
@@ -36,8 +35,7 @@ const ReminderList = props => {
               orderIds: state.orderIds
             })
           }
-          className="text-primary cursor-pointer hover:text-hex-967bbd"
-        >
+          className="text-primary cursor-pointer hover:text-hex-967bbd">
           {companyName}
         </span>
       )
@@ -89,8 +87,7 @@ const ReminderList = props => {
       render: (companyName, record) => (
         <span
           onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.id })}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {companyName}
         </span>
       )
@@ -141,11 +138,8 @@ const ReminderList = props => {
       ellipsis: true,
       render: (text, record) => (
         <span
-          onClick={() =>
-            dispatchModal('D_BUSINESS_DETAIL', { dataId: record.id, orderIds: state.orderIds })
-          }
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          onClick={() => dispatchModal('D_BUSINESS_DETAIL', { dataId: record.id, orderIds: state.orderIds })}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {text}
         </span>
       )
@@ -203,7 +197,12 @@ const ReminderList = props => {
   }
 
   return (
-    <Modal {...resetModalProps} title={titleMap[dataType].title} width="90vw" footer={false}>
+    <Modal
+      {...resetModalProps}
+      title={titleMap[dataType].title}
+      width="90vw"
+      footer={false}
+      getContainer={() => document.getElementById('root')}>
       <div className="mx-4">
         <ProTable
           size="small"