|
@@ -1,19 +1,15 @@
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import styles from './index.module.scss'
|
|
import styles from './index.module.scss'
|
|
-import { Button, Checkbox, Modal } from 'antd'
|
|
|
|
|
|
+import { Button, Checkbox, Modal, Radio } from 'antd'
|
|
import MyPopconfirm from '@/components/MyPopconfirm'
|
|
import MyPopconfirm from '@/components/MyPopconfirm'
|
|
-import { Z1_APIsetAuth } from '@/store/action/Z1user'
|
|
|
|
|
|
+import { Z1_APIgetAuthByUserId, Z1_APIsetAuth } from '@/store/action/Z1user'
|
|
import classNmaes from 'classnames'
|
|
import classNmaes from 'classnames'
|
|
import { MessageFu } from '@/utils/message'
|
|
import { MessageFu } from '@/utils/message'
|
|
|
|
|
|
export type UserListType = {
|
|
export type UserListType = {
|
|
id: number
|
|
id: number
|
|
name: string
|
|
name: string
|
|
- children: {
|
|
|
|
- id: number
|
|
|
|
- name: string
|
|
|
|
- authority: boolean
|
|
|
|
- }[]
|
|
|
|
|
|
+ perm: boolean
|
|
}
|
|
}
|
|
|
|
|
|
type Props = {
|
|
type Props = {
|
|
@@ -22,65 +18,70 @@ type Props = {
|
|
}
|
|
}
|
|
|
|
|
|
function Z1auth({ authInfo, closeFu }: Props) {
|
|
function Z1auth({ authInfo, closeFu }: Props) {
|
|
- // 待完善
|
|
|
|
const getAuthByUserIdFu = useCallback(async () => {
|
|
const getAuthByUserIdFu = useCallback(async () => {
|
|
- // const res = await Z1_APIgetAuthByUserId(authInfo.id);
|
|
|
|
- // if (res.code === 0) {
|
|
|
|
- // // 这里后台返回的一层的数据。懒得改逻辑,手动修改成2级的数据
|
|
|
|
- // setList([
|
|
|
|
- // {
|
|
|
|
- // id: Date.now(),
|
|
|
|
- // name: "",
|
|
|
|
- // children: res.data,
|
|
|
|
- // },
|
|
|
|
- // ]);
|
|
|
|
- // // setList(res.data)
|
|
|
|
- // }
|
|
|
|
- }, [])
|
|
|
|
|
|
+ const res = await Z1_APIgetAuthByUserId(authInfo.id)
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ const info = res.data
|
|
|
|
+ setResources(info.resources)
|
|
|
|
+ setDataScopeIds(info.scope)
|
|
|
|
+ setDataScope(info.dataScope || 1)
|
|
|
|
+ }
|
|
|
|
+ }, [authInfo.id])
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
getAuthByUserIdFu()
|
|
getAuthByUserIdFu()
|
|
}, [getAuthByUserIdFu])
|
|
}, [getAuthByUserIdFu])
|
|
|
|
|
|
- const [list, setList] = useState<UserListType[]>([])
|
|
|
|
|
|
+ // 页面权限
|
|
|
|
+ const [resources, setResources] = useState<UserListType[]>([])
|
|
|
|
+
|
|
|
|
+ // 选择古桥或者全部
|
|
|
|
+ const [dataScope, setDataScope] = useState(0)
|
|
|
|
+
|
|
|
|
+ // 古桥权限
|
|
|
|
+ const [dataScopeIds, setDataScopeIds] = useState<UserListType[]>([])
|
|
|
|
|
|
// 多选框变化
|
|
// 多选框变化
|
|
- const onChange = useCallback(
|
|
|
|
- (val: boolean, id1: number, id2: number) => {
|
|
|
|
- setList(
|
|
|
|
- list.map(v => ({
|
|
|
|
|
|
+ const onChange1 = useCallback(
|
|
|
|
+ (val: boolean, id: number) => {
|
|
|
|
+ setResources(
|
|
|
|
+ resources.map(v => ({
|
|
|
|
+ ...v,
|
|
|
|
+ perm: v.id === id ? val : v.perm
|
|
|
|
+ }))
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ [resources]
|
|
|
|
+ )
|
|
|
|
+ const onChange2 = useCallback(
|
|
|
|
+ (val: boolean, id: number) => {
|
|
|
|
+ setDataScopeIds(
|
|
|
|
+ dataScopeIds.map(v => ({
|
|
...v,
|
|
...v,
|
|
- children:
|
|
|
|
- v.id === id1
|
|
|
|
- ? v.children.map(c => ({
|
|
|
|
- ...c,
|
|
|
|
- authority: c.id === id2 ? val : c.authority
|
|
|
|
- }))
|
|
|
|
- : v.children
|
|
|
|
|
|
+ perm: v.id === id ? val : v.perm
|
|
}))
|
|
}))
|
|
)
|
|
)
|
|
},
|
|
},
|
|
- [list]
|
|
|
|
|
|
+ [dataScopeIds]
|
|
)
|
|
)
|
|
|
|
|
|
- // 二级选中的数组id集合
|
|
|
|
- const checkIds = useMemo(() => {
|
|
|
|
- const arr: number[] = []
|
|
|
|
- list.forEach(v => {
|
|
|
|
- if (v.children) {
|
|
|
|
- v.children.forEach(c => {
|
|
|
|
- if (c.authority) arr.push(c.id)
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- return arr
|
|
|
|
- }, [list])
|
|
|
|
|
|
+ // 页面权限id集合
|
|
|
|
+ const ids1 = useMemo(() => {
|
|
|
|
+ return resources.filter(v => v.perm).map(c => c.id)
|
|
|
|
+ }, [resources])
|
|
|
|
+
|
|
|
|
+ // 古桥权限id集合
|
|
|
|
+ const ids2 = useMemo(() => {
|
|
|
|
+ return dataScopeIds.filter(v => v.perm).map(c => c.id)
|
|
|
|
+ }, [dataScopeIds])
|
|
|
|
|
|
// 点击确定
|
|
// 点击确定
|
|
const btnOkFu = useCallback(async () => {
|
|
const btnOkFu = useCallback(async () => {
|
|
const obj = {
|
|
const obj = {
|
|
userId: authInfo.id,
|
|
userId: authInfo.id,
|
|
- resources: checkIds
|
|
|
|
|
|
+ resources: ids1,
|
|
|
|
+ dataScopeIds: ids2,
|
|
|
|
+ dataScope
|
|
}
|
|
}
|
|
|
|
|
|
const res = await Z1_APIsetAuth(obj)
|
|
const res = await Z1_APIsetAuth(obj)
|
|
@@ -89,7 +90,15 @@ function Z1auth({ authInfo, closeFu }: Props) {
|
|
MessageFu.success('授权成功!')
|
|
MessageFu.success('授权成功!')
|
|
closeFu()
|
|
closeFu()
|
|
}
|
|
}
|
|
- }, [authInfo.id, checkIds, closeFu])
|
|
|
|
|
|
+ }, [authInfo.id, closeFu, dataScope, ids1, ids2])
|
|
|
|
+
|
|
|
|
+ // 按钮是否能点击
|
|
|
|
+ const btnFlag = useMemo(() => {
|
|
|
|
+ let txt = ''
|
|
|
|
+ if (ids1.length === 0) txt = '至少选中一个页面权限'
|
|
|
|
+ else if (dataScope === 2 && ids2.length === 0) txt = '至少选中一个数据权限'
|
|
|
|
+ return txt
|
|
|
|
+ }, [dataScope, ids1.length, ids2.length])
|
|
|
|
|
|
return (
|
|
return (
|
|
<Modal
|
|
<Modal
|
|
@@ -101,36 +110,75 @@ function Z1auth({ authInfo, closeFu }: Props) {
|
|
}
|
|
}
|
|
>
|
|
>
|
|
<div className='Z1aEmain'>
|
|
<div className='Z1aEmain'>
|
|
- {list.map(v => (
|
|
|
|
- <div key={v.id} className='Z1aRow'>
|
|
|
|
- {/* 隐藏一级数据 */}
|
|
|
|
- {/* <div className="Z1aRow1">{v.name}</div> */}
|
|
|
|
- <div className='Z1aRow2'>
|
|
|
|
- {v.children.map(c => (
|
|
|
|
- <div key={c.id}>
|
|
|
|
- <Checkbox
|
|
|
|
- checked={c.authority}
|
|
|
|
- onChange={e => onChange(e.target.checked, v.id, c.id)}
|
|
|
|
- >
|
|
|
|
- {c.name}
|
|
|
|
- </Checkbox>
|
|
|
|
- </div>
|
|
|
|
- ))}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div className='Z1aRow'>
|
|
|
|
+ <div className='Z1aRowll'>页面权限:</div>
|
|
|
|
+ <div className='Z1aRowrr'>
|
|
|
|
+ {resources.map(c => (
|
|
|
|
+ <Checkbox
|
|
|
|
+ key={c.id}
|
|
|
|
+ checked={c.perm}
|
|
|
|
+ onChange={e => onChange1(e.target.checked, c.id)}
|
|
|
|
+ >
|
|
|
|
+ {c.name}
|
|
|
|
+ </Checkbox>
|
|
|
|
+ ))}
|
|
</div>
|
|
</div>
|
|
- ))}
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
- <div className={classNmaes('Z1aErr', checkIds.length <= 0 ? 'Z1aErrAc' : '')}>
|
|
|
|
- 至少选中一个
|
|
|
|
|
|
+ <div className='Z1aRow'>
|
|
|
|
+ <div className='Z1aRowll'>数据权限:</div>
|
|
|
|
+ <div className='Z1aRowrr'>
|
|
|
|
+ <Radio.Group
|
|
|
|
+ value={dataScope}
|
|
|
|
+ onChange={e => setDataScope(e.target.value)}
|
|
|
|
+ options={[
|
|
|
|
+ { value: 1, label: '全部' },
|
|
|
|
+ { value: 2, label: '按古桥' }
|
|
|
|
+ ]}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div className='Z1aEbtn'>
|
|
|
|
- <Button type='primary' onClick={btnOkFu} disabled={checkIds.length <= 0}>
|
|
|
|
- 提交
|
|
|
|
- </Button>
|
|
|
|
-  
|
|
|
|
- <MyPopconfirm txtK='取消' onConfirm={closeFu} />
|
|
|
|
|
|
+ <div className='Z1aRow' hidden={dataScope !== 2}>
|
|
|
|
+ <div className='Z1aRowll'>
|
|
|
|
+ <Checkbox
|
|
|
|
+ indeterminate={ids2.length > 0 && ids2.length < dataScopeIds.length}
|
|
|
|
+ onChange={e => {
|
|
|
|
+ const perm = e.target.checked
|
|
|
|
+ setDataScopeIds(
|
|
|
|
+ dataScopeIds.map(v => ({
|
|
|
|
+ ...v,
|
|
|
|
+ perm
|
|
|
|
+ }))
|
|
|
|
+ )
|
|
|
|
+ }}
|
|
|
|
+ checked={ids2.length === dataScopeIds.length}
|
|
|
|
+ >
|
|
|
|
+ {ids2.length === dataScopeIds.length ? '反' : '全'}选
|
|
|
|
+ </Checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <div className='Z1aRowrr Z1aRowrr2'>
|
|
|
|
+ {dataScopeIds.map(c => (
|
|
|
|
+ <Checkbox
|
|
|
|
+ key={c.id}
|
|
|
|
+ checked={c.perm}
|
|
|
|
+ onChange={e => onChange2(e.target.checked, c.id)}
|
|
|
|
+ >
|
|
|
|
+ {c.name}
|
|
|
|
+ </Checkbox>
|
|
|
|
+ ))}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <div className={classNmaes('Z1aErr', btnFlag ? 'Z1aErrAc' : '')}>{btnFlag}</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div className='Z1aEbtn'>
|
|
|
|
+ <Button type='primary' onClick={btnOkFu} disabled={!!btnFlag}>
|
|
|
|
+ 提交
|
|
|
|
+ </Button>
|
|
|
|
+  
|
|
|
|
+ <MyPopconfirm txtK='取消' onConfirm={closeFu} />
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</Modal>
|
|
)
|
|
)
|