lanjianrong 5 лет назад
Родитель
Сommit
a54464a8f1

+ 12 - 1
src/pages/Customer/Company/components/ConnectCompany/index.less

@@ -8,7 +8,18 @@
   padding: 1.5rem;
   padding: 1.5rem;
   overflow-y: auto;
   overflow-y: auto;
   border-bottom: 1px solid #dee2e6;
   border-bottom: 1px solid #dee2e6;
-
+  :global(.ant-transfer-operation > .ant-btn) {
+    height: 20rem;
+    padding: 0 5px;
+  }
+  :global(.ant-transfer-operation > .ant-btn-sm > .anticon) {
+    display: none;
+  }
+  :global(.ant-transfer-operation > .ant-btn-sm > span:last-of-type) {
+    margin: 0;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
+  }
   .card {
   .card {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;

+ 4 - 3
src/pages/Customer/Company/components/CustomPerm.jsx

@@ -41,12 +41,12 @@ const generateTree = (treeNodes = [], checkedKeys = []) =>
     return node
     return node
   })
   })
 
 
-const CustomPerm = ({ onConfirm }) => {
+const CustomPerm = ({ onConfirm, defaultValues = [] }) => {
   const [state, setState] = useState({
   const [state, setState] = useState({
     dataSource: [],
     dataSource: [],
     leftTargetId: null,
     leftTargetId: null,
     treeKeys: [],
     treeKeys: [],
-    targetKeys: [],
+    targetKeys: defaultValues,
     rightTargetId: null,
     rightTargetId: null,
     transferDataSource: [],
     transferDataSource: [],
     height: 0
     height: 0
@@ -207,6 +207,7 @@ const CustomPerm = ({ onConfirm }) => {
           showSearch
           showSearch
           oneWay={true}
           oneWay={true}
           titles={['部门栏', '目标栏']}
           titles={['部门栏', '目标栏']}
+          operations={['点击添加']}
           className="h-full"
           className="h-full"
           render={item => item.title}
           render={item => item.title}
           onSearch={handleOnSearch}
           onSearch={handleOnSearch}
@@ -222,7 +223,7 @@ const CustomPerm = ({ onConfirm }) => {
                   checkable
                   checkable
                   defaultExpandAll
                   defaultExpandAll
                   height={state.height}
                   height={state.height}
-                  checkedKeys={checkedKeys}
+                  checkedKeys={[...checkedKeys, ...defaultValues]}
                   treeData={generateTree(
                   treeData={generateTree(
                     state.leftTargetId
                     state.leftTargetId
                       ? state.transferDataSource.filter(item => item.key === state.leftTargetId)
                       ? state.transferDataSource.filter(item => item.key === state.leftTargetId)

+ 34 - 10
src/pages/Customer/Company/components/PermSelect.tsx

@@ -1,11 +1,13 @@
 import { useModal } from '@/components/Modal'
 import { useModal } from '@/components/Modal'
 import { useModel } from 'umi'
 import { useModel } from 'umi'
-import { Select } from 'antd'
+import { Select, Tooltip } from 'antd'
 import CustomPerm from './CustomPerm'
 import CustomPerm from './CustomPerm'
 import { getAuthCache, setAuthCache } from '@/utils/auth'
 import { getAuthCache, setAuthCache } from '@/utils/auth'
 import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'
 import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'
 import type { SelectProps } from 'antd'
 import type { SelectProps } from 'antd'
 import type { MainMenuKeyEnum } from '@/utils/cache/cacheEnum'
 import type { MainMenuKeyEnum } from '@/utils/cache/cacheEnum'
+import { SettingOutlined } from '@ant-design/icons'
+import { useState } from 'react'
 
 
 export const PermDataTypeEunm = {
 export const PermDataTypeEunm = {
   CUSTOMER: 'customer',
   CUSTOMER: 'customer',
@@ -21,6 +23,10 @@ interface PermSelectProps extends SelectProps {
 const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetProps }) => {
 const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetProps }) => {
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const { toggleModal, setModalProps } = useModal()
   const { toggleModal, setModalProps } = useModal()
+  const [state, setState] = useState({
+    staffIds: [],
+    showSetting: false
+  })
   let defaultValue = 'oneself'
   let defaultValue = 'oneself'
   const options = [...(permData[dataType] || [])]
   const options = [...(permData[dataType] || [])]
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
@@ -33,23 +39,41 @@ const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetPr
     if (e === 'custom') {
     if (e === 'custom') {
       setModalProps({
       setModalProps({
         width: '60vw',
         width: '60vw',
-        modalRender: () => <CustomPerm onConfirm={onConfirm} />,
-        onCancel: toggleModal
+        modalRender: () => (
+          <CustomPerm
+            defaultValues={state.staffIds}
+            onConfirm={({ staffIds, dataPermission }) => {
+              setState({ ...state, staffIds, showSetting: true })
+              onConfirm({ staffIds, dataPermission })
+            }}
+          />
+        ),
+        onCancel: () => toggleModal()
       })
       })
       toggleModal()
       toggleModal()
       return
       return
     }
     }
     onConfirm({ staffIds: null, dataPermission: e })
     onConfirm({ staffIds: null, dataPermission: e })
     setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: e })
     setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: e })
+    // 将setting icon隐藏,非自定义option下不显示
+    state.showSetting && setState({ ...state, showSetting: false })
   }
   }
+
   return (
   return (
-    <Select
-      {...resetProps}
-      defaultValue={defaultValue}
-      dropdownMatchSelectWidth={false}
-      onChange={handleOnChange}
-      options={options}
-    />
+    <>
+      <Select
+        {...resetProps}
+        defaultValue={defaultValue}
+        dropdownMatchSelectWidth={false}
+        onChange={handleOnChange}
+        options={options}
+      />
+      {state.showSetting ? (
+        <Tooltip title="自定义权限">
+          <SettingOutlined className="ml-3" onClick={() => handleOnChange('custom')} />
+        </Tooltip>
+      ) : null}
+    </>
   )
   )
 }
 }
 
 

+ 1 - 1
src/pages/workbench/Dashboard/index.jsx

@@ -18,7 +18,7 @@ import { PERMISSION_SELECT_KEY, WORKBENCH_CYCLICAL_KEY } from '@/utils/cache/cac
 const Dashboard = () => {
 const Dashboard = () => {
   const timer = useRef(null)
   const timer = useRef(null)
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
   const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)
-  let defaultPermValue = 'onself'
+  let defaultPermValue = 'oneself'
   if (permAuthCache && permAuthCache.workbench) {
   if (permAuthCache && permAuthCache.workbench) {
     defaultPermValue = permAuthCache.workbench
     defaultPermValue = permAuthCache.workbench
   }
   }