抽离公共虚拟布局组件

src/app.tsx

@@ -12,6 +12,8 @@ import { isDev } from '@/constants'
 import { setup } from '@formily/antd-components';
 import { getRouters, getAuth, asyncRouter, setAuth, setRouters, removeAuth, removeRouters } from './utils/auth';
 import { PublicApi } from './services/api';
+// 全局注册虚拟组件
+import '@/components/NiceForm/public'
 
 setup()
 
@@ -107,10 +109,10 @@ export function render(oldRender: Function) {
 export function onRouteChange({ routes, matchedRoutes, location, action }) {
   console.log('onRouteChange')
 
-  // if (isDev) {
+  if (isDev) {
 
-  //   return;
-  // }
+    return;
+  }
 
   // 是否登录
   if (getAuth()) {

src/components/NiceForm/index.tsx

@@ -4,7 +4,6 @@ import SchemaForm, {
 } from '@formily/antd';
 import { Input } from '@formily/antd-components';
 import { Button, Space, Row, Col } from 'antd';
-import styled from 'styled-components'
 import CustomUpload from './components/CustomUpload';
 import CustomStatus from './components/CustomStatus';
 import CustomAddArray from './components/CustomAddArray';
@@ -25,62 +24,9 @@ import SearchSelect from './components/SearchSelect';
 import TableTagList from './components/TableTagList';
 import './index.less'
 import { Checkbox } from '@formily/antd-components';
-import cx from 'classnames'
 
 export interface NiceFormProps extends IAntdSchemaFormProps {}
 
-const RowLayout = styled(props => <Row justify='end' {...props}/>)`
-  .mega-layout-item {
-    margin-bottom: 20px !important;
-  }
-  .mega-layout-container {
-    margin-bottom: 0;
-  }
-`
-
-const renderCol = (schema, isLast) => {
-  const { flexcol = {} } = schema['x-component-props']
-  return <Col style={isLast ? {} : {marginRight: 24}} {...flexcol} key={schema.path}>
-    <SchemaField schema={schema.toJSON()} path={schema.path}/>
-  </Col>
-}
-
-// 自定义flex布局容器
-registerVirtualBox('flex-box', props => {
-  const childProperties = props.schema.getOrderProperties()
-  const { title, required } = props.props
-  const {labelcol, wrappercol} = props.schema.getExtendsComponentProps()
-  return <Row>
-      { title && <Col span={labelcol} className={cx(required ? 'flex-layout-label-required' : '')}>{title}</Col>}
-      <Col span={wrappercol}>
-        <Row>
-          {
-            childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
-          }
-        </Row>
-      </Col>
-  </Row>
-})
-
-registerVirtualBox('flex-layout', (_props) => {
-  const { children, props } = _props
-  const rowStyle = props['x-component-props'] ? props['x-component-props'].rowStyle : {}
-  const colStyle = props['x-component-props'] ? props['x-component-props'].colStyle : {}
-  return (
-    <RowLayout style={rowStyle}>
-      {
-        children.map((v, i) => <Col style={colStyle} key={i}>{v}</Col>)
-      }
-    </RowLayout>
-  )
-})
-registerVirtualBox('empty-layout', (_props) => {
-  const { children, props } = _props
-  return (
-    <div>{children}</div>
-  )
-})
-
 const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
 const SchemaButton = createVirtualBox('schemaButton', Button)
 const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)

src/components/NiceForm/public/index.tsx

+// 全局注册虚拟布局组件
+import React from 'react'
+import { registerVirtualBox, SchemaField } from "@formily/antd"
+import { Col, Row } from 'antd'
+import cx from 'classnames'
+import styled from 'styled-components'
+
+const RowLayout = styled(props => <Row justify='end' {...props}/>)`
+  .mega-layout-item {
+    margin-bottom: 20px !important;
+  }
+  .mega-layout-container {
+    margin-bottom: 0;
+  }
+`
+
+const renderCol = (schema, isLast) => {
+  const { flexcol = {} } = schema['x-component-props']
+  return <Col style={isLast ? {} : {marginRight: 24}} {...flexcol} key={schema.path}>
+    <SchemaField schema={schema.toJSON()} path={schema.path}/>
+  </Col>
+}
+// 自定义flex布局容器
+registerVirtualBox('flex-box', props => {
+  const childProperties = props.schema.getOrderProperties()
+  const { title, required } = props.props
+  const {labelcol, wrappercol} = props.schema.getExtendsComponentProps()
+  return <Row>
+      { title && <Col span={labelcol} className={cx(required ? 'flex-layout-label-required' : '')}>{title}</Col>}
+      <Col span={wrappercol}>
+        <Row>
+          {
+            childProperties.map((v, i, arr) => renderCol(v.schema, arr.length - 1 === i))
+          }
+        </Row>
+      </Col>
+  </Row>
+})
+
+registerVirtualBox('flex-layout', (_props) => {
+  const { children, props } = _props
+  const rowStyle = props['x-component-props'] ? props['x-component-props'].rowStyle : {}
+  const colStyle = props['x-component-props'] ? props['x-component-props'].colStyle : {}
+  return (
+    <RowLayout style={rowStyle}>
+      {
+        children.map((v, i) => <Col style={colStyle} key={i}>{v}</Col>)
+      }
+    </RowLayout>
+  )
+})
+registerVirtualBox('empty-layout', (_props) => {
+  const { children, props } = _props
+  return (
+    <div>{children}</div>
+  )
+})
\ No newline at end of file