fix 一些问题修复

web-react/public/seed/form-tabs/index.jsx

@@ -73,6 +73,8 @@ export default class index extends Component {
     }
 
     render() {
+        const { id } = this.props
+
         const { actived, loading, record, saveDisabled, saving } = this.state
 
         return (
@@ -135,6 +137,7 @@ export default class index extends Component {
                                         >
                                             <ComponentDynamic
                                                 is={tab.component}
+                                                id={id}
                                                 record={record}
                                                 loading={loading}
                                                 onRef={child => this.call(child, i)}

web-react/public/seed/form-tabs/tab/index.jsx

@@ -65,7 +65,7 @@ export default class index extends Component {
      * [非必要]
      * @param {*} container
      */
-    setContainer(container) {
+    setContainer = container => {
         this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
     }
 
@@ -79,7 +79,7 @@ export default class index extends Component {
         const { id, loading } = this.props
 
         return (
-            <Container mode="fluid" ref={e => this.setContainer(e)}>
+            <Container mode="fluid" ref={this.setContainer}>
                 <Row gutter={16}>
                     <Col flex="1">
                         <br />

web-react/public/seed/form/index.jsx

@@ -81,7 +81,7 @@ export default class index extends Component {
      * [非必要]
      * @param {*} container
      */
-    setContainer(container) {
+    setContainer = container => {
         this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
     }
 
@@ -98,7 +98,7 @@ export default class index extends Component {
 
         return (
             <div className="yo-form-page">
-                <Container mode="fluid" ref={e => this.setContainer(e)}>
+                <Container mode="fluid" ref={this.setContainer}>
                     <Row gutter={16}>
                         <Col flex="1">
                             <br />
@@ -116,6 +116,7 @@ export default class index extends Component {
                                                 {!loading && (
                                                     <ComponentDynamic
                                                         is={item.component}
+                                                        id={id}
                                                         record={record}
                                                         onRef={child => this.call(child, i)}
                                                     />

web-react/src/pages/business/house/info/form/index.jsx

@@ -201,6 +201,7 @@ export default class index extends Component {
                                         >
                                             <ComponentDynamic
                                                 is={tab.component}
+                                                id={this.props.id}
                                                 record={record}
                                                 loading={loading}
                                                 onRef={child => this.call(child, i)}

web-react/src/pages/business/house/info/form/patrol/index.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { Row, Col, Card, Anchor, Spin } from 'antd'
+import { Anchor, Card, Col, Divider, Row, Spin } from 'antd'
-import { merge } from 'lodash'
 import { AntIcon, ComponentDynamic, Container } from 'components'
+import { isEqual, merge } from 'lodash'
 
 const parts = [
     {
@@ -28,76 +28,103 @@ const parts = [
 ]
 
 export default class index extends Component {
-    container = window
+    // 子表单实例集合
-
     children = []
 
+    // 整合提交数据
     formData = {}
 
-    shouldComponentUpdate(props) {
+    // 锚点挂载DOM
-        return this.props.loading !== props.loading
+    container = window
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state) || this.props.loading !== props.loading
     }
 
-    // 通知上层组件已加载完毕
+    /**
+     * 加载完成,通知父级组件并传递自身
+     */
     call(child, index) {
         this.children[index] = child
         if (this.children.filter(p => p).length === parts.length) {
-            if (this.props.onRef) {
+            const { onRef } = this.props
-                this.props.onRef(this)
+            if (onRef) onRef(this)
-            }
         }
     }
 
-    getContainer = () => {
+    /**
-        return this.container
+     * 从下级组件获取表单数据,并传递给更上级组件
-    }
+     * [异步,必要]
-
+     * @returns
-    setContainer = container => {
+     */
-        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
-    }
-
     async getData() {
         for (const child of this.children) {
             const data = await child.getData()
             merge(this.formData, data)
         }
-
         return this.formData
     }
 
+    /**
+     * 设置锚点容器
+     * [非必要]
+     * @param {*} container
+     */
+    setContainer = container => {
+        this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
+    }
+
+    /**
+     * 渲染
+     * 当前渲染结构已完善,非必要可以不用修改
+     * [必要]
+     * @returns
+     */
     render() {
         const { id, loading } = this.props
 
         return (
             <Container mode="fluid" ref={this.setContainer}>
-                <Row gutter={16} type="flex">
+                <Row gutter={16}>
                     <Col flex="1">
                         <br />
                         <div className="yo-adorn--house-top" />
                         <Card className="yo-form-page--body">
-                            {parts.map((part, i) => (
+                            {parts.map((item, i) => (
-                                <section key={i} id={`form-${i}-${id}`}>
+                                <React.Fragment key={i}>
-                                    {part.title && <h5>{part.title}</h5>}
+                                    <section id={`form-${i}-${id}`}>
-                                    <Spin
+                                        {item.title && <h5>{item.title}</h5>}
-                                        spinning={loading}
+                                        <Spin
-                                        indicator={<AntIcon type="loading" />}
+                                            spinning={loading}
-                                        wrapperClassName={loading && 'h-400-min'}
+                                            indicator={<AntIcon type="loading" />}
-                                    >
+                                            wrapperClassName={loading && 'h-400-min'}
-                                        {!loading && (
+                                        >
-                                            <ComponentDynamic
+                                            {!loading && (
-                                                is={part.component}
+                                                <ComponentDynamic
-                                                {...this.props}
+                                                    is={item.component}
-                                                onRef={child => this.call(child, i)}
+                                                    {...this.props}
-                                            />
+                                                    onRef={child => this.call(child, i)}
-                                        )}
+                                                />
-                                    </Spin>
+                                            )}
-                                </section>
+                                        </Spin>
+                                    </section>
+                                    {i < parts.length - 1 && <Divider />}
+                                </React.Fragment>
                             ))}
                         </Card>
                     </Col>
+                    {/* 锚点,如果不需要可以删除以下节点 */}
                     <Col flex="240px">
                         <Anchor
-                            getContainer={this.getContainer}
+                            getContainer={() => this.container}
                             offsetTop={24}
                             targetOffset={100}
                             wrapperStyle={{ backgroundColor: 'transparent' }}

web-react/src/pages/business/house/info/form/patrol/inspection.jsx

@@ -1,7 +1,115 @@
 import React, { Component } from 'react'
+import { Form, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
 
 export default class inspection extends Component {
+    state = {
+        loading: true,
+        codes: {},
+        options: {},
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * DOM加载完成钩子,绑定数据
+     */
+    componentDidMount() {
+        this.fillData({
+            record: this.props.record,
+        })
+    }
+
+    /**
+     * 加载完成,通知父级组件并传递自身
+     */
+    call() {
+        const { onRef } = this.props
+        if (onRef) onRef(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        //#region 从后端转换成前段所需格式
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({ loading: false })
+        this.call()
+    }
+
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            //#region 从前段转换后端所需格式
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {}
+    //#endregion
+
     render() {
-        return <div>1</div>
+        const { loading } = this.state
+
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Form
+                    initialValues={initialValues}
+                    ref={this.form}
+                    {...layout}
+                    onValuesChange={(changedValues, allValues) =>
+                        this.onValuesChange(changedValues, allValues)
+                    }
+                ></Form>
+            </Spin>
+        )
     }
 }