Просмотр исходного кода

feat: 多层弹窗触发逻辑

lanjianrong 4 лет назад
Родитель
Сommit
911bedf3f5

+ 1 - 1
src/components/ModalStore/index.tsx

@@ -37,7 +37,7 @@ const modalMap = {
   M_RATIO_PANELS: RatioPanels, // 仪表盘环比数据弹窗
   D_LOCK_DETAIL: LockDetail, // 锁库详情抽屉
   D_SOFTWARE_DETAIL: SoftwareDetail, // 软件锁详情抽屉
-  M_ADD_RECORD: AddRecord, // 添加服务记录
+  M_RECORD_ADD: AddRecord, // 添加服务记录
   M_OPREATE_LOCK: OpreateLock, // 操作锁库弹窗
   M_RECEIVE_LOCK: ReceiveLock, // 接受锁库弹窗
   M_CUSTOM_PERM: CustomPerm, // 自定义数据权限弹窗

+ 8 - 5
src/components/ModalStore/src/CreateProvider.tsx

@@ -80,8 +80,9 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
   }
 
   function push(key: string, compState: any) {
+    const isDrawer = key.startsWith('D')
     // eslint-disable-next-line no-param-reassign
-    key = compState?.dataId ? `${key}@${compState?.dataId}` : key
+    key = isDrawer && compState?.dataId ? `${key}@${compState?.dataId}` : key
     const { visiblePropName, onClosePropName, destroyOnClose } = getModalConfig(key)
 
     setModalState(prevModals => {
@@ -89,7 +90,8 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
         [visiblePropName]: key.startsWith('D') ? false : true,
         [onClosePropName]: getCloseFunction(key, compState?.[onClosePropName])
       }
-      compState?.dataId &&
+      isDrawer &&
+        compState?.dataId &&
         dispatch({
           type: 'refresh/commitAction',
           payload: compState.dataId
@@ -113,7 +115,7 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
       const index = nextModals.findIndex(item => item.key === key)
 
       if (index !== -1) {
-        if (key.startsWith('D')) {
+        if (isDrawer) {
           message.warning('当前窗口正在运行中,请勿重复打开')
           return prevModals
         }
@@ -123,7 +125,7 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
 
       return nextModals
     })
-    if (key.startsWith('D')) {
+    if (isDrawer) {
       // 利用事件循环,先让dom元素渲染出来再使其展示动画(否则可能导致抽屉无动画直接出现)
       setTimeout(() => {
         setModalState(prevModals =>
@@ -153,8 +155,9 @@ const ModalStore: React.FC<ModalStoreProps> = props => {
   }
 
   function renderMaskProps(item: ModalItem) {
+    const isDrawer = item.key.startsWith('D')
     // 没有dataId 不是抽屉
-    if (!item.dataId) return item
+    if (!isDrawer && !item.dataId) return item
     const drawerStore = state.currentModal.filter(modal => modal.dataId).map(modal => modal.dataId)
     const len = drawerStore.length
     if (len === 1) return item

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

@@ -68,8 +68,8 @@ const AddClient = props => {
             formRef?.resetFields()
             setTimeout(() => {
               setValidStatusFtl('')
-              onCancel()
             }, 80)
+            onCancel()
           }
         } catch (error) {}
       })

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

@@ -166,7 +166,7 @@ const ClientTabList = ({ clientId, software, updatePayload }) => {
           ghost
           size="small"
           className="mr-1"
-          onClick={() => dispatchModal('M_ADD_RECORD', { onConfirm: handleAddService })}
+          onClick={() => dispatchModal('M_RECORD_ADD', { onConfirm: handleAddService })}
         >
           <Plus className="mr-1" /> 添加服务记录
         </Button>

+ 17 - 11
src/pages/Customer/Client/components/ConnectClient/index.jsx

@@ -114,6 +114,23 @@ const ConnectClient = ({
           onChange={handleInputChange}
         />
       }
+      footer={
+        showFooter && (
+          <Button
+            type="primary"
+            ghost
+            onClick={() =>
+              dispatchModal('M_CLIENT_ADD', {
+                onConfirm: addConfirm,
+                dataId,
+                dataType: preUrl
+              })
+            }
+          >
+            添加并关联到新客户
+          </Button>
+        )
+      }
     >
       <div
         className={styles.modalContent}
@@ -145,17 +162,6 @@ const ConnectClient = ({
         </Spin>
         {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
       </div>
-      {showFooter ? (
-        <div className={styles.modalFooter}>
-          <AddClient
-            onConfirm={addConfirm}
-            dataId={dataId}
-            dataType={preUrl}
-            buttonProps={{ ghost: true }}
-            btnTitle={'添加并关联到新客户'}
-          />
-        </div>
-      ) : null}
     </Modal>
   )
 }

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

@@ -321,6 +321,7 @@ const CompanyTabList = ({
       })
       initData()
     }
+    return code === consts.RET_CODE.SUCCESS
   }
   return (
     <div>

+ 19 - 11
src/pages/Customer/Company/components/ConnectCompany/index.jsx

@@ -9,6 +9,7 @@ import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'
 import { apiChangeCustomer } from '@/services/customer'
+import { useModal } from '@/components/ModalStore'
 
 const ConnectCompany = ({
   onCancel,
@@ -19,6 +20,7 @@ const ConnectCompany = ({
   ...resetModalProps
 }) => {
   const hasAddPerm = useAccess()?.validatePermByType('company_add')
+  const dispatchModal = useModal()
   const scrollRef = useRef()
   const [state, setState] = useState({
     laoding: true,
@@ -114,7 +116,23 @@ const ConnectCompany = ({
           onChange={handleInputChange}
         />
       }
-      footer={false}
+      footer={
+        hasAddPerm && (
+          <Button
+            type="primary"
+            onClick={() =>
+              dispatchModal('M_COMPANY_ADD', {
+                onConfirm: addConfirm,
+                dataId,
+                dataType: preUrl,
+                defaultValue: defaultAddibleValue
+              })
+            }
+          >
+            添加单位
+          </Button>
+        )
+      }
     >
       <div
         className={styles.modalContent}
@@ -144,16 +162,6 @@ const ConnectCompany = ({
         </Spin>
         {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
       </div>
-      {hasAddPerm && (
-        <div className={styles.modalFooter}>
-          <AddCompany
-            onConfirm={addConfirm}
-            dataId={dataId}
-            dataType={preUrl}
-            defaultValue={defaultAddibleValue}
-          />
-        </div>
-      )}
     </Modal>
   )
 }