feat: 弹窗调整

src/components/Modal/src/BasicModal.jsx

@@ -1,8 +1,8 @@
-import { createUid } from '@/utils/utils'
+// import { createUid } from '@/utils/utils'
 import { Modal } from 'antd'
 import { connect } from 'dva'
 import React, { Fragment } from 'react'
-import DragIniter from './components/DragIniter'
+// import DragIniter from './components/DragIniter'
 
 const BasicModal = props => {
   const {
@@ -10,19 +10,20 @@ const BasicModal = props => {
     config: { children, wrapClassName, title = '', ...resetProps }
   } = props
 
-  let modalTitle = null
-  if (!props.modalRender) {
-    modalTitle = <DragIniter title={title} uid={uid} />
-  }
-  const uid = createUid(10)
+  // let modalTitle = null
+  // if (!props.modalRender) {
+  //   modalTitle = <DragIniter title={title} uid={uid} />
+  // }
+  // const uid = createUid(10)
   return (
     <Fragment>
       <Modal
-        title={modalTitle}
+        title={title}
         visible={visible}
         {...resetProps}
         getContainer={false}
-        wrapClassName={`d_${uid} ${wrapClassName}`}>
+        // wrapClassName={`d_${uid} ${wrapClassName}`}
+      >
         {children}
       </Modal>
     </Fragment>

src/components/Modal/src/components/CustomModal.tsx

@@ -5,7 +5,7 @@ import { createUid } from '@/utils/utils'
 import { PropsWithChildren } from 'react'
 import { useDispatch } from 'umi'
 import { CloseOutlined } from '@ant-design/icons'
-import DragIniter from './DragIniter'
+// import DragIniter from './DragIniter'
 interface CustomModalProps {
   title?: string | React.ReactNode
   children?: ReactNode
@@ -19,16 +19,14 @@ const CustomModal = ({ title, children }) => {
     })
   }
   return (
-    <div className={['ant-modal-content', `d_${uid}`].join(' ')}>
+    <div className="ant-modal-content">
       <div className="ant-modal-close" onClick={closeModal}>
         <span className="ant-modal-close-x">
           <CloseOutlined />
         </span>
       </div>
       <div className="ant-modal-header">
-        <div className="max-w-[90%]">
-          <DragIniter title={title} uid={uid} />
-        </div>
+        <div className="max-w-[90%]">{title}</div>
       </div>
       {children}
     </div>

src/components/Modal/src/components/ModalDragForm.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable */
 import { ModalForm, ModalFormProps } from '@ant-design/pro-form'
 import React from 'react'
-import { createUid } from '@/utils/utils'
-import DragIniter from './DragIniter'
+// import { createUid } from '@/utils/utils'
+// import DragIniter from './DragIniter'
 
 const ModalDragForm: React.FC<ModalFormProps> = ({
   title,
@@ -10,11 +10,13 @@ const ModalDragForm: React.FC<ModalFormProps> = ({
   modalProps,
   ...resetProps
 }) => {
-  const uid = createUid(10)
+  // const uid = createUid(10)
   return (
     <ModalForm
-      title={<DragIniter title={title} uid={uid}></DragIniter>}
-      modalProps={{ ...modalProps, wrapClassName: `d_${uid}` }}
+      // title={<DragIniter title={title} uid={uid}></DragIniter>}
+      title={title}
+      // modalProps={{ ...modalProps, wrapClassName: `d_${uid}` }}
+      modalProps={{ ...modalProps }}
       {...resetProps}>
       {children}
     </ModalForm>

src/components/Table/src/BasicTable.tsx

@@ -70,7 +70,7 @@ const BasicTable: {
   if (isNullOrUnDef(permData)) return null
   const [columns] = useState(originalColumns)
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
-  let defaultpermAuthCache = 'onself'
+  let defaultpermAuthCache = 'oneself'
   if (permAuthCache && permAuthCache[mainMenuType]) {
     defaultpermAuthCache = permAuthCache[mainMenuType]
   }

src/global.less

@@ -116,9 +116,9 @@ input:-webkit-autofill:active {
   width: 100% !important;
 }
 
-.ant-modal-header {
-  padding: 0;
-}
+// .ant-modal-header {
+//   padding: 0;
+// }
 // 弹窗左右结构
 .sheet-box {
   // overflow: hidden;

src/pages/Customer/Client/index.jsx

@@ -1,7 +1,6 @@
 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 ProTable from '@ant-design/pro-table'
 import { Input, Button, message, Tooltip } from 'antd'
 import { connect, useModel } from 'umi'
 import React, { useEffect, useState, useRef, useMemo } from 'react'
@@ -16,13 +15,12 @@ import {
   LabelModeType
 } from '../Company/components/PersonLabel/const'
 import { Add, Down, Check } from '@icon-park/react'
-import { useTableScroll } from '@/hooks/useAutoTable'
 import { apiAddClient, queryClient } from '@/services/customer'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
 import { refactorSortField } from '@/utils/utils'
-import PermSelect from '../Company/components/PermSelect'
 import { PermDataTypeEunm } from '../Company/components/PermSelect'
+import BasicTable from '@/components/Table'
 
 const Client = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -85,25 +83,19 @@ const Client = props => {
     setTagState({ ...tagState, [type]: ids })
   }
 
-  const [selectKeys, setSelectKeys] = useState([])
-  const hanleRowSelectChange = selectedRowKeys => {
-    setSelectKeys(selectedRowKeys)
-  }
-
   const [state, setState] = useState({
-    params: { dataPermission: 'oneself', staffIds: null },
-    id: '',
+    params: {},
     orderIds: []
   })
 
   // 重置到默认值，包括表单
   const initData = () => {
-    tRef.current.reset()
+    tRef.current?.reset()
   }
 
   // 刷新
   const refreshData = () => {
-    tRef.current.reload()
+    tRef.current?.reload()
   }
 
   const handleAddClient = async values => {
@@ -374,7 +366,7 @@ const Client = props => {
     }
   ]
 
-  const [columnsStateMap, setColumnsStateMap] = useState({
+  const columnsStateMap = {
     phone: {
       show: false
     },
@@ -411,9 +403,7 @@ const Client = props => {
     staffName: {
       show: false
     }
-  })
-
-  const { getScrollRef, redoHeight } = useTableScroll(columns, selectKeys)
+  }
 
   // 默认刷新一次列表请求数据
   useEffect(() => {
@@ -475,15 +465,6 @@ const Client = props => {
     requestSuccess && refreshData()
   }
 
-  // 处理权限Select下拉组件OnChange事件
-  const handlePermChange = ({ staffIds = [], dataPermission }) => {
-    if (staffIds?.length) {
-      setState({ ...state, params: { ...state.params, staffIds, dataPermission: null } })
-      return
-    }
-    setState({ ...state, params: { ...state.params, staffIds: null, dataPermission } })
-  }
-
   const renderTableAlert = ({ selectedRowKeys }) => {
     return (
       <div className="flex flex-row">
@@ -546,8 +527,9 @@ const Client = props => {
   }
   return (
     <div className={styles.contactContent}>
-      <ProTable
-        bordered
+      <BasicTable
+        mainMenuType="customer"
+        columnStateType="CLIENT"
         params={state.params}
         actionRef={tRef}
         rowKey={record => record.id}
@@ -567,7 +549,6 @@ const Client = props => {
         }}
         tableAlertRender={renderTableAlert}
         rowSelection={{
-          onChange: hanleRowSelectChange,
           type: 'checkbox',
           columnWidth: 25
         }}
@@ -604,15 +585,7 @@ const Client = props => {
             />
           ]
         }}
-        headerTitle={
-          <PermSelect onConfirm={handlePermChange} dataType={PermDataTypeEunm.CUSTOMER} />
-        }
-        onLoadingChange={loadingStatus => {
-          loadingStatus && redoHeight()
-        }}
-        scroll={getScrollRef}
         columnsStateMap={columnsStateMap}
-        onColumnsStateChange={map => setColumnsStateMap(map)}
       />
     </div>
   )