Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
CivManage
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
ReactWeb5
CivManage
Commits
7425e91b
Commit
7425e91b
authored
Oct 19, 2023
by
皮倩雯
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
https://g.civnet.cn:8443/ReactWeb5/maintenance
parents
1817acab
c542fb07
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
348 additions
and
38 deletions
+348
-38
index.js
...uconfig/WorkDesign/components/Designer/Container/index.js
+57
-6
index.less
...onfig/WorkDesign/components/Designer/Container/index.less
+21
-0
index.js
...g/menuconfig/WorkDesign/components/Designer/Left/index.js
+99
-29
index.less
...menuconfig/WorkDesign/components/Designer/Left/index.less
+45
-1
index.js
.../menuconfig/WorkDesign/components/Designer/Right/index.js
+126
-2
No files found.
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js
View file @
7425e91b
import
React
,
{
useRef
,
useContext
}
from
'react'
import
React
,
{
useRef
,
useContext
,
useState
,
useEffect
}
from
'react'
import
styles
from
'./index.less'
import
styles
from
'./index.less'
import
{
DownOutlined
}
from
'@ant-design/icons'
import
{
DownOutlined
,
VerticalAlignTopOutlined
,
UpOutlined
,
VerticalAlignBottomOutlined
}
from
'@ant-design/icons'
import
{
useDrag
,
useDrop
,
DndProvider
}
from
'react-dnd'
import
{
useDrag
,
useDrop
,
DndProvider
}
from
'react-dnd'
import
{
GlobalStore
}
from
'../index'
import
{
GlobalStore
}
from
'../index'
import
Group
from
'./Group'
import
Group
from
'./Group'
import
moment
from
'moment'
import
moment
from
'moment'
import
{
getSiteTree
}
from
'@/services/siteManage/api'
;
const
btns
=
[
{
title
:
'置顶'
,
icon
:
<
VerticalAlignTopOutlined
/>
},
{
title
:
'上一项'
,
icon
:
<
UpOutlined
/>
},
{
title
:
'下一项'
,
icon
:
<
DownOutlined
/>
},
{
title
:
'置底'
,
icon
:
<
VerticalAlignBottomOutlined
/>
},
]
const
Container
=
(
props
)
=>
{
const
Container
=
(
props
)
=>
{
const
currentDate
=
moment
().
format
(
'YYYY-MM-DD'
)
const
currentDate
=
moment
().
format
(
'YYYY-MM-DD'
)
const
ref
=
useRef
(
null
)
const
ref
=
useRef
(
null
)
const
[
currentSite
,
setCurrentSite
]
=
useState
(
'永吉水务有限公司'
)
const
{
shema
,
setShema
}
=
useContext
(
GlobalStore
)
const
{
shema
,
setShema
}
=
useContext
(
GlobalStore
)
const
[,
drop
]
=
useDrop
(()
=>
{
const
[,
drop
]
=
useDrop
(()
=>
{
...
@@ -31,10 +40,43 @@ const Container = (props) => {
...
@@ -31,10 +40,43 @@ const Container = (props) => {
setShema
({
...
shema
,
work
:
array
,
active
:
true
})
setShema
({
...
shema
,
work
:
array
,
active
:
true
})
}
}
const
getSite
=
async
()
=>
{
const
{
code
,
data
}
=
await
getSiteTree
({
node
:
-
1
})
if
(
code
===
0
)
{
setCurrentSite
(
data
?.
list
?.[
0
].
text
)
}
}
const
getData
=
()
=>
{
getSite
()
}
useEffect
(()
=>
{
getData
()
},
[])
const
btnsClick
=
(
item
)
=>
{
let
index
=
0
if
(
item
.
title
===
'置顶'
)
{
index
=
0
}
else
if
(
item
.
title
===
'置底'
)
{
index
=
shema
?.
work
.
length
-
1
}
else
if
(
item
.
title
===
'上一项'
)
{
let
ativeIndex
=
shema
?.
work
?.
findIndex
(
v
=>
v
.
active
)
-
1
index
=
ativeIndex
>=
0
?
ativeIndex
:
0
}
else
if
(
item
.
title
===
'下一项'
)
{
let
ativeIndex
=
shema
?.
work
?.
findIndex
(
v
=>
v
.
active
)
+
1
index
=
ativeIndex
<
(
shema
?.
work
.
length
-
1
)
?
ativeIndex
:
shema
?.
work
.
length
-
1
}
let
array
=
[]
shema
?.
work
.
forEach
((
v
,
i
)
=>
{
array
.
push
({
...
v
,
active
:
index
===
i
,
children
:
v
.
children
.
map
(
s
=>
({
...
s
,
active
:
false
}))
})
})
setShema
({
...
shema
,
work
:
array
,
active
:
false
})
}
return
(
return
(
<
div
<
div
className
=
{
styles
.
container
}
>
className
=
{
styles
.
container
}
>
<
div
className
=
{
styles
.
content
}
>
<
div
className
=
{
styles
.
content
}
>
<
div
<
div
ref
=
{
ref
}
ref
=
{
ref
}
...
@@ -46,7 +88,7 @@ const Container = (props) => {
...
@@ -46,7 +88,7 @@ const Container = (props) => {
<
div
className
=
{
styles
[
'm-info'
]}
>
<
div
className
=
{
styles
[
'm-info'
]}
>
<
div
className
=
{
styles
[
'i-company'
]}
>
<
div
className
=
{
styles
[
'i-company'
]}
>
<
span
className
=
{
styles
[
'c-address'
]}
><
/span
>
<
span
className
=
{
styles
[
'c-address'
]}
><
/span
>
<
span
>
永吉水务有限公司
<
/span
>
<
span
>
{
currentSite
}
<
/span
>
<
DownOutlined
style
=
{{
fontSize
:
'12px'
,
marginLeft
:
'5px'
}}
/
>
<
DownOutlined
style
=
{{
fontSize
:
'12px'
,
marginLeft
:
'5px'
}}
/
>
<
/div
>
<
/div
>
<
div
className
=
{
styles
[
'i-date'
]}
>
<
div
className
=
{
styles
[
'i-date'
]}
>
...
@@ -62,6 +104,15 @@ const Container = (props) => {
...
@@ -62,6 +104,15 @@ const Container = (props) => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
{
styles
[
'c-btns'
]}
>
{
btns
.
map
(
v
=>
{
return
(
<
div
key
=
{
v
.
title
}
className
=
{
styles
[
'c-btn'
]}
onClick
=
{()
=>
btnsClick
(
v
)}
>
{
v
.
icon
}
<
/div
>
)
})
}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
)
)
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less
View file @
7425e91b
...
@@ -17,6 +17,27 @@
...
@@ -17,6 +17,27 @@
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
position: relative;
.c-btns {
position: absolute;
right: 10px;
bottom: 10px;
.c-btn {
border-radius: 50%;
background: white;
width: 30px;
height: 30px;
margin-bottom: 10px;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
cursor: pointer;
color: #1985FF;
}
}
}
.moblie {
.moblie {
width: 330px;
width: 330px;
overflow: auto;
overflow: auto;
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.js
View file @
7425e91b
import
React
,
{
useState
,
useRef
,
useContext
}
from
'react'
import
React
,
{
useState
,
useRef
,
useContext
,
useMemo
}
from
'react'
import
{
Checkbox
,
Row
,
Col
}
from
'antd'
import
{
useDrag
,
useDrop
,
DndProvider
}
from
'react-dnd'
import
{
useDrag
,
useDrop
,
DndProvider
}
from
'react-dnd'
import
{
GlobalStore
}
from
'../index'
import
{
CaretRightOutlined
}
from
'@ant-design/icons'
import
{
CaretRightOutlined
}
from
'@ant-design/icons'
import
styles
from
'./index.less'
import
styles
from
'./index.less'
const
cardTypes
=
[
'管理'
,
'执行'
,
'运营'
]
const
cards
=
[
{
title
:
'运营总览'
,
count
:
1
,
children
:
[
{
name
:
'运营总览'
,
widget
:
'OVERVIEW'
,
type
:
'运营'
}
]
},
{
title
:
'水厂'
,
count
:
2
,
children
:
[
{
name
:
'水厂总览'
,
widget
:
'WATER_OVERVIEW'
,
type
:
'运营'
},
{
name
:
'供水量曲线'
,
widget
:
'WATER_CHART'
,
type
:
'运营'
},
]
},
{
title
:
'管网'
,
count
:
4
,
children
:
[
{
name
:
'管网监控'
,
widget
:
'PIPEMONITORING'
,
type
:
'运营'
},
{
name
:
'管网采集'
,
widget
:
'PIPEGATHER'
,
type
:
'运营'
},
{
name
:
'管网巡检'
,
widget
:
'PIPEINSPECTION'
,
type
:
'运营'
},
{
name
:
'维修工单'
,
widget
:
'MAINTENANCEORDER'
,
type
:
'运营'
},
]
},
{
title
:
'二供'
,
count
:
3
,
children
:
[
{
name
:
'二供总览'
,
widget
:
'OPERATIONAL_OVERVIEW'
,
type
:
'运营'
},
{
name
:
'泵房运行状态'
,
widget
:
'PUMP_STATUS'
,
type
:
'运营'
},
{
name
:
'泵房维修保养'
,
widget
:
'PUMP_MAINTAIN'
,
type
:
'运营'
},
]
},
{
title
:
'营收'
,
count
:
1
,
children
:
[
{
name
:
'营收总览'
,
widget
:
'REVENUE_OVERVIEW'
,
type
:
'运营'
},
]
}
]
const
getNanoid
=
(
len
=
10
)
=>
{
const
getNanoid
=
(
len
=
10
)
=>
{
var
orgStr
=
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
;
var
orgStr
=
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
;
let
returnStr
=
""
;
let
returnStr
=
""
;
...
@@ -51,7 +97,7 @@ const Group = (props) => {
...
@@ -51,7 +97,7 @@ const Group = (props) => {
}
}
const
Card
=
(
props
)
=>
{
const
Card
=
(
props
)
=>
{
console
.
log
(
'pprops'
,
props
)
const
ref
=
useRef
(
null
)
const
ref
=
useRef
(
null
)
const
id
=
getNanoid
()
const
id
=
getNanoid
()
...
@@ -71,11 +117,9 @@ const Card = (props) => {
...
@@ -71,11 +117,9 @@ const Card = (props) => {
ref
=
{
ref
}
ref
=
{
ref
}
className
=
{
styles
.
card
}
className
=
{
styles
.
card
}
>
>
<
div
<
div
className
=
{
styles
.
cardType
}
type
=
{
props
.
type
}
>
{
props
.
type
+
'组件'
}
<
/div
>
className
=
{
styles
.
cardBox
}
<
div
className
=
{
styles
.
cardBox
}
widget
=
{
props
.
widget
}
><
/div
>
widget
=
{
props
.
widget
}
<
div
className
=
{
styles
.
swiper
}
>
{
props
.
name
}
<
/div
>
>
<
/div
>
<
/div
>
<
/div
>
)
)
}
}
...
@@ -102,6 +146,23 @@ const CardGroup = (props) => {
...
@@ -102,6 +146,23 @@ const CardGroup = (props) => {
const
Left
=
()
=>
{
const
Left
=
()
=>
{
const
[
cardType
,
setCardType
]
=
useState
(
cardTypes
)
const
cardsFilter
=
useMemo
(()
=>
{
let
array
=
[]
cards
.
forEach
(
v
=>
{
let
children
=
v
.
children
.
filter
(
s
=>
cardType
.
includes
(
s
.
type
))
if
(
children
.
length
)
{
array
.
push
({
...
v
,
children
})
}
})
return
array
},
[
cards
,
cardType
])
const
cardTypeChange
=
(
value
)
=>
{
setCardType
(
value
)
}
return
(
return
(
<
div
className
=
{
styles
.
left
}
>
<
div
className
=
{
styles
.
left
}
>
<
div
className
=
{
styles
.
header
}
>
组件库
<
/div
>
<
div
className
=
{
styles
.
header
}
>
组件库
<
/div
>
...
@@ -113,29 +174,38 @@ const Left = () => {
...
@@ -113,29 +174,38 @@ const Left = () => {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
{
styles
.
item
}
>
<
div
className
=
{
styles
.
item
}
>
<
div
className
=
{
styles
[
'g-title'
]}
>
卡片组件
<
/div
>
<
div
className
=
{
styles
[
'g-title'
]}
style
=
{{
paddingBottom
:
'0'
}}
>
卡片组件
<
/div
>
<
div
className
=
{
styles
[
'g-checks'
]}
>
<
Checkbox
.
Group
style
=
{{
width
:
'100%'
}}
value
=
{
cardType
}
onChange
=
{
cardTypeChange
}
>
<
Row
>
{
cardTypes
.
map
(
v
=>
{
return
(
<
Col
key
=
{
v
}
span
=
{
8
}
style
=
{{
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
Checkbox
value
=
{
v
}
>
{
v
}
<
/Checkbox
>
<
/Col
>
)
})
}
<
/Row
>
<
/Checkbox.Group
>
<
/div
>
<
div
className
=
{
styles
[
'g-content'
]}
>
<
div
className
=
{
styles
[
'g-content'
]}
>
<
CardGroup
title
=
{
'运营总览'
}
count
=
{
1
}
>
{
<
Card
name
=
{
'运营总览'
}
widget
=
{
'OVERVIEW'
}
><
/Card
>
cardsFilter
.
map
(
v
=>
{
<
/CardGroup
>
return
(
<
CardGroup
title
=
{
'水厂'
}
count
=
{
2
}
>
<
CardGroup
key
=
{
v
.
title
}
{...
v
}
>
<
Card
name
=
{
'水厂总览'
}
widget
=
{
'WATER_OVERVIEW'
}
><
/Card
>
{
<
Card
name
=
{
'供水量曲线'
}
widget
=
{
'WATER_CHART'
}
><
/Card
>
v
.
children
.
map
(
s
=>
<
Card
key
=
{
s
.
name
}
{...
s
}
><
/Card>
)
<
/CardGroup
>
}
<
CardGroup
title
=
{
'管网'
}
count
=
{
4
}
>
<
Card
name
=
{
'管网监控'
}
widget
=
{
'PIPEMONITORING'
}
><
/Card
>
<
Card
name
=
{
'管网采集'
}
widget
=
{
'PIPEGATHER'
}
><
/Card
>
<
Card
name
=
{
'管网巡检'
}
widget
=
{
'PIPEINSPECTION'
}
><
/Card
>
<
Card
name
=
{
'维修工单'
}
widget
=
{
'MAINTENANCEORDER'
}
><
/Card
>
<
/CardGroup
>
<
CardGroup
title
=
{
'二供'
}
count
=
{
4
}
>
<
Card
name
=
{
'二供总览'
}
widget
=
{
'OPERATIONAL_OVERVIEW'
}
><
/Card
>
<
Card
name
=
{
'泵房运行状态'
}
widget
=
{
'PUMP_STATUS'
}
><
/Card
>
<
Card
name
=
{
'泵房维修保养'
}
widget
=
{
'PUMP_MAINTAIN'
}
><
/Card
>
<
/CardGroup
>
<
CardGroup
title
=
{
'营收'
}
count
=
{
1
}
>
<
Card
name
=
{
'营收总览'
}
widget
=
{
'REVENUE_OVERVIEW'
}
><
/Card
>
<
/CardGroup
>
<
/CardGroup
>
)
})
}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Left/index.less
View file @
7425e91b
...
@@ -19,6 +19,10 @@
...
@@ -19,6 +19,10 @@
font-size: 14px;
font-size: 14px;
font-weight: 700;
font-weight: 700;
}
}
.g-checks {
padding: 9px 0;
background: linear-gradient(to top, #F3F3F3, #FFFFFF);
}
.g-content {
.g-content {
padding: 0 10px;
padding: 0 10px;
.group {
.group {
...
@@ -33,9 +37,10 @@
...
@@ -33,9 +37,10 @@
.card {
.card {
width: 100%;
width: 100%;
border-radius: 4px;
border-radius: 4px;
background: #
E4E4E
4;
background: #
f4f4f
4;
margin-top: 7px;
margin-top: 7px;
padding: 10px;
padding: 10px;
position: relative;
.cardBox {
.cardBox {
width: 100%;
width: 100%;
height: 100%;
height: 100%;
...
@@ -95,6 +100,44 @@
...
@@ -95,6 +100,44 @@
background-size: 100% 100%;
background-size: 100% 100%;
}
}
}
}
&:hover {
.swiper {
height: 25px;
}
}
.cardType {
position: absolute;
right: 0;
top: 0;
color: white;
padding: 2px 5px;
&[type='管理'] {
border-radius: 4px;
background: #2291ee;
}
&[type='执行'] {
border-radius: 4px;
background: #9079FF;
}
&[type='运营'] {
border-radius: 4px;
background: #26BB9A;
}
}
.swiper {
overflow: hidden;
position: absolute;
transition: all 0.5s;
color: white;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
height: 0;
line-height: 25px;
border-radius: 0 0 4px 4px;
background: rgba(0, 0, 0, 0.3);
}
}
}
}
}
}
}
...
@@ -102,6 +145,7 @@
...
@@ -102,6 +145,7 @@
.cardGroup {
.cardGroup {
padding-left: 10px;
padding-left: 10px;
font-size: 14px;
font-size: 14px;
margin-top: 3px;
.g-top {
.g-top {
display: inline;
display: inline;
&:hover {
&:hover {
...
...
src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js
View file @
7425e91b
import
React
,
{
useState
,
useContext
,
useMemo
,
useEffect
}
from
'react'
import
React
,
{
useState
,
useContext
,
useMemo
,
useEffect
}
from
'react'
import
styles
from
'./index.less'
import
styles
from
'./index.less'
import
{
Input
,
Form
}
from
'antd'
import
{
Input
,
Form
,
TreeSelect
,
Switch
,
Modal
}
from
'antd'
import
{
GlobalStore
}
from
'../index'
import
{
GlobalStore
}
from
'../index'
import
{
getMenuInfo
,
getMiniAppModuleTree
}
from
'@/services/mobileConfig/api'
import
{
UsergroupDeleteOutlined
,
IdcardOutlined
,
DesktopOutlined
,
FolderFilled
,
FileOutlined
,
MobileOutlined
,
DeleteOutlined
,
PictureOutlined
,
}
from
'@ant-design/icons'
const
{
TreeNode
}
=
TreeSelect
const
themes
=
[
const
themes
=
[
{
name
:
'供水主题背景'
},
{
name
:
'供水主题背景'
},
...
@@ -14,6 +27,8 @@ const Right = () => {
...
@@ -14,6 +27,8 @@ const Right = () => {
const
{
shema
,
setShema
}
=
useContext
(
GlobalStore
)
const
{
shema
,
setShema
}
=
useContext
(
GlobalStore
)
const
{
active
}
=
shema
const
{
active
}
=
shema
const
[
form
]
=
Form
.
useForm
()
const
[
form
]
=
Form
.
useForm
()
const
[
moblieList
,
setMoblieList
]
=
useState
([])
const
[
iconShow
,
setIconShow
]
=
useState
()
const
name
=
useMemo
(()
=>
{
const
name
=
useMemo
(()
=>
{
let
name
=
''
let
name
=
''
...
@@ -73,6 +88,92 @@ const Right = () => {
...
@@ -73,6 +88,92 @@ const Right = () => {
setShema
({
...
shema
,
work
:
array
})
setShema
({
...
shema
,
work
:
array
})
}
}
const
cardSettingOther
=
(
value
,
attr
)
=>
{
let
array
=
[]
shema
?.
work
.
forEach
(
v
=>
{
array
.
push
({
...
v
,
children
:
v
.
children
.
map
(
v
=>
({
...
v
,
[
attr
]:
v
.
active
?
value
:
v
[[
attr
]]
}))
})
})
setShema
({
...
shema
,
work
:
array
})
}
const
getAppList
=
async
()
=>
{
const
{
code
,
data
}
=
await
getMiniAppModuleTree
({
userMode
:
'super'
,
})
if
(
code
===
0
)
{
let
array
=
(
data
[
0
].
children
.
length
>
0
&&
[...
data
[
0
].
children
])
||
[];
let
list
=
[];
array
.
map
((
i
,
j
)
=>
{
let
aa
=
[];
i
.
children
.
map
(
k
=>
{
if
(
k
.
text
===
'菜单管理'
)
{
aa
=
k
.
children
;
}
});
let
a
=
{};
a
.
value
=
`praent
${
j
}
`
;
a
.
text
=
i
.
text
;
a
.
children
=
aa
;
a
.
menuID
=
`praent
${
j
}
`
;
a
.
key
=
`praent
${
j
}
`
;
list
.
push
(
a
);
})
setMoblieList
(
list
)
}
}
const
mapTreeMoblie
=
(
org
)
=>
{
const
haveChildren
=
Array
.
isArray
(
org
.
children
)
&&
org
.
children
.
length
>
0
;
if
(
org
.
key
)
{
if
(
haveChildren
)
{
return
(
<
TreeNode
value
=
{
org
.
pageUrl
||
org
.
menuID
}
title
=
{
org
.
text
}
icon
=
{
org
.
key
?
<
MobileOutlined
/>
:
<
FolderFilled
/>
}
disabled
>
{
org
.
children
.
map
(
item
=>
mapTreeMoblie
(
item
))}
<
/TreeNode
>
);
}
return
<
TreeNode
value
=
{
org
.
pageUrl
||
org
.
menuID
}
title
=
{
org
.
text
}
icon
=
{
<
MobileOutlined
/>
}
disabled
/>
;
}
return
haveChildren
?
(
<
TreeNode
value
=
{
org
.
pageUrl
||
org
.
menuID
}
title
=
{
org
.
text
}
icon
=
{
org
.
key
?
<
MobileOutlined
/>
:
<
FolderFilled
/>
}
disabled
>
{
org
.
children
.
map
(
item
=>
mapTreeMoblie
(
item
))}
<
/TreeNode
>
)
:
(
<
TreeNode
value
=
{
org
.
pageUrl
||
org
.
menuID
}
title
=
{
org
.
text
}
icon
=
{
org
.
menuType
==
'MiniAppMenuGroup'
||
org
.
menuType
==
'MiniAppMenuGroupTwo'
?
(
<
FolderFilled
/>
)
:
(
<
FileOutlined
style
=
{{
color
:
'#1890ff'
}}
/
>
)
}
disabled
=
{
org
.
menuType
==
'MiniAppMenuGroup'
||
org
.
menuType
==
'MiniAppMenuGroupTwo'
}
/
>
)
}
const
getData
=
()
=>
{
getAppList
()
}
const
iconShowChange
=
()
=>
{
setIconShow
(
true
)
}
useEffect
(()
=>
{
getData
()
},
[])
return
(
return
(
<
div
className
=
{
styles
.
right
}
>
<
div
className
=
{
styles
.
right
}
>
<
div
className
=
{
styles
.
header
}
>
{
active
?
'页面配置'
:
'组件配置'
}
<
/div
>
<
div
className
=
{
styles
.
header
}
>
{
active
?
'页面配置'
:
'组件配置'
}
<
/div
>
...
@@ -119,11 +220,27 @@ const Right = () => {
...
@@ -119,11 +220,27 @@ const Right = () => {
<
Form
.
Item
label
=
"卡片名称"
name
=
"name"
>
<
Form
.
Item
label
=
"卡片名称"
name
=
"name"
>
<
Input
value
=
{
card
.
name
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'name'
)}
/
>
<
Input
value
=
{
card
.
name
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'name'
)}
/
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
label
=
"卡片名称是否显示"
name
=
"nameShow"
valuePropName
=
'checked'
>
<
Switch
checked
=
{
card
.
nameShow
}
onChange
=
{
check
=>
cardSettingOther
(
check
,
'nameShow'
)}
/
>
<
/Form.Item
>
<
Form
.
Item
label
=
"卡片图标"
name
=
"icon"
>
<
Form
.
Item
label
=
"卡片图标"
name
=
"icon"
>
<
Input
value
=
{
card
.
icon
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'icon'
)}
/
>
<
Input
value
=
{
card
.
icon
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'icon'
)}
/
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
label
=
"功能跳转"
name
=
"url"
>
<
Form
.
Item
label
=
"功能跳转"
name
=
"url"
>
<
Input
.
TextArea
value
=
{
card
.
url
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'url'
)}
/
>
<
TreeSelect
showSearch
treeNodeFilterProp
=
"title"
style
=
{{
width
:
'97%'
}}
value
=
{
card
.
url
}
dropdownStyle
=
{{
maxHeight
:
400
,
overflow
:
'auto'
}}
placeholder
=
"请选择功能路径"
allowClear
treeDefaultExpandAll
treeIcon
onChange
=
{(
value
)
=>
cardSettingOther
(
value
,
'url'
)}
>
{
moblieList
.
map
(
i
=>
mapTreeMoblie
(
i
))}
<
/TreeSelect
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
label
=
"卡片参数"
name
=
"param"
>
<
Form
.
Item
label
=
"卡片参数"
name
=
"param"
>
<
Input
value
=
{
card
.
param
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'param'
)}
/
>
<
Input
value
=
{
card
.
param
}
onChange
=
{(
e
)
=>
cardSetting
(
e
,
'param'
)}
/
>
...
@@ -133,6 +250,13 @@ const Right = () => {
...
@@ -133,6 +250,13 @@ const Right = () => {
)
)
}
}
<
/div
>
<
/div
>
<
Modal
title
=
{
'卡片图标'
}
visible
=
{
iconShow
}
onCancel
=
{()
=>
setIconShow
(
false
)}
>
<
/Modal
>
<
/div
>
<
/div
>
)
)
...
...
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