feat: 添加客户弹窗适配ModalStore

src/app.tsx

@@ -8,15 +8,10 @@ import { tryChangeWorkStatus } from './components/RightContent/Book'
 import { getAuthCache, setAuthCache } from './utils/auth'
 import { LAYOUT_COLLAPSED_KEY } from './utils/cache/cacheEnum'
 import consts from './consts'
-import ModalStore from './components/Modal1'
+import ModalStore from './components/ModalStore'
 
 const loginPath = '/user/login'
 
-// 重新构建MenuData，解决重定向没有权限的路由
-// const generateMenu = (menuData, permission) => menuData.map(menu => {
-
-// })
-
 export async function getInitialState() {
   // 如果是登录页面，不执行
   const fetchUserInfo = async () => {

src/components/Modal1/index.tsx

@@ -3,11 +3,13 @@ import { createModalHook, ModalStore } from './src'
 import ContactDetail 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'
 
 const modalMap = {
-  D_CLIENT_DETAIL: ContactDetail,
-  D_COMPANY_DETAIL: CompanyDetail,
-  M_CONNECT_COMPANY: ConnectCompany
+  D_CLIENT_DETAIL: ContactDetail, // 客户详情抽屉
+  D_COMPANY_DETAIL: CompanyDetail, // 单位详情抽屉
+  M_CONNECT_COMPANY: ConnectCompany, // 关联单位弹窗
+  M_CLIENT_ADD: AddClient // 添加客户弹窗
 }
 
 export const useModal = createModalHook<typeof modalMap>()

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

@@ -1,25 +1,17 @@
 import React, { useRef, useState, useEffect } from 'react'
-import { Form, Row, Col, Button } from 'antd'
+import { Form, Row, Col, Button, Modal } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
 import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
-import { Plus } from '@icon-park/react'
 import { useDispatch, connect } from 'umi'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
-import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 import { isNullOrUnDef } from '@/utils/is'
 import TelephoneFormItem from './TelephoneFormItem'
+import consts from '@/consts'
 
 const AddClient = props => {
-  const {
-    reload,
-    onConfirm,
-    buttonProps,
-    dataId,
-    dataType,
-    btnTitle = '客户',
-    defaultValues,
-    sourceList
-  } = props
+  const { visible, onCancel, reload, onConfirm, dataId, dataType, defaultValues, sourceList } =
+    props
+
   const formRef = useRef(null)
   const layout = {
     layout: 'horizontal',
@@ -37,7 +29,6 @@ const AddClient = props => {
   }, [])
 
   const handleChange = changedValues => {
-    // const clientName = formRef.current?.getFieldValue('clientName')
     if (!changedValues) return
     if ('clientName' in changedValues) {
       if (!changedValues.clientName || changedValues.clientName?.length === 1) {
@@ -55,41 +46,37 @@ const AddClient = props => {
       }
       formRef.current?.setFieldsValue({ email: `${changedValues.qq}@qq.com` })
     }
-    // const clientName = formRef.current?.getFieldValue('clientName')
-    // if (clientName) {
-    //   const clientNameNum = clientName.split('')
-    //   const [firstName, ...lastName] = clientNameNum
-    //   const nameAfter = `（${lastName.join('')}）`
-    //   const newClientName = `${firstName + nameAfter}工`
-    //   formRef.current?.setFieldsValue({ niceName: newClientName })
-    // } else if (!formRef.current?.getFieldValue('qq')) {
-    //   const emailNum = qq.value
-    //   const newEmail = `${emailNum}@qq.com`
-    //   formRef.current?.setFieldsValue({ email: newEmail })
-    // }
   }
+
+  const handleOnOk = () => {
+    formRef.current?.validateFields().then(async values => {
+      try {
+        await onConfirm(values)
+        if (code === consts.RET_CODE.SUCCESS) {
+          formRef.current?.resetFields()
+          setValidStatusFtl('')
+          !isNullOrUnDef(reload) && reload()
+          onCancel()
+        }
+      } catch (error) {}
+    })
+  }
+
   return (
-    <ModalDragForm
-      {...layout}
-      formRef={formRef}
-      modalProps={{ zIndex: 1003, getContainer: false }}
+    <Modal
+      width="42vw"
+      visible={visible}
+      onCancel={onCancel}
       title="添加客户"
-      onVisibleChange={visible => {
-        if (visible) {
-          formRef.current?.setFieldsValue({ ...defaultValues })
-        }
-      }}
-      onValuesChange={handleChange}
-      trigger={
-        <Button type="primary" {...buttonProps} className="mr-1">
-          <Plus className="mr-1" />
-          {btnTitle}
-        </Button>
-      }
-      submitter={{
-        render: ({ submit }, defaultDoms) => [
-          ...defaultDoms,
-          dataId ? (
+      footer={
+        <div>
+          <Button type="default" className="ml-2" onClick={onCancel}>
+            取消
+          </Button>
+          <Button type="primary" onClick={handleOnOk}>
+            确认
+          </Button>
+          {dataId ? (
             <Button
               type="primary"
               key="2"
@@ -99,116 +86,101 @@ const AddClient = props => {
                 if (dataType === ChangeCompMap.BUSINESS.key) {
                   values.businessId = dataId
                 }
-                formRef.current && formRef.current.setFieldsValue(values)
-                submit()
-              }}>
+                formRef.current?.setFieldsValue(values)
+                handleOnOk()
+              }}
+            >
               添加并关联
             </Button>
-          ) : null
-        ]
-      }}
-      onFinish={async values => {
-        await onConfirm(values)
-        formRef.current?.resetFields()
-        setValidStatusFtl('')
-        !isNullOrUnDef(reload) && reload()
-        return true
-      }}>
-      {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
-      <ProFormText
-        name="clientName"
-        label="姓名"
-        placeholder="请输入客户名称"
-        rules={[{ required: true, message: '请输入姓名' }]}
-      />
-      <Form.Item
-        label="客户地区"
-        name="districtIds"
-        rules={[{ required: true, message: '请选择地区' }]}>
-        <LazyCascader showFooter={true} />
-      </Form.Item>
-      <Row>
-        <Col span={12}>
-          <ProFormSelect
-            name="gender"
-            label="性别"
-            placeholder=""
-            rules={[{ message: '请选择性别' }]}
-            options={[
-              { label: '男', value: '男' },
-              { label: '女', value: '女' }
-            ]}
-          />
-          <ProFormText label="部门" name="department" placeholder="" />
+          ) : null}
+        </div>
+      }
+    >
+      <Form
+        {...layout}
+        formRef={formRef}
+        onValuesChange={handleChange}
+        initialValues={defaultValues}
+      >
+        {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
+        <ProFormText
+          name="clientName"
+          label="姓名"
+          placeholder="请输入客户名称"
+          rules={[{ required: true, message: '请输入姓名' }]}
+        />
+        <Form.Item
+          label="客户地区"
+          name="districtIds"
+          rules={[{ required: true, message: '请选择地区' }]}
+        >
+          <LazyCascader showFooter={true} />
+        </Form.Item>
+        <Row>
+          <Col span={12}>
+            <ProFormSelect
+              name="gender"
+              label="性别"
+              placeholder=""
+              rules={[{ message: '请选择性别' }]}
+              options={[
+                { label: '男', value: '男' },
+                { label: '女', value: '女' }
+              ]}
+            />
+            <ProFormText label="部门" name="department" placeholder="" />
 
-          <Form.Item
-            label="手机"
-            name="telephone"
-            validateStatus={validStatusFtl}
-            hasFeedback
-            rules={[{ required: true, message: '请输入手机号码' }]}>
-            <TelephoneFormItem validateFn={status => setValidStatusFtl(status)} />
-          </Form.Item>
-          <ProFormText
-            label="电话"
-            name="phone"
-            rules={[{ message: '请输入电话/座机号' }]}
-            placeholder=""
-          />
-        </Col>
-        <Col span={12}>
-          <ProFormText label="昵称" name="niceName" placeholder="" />
-          {/* <ProFormDependency name={['clientName']}>
-            {({ clientName, newClientName }) => {
-              if (!clientName === false) {
-                const clientNameNum = clientName.split('')
-                const [firstName, ...lastName] = clientNameNum
-                const nameAfter = `（${lastName.join('')}）`
-                // eslint-disable-next-line no-param-reassign
-                newClientName = `${firstName + nameAfter}工`
-              }
-              return (
-                <ProFormText
-                  label="昵称"
-                  name="niceName"
-                  placeholder=""
-                  value={`${newClientName || ''}`}
-                />
-              )
-            }}
-          </ProFormDependency> */}
-          <ProFormText label="职位" name="position" placeholder="" />
-          <ProFormText label="QQ" name="qq" placeholder="" />
-          <ProFormText label="邮箱" name="email" placeholder="" />
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <ProFormText label="办公室" name="office" placeholder="" />
-        </Col>
-        <Col span={12}>
-          <ProFormSelect
-            name="sourceId"
-            label="来源"
-            placeholder=""
-            rules={[{ message: '来源' }]}
-            options={sourceList}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <ProFormText label="客户地址" name="address" placeholder="" />
-          <ProFormText label="客户地标" name="landmarks" placeholder="" />
-        </Col>
-        <Col span={12}>
-          <ProFormText label="客户乘车" name="ride" placeholder="" />
-          <ProFormText label="客户住宿" name="stay" placeholder="" />
-        </Col>
-      </Row>
+            <Form.Item
+              label="手机"
+              name="telephone"
+              validateStatus={validStatusFtl}
+              hasFeedback
+              rules={[{ required: true, message: '请输入手机号码' }]}
+            >
+              <TelephoneFormItem validateFn={status => setValidStatusFtl(status)} />
+            </Form.Item>
+            <ProFormText
+              label="电话"
+              name="phone"
+              rules={[{ message: '请输入电话/座机号' }]}
+              placeholder=""
+            />
+          </Col>
+          <Col span={12}>
+            <ProFormText label="昵称" name="niceName" placeholder="" />
+            <ProFormText label="职位" name="position" placeholder="" />
+            <ProFormText label="QQ" name="qq" placeholder="" />
+            <ProFormText label="邮箱" name="email" placeholder="" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <ProFormText label="办公室" name="office" placeholder="" />
+          </Col>
+          <Col span={12}>
+            <ProFormSelect
+              name="sourceId"
+              label="来源"
+              placeholder=""
+              rules={[{ message: '来源' }]}
+              options={sourceList}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <ProFormText label="客户地址" name="address" placeholder="" />
+            <ProFormText label="客户地标" name="landmarks" placeholder="" />
+          </Col>
+          <Col span={12}>
+            <ProFormText label="客户乘车" name="ride" placeholder="" />
+            <ProFormText label="客户住宿" name="stay" placeholder="" />
+          </Col>
+        </Row>
 
-      <ProFormTextArea label="备注" name="mark" placeholder="" />
-    </ModalDragForm>
+        <ProFormTextArea label="备注" name="mark" placeholder="" />
+      </Form>
+    </Modal>
   )
 }
 

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

@@ -1,4 +1,4 @@
-import { Row, Col, Spin, Tooltip } from 'antd'
+import { Row, Col, Spin, Tooltip, Drawer } from 'antd'
 import React, { useState, useEffect } from 'react'
 import ContanctForm from './Form.jsx'
 import ContanctTabList from './TabList.jsx'
@@ -10,7 +10,15 @@ import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const ContactDetail = props => {
-  const { dispatch, updateKey = 'client', refresh, visible, dataId = '', orderIds = [] } = props
+  const {
+    refresh,
+    visible,
+    onClose,
+    dispatch,
+    updateKey = 'client',
+    dataId = '',
+    orderIds = []
+  } = props
   const shouldUpdate = refresh[updateKey] || false
   const [state, setState] = useState({
     loading: false,
@@ -48,66 +56,69 @@ const ContactDetail = props => {
   }, [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">
-            {orderIds.length ? (
-              <div className="mb-3">
-                <Tooltip title="上一条记录">
-                  <Up
-                    fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                    size="20"
-                    onClick={() => flipFn(FlipOverEnum.UP)}
-                    className={[
-                      flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                    ].join(' ')}
-                  />
-                </Tooltip>
-                <Tooltip title="下一条记录">
-                  <Down
-                    fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                    size="20"
-                    onClick={() => flipFn(FlipOverEnum.DOWN)}
-                    className={[
-                      flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                      'ml-1'
-                    ].join(' ')}
-                  />
-                </Tooltip>
+    <Drawer visible={visible} onClose={onClose} className="zh-drawer">
+      <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"
+            >
+              {orderIds.length ? (
+                <div className="mb-3">
+                  <Tooltip title="上一条记录">
+                    <Up
+                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                      size="20"
+                      onClick={() => flipFn(FlipOverEnum.UP)}
+                      className={[
+                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
+                      ].join(' ')}
+                    />
+                  </Tooltip>
+                  <Tooltip title="下一条记录">
+                    <Down
+                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                      size="20"
+                      onClick={() => flipFn(FlipOverEnum.DOWN)}
+                      className={[
+                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                        'ml-1'
+                      ].join(' ')}
+                    />
+                  </Tooltip>
+                </div>
+              ) : null}
+              <div className="sheet-left-panel pr-4">
+                <ContanctForm client={state.client} updateKey={updateKey} />
               </div>
-            ) : null}
-            <div className="sheet-left-panel pr-4">
-              <ContanctForm client={state.client} updateKey={updateKey} />
-            </div>
-          </Col>
-          <Col
-            span={15}
-            // sm={{ span: 24 }}
-            // md={{ span: 24 }}
-            // lg={{ span: 15 }}
-            // xl={{ span: 15 }}
-            className="sheet-box-right">
-            <ContanctTabList
-              clientId={state.client.id}
-              software={state.software}
-              updateKey={updateKey}
-            />
-            <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
-          </Col>
-        </Row>
-      </div>
-    </Spin>
+            </Col>
+            <Col
+              span={15}
+              // sm={{ span: 24 }}
+              // md={{ span: 24 }}
+              // lg={{ span: 15 }}
+              // xl={{ span: 15 }}
+              className="sheet-box-right"
+            >
+              <ContanctTabList
+                clientId={state.client.id}
+                software={state.software}
+                updateKey={updateKey}
+              />
+              <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
+            </Col>
+          </Row>
+        </div>
+      </Spin>
+    </Drawer>
   )
 }
 
-export default connect(({ refresh, single }) => ({
-  visible: single.drawer.visible,
+export default connect(({ refresh }) => ({
   refresh
 }))(ContactDetail)

src/pages/Customer/Client/index.jsx

@@ -1,11 +1,7 @@
-import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
-import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
-import AddClient from '@/pages/Customer/Client/components/AddClient'
 import { Input, Button, message, Tooltip } from 'antd'
 import { connect, useModel } from 'umi'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import consts from '@/consts'
-import { useModal } from '@/components/Modal'
 import LazyCascader, { formatValues } from '@/components/LazyCascader'
 import PersonLabel from '../Company/components/PersonLabel'
 import {
@@ -22,9 +18,11 @@ import { PermDataTypeEunm } from '../Company/components/PermSelect'
 import BasicTable from '@/components/Table'
 import { getPermAuthCache } from '@/utils/auth'
 // import FilterCascader from '@/components/Table/src/components/FilterCascader'
-
+import { useModal } from '@/components/ModalStore'
+import { Plus } from '@icon-park/react'
 const Client = props => {
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
+  // const { toggleDrawer, setDrawerProps } = useModal()
   const {
     personTagColorMap,
     teamTagColorMap,
@@ -109,6 +107,7 @@ const Client = props => {
   }
 
   const [defaultPermAuthCache] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)
+
   // 重置到默认值，包括表单
   const initData = () => {
     tRef.current?.reset()
@@ -128,41 +127,7 @@ const Client = props => {
     }
   }
 
-  // 展示drawer
-  const showDrawer = id => {
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-        // overflowY: 'hidden'
-      },
-      children: <ContactDetail dataId={id} orderIds={state.orderIds} />
-    })
-    toggleDrawer()
-  }
-
-  // 展示单位
-  const showDrawerComapny = id => {
-    setDrawerProps({
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh'
-        // overflowY: 'hidden'
-      },
-      children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
-    })
-    toggleDrawer()
-  }
-
   const columns = [
-    // {
-    //   title: '关键字',
-    //   dataIndex: 'search',
-    //   hideInTable: true,
-    //   search: false
-    // },
     {
       title: '客户',
       dataIndex: 'clientName',
@@ -171,7 +136,9 @@ const Client = props => {
       fixed: 'left',
       render: (clientName, record) => (
         <span
-          onClick={() => showDrawer(record.id)}
+          onClick={() =>
+            dispatchModal('D_CLIENT_DETAIL', { dataId: record.id, orderIds: state.orderIds })
+          }
           className="text-primary cursor-pointer hover:text-[#967bbd]"
         >
           {clientName}
@@ -189,7 +156,12 @@ const Client = props => {
       render: (companyName, record) =>
         record.companyId !== consts.ENCRYPTION_ZERO ? (
           <span
-            onClick={() => showDrawerComapny(record.companyId)}
+            onClick={() =>
+              dispatchModal('D_COMPANY_DETAIL', {
+                dataId: record.companyId,
+                orderIds: state.orderIds
+              })
+            }
             className="text-primary cursor-pointer hover:text-[#967bbd]"
           >
             {companyName}
@@ -605,12 +577,19 @@ const Client = props => {
               showFooter={true}
               className="hover:bg-[rgba(0,0,0,0.1)]"
             />,
-            <AddClient
-              modalProps={{ zIndex: 1050 }}
-              onConfirm={handleAddClient}
+            <Button
+              type="primary"
               key="addClientBtn"
-              reload={() => tRef.current?.reload()}
-            />
+              onClick={() =>
+                dispatchModal('M_CLIENT_ADD', {
+                  onConfirm: handleAddClient,
+                  reload: () => tRef.current?.reload()
+                })
+              }
+            >
+              <Plus className="mr-1" />
+              客户
+            </Button>
           ]
         }}
         columnsStateMap={columnsStateMap}

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

@@ -1,11 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { ProFormText, ProFormCheckbox, ProFormTextArea } from '@ant-design/pro-form'
+import { ProFormText, ProFormCheckbox, ProFormTextArea, ModalForm } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import { connect } from 'umi'
 import { ChangeCompMap } from '../ChangeCompany'
-import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
 import { isNullOrUnDef } from '@/utils/is'
 import CompanyFormItem from './CompanyFormItem'
 
@@ -43,8 +42,8 @@ const AddCompanyModal = ({
   }, [])
   const [showDataItem, setShowDataItem] = useState(false)
   return (
-    <ModalDragForm
-      modalProps={{ zIndex: 1003, getContainer: false }}
+    <ModalForm
+      // modalProps={{ zIndex: 1003, getContainer: false }}
       formRef={formRef}
       title="添加新单位"
       {...layout}
@@ -66,7 +65,8 @@ const AddCompanyModal = ({
                 }
                 formRef.current && formRef.current.setFieldsValue(values)
                 submit()
-              }}>
+              }}
+            >
               添加并关联
             </Button>
           ) : null
@@ -84,20 +84,23 @@ const AddCompanyModal = ({
         setValidStatusFcn('')
         !isNullOrUnDef(reload) && reload()
         return true
-      }}>
+      }}
+    >
       <Form.Item
         name="companyName"
         label="单位名称"
         validateStatus={validStatusFcn}
         hasFeedback
-        rules={[{ required: true, message: '请输入单位全称' }]}>
+        rules={[{ required: true, message: '请输入单位全称' }]}
+      >
         <CompanyFormItem validateFn={status => setValidStatusFcn(status)} />
       </Form.Item>
       {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
       <Form.Item
         name="districtIds"
         label="单位地区"
-        rules={[{ required: true, message: '请选择地区' }]}>
+        rules={[{ required: true, message: '请选择地区' }]}
+      >
         <LazyCascader showFooter={true} />
       </Form.Item>
       <ProFormText
@@ -121,7 +124,7 @@ const AddCompanyModal = ({
           <ProFormTextArea name="remarks" label="备注" placeholder="" />
         </Col>
       </Row>
-    </ModalDragForm>
+    </ModalForm>
   )
 }
 

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

@@ -1,13 +1,12 @@
-import { useModal } from '@/components/Modal'
+// import { useModal } from '@/components/Modal'
 import { LinkOne, LinkInterrupt, Switch } from '@icon-park/react'
 import { Card, Modal, Tooltip } from 'antd'
 import React from 'react'
 import styles from './index.less'
-import SearchModal from '@/pages/Customer/Company/components/ConnectCompany'
 import { apiDelCustomer } from '@/services/customer'
 import { useDispatch } from 'dva'
 import consts from '@/consts'
-import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
+import { useModal } from '@/components/ModalStore'
 
 export const ChangeCompMap = {
   CLIENT: {
@@ -25,7 +24,7 @@ export const ChangeCompMap = {
 }
 const ChangeCompanyInput = props => {
   const dispatch = useDispatch()
-  const { toggleModal, setModalProps, toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const {
     dataSource: {
       customerId,
@@ -47,20 +46,12 @@ const ChangeCompanyInput = props => {
     })
   }
   const handleConnectCustomer = () => {
-    setModalProps({
-      zIndex: 1002,
-      width: '60vw',
-      modalRender: () => (
-        <SearchModal
-          onSelect={refreshClient}
-          dataId={dataId}
-          preUrl={actionPayload}
-          defaultAddibleValue={defaultValue}
-        />
-      ),
-      onCancel: () => toggleModal()
+    dispatchModal('M_CONNECT_COMPANY', {
+      onSelect: refreshClient,
+      dataId,
+      preUrl: actionPayload,
+      defaultAddibleValue: defaultValue
     })
-    toggleModal(true)
   }
   const notValueRender = showConnectIcon && (
     <div onClick={handleConnectCustomer} className={styles.notCompanyContent}>
@@ -88,19 +79,9 @@ const ChangeCompanyInput = props => {
   }
 
   const handleCompanyClick = () => {
-    toggleDrawer()
-    setDrawerProps({
-      zIndex: 1001,
-      closable: true,
-      onClose: () => toggleDrawer(),
-      bodyStyle: {
-        height: '100vh',
-        overflowY: 'hidden'
-      },
-      children: <CompanyDetail dataId={customerId} />
-    })
-    toggleDrawer()
+    dispatchModal('D_COMPANY_DETAIL', { dataId: customerId })
   }
+
   const normalValueRender = (
     <Card size="small">
       <div className="flex justify-between">

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

@@ -93,24 +93,26 @@ const SyncClient = ({ customer, client }) => {
         ghost
         type="primary"
         loading={loading}
-        onClick={() => setState({ ...state, visible: true, loading: true })}>
+        onClick={() => setState({ ...state, visible: true, loading: true })}
+      >
         <Copy theme="two-tone" fill={['#333', '#886ab5']} />
         <span className="ml-1">同步地址信息</span>
         {/* <div className="flex items-center justify-center">
         </div> */}
       </Button>
       <Modal
-        zIndex={1003}
         width="70%"
         title={`同步 ${customer.companyName} 信息`}
         // getContainer={false}
         visible={visible}
         onCancel={() => setState({ ...state, visible: false, loading: false })}
-        onOk={handleOnConfirm}>
+        onOk={handleOnConfirm}
+      >
         <div className="rounded-3 p-4 mb-2 pt-0">
           <Checkbox.Group
             defaultValue={checkValues}
-            onChange={e => setState({ ...state, checkValues: e })}>
+            onChange={e => setState({ ...state, checkValues: e })}
+          >
             <div className="flex flex-nowrap">
               <Checkbox value="district">
                 <div className="w-100px text-left">地区</div>

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

@@ -2,16 +2,14 @@
 import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
 import LocksDetail from '@/pages/Product/Lock/LockStore/components/LocksDetail'
 import React, { useRef, useState } from 'react'
-import { Tabs, message, Dropdown, Menu, Typography } from 'antd'
+import { Tabs, message, Dropdown, Menu, Typography, Button } from 'antd'
 import { Table } from '@arco-design/web-react'
 import '@arco-design/web-react/dist/css/arco.css'
 import styles from './index.less'
-import AddContact from '@/pages/Customer/Client/components/AddClient'
 import { apiAddClient, apiAddCustomerService, updateClient } from '@/services/customer'
 import { formatValues } from '@/components/LazyCascader'
 import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
-import { useModal } from '@/components/Modal'
 import { useDispatch } from 'umi'
 import AddRecord from '@/pages/Customer/Client/components/ClientDetail/AddRecord'
 import Detail from '@/pages/Customer/Business/components/BusinessDetail'
@@ -20,7 +18,8 @@ import { longleSellStatusNum, longlePreserveStatusNum } from '@/pages/Product/Lo
 import { renderBadge } from '@/pages/Workbench/Dashboard/components/RatioPanels'
 import { DownOutlined } from '@ant-design/icons'
 import { ProductLabel } from '@/pages/Product/Lock/LockStore/index'
-// import VirtualTable from '@/components/Table/src/VirtualTable'
+import { useModal } from '@/components/ModalStore'
+import { Plus } from '@icon-park/react'
 
 const CompanyTabList = ({
   initData,
@@ -32,7 +31,7 @@ const CompanyTabList = ({
   updateKey
 }) => {
   const dispatch = useDispatch()
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const dispatchModal = useModal()
   const { TabPane } = Tabs
   const tRef = useRef(null)
   const { Text } = Typography
@@ -440,17 +439,27 @@ const CompanyTabList = ({
         </Tabs>
       </div>
       <div className="sheet-btns pl-15px pt-15px flex items-center">
-        <AddContact
-          onConfirm={handleAddClient}
-          buttonProps={{ size: 'small', ghost: 'true' }}
-          defaultValues={{
-            districtIds: customer.districtIds,
-            stay: customer.stay,
-            ride: customer.ride,
-            address: customer.address,
-            landmarks: customer.landmarks
-          }}
-        />
+        <Button
+          type="primary"
+          className="mr-1"
+          size="small"
+          ghost
+          onClick={() =>
+            dispatchModal('M_CLIENT_ADD', {
+              onConfirm: handleAddClient,
+              defaultValues: {
+                districtIds: customer.districtIds,
+                stay: customer.stay,
+                ride: customer.ride,
+                address: customer.address,
+                landmarks: customer.landmarks
+              }
+            })
+          }
+        >
+          <Plus className="mr-1" />
+          客户
+        </Button>
         <AddRecord onConfirm={handleAddCustomerService} />
         <SyncClient customer={customer} client={client.client} />
       </div>

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

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { Row, Col, Spin, Tooltip } from 'antd'
+import { Row, Col, Spin, Tooltip, Drawer } from 'antd'
 import consts from '@/consts'
 import { apiCompanyDetail } from '@/services/customer'
 import CompanyForm from './Form'
 import CompanyLowerList from './LowerList'
 import CompanyTabList from './TabList'
-import { connect } from 'umi'
+import { useStore } from 'umi'
 import { Up, Down } from '@icon-park/react'
 import { FlipOverEnum, useFlipOver } from '@/hooks/web/useFlipOver'
 
 const CompanyDetail = props => {
-  const { dispatch, updateKey = 'company', refresh, visible, dataId = '', orderIds = [] } = props
-  const shouldUpdate = refresh[updateKey] || false
+  const { visible, onClose, dispatch, updateKey = 'company', dataId = '', orderIds = [] } = props
+  const { [updateKey]: shouldUpdate = false } = useStore()?.getState()?.refresh
   const [state, setState] = useState({
     loading: false,
     customer: {},
@@ -45,75 +45,73 @@ const CompanyDetail = props => {
     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">
-            {orderIds.length ? (
-              <div className="mb-3">
-                <Tooltip title="上一条记录">
-                  <Up
-                    fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
-                    size="20"
-                    onClick={() => flipFn(FlipOverEnum.UP)}
-                    className={[
-                      flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
-                    ].join(' ')}
-                  />
-                </Tooltip>
-                <Tooltip title="下一条记录">
-                  <Down
-                    fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
-                    size="20"
-                    onClick={() => flipFn(FlipOverEnum.DOWN)}
-                    className={[
-                      flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
-                      'ml-1'
-                    ].join(' ')}
-                  />
-                </Tooltip>
-              </div>
-            ) : null}
+    <Drawer visible={visible} onClose={onClose} className="zh-drawer">
+      <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"
+            >
+              {orderIds.length ? (
+                <div className="mb-3">
+                  <Tooltip title="上一条记录">
+                    <Up
+                      fill={flipConsts.disableUpBtn ? '#BDBDBE' : '#886ab5'}
+                      size="20"
+                      onClick={() => flipFn(FlipOverEnum.UP)}
+                      className={[
+                        flipConsts.disableUpBtn ? 'cursor-not-allowed' : 'cursor-pointer'
+                      ].join(' ')}
+                    />
+                  </Tooltip>
+                  <Tooltip title="下一条记录">
+                    <Down
+                      fill={flipConsts.disableDownBtn ? '#BDBDBE' : '#886ab5'}
+                      size="20"
+                      onClick={() => flipFn(FlipOverEnum.DOWN)}
+                      className={[
+                        flipConsts.disableDownBtn ? 'cursor-not-allowed' : 'cursor-pointer',
+                        'ml-1'
+                      ].join(' ')}
+                    />
+                  </Tooltip>
+                </div>
+              ) : null}
 
-            <div className="sheet-left-panel pr-4">
-              <CompanyForm customer={state.customer} updateKey={updateKey} />
-            </div>
-          </Col>
-          <Col
-            span={15}
-            // sm={{ span: 24 }}
-            // md={{ span: 24 }}
-            // lg={{ span: 15 }}
-            // xl={{ span: 15 }}
-            flex={{ flexDirection: 'column' }}
-            className="sheet-box-right">
-            <CompanyTabList
-              updateKey={updateKey}
-              initData={initData}
-              customerId={flipConsts.curId}
-              software={state.software}
-              client={state.client}
-              customer={state.customer}
-              business={state.business}
-            />
-            <CompanyLowerList log={state.log} servicelist={state.serviceLog} />
-          </Col>
-        </Row>
-      </div>
-    </Spin>
+              <div className="sheet-left-panel pr-4">
+                <CompanyForm customer={state.customer} updateKey={updateKey} />
+              </div>
+            </Col>
+            <Col
+              span={15}
+              // sm={{ span: 24 }}
+              // md={{ span: 24 }}
+              // lg={{ span: 15 }}
+              // xl={{ span: 15 }}
+              flex={{ flexDirection: 'column' }}
+              className="sheet-box-right"
+            >
+              <CompanyTabList
+                updateKey={updateKey}
+                initData={initData}
+                customerId={flipConsts.curId}
+                software={state.software}
+                client={state.client}
+                customer={state.customer}
+                business={state.business}
+              />
+              <CompanyLowerList log={state.log} servicelist={state.serviceLog} />
+            </Col>
+          </Row>
+        </div>
+      </Spin>
+    </Drawer>
   )
 }
 
-// export default index
-export default connect(({ refresh, single }) => ({
-  refresh,
-  visible: single.drawer.visible
-  // departments: staff.departments,
-  // departmentsMap: staff.departmentsMap
-}))(CompanyDetail)
+export default CompanyDetail

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

@@ -1,4 +1,4 @@
-import { Input, Button, Spin, message, Popconfirm } from 'antd'
+import { Input, Button, Spin, message, Popconfirm, Modal } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
 import { SearchOutlined } from '@ant-design/icons'
@@ -9,9 +9,8 @@ import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import { apiChangeCustomer } from '@/services/customer'
-import CustomModal from '@/components/Modal/src/components/CustomModal'
 
-const ConnectCompany = ({ dataId, onSelect, preUrl, defaultAddibleValue }) => {
+const ConnectCompany = ({ visible, onCancel, dataId, onSelect, preUrl, defaultAddibleValue }) => {
   const hasAddPerm = useAccess()?.validatePermByType('company_add')
   const dispatch = useDispatch()
   const scrollRef = useRef()
@@ -102,7 +101,10 @@ const ConnectCompany = ({ dataId, onSelect, preUrl, defaultAddibleValue }) => {
   }
 
   return (
-    <CustomModal
+    <Modal
+      visible={visible}
+      onCancel={onCancel}
+      width="60vw"
       title={
         <Input
           prefix={<SearchOutlined />}
@@ -110,12 +112,15 @@ const ConnectCompany = ({ dataId, onSelect, preUrl, defaultAddibleValue }) => {
           placeholder="输入单位名称搜索"
           onChange={handleInputChange}
         />
-      }>
+      }
+      footer={false}
+    >
       <div
         className={styles.modalContent}
         ref={scrollRef}
         onScroll={handleListScroll}
-        style={{ paddingBottom: 0 }}>
+        style={{ paddingBottom: 0 }}
+      >
         <Spin spinning={state.laoding}>
           {state.customer.map(item => (
             <div key={item.id} className={styles.card}>
@@ -126,7 +131,8 @@ const ConnectCompany = ({ dataId, onSelect, preUrl, defaultAddibleValue }) => {
                   title="确认关联ta"
                   onConfirm={() => connectCustomer(item.id)}
                   okText="确认"
-                  cancelText="取消">
+                  cancelText="取消"
+                >
                   <Button type="primary" size="small">
                     关联
                   </Button>
@@ -147,7 +153,7 @@ const ConnectCompany = ({ dataId, onSelect, preUrl, defaultAddibleValue }) => {
           />
         </div>
       )}
-    </CustomModal>
+    </Modal>
   )
 }
 

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

@@ -38,7 +38,7 @@
 }
 
 .modalFooter {
-  padding: 1rem;
+  padding: 1rem 1rem 0 1rem;
 }
 
 .removeTreeSwitcher {