.

Web/seed/form/index.jsx

@@ -0,0 +1,169 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { Anchor, Button, Card, Col, Divider, Row, Spin } from 'antd'
+import { AntIcon, ComponentDynamic, Container } from 'components'
+import { isEqual, merge } from 'lodash'
+
+const parts = [
+    {
+        // title: '标题',
+        component: () => import('./part'),
+    },
+]
+
+export default class index extends Component {
+    state = {
+        loading: true,
+        record: null,
+        saveDisabled: true,
+        saving: false,
+    }
+
+    // 子表单实例集合
+    children = []
+
+    // 整合提交数据
+    formData = {}
+
+    // 锚点挂载DOM
+    container = window
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * DOM加载完成钩子,可在此获取详细数据赋值到record
+     */
+    componentDidMount() {}
+
+    call(child, index) {
+        this.children[index] = child
+        if (this.children.filter(p => p).length === parts.filter(p => p.show).length) {
+            this.setState({ saveDisabled: false })
+        }
+    }
+
+    /**
+     * 提交
+     * [异步,必要]
+     * @returns
+     */
+    async onSubmit() {
+        for (const child of this.children) {
+            try {
+                const data = await child.getData()
+                merge(this.formData, data)
+            } catch (e) {
+                return e
+            }
+        }
+
+        //#region 提交数据
+        this.setState({ saving: true })
+        this.setState({ saving: false })
+        //#endregion
+    }
+
+    /**
+     * 设置锚点容器
+     * [非必要]
+     * @param {*} container
+     */
+    setContainer = container => {
+        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
+    }
+
+    /**
+     * 渲染
+     * 当前渲染结构已完善,非必要可以不用修改
+     * [必要]
+     * @returns
+     */
+    render() {
+        const { id } = this.props
+
+        const { loading, record, saveDisabled, saving } = this.state
+
+        return (
+            <div className="yo-form-page">
+                <Container mode="fluid" ref={this.setContainer}>
+                    <Row gutter={16}>
+                        <Col flex="1">
+                            <br />
+                            <div className="yo-adorn--house-top" />
+                            <Card className="yo-form-page--body">
+                                {parts.map((item, i) => (
+                                    <React.Fragment key={i}>
+                                        <section id={`form-${i}-${id}`}>
+                                            {item.title && <h5>{item.title}</h5>}
+                                            <Spin
+                                                spinning={loading}
+                                                indicator={<AntIcon type="loading" />}
+                                                wrapperClassName={loading && 'h-400-min'}
+                                            >
+                                                {!loading && (
+                                                    <ComponentDynamic
+                                                        is={item.component}
+                                                        id={id}
+                                                        record={record}
+                                                        onRef={child => this.call(child, i)}
+                                                    />
+                                                )}
+                                            </Spin>
+                                        </section>
+                                        {i < parts.length - 1 && <Divider />}
+                                    </React.Fragment>
+                                ))}
+                            </Card>
+                        </Col>
+                        {/* 锚点,如果不需要可以删除以下节点 */}
+                        <Col flex="240px">
+                            <Anchor
+                                getContainer={() => this.container}
+                                offsetTop={24}
+                                targetOffset={100}
+                                wrapperStyle={{ backgroundColor: 'transparent' }}
+                                onClick={e => e.preventDefault()}
+                            >
+                                {parts.map((part, i) => (
+                                    <Anchor.Link
+                                        key={i}
+                                        href={`#form-${i}-${id}`}
+                                        title={part.title}
+                                    />
+                                ))}
+                            </Anchor>
+                        </Col>
+                    </Row>
+                </Container>
+                <div className="yo-form-page--bar">
+                    <Container mode="fluid">
+                        <div className="yo-form-page--bar-inner">
+                            <span></span>
+                            <span>
+                                <Button onClick={() => window.closeContentWindow()}>取消</Button>
+                                <Button
+                                    disabled={saveDisabled}
+                                    loading={saving}
+                                    type="primary"
+                                    onClick={() => this.onSubmit()}
+                                >
+                                    保存
+                                </Button>
+                            </span>
+                        </div>
+                    </Container>
+                </div>
+            </div>
+        )
+    }
+}