feat: 弹窗逻辑优化

src/components/Modal/src/index.ts

@@ -16,16 +16,16 @@ export function useModal() {
       payload: { type: 'modal', config: options }
     })
   }
-  function toggleDrawer() {
+  function toggleDrawer(show?: boolean) {
     dispath({
       type: 'single/toggleDrawer',
-      payload: 'drawer'
+      payload: show
     })
   }
-  function toggleModal() {
+  function toggleModal(show?: boolean) {
     dispath({
       type: 'single/toggleModal',
-      payload: 'modal'
+      payload: show
     })
   }
   return { toggleDrawer, toggleModal, setDrawerProps, setModalProps }

src/models/single.js

@@ -1,5 +1,7 @@
 // 单例控制器
 
+import { isNullOrUnDef } from '@/utils/is'
+
 export default {
   namespace: 'single',
   state: {
@@ -32,12 +34,6 @@ export default {
         payload
       })
     }
-    // *setModalSearchVal({ payload }, { put }) {
-    //   yield put({
-    //     type: 'changeState',
-    //     payload
-    //   })
-    // }
   },
   reducers: {
     // 改变state对应type的config
@@ -47,23 +43,29 @@ export default {
         [action.payload.type]: { ...state[action.payload.type], config: action.payload.config }
       }
     },
-    changeDrawer(state) {
+    changeDrawer(state, action) {
+      if (isNullOrUnDef(action.payload)) {
+        return {
+          ...state,
+          drawer: { ...state.drawer, visible: !state.drawer.visible }
+        }
+      }
       return {
         ...state,
-        drawer: { ...state.drawer, visible: !state.drawer.visible }
+        drawer: { ...state.drawer, visible: action.payload }
       }
     },
-    changeModal(state) {
+    changeModal(state, action) {
+      if (isNullOrUnDef(action.payload)) {
+        return {
+          ...state,
+          modal: { ...state.modal, visible: !state.modal.visible }
+        }
+      }
       return {
         ...state,
-        modal: { ...state.modal, visible: !state.modal.visible }
+        modal: { ...state.modal, visible: action.payload }
       }
     }
-    // changeModalSearch(state, action) {
-    //   return {
-    //     ...state,
-    //     modal: { ...state.modal, search: action.payload }
-    //   }
-    // }
   }
 }

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

@@ -28,7 +28,7 @@ const AddClient = props => {
     <ModalDragForm
       {...layout}
       formRef={formRef}
-      modalProps={{ zIndex: 1050 }}
+      modalProps={{ zIndex: 1250 }}
       title="添加客户"
       onVisibleChange={visible => {
         if (visible) {

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

@@ -21,7 +21,7 @@ const AddRecord = props => {
 
   return (
     <ModalDragForm
-      modalProps={{ zIndex: 1050 }}
+      modalProps={{ zIndex: 1250 }}
       layout="vertical"
       title="添加服务记录"
       formRef={formRef}

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

@@ -40,13 +40,14 @@ const ChangeCompanyInput = props => {
   }
   const handleConnectCustomer = () => {
     setModalProps({
+      zIndex: 1250,
       width: '60vw',
       modalRender: node => (
         <SearchModal onSelect={refreshClient} node={node} dataId={dataId} preUrl={actionPayload} />
       ),
       onCancel: () => toggleModal()
     })
-    toggleModal()
+    toggleModal(true)
   }
   const notValueRender = (
     <div onClick={handleConnectCustomer} className={styles.notCompanyContent}>

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

@@ -96,6 +96,7 @@ const SyncClient = ({ customer, client }) => {
         </div> */}
       </Button>
       <Modal
+        zIndex={1250}
         width="70%"
         title={`同步 ${customer.companyName} 信息`}
         getContainer={false}

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

@@ -4,11 +4,11 @@ import CustomModal from '@/components/Modal/src/components/CustomModal'
 import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
 import consts from '@/consts'
 import { servicelogEnum } from '@/pages/Customer/Company/components/CompanyDetail/LowerList'
-// import ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
-// import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
+import ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
+import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
 import { Badge } from 'antd'
 import { cardTypeMap } from '../consts'
-// import { useModal } from '@/components/Modal'
+import { useModal } from '@/components/Modal'
 
 const dataTypeEunm = {
   0: {
@@ -56,39 +56,39 @@ const ServiceRatioPanels = ({ staffIds, cyclical, dataPermission }) => {
     activeKey: '0',
     total: 0
   })
-  // const showDrawer = id => {
-  //   let children = null
-  //   if (state.activeKey === '0') {
-  //     children = <ClientDetail dataId={id} orderIds={state.orderIds} />
-  //   }
-  //   if (state.activeKey === '1') {
-  //     children = <CompanyDetail dataId={id} orderIds={state.orderIds} />
-  //   }
-  //   setDrawerProps({
-  //     zIndex: '1200',
-  //     closable: true,
-  //     onClose: () => toggleDrawer(),
-  //     bodyStyle: {
-  //       height: '100vh',
-  //       overflowY: 'hidden'
-  //     },
-  //     children
-  //   })
-  //   toggleDrawer()
-  // }
+  const showDrawer = id => {
+    let children = null
+    if (state.activeKey === '0') {
+      children = <ClientDetail dataId={id} orderIds={state.orderIds} />
+    }
+    if (state.activeKey === '1') {
+      children = <CompanyDetail dataId={id} orderIds={state.orderIds} />
+    }
+    setDrawerProps({
+      zIndex: 1040,
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children
+    })
+    toggleDrawer()
+  }
   const columns = [
     {
       dataIndex: activeKeyMap[state.activeKey].key,
       title: `${activeKeyMap[state.activeKey].title}名称`,
       ellipsis: true,
-      width: '15%'
-      // render: (text, record) => (
-      //   <span
-      //     onClick={() => showDrawer(record[activeKeyMap[state.activeKey].id])}
-      //     className="text-primary cursor-pointer hover:text-[#967bbd]">
-      //     {text}
-      //   </span>
-      // )
+      width: '15%',
+      render: (text, record) => (
+        <span
+          onClick={() => showDrawer(record[activeKeyMap[state.activeKey].id])}
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          {text}
+        </span>
+      )
     },
     {
       dataIndex: 'status',
@@ -178,50 +178,50 @@ const ServiceRatioPanels = ({ staffIds, cyclical, dataPermission }) => {
 }
 
 const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission }) => {
-  // const { toggleDrawer, setDrawerProps } = useModal()
-  // const state = {
-  //   orderIds: []
-  // }
-  // const showDrawer = id => {
-  //   setDrawerProps({
-  //     zIndex: '1200',
-  //     closable: true,
-  //     onClose: () => toggleDrawer(),
-  //     bodyStyle: {
-  //       height: '100vh',
-  //       overflowY: 'hidden'
-  //     },
-  //     children: <ClientDetail dataId={id} orderIds={state.orderIds} />
-  //   })
-  //   toggleDrawer()
-  // }
+  const { toggleDrawer, setDrawerProps } = useModal()
+  const state = {
+    orderIds: []
+  }
+  const showDrawer = id => {
+    setDrawerProps({
+      zIndex: '1200',
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <ClientDetail dataId={id} orderIds={state.orderIds} />
+    })
+    toggleDrawer()
+  }
   // 展示单位
-  // const showDrawerComapny = id => {
-  //   setDrawerProps({
-  //     zIndex: '1200',
-  //     closable: true,
-  //     onClose: () => toggleDrawer(),
-  //     bodyStyle: {
-  //       height: '100vh',
-  //       overflowY: 'hidden'
-  //     },
-  //     children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
-  //   })
-  //   toggleDrawer()
-  // }
+  const showDrawerComapny = id => {
+    setDrawerProps({
+      zIndex: '1200',
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
+    })
+    toggleDrawer()
+  }
   const columnsMap = {
     0: [
       {
         dataIndex: 'clientName',
         title: '客户名称',
-        width: '10%'
-        // render: (clientName, record) => (
-        //   <span
-        //     onClick={() => showDrawer(record.id)}
-        //     className="text-primary cursor-pointer hover:text-[#967bbd]">
-        //     {clientName}
-        //   </span>
-        // )
+        width: '10%',
+        render: (clientName, record) => (
+          <span
+            onClick={() => showDrawer(record.id)}
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            {clientName}
+          </span>
+        )
       },
       {
         dataIndex: 'companyName',
@@ -264,14 +264,14 @@ const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission }) => {
       {
         dataIndex: 'companyName',
         title: '单位名称',
-        width: '16%'
-        // render: (companyName, record) => (
-        //   <span
-        //     onClick={() => showDrawerComapny(record.id)}
-        //     className="text-primary cursor-pointer hover:text-[#967bbd]">
-        //     {companyName}
-        //   </span>
-        // )
+        width: '16%',
+        render: (companyName, record) => (
+          <span
+            onClick={() => showDrawerComapny(record.id)}
+            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            {companyName}
+          </span>
+        )
       },
       {
         dataIndex: 'districtName',