Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-admin
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
project
jinfa-admin
Commits
a3d9dfdf
Commit
a3d9dfdf
authored
Aug 24, 2020
by
前端-许佳敏
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改树形菜单
parent
7372cf58
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
104 additions
and
87 deletions
+104
-87
index.tsx
src/components/TabTree/index.tsx
+13
-8
useTreeTabs.ts
src/hooks/useTreeTabs.ts
+57
-3
memberDetail.tsx
src/pages/authConfig/memberSystem/memberDetail.tsx
+1
-1
index.tsx
src/pages/authConfig/organ/index.tsx
+11
-34
index.ts
src/pages/authConfig/userSystem/schema/index.ts
+9
-1
userDetail.tsx
src/pages/authConfig/userSystem/userDetail.tsx
+2
-1
index.tsx
src/pages/classAndProperty/class/index.tsx
+10
-38
index.ts
src/utils/index.ts
+1
-1
No files found.
src/components/TabTree/index.tsx
View file @
a3d9dfdf
...
...
@@ -18,7 +18,7 @@ export interface TabTreeActions {
setSelectKey
:
(
key
:
ReactText
)
=>
void
setSelectKeys
:
(
keys
:
ReactText
[])
=>
void
getParentPath
:
(
id
:
ReactText
)
=>
string
connected
:
boolean
getParent
:
(
id
)
=>
any
}
export
interface
toolsRenderProps
{
...
...
@@ -52,13 +52,13 @@ export interface RenderIconsProps {
export
const
useTreeActions
=
(
action
?):
TabTreeActions
=>
{
const
actionRef
=
useRef
<
any
>
(
null
)
actionRef
.
current
=
actionRef
.
current
||
action
||
createTreeActions
()
return
actionRef
.
current
}
export
const
createTreeActions
=
()
=>
{
const
actions
:
TabTreeActions
=
{
selected
:
[],
connected
:
false
,
getExpandedKeys
(){
return
[]
},
getSelectKey
(){
return
''
},
getSelectKeys
(){
return
[]
},
...
...
@@ -66,6 +66,7 @@ export const createTreeActions = () => {
setSelectKeys
(){},
setExpandedKeys
(){},
getParentPath
(
id
){
return
''
},
getParent
(
id
){
return
null
}
}
return
actions
}
...
...
@@ -186,9 +187,7 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
if
(
selfActions
)
{
selfActions
.
getExpandedKeys
=
()
=>
expandkeys
selfActions
.
getSelectKey
=
()
=>
selectKey
selfActions
.
getSelectKeys
=
()
=>
{
return
selected
}
selfActions
.
getSelectKeys
=
()
=>
selected
selfActions
.
selected
=
selected
selfActions
.
setSelectKeys
=
(
keys
:
ReactText
[])
=>
{
setSelected
(
keys
)
...
...
@@ -203,8 +202,13 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
selfActions
.
getParentPath
=
(
id
:
ReactText
)
=>
{
return
getParentTreeTitles
(
treeData
,
id
)
}
// 链接成功
selfActions
.
connected
=
true
selfActions
.
getParent
=
(
id
)
=>
{
const
reductData
=
treeReduction
(
treeData
)
const
targetInfo
=
reductData
[
id
]
const
parentInfo
=
reductData
[
targetInfo
.
parentId
]
return
parentInfo
||
null
}
}
const
batchSelect
=
(
items
:
any
)
=>
{
...
...
@@ -215,6 +219,7 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
items
.
forEach
(
v
=>
select
(
v
))
}
}
return
(
<
div
>
{
title
&&
...
...
@@ -243,7 +248,7 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
if
(
props
.
handleSelect
)
{
const
result
=
props
.
handleSelect
(
node
.
key
,
node
)
// 存在返回值则不执行选中事件, 一般用于切换node时,不希望离开当前页面
if
(
result
!==
undefined
)
{
if
(
result
)
{
result
.
then
(()
=>
{
// 若promise 是resolve状态, 说明确认离开了当前页面
setSelectKey
(
selectKey
===
node
.
key
?
''
:
node
.
key
)
...
...
src/hooks/useTreeTabs.ts
View file @
a3d9dfdf
import
{
useMap
}
from
'@umijs/hooks'
import
{
useState
,
useEffect
}
from
'react'
import
React
,
{
useState
,
useEffect
}
from
'react'
import
{
Modal
}
from
'antd'
import
{
TabTreeActions
}
from
'@/components/TabTree'
import
{
ISchemaFormActions
}
from
'@formily/antd'
import
{
isObject
}
from
'@/utils'
export
enum
FormState
{
FREE
,
// 空闲状态
...
...
@@ -12,11 +15,20 @@ export interface useTreeTabOptions {
selectCallback
?(
selectKey
?,
node
?),
fetchMenuData
?(),
fetchItemDetailData
?(
id
),
// 重置右侧详情
resetDetail
?(),
// 对树形工具栏做render扩展
extendsToolsRender
?:
any
,
// 树形的实例操作方法
treeActions
?:
TabTreeActions
// 右侧表单的实例操作方法
formActions
?:
ISchemaFormActions
// 删除菜单时调用的API
deleteMenu
?:
any
}
export
const
useTreeTabs
=
(
options
:
useTreeTabOptions
=
{})
=>
{
const
{
selectCallback
,
fetchMenuData
,
fetchItemDetailData
,
resetDetail
}
=
options
const
{
selectCallback
,
fetchMenuData
,
fetchItemDetailData
,
resetDetail
,
treeActions
,
formActions
,
extendsToolsRender
,
deleteMenu
}
=
options
const
[
treeExtraMaps
,
{
set
,
get
}
]
=
useMap
<
any
,
any
>
()
const
[
treeData
,
setTreeData
]
=
useState
<
any
[]
>
([])
const
[
treeStatus
,
setTreeStatus
]
=
useState
<
FormState
>
(
FormState
.
FREE
)
...
...
@@ -86,6 +98,45 @@ export const useTreeTabs = (options: useTreeTabOptions = {}) => {
set
(
id
,
data
)
})
}
const
handleDeleteMenu
=
(
id
)
=>
{
deleteMenu
({
id
:
isObject
(
id
)
?
nodeRecord
.
key
:
id
}).
then
(()
=>
{
setTreeStatus
(
FormState
.
FREE
)
setNodeRecord
(
undefined
)
resetMenu
()
})
}
// 新增整合树形操作菜单
// 树形工具栏
const
toolsRender
=
{
addNode
(
node
)
{
const
activeParentId
=
treeActions
&&
treeActions
.
getParent
(
node
.
key
||
node
.
id
)?.
id
setNodeRecord
({
...
node
,
parentId
:
activeParentId
,
// 添加同级的时候 使用上一级的id作为parentId
})
formActions
&&
formActions
.
reset
({
validate
:
false
})
setTreeStatus
(
FormState
.
ADD
)
},
addChildNode
(
node
)
{
setNodeRecord
({
...
node
,
parentId
:
node
.
key
||
node
.
id
})
formActions
&&
formActions
.
reset
({
validate
:
false
})
set
(
node
.
key
||
node
.
id
,
null
)
setTreeStatus
(
FormState
.
ADD
)
},
deleteNode
(
node
)
{
const
id
=
node
.
key
||
node
.
id
handleDeleteMenu
(
id
)
},
...
extendsToolsRender
}
return
{
handleSelect
,
treeStatus
,
...
...
@@ -99,6 +150,8 @@ export const useTreeTabs = (options: useTreeTabOptions = {}) => {
treeExtraMaps
,
setTreeMaps
:
set
,
getTreeMaps
:
get
,
resetMenu
resetMenu
,
toolsRender
,
handleDeleteMenu
}
}
\ No newline at end of file
src/pages/authConfig/memberSystem/memberDetail.tsx
View file @
a3d9dfdf
...
...
@@ -48,7 +48,7 @@ const MemberDetail: React.FC<{}> = () => {
nodeRecord
,
isEditForm
,
setIsEditForm
,
getTreeMaps
getTreeMaps
,
}
=
useTreeTabs
({
fetchMenuData
,
fetchItemDetailData
:
({
id
})
=>
PublicApi
.
getMemberRoleAuthButton
({
...
...
src/pages/authConfig/organ/index.tsx
View file @
a3d9dfdf
...
...
@@ -5,7 +5,7 @@ import {
FormOutlined
,
PlusOutlined
}
from
'@ant-design/icons'
;
import
TabTree
,
{
useTreeActions
}
from
'@/components/TabTree'
;
import
TabTree
,
{
useTreeActions
,
createTreeActions
}
from
'@/components/TabTree'
;
import
SchemaForm
,
{
createFormActions
,
LifeCycleTypes
,
FormEffectHooks
}
from
'@formily/antd'
;
import
{
menuSchema
}
from
'./schema'
;
import
{
PublicApi
}
from
'@/services/api'
;
...
...
@@ -25,6 +25,7 @@ enum FormState {
}
const
formActions
=
createFormActions
()
const
treeActions
=
createTreeActions
()
const
fetchMenuData
=
async
(
params
?)
=>
{
const
res
=
await
PublicApi
.
getMemberOrgTree
()
...
...
@@ -43,27 +44,23 @@ const Organ: React.FC<{}> = () => {
handleSelect
,
getTreeMaps
,
setTreeMaps
,
resetMenu
resetMenu
,
toolsRender
,
handleDeleteMenu
}
=
useTreeTabs
({
treeActions
,
formActions
,
deleteMenu
:
PublicApi
.
postMemberOrgDelete
,
fetchMenuData
:
fetchMenuData
,
fetchItemDetailData
:
PublicApi
.
getMemberOrgGet
})
const
formInitValue
=
nodeRecord
?
getTreeMaps
(
nodeRecord
.
key
)
:
{}
// 当拥有节点数据并且当前状态是编辑状态时 需回显表单
const
formInitValue
=
(
nodeRecord
&&
treeStatus
===
FormState
.
EDIT
)
?
getTreeMaps
(
nodeRecord
.
key
)
:
{}
const
handleSubmitAllSetting
=
()
=>
{
formActions
.
submit
()
}
const
handleDeleteMenu
=
(
id
)
=>
{
PublicApi
.
postMemberOrgDelete
({
id
:
isObject
(
id
)
?
nodeRecord
.
key
:
id
}).
then
(()
=>
{
setTreeStatus
(
FormState
.
FREE
)
setNodeRecord
(
undefined
)
resetMenu
()
})
}
// 保存设置提交
const
handleSubmit
=
(
value
)
=>
{
...
...
@@ -83,27 +80,6 @@ const Organ: React.FC<{}> = () => {
})
}
// 树形工具栏
const
toolsRender
=
{
addNode
(
node
)
{
formActions
.
reset
({
validate
:
false
})
setNodeRecord
(
undefined
)
setTreeStatus
(
FormState
.
ADD
)
},
addChildNode
(
node
)
{
setNodeRecord
({
...
node
,
parentId
:
node
.
key
})
formActions
.
reset
({
validate
:
false
})
setTreeMaps
(
node
.
key
,
null
)
setTreeStatus
(
FormState
.
ADD
)
},
deleteNode
(
node
)
{
handleDeleteMenu
(
node
.
key
)
}
}
return
<
div
className=
"common-wrapper"
>
<
Row
gutter=
{
[
36
,
36
]
}
>
<
Col
span=
{
8
}
>
...
...
@@ -114,6 +90,7 @@ const Organ: React.FC<{}> = () => {
fetchData
=
{
params
=
>
fetchMenuData(params)}
treeData=
{
treeData
}
toolsRender=
{
toolsRender
}
actions=
{
treeActions
}
customKey='id'
handleSelect=
{
(
key
,
node
)
=>
handleSelect
(
key
,
node
)
}
/
>
...
...
src/pages/authConfig/userSystem/schema/index.ts
View file @
a3d9dfdf
...
...
@@ -17,6 +17,12 @@ export const UserDetailSchema:ISchema = {
account
:
{
type
:
'string'
,
title
:
'登录账号'
,
"x-rules"
:
[
{
pattern
:
/^
\w{6,20}
$/
,
message
:
'请输入由数字字母或者下划线组成的6-20位账号'
}
],
required
:
true
},
password
:
{
...
...
@@ -33,6 +39,7 @@ export const UserDetailSchema:ISchema = {
name
:
{
type
:
'string'
,
title
:
'姓名'
,
maxLength
:
16
,
required
:
true
},
phoneLayout
:
{
...
...
@@ -95,7 +102,8 @@ export const UserDetailSchema:ISchema = {
},
jobTitle
:
{
type
:
'string'
,
title
:
'职位'
title
:
'职位'
,
maxLength
:
20
,
},
orgName
:
{
type
:
'string'
,
...
...
src/pages/authConfig/userSystem/userDetail.tsx
View file @
a3d9dfdf
...
...
@@ -35,6 +35,8 @@ const fetchOriginTreeData = async (params?) => { // 平台后台树
}
const
userActions
=
createFormActions
()
const
originTreeActions
=
useTreeActions
()
const
AddUser
:
React
.
FC
<
{}
>
=
()
=>
{
const
[
originVisible
,
setOriginVisible
]
=
useState
(
false
)
...
...
@@ -45,7 +47,6 @@ const AddUser: React.FC<{}> = () => {
const
[
formData
,
setFormData
]
=
useState
<
any
>
(
null
)
const
{
id
,
pageStatus
}
=
usePageStatus
()
const
[
roleSelection
,
roleSelectCtl
]
=
useRowSelectionTable
()
const
originTreeActions
=
useTreeActions
()
const
[
originSelectNode
,
setOriginSelectNode
]
=
useState
<
any
>
()
const
{
data
,
loading
,
err
,
run
}
=
useHttpRequest
(
id
?
PublicApi
.
postMemberUserUpdate
:
PublicApi
.
postMemberUserAdd
)
const
{
...
...
src/pages/classAndProperty/class/index.tsx
View file @
a3d9dfdf
...
...
@@ -6,13 +6,14 @@ import {
LinkOutlined
,
}
from
'@ant-design/icons'
;
import
{
PageHeaderWrapper
}
from
'@ant-design/pro-layout'
;
import
TabTree
,
{
useTreeActions
}
from
'@/components/TabTree'
;
import
TabTree
,
{
useTreeActions
,
createTreeActions
}
from
'@/components/TabTree'
;
import
{
UploadFile
,
UploadChangeParam
}
from
'antd/lib/upload/interface'
;
import
SchemaForm
,
{
createFormActions
,
LifeCycleTypes
,
FormEffectHooks
,
FormButtonGroup
}
from
'@formily/antd'
;
import
{
classSchema
}
from
'./schema'
import
{
PublicApi
}
from
'@/services/api'
;
import
{
useTreeTabs
}
from
'@/hooks/useTreeTabs'
;
import
NiceForm
from
'@/components/NiceForm'
;
import
{
isObject
}
from
'@antv/util'
;
const
{
ON_FORM_INPUT_CHANGE
}
=
LifeCycleTypes
...
...
@@ -23,6 +24,7 @@ enum FormState {
}
const
formActions
=
createFormActions
()
const
treeActions
=
createTreeActions
()
const
fetchClassTreeData
=
async
(
params
?)
=>
{
const
res
=
await
PublicApi
.
getProductPlatformGetCategoryTree
()
...
...
@@ -42,41 +44,22 @@ const ClassProperty: React.FC<{}> = () => {
handleSelect
,
getTreeMaps
,
setTreeMaps
,
resetMenu
resetMenu
,
toolsRender
,
handleDeleteMenu
}
=
useTreeTabs
({
treeActions
,
formActions
,
deleteMenu
:
PublicApi
.
postProductPlatformDeleteCategory
,
fetchMenuData
:
fetchClassTreeData
,
fetchItemDetailData
:
PublicApi
.
getProductPlatformGetCategory
})
const
formInitValue
=
nodeRecord
?
getTreeMaps
(
nodeRecord
.
key
)
:
{}
const
formInitValue
=
(
nodeRecord
&&
treeStatus
===
FormState
.
EDIT
)
?
getTreeMaps
(
nodeRecord
.
key
)
:
{}
useEffect
(()
=>
{
console
.
log
(
nodeRecord
,
'getTreeMaps'
)
},
[
getTreeMaps
])
// 树形工具栏
const
toolsRender
=
{
addNode
(
node
)
{
formActions
.
reset
({
validate
:
false
})
setTreeStatus
(
FormState
.
ADD
)
},
addChildNode
(
node
)
{
formActions
.
reset
({
validate
:
false
})
setNodeRecord
({
...
node
,
parentId
:
node
.
id
,
// 添加子级的时候 使用上一级的id作为parentId
})
setTreeMaps
(
node
.
id
,
null
)
setTreeStatus
(
FormState
.
ADD
)
},
deleteNode
(
node
)
{
PublicApi
.
postProductPlatformDeleteCategory
({
id
:
node
.
id
}).
then
(()
=>
{
resetMenu
()
})
}
}
const
onFinish
=
(
values
)
=>
{
const
editOrAdd
=
nodeRecord
&&
treeStatus
===
FormState
.
EDIT
const
params
=
editOrAdd
?
{
...
values
,
parentId
:
nodeRecord
.
id
}
:
{
...
...
@@ -94,17 +77,6 @@ const ClassProperty: React.FC<{}> = () => {
}
const
handleDeleteMenu
=
()
=>
{
if
(
nodeRecord
)
{
PublicApi
.
postProductPlatformDeleteCategory
({
id
:
nodeRecord
.
id
}).
then
(()
=>
{
setNodeRecord
(
undefined
)
resetMenu
()
})
}
}
return
<
PageHeaderWrapper
title=
"品类"
>
...
...
src/utils/index.ts
View file @
a3d9dfdf
...
...
@@ -5,7 +5,7 @@ function isArray(arr: any) {
return
Array
.
isArray
(
arr
)
}
function
isObject
(
obj
:
any
)
{
export
function
isObject
(
obj
:
any
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'[object Object]'
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment