From 79c14e524894706c9cb7e18b8f4a400dbc7116f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Tue, 22 Jun 2021 17:26:37 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=E4=B8=80=E4=BA=9B=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-react/public/seed/form-tabs/index.jsx | 3 + web-react/public/seed/form-tabs/tab/index.jsx | 4 +- web-react/public/seed/form/index.jsx | 5 +- .../pages/business/house/info/form/index.jsx | 1 + .../business/house/info/form/patrol/index.jsx | 103 ++++++++++------ .../house/info/form/patrol/inspection.jsx | 110 +++++++++++++++++- 6 files changed, 183 insertions(+), 43 deletions(-) diff --git a/web-react/public/seed/form-tabs/index.jsx b/web-react/public/seed/form-tabs/index.jsx index 3cd7e70..f9314cb 100644 --- a/web-react/public/seed/form-tabs/index.jsx +++ b/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 { > this.call(child, i)} diff --git a/web-react/public/seed/form-tabs/tab/index.jsx b/web-react/public/seed/form-tabs/tab/index.jsx index a24bd79..f2cd600 100644 --- a/web-react/public/seed/form-tabs/tab/index.jsx +++ b/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 ( - this.setContainer(e)}> +
diff --git a/web-react/public/seed/form/index.jsx b/web-react/public/seed/form/index.jsx index 4cdb54c..df294ba 100644 --- a/web-react/public/seed/form/index.jsx +++ b/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 (
- this.setContainer(e)}> +
@@ -116,6 +116,7 @@ export default class index extends Component { {!loading && ( this.call(child, i)} /> diff --git a/web-react/src/pages/business/house/info/form/index.jsx b/web-react/src/pages/business/house/info/form/index.jsx index fb3d206..4c3a474 100644 --- a/web-react/src/pages/business/house/info/form/index.jsx +++ b/web-react/src/pages/business/house/info/form/index.jsx @@ -201,6 +201,7 @@ export default class index extends Component { > this.call(child, i)} diff --git a/web-react/src/pages/business/house/info/form/patrol/index.jsx b/web-react/src/pages/business/house/info/form/patrol/index.jsx index 8016035..368174e 100644 --- a/web-react/src/pages/business/house/info/form/patrol/index.jsx +++ b/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 { merge } from 'lodash' +import { Anchor, Card, Col, Divider, Row, Spin } from 'antd' 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) { - return this.props.loading !== props.loading + // 锚点挂载DOM + 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) { - this.props.onRef(this) - } + const { onRef } = this.props + if (onRef) onRef(this) } } - getContainer = () => { - return this.container - } - - setContainer = container => { - this.container = (ReactDOM.findDOMNode(container) || {}).parentNode - } - + /** + * 从下级组件获取表单数据,并传递给更上级组件 + * [异步,必要] + * @returns + */ 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 ( - +
- {parts.map((part, i) => ( -
- {part.title &&
{part.title}
} - } - wrapperClassName={loading && 'h-400-min'} - > - {!loading && ( - this.call(child, i)} - /> - )} - -
+ {parts.map((item, i) => ( + +
+ {item.title &&
{item.title}
} + } + wrapperClassName={loading && 'h-400-min'} + > + {!loading && ( + this.call(child, i)} + /> + )} + +
+ {i < parts.length - 1 && } + ))} + {/* 锚点,如果不需要可以删除以下节点 */} this.container} offsetTop={24} targetOffset={100} wrapperStyle={{ backgroundColor: 'transparent' }} diff --git a/web-react/src/pages/business/house/info/form/patrol/inspection.jsx b/web-react/src/pages/business/house/info/form/patrol/inspection.jsx index de678c0..d759fdf 100644 --- a/web-react/src/pages/business/house/info/form/patrol/inspection.jsx +++ b/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
1
+ const { loading } = this.state + + return ( + }> +
+ this.onValuesChange(changedValues, allValues) + } + >
+ + ) } }