Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
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
linweijiong
jinfa-platform
Commits
c2d92ecf
Commit
c2d92ecf
authored
Jul 31, 2020
by
前端-许佳敏
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
封装formily组件
parent
f8671259
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
193 additions
and
0 deletions
+193
-0
CustomAddArray.tsx
src/components/NiceForm/components/CustomAddArray.tsx
+49
-0
CustomStatus.tsx
src/components/NiceForm/components/CustomStatus.tsx
+18
-0
CustomUpload.tsx
src/components/NiceForm/components/CustomUpload.tsx
+18
-0
Search.tsx
src/components/NiceForm/components/Search.tsx
+51
-0
Submit.tsx
src/components/NiceForm/components/Submit.tsx
+18
-0
index.less
src/components/NiceForm/index.less
+0
-0
index.tsx
src/components/NiceForm/index.tsx
+39
-0
No files found.
src/components/NiceForm/components/CustomAddArray.tsx
0 → 100644
View file @
c2d92ecf
import
React
from
'react'
import
styled
from
'styled-components'
import
{
toArr
}
from
'@formily/shared'
;
import
{
SchemaField
,
FormPath
}
from
'@formily/antd'
;
import
{
Button
}
from
'antd'
;
// 由于自增列表里 无法进行mega布局, 所以只能在该组件下 重写样式
const
RowStyleLayout
=
styled
(
props
=>
<
div
{
...
props
}
/>)
`
.ant-btn {
margin-right: 16px;
}
.ant-form-item {
display: inline-flex;
margin-right: 16px;
margin-bottom: 16px;
}
> .ant-form-item {
margin-bottom: 20px;
margin-right: 20px;
}
> .ant-form-item:last-child {
margin-right: 0;
}
.ant-form-item-control {
max-width: none;
}
`
// 自增组件
const
CustomAddArray
=
(
props
)
=>
{
const
{
value
,
schema
,
className
,
editable
,
path
,
mutators
}
=
props
const
componentProps
=
schema
.
getExtendsComponentProps
()
||
{}
const
onAdd
=
()
=>
mutators
.
push
(
schema
.
items
.
getEmptyValue
())
const
onRemove
=
index
=>
mutators
.
remove
(
index
)
return
<
div
>
{
toArr
(
value
).
map
((
item
,
index
,
arr
)
=>
{
return
<
RowStyleLayout
{
...
componentProps
}
key=
{
index
}
>
<
SchemaField
path=
{
FormPath
.
parse
(
path
).
concat
(
index
)
}
onlyRenderProperties
/>
<
Button
onClick=
{
onAdd
.
bind
(
null
,
index
)
}
type=
'primary'
>
+
</
Button
>
{
index
!==
0
&&
<
Button
onClick=
{
onRemove
.
bind
(
null
,
index
)
}
>
-
</
Button
>
}
</
RowStyleLayout
>
})
}
</
div
>
}
CustomAddArray
.
isFieldComponent
=
true
export
default
CustomAddArray
src/components/NiceForm/components/CustomStatus.tsx
0 → 100644
View file @
c2d92ecf
import
React
from
'react'
import
{
Space
}
from
'antd'
const
CustomStatus
=
(
props
)
=>
{
return
(
<>
<
Space
>
<
span
className=
{
props
.
value
===
1
?
'commonStatusValid'
:
'commonStatusInvalid'
}
></
span
>
<
span
>
{
props
.
value
===
1
?
'有效'
:
'无效'
}
</
span
>
</
Space
>
</>
)
}
export
default
CustomStatus
\ No newline at end of file
src/components/NiceForm/components/CustomUpload.tsx
0 → 100644
View file @
c2d92ecf
import
React
from
'react'
import
UploadImage
from
"@/components/UploadImage"
const
CustomUpload
=
(
props
)
=>
{
const
{
mutators
}
=
props
return
<
UploadImage
imgUrl=
{
props
.
value
}
onChange=
{
data
=>
{
// 这里能拿到change后的data值
mutators
.
change
(
data
)
}
}
/>
}
CustomUpload
.
isFieldComponent
=
true
export
default
CustomUpload
\ No newline at end of file
src/components/NiceForm/components/Search.tsx
0 → 100644
View file @
c2d92ecf
import
React
,
{
useState
}
from
'react'
import
{
Input
,
Space
,
Button
}
from
'antd'
import
{
CaretUpOutlined
,
CaretDownOutlined
}
from
'@ant-design/icons'
import
{
useFieldState
,
FormPath
}
from
'@formily/antd'
import
{
FORM_FILTER_PATH
}
from
'@/formSchema/const'
export
interface
SearchProps
{
value
:
string
,
mutators
:
any
,
props
:
any
}
const
Search
=
(
props
)
=>
{
const
[
state
,
setState
]
=
useFieldState
({
filterSearch
:
false
})
const
changeFilterVisible
=
()
=>
{
if
(
state
.
filterSearch
)
{
props
.
form
.
reset
({
// 清除FILTER_PARAMS下所有字段
selector
:
`*.
${
FORM_FILTER_PATH
}
.*`
})
}
setState
({
filterSearch
:
!
state
.
filterSearch
})
}
return
(
<
Space
size=
{
20
}
style=
{
{
justifyContent
:
'flex-end'
,
width
:
'100%'
}
}
>
<
Input
.
Search
value=
{
props
.
value
||
''
}
onChange=
{
e
=>
props
.
mutators
.
change
(
e
.
target
.
value
)
}
onSearch=
{
(
_
,
e
)
=>
{
e
.
preventDefault
()
props
.
form
.
submit
()
}
}
{
...
props
.
props
['
x
-
component
-
props
']}
/>
<
Button
onClick=
{
changeFilterVisible
}
>
高级筛选
{
state
.
filterSearch
?
<
CaretUpOutlined
/>
:
<
CaretDownOutlined
/>
}
</
Button
>
<
Button
onClick=
{
()
=>
props
.
form
.
reset
()
}
>
重置
</
Button
>
</
Space
>
)
}
Search
.
defaultProps
=
{}
Search
.
isFieldComponent
=
true
;
export
default
Search
\ No newline at end of file
src/components/NiceForm/components/Submit.tsx
0 → 100644
View file @
c2d92ecf
import
React
,
{
useState
}
from
'react'
import
{
Input
,
Space
,
Button
}
from
'antd'
import
{
CaretUpOutlined
,
CaretDownOutlined
}
from
'@ant-design/icons'
import
{
useFieldState
,
FormPath
}
from
'@formily/antd'
import
{
FORM_FILTER_PATH
}
from
'@/formSchema/const'
const
Submit
=
(
props
)
=>
{
return
(
<
Button
htmlType=
'submit'
type=
'primary'
>
查询
</
Button
>
)
}
Submit
.
defaultProps
=
{}
Submit
.
isFieldComponent
=
true
;
export
default
Submit
\ No newline at end of file
src/components/NiceForm/index.less
0 → 100644
View file @
c2d92ecf
src/components/NiceForm/index.tsx
0 → 100644
View file @
c2d92ecf
import
React
from
'react'
import
SchemaForm
,
{
IAntdSchemaFormProps
,
createFormActions
,
FormPath
,
SchemaField
}
from
'@formily/antd'
import
{
Button
,
Space
}
from
'antd'
;
import
CustomUpload
from
'./components/CustomUpload'
;
import
CustomStatus
from
'./components/CustomStatus'
;
import
CustomAddArray
from
'./components/CustomAddArray'
;
import
Search
from
'./components/Search'
;
import
Submit
from
'./components/Submit'
;
export
interface
NiceFormProps
extends
IAntdSchemaFormProps
{
}
const
NiceForm
:
React
.
FC
<
NiceFormProps
>
=
(
props
)
=>
{
const
{
children
,
components
,
...
reset
}
=
props
const
customComponents
=
{
CustomUpload
,
CustomStatus
,
CustomAddArray
,
Search
,
Submit
}
const
defineComponents
=
Object
.
assign
(
customComponents
,
components
)
return
(
<
SchemaForm
components=
{
defineComponents
}
{
...
reset
}
>
{
children
}
</
SchemaForm
>
)
}
NiceForm
.
defaultProps
=
{}
export
default
NiceForm
\ No newline at end of file
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