封装formily组件

src/components/NiceForm/components/CustomAddArray.tsx

+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

+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

+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

+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

+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.tsx

+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