feat: 客户引入自定义权限

src/pages/Customer/Company/components/CustomPerm.jsx

@@ -4,6 +4,7 @@ import { Button, Transfer, Tree } from 'antd'
 import React, { useMemo, useState, useEffect } from 'react'
 import styles from './ConnectCompany/index.less'
 import { CloseOutlined, DeleteOutlined } from '@ant-design/icons'
+import ModalDrag from '@/components/DragModal'
 import consts from '@/basic/consts'
 import { useDispatch } from 'umi'
 import { queryDepartmentStaffList } from '@/services/department'
@@ -40,7 +41,7 @@ const generateTree = (treeNodes = [], checkedKeys = []) =>
     return node
   })
 
-const CustomPerm = () => {
+const CustomPerm = ({ onConfirm }) => {
   const [state, setState] = useState({
     dataSource: [],
     leftTargetId: null,
@@ -168,6 +169,7 @@ const CustomPerm = () => {
       }
     }
   }
+  // 根据计算返回tree选中的节点
   const checkedKeys = useMemo(() => {
     const targetId = state.leftTargetId
     if (isNull(targetId)) {
@@ -194,14 +196,14 @@ const CustomPerm = () => {
           .map(item => item.key)
       }
       // 直接返回当前节点
-      return [targetId]
+      return state.treeKeys.filter(item => item === targetId)
     }
     return []
   }, [state.leftTargetId, state.treeKeys.length, state.targetKeys.length])
   return (
     <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
       <div className={styles.modalHeader}>
-        <span>自定义展示数据</span>
+        <ModalDrag title="自定义展示数据" />
         <span className={styles.closeIcon}>
           <CloseOutlined onClick={closeModal} />
         </span>
@@ -332,7 +334,16 @@ const CustomPerm = () => {
         <Button className="mr-4" onClick={closeModal}>
           取消
         </Button>
-        <Button type="primary">确定</Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            if (onConfirm) {
+              onConfirm(state.targetKeys)
+            }
+            closeModal()
+          }}>
+          确定
+        </Button>
       </div>
     </div>
   )

src/pages/Customer/Company/index.jsx

@@ -16,6 +16,7 @@ import { Add, Down, Check } from '@icon-park/react'
 import { apiBatchLink } from '@/services/customer'
 import styles from './index.less'
 import { refactorSortField } from '@/utils/utils'
+import CustomPerm from './components/CustomPerm'
 
 const Company = props => {
   const {
@@ -30,7 +31,7 @@ const Company = props => {
 
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
 
-  const { toggleDrawer, setDrawerProps } = useModal()
+  const { toggleDrawer, setDrawerProps, toggleModal, setModalProps } = useModal()
   const tRef = useRef(null)
   const [selectKeys, setSelectKeys] = useState([])
 
@@ -488,12 +489,22 @@ const Company = props => {
             defaultValue="oneself"
             dropdownMatchSelectWidth={false}
             onChange={e => {
-              // if ( e === 'custom' ) {
-
-              // }
+              if (e === 'custom') {
+                setModalProps({
+                  modalRender: () => (
+                    <CustomPerm
+                      onConfirm={staffIds =>
+                        setState({ ...state, params: { ...state.params, staffIds } })
+                      }
+                    />
+                  )
+                })
+                toggleModal()
+                return
+              }
               setState({ ...state, params: { ...state.params, dataPermission: e } })
             }}
-            options={[...(permData?.customer || [])]}
+            options={[...(permData?.customer || []), { value: 'custom', label: '自定义' }]}
           />
         }
         rowSelection={{