Merge branch 'master' of http://118.178.224.202:3000/ewide/ewide_core

web-react/craco.config.js

@@ -28,7 +28,7 @@ module.exports = {
     ],
     webpack: {
         plugins: [
-            // new MonacoWebpackPlugin()
+            new MonacoWebpackPlugin()
         ]
     }
 }

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

@@ -39,13 +39,12 @@ const tabs = [
     //     active: false,
     //     show: false,
     // },
-    // {
+    {
-    //     title: '巡查登记',
+        title: '巡查登记',
-    //     name: 'patrol',
+        component: () => import('./patrol'),
-    //     path: 'patrol',
+        active: false,
-    //     active: false,
+        show: true,
-    //     show: true,
+    },
-    // },
 ]
 
 export default class index extends Component {

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

@@ -0,0 +1,112 @@
+import React, { Component } from 'react'
+import { Row, Col, Form, Input, DatePicker, Spin } from 'antd'
+import { cloneDeep, isEqual } from 'lodash'
+import { AntIcon } from 'components'
+import moment from 'moment'
+import { CITY } from 'util/global'
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class base extends Component {
+    state = {
+        loading: true,
+    }
+
+    form = React.createRef()
+
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    componentDidMount() {
+        this.fillData({
+            record: this.props.record,
+        })
+    }
+
+    call() {
+        if (this.props.onRef) {
+            this.props.onRef(this)
+        }
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+        //#region 从后端转换成前段所需格式
+        if (this.record) {
+            const { patrolDate } = this.record.patrolInfo
+            this.record.patrolInfo.patrolDate = patrolDate ? moment(patrolDate) : patrolDate
+        }
+        //#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 从前段转换后端所需格式
+            if (postData.patrolInfo.patrolDate) {
+                postData.patrolInfo.patrolDate = postData.patrolInfo.patrolDate.format('YYYY-MM-DD')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    render() {
+        const { loading } = this.state
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Form {...layout} ref={this.form}>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name={['patrolInfo', 'patrolDate']}
+                                label="巡查日期"
+                                rules={[{ required: true, message: '请选择巡查日期' }]}
+                            >
+                                <DatePicker
+                                    onChange={date => {
+                                        /*$root.transfer.completedYear = date.format('YYYY') */
+                                    }}
+                                    className="w-100-p"
+                                    placeholder="请选择巡查日期"
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="巡查人/单位"
+                                name={['patrolInfo', 'patrolUser']}
+                                rules={[{ required: true, message: '请输入巡查人/单位' }]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入巡查人/单位" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { Row, Col, Card, Anchor, Spin } from 'antd'
+import { defaultsDeep, merge } from 'lodash'
+import { AntIcon, ComponentDynamic, Container } from 'components'
+
+const parts = [
+    {
+        title: '巡查基本情况',
+        component: () => import('./base'),
+    },
+]
+
+export default class index extends Component {
+    container = window
+
+    children = []
+
+    formData = {}
+
+    shouldComponentUpdate(props) {
+        return 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)
+            }
+        }
+    }
+
+    getContainer = () => {
+        return this.container
+    }
+
+    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
+    }
+
+    render() {
+        const { id, loading } = this.props
+
+        return (
+            <Container mode="fluid" ref={this.setContainer}>
+                <Row gutter={16} type="flex">
+                    <Col flex="1">
+                        <br />
+                        <div className="yo-adorn--house-top" />
+                        <Card className="yo-form-page--body">
+                            {parts.map((part, i) => (
+                                <section key={i} id={`form-${i}-${id}`}>
+                                    {part.title && <h5>{part.title}</h5>}
+                                    <Spin
+                                        spinning={loading}
+                                        indicator={<AntIcon type="loading" />}
+                                        wrapperClassName={loading && 'h-400-min'}
+                                    >
+                                        {!loading && (
+                                            <ComponentDynamic
+                                                is={part.component}
+                                                {...this.props}
+                                                onRef={child => this.call(child, i)}
+                                            />
+                                        )}
+                                    </Spin>
+                                </section>
+                            ))}
+                        </Card>
+                    </Col>
+                    <Col flex="240px">
+                        <Anchor
+                            getContainer={this.getContainer}
+                            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>
+        )
+    }
+}

web-react/src/pages/business/house/project/form.jsx

@@ -3,11 +3,11 @@ import { Cascader, Form, Input, InputNumber, Radio, Spin, TreeSelect } from 'ant
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
 import { api } from 'common/api'
-import { numberToChinese } from 'util/format';
+import { numberToChinese } from 'util/format'
 
 const initialValues = {
     sort: 100,
-    type: 1
+    type: 1,
 }
 export default class form extends Component {
     state = {
@@ -16,8 +16,8 @@ export default class form extends Component {
         exist: false,
 
         options: {
-            areaData: []
+            areaData: [],
-        }
+        },
     }
     areaCode = ''
     houseType = 1
@@ -35,14 +35,18 @@ export default class form extends Component {
     }
 
     /**
-    * 填充数据
+     * 填充数据
-    * 可以在设置this.record之后对其作出数据结构调整
+     * 可以在设置this.record之后对其作出数据结构调整
-    * [异步,必要]
+     * [异步,必要]
-    * @param {*} params 
+     * @param {*} params
-    */
+     */
     async fillData(params) {
-        const areaCodeDefault = params.record ? params.record.areaCode : params.pid ? params.pid : '';
+        const areaCodeDefault = params.record
-        this.houseType = params.record ? params.record.type : 1;
+            ? params.record.areaCode
+            : params.pid
+            ? params.pid
+            : ''
+        this.houseType = params.record ? params.record.type : 1
         this.record = cloneDeep(params.record)
         this.initRecord = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
@@ -50,54 +54,54 @@ export default class form extends Component {
 
         this.setState({
             exist: !!params.record,
-            options: { areaData }
+            options: { areaData },
         })
 
-        const areaCode = [];
+        const areaCode = []
         const findCode = (data, level) => {
-            level = level || 0;
+            level = level || 0
             for (let i = 0; i < data.length; i++) {
-                const item = data[i];
+                const item = data[i]
-                areaCode[level] = item.code;
+                areaCode[level] = item.code
 
                 if (item.code === areaCodeDefault) {
-                    areaCode.length = level + 1;
+                    areaCode.length = level + 1
-                    return true;
+                    return true
                 }
 
                 if (item.children && item.children.length) {
-                    const found = findCode(item.children, level + 1);
+                    const found = findCode(item.children, level + 1)
                     if (found) {
-                        return true;
+                        return true
                     }
                 }
             }
-        };
+        }
 
         if (areaCodeDefault) {
-            findCode(areaData);
+            findCode(areaData)
             this.areaCode = areaCodeDefault
-            this.nextSort(this.areaCode, this.houseType);
+            this.nextSort(this.areaCode, this.houseType)
         }
 
         this.record = {
             pid: params.pid,
             ...this.record,
-            areaCode: areaCode.length == 4 ? areaCode : []
+            areaCode: areaCode.length == 4 ? areaCode : [],
         }
         //#endregion
 
         this.form.current.setFieldsValue(this.record)
 
         this.setState({
-            loading: false
+            loading: false,
         })
     }
     /**
      * 获取数据
      * 可以对postData进行数据结构调整
      * [异步,必要]
-     * @returns 
+     * @returns
      */
     async getData() {
         const form = this.form.current
@@ -117,78 +121,83 @@ export default class form extends Component {
 
     async loadAreaData() {
         const { data } = await api.getAreaTree()
-        const clearChiildren = (data) => {
+        const clearChiildren = data => {
-            data.forEach((item) => {
+            data.forEach(item => {
                 if (item.children && item.children.length) {
-                    clearChiildren(item.children);
+                    clearChiildren(item.children)
                 } else {
-                    delete item.children;
+                    delete item.children
                 }
-            });
+            })
-        };
+        }
-        clearChiildren(data);
+        clearChiildren(data)
         return data
     }
 
     async nextSort(areaCode, houseType) {
-        this.loading = true;
+        this.loading = true
-        if (!!this.initRecord && this.initRecord.areaCode == areaCode && this.initRecord.type == houseType) {
+        if (
+            !!this.initRecord &&
+            this.initRecord.areaCode == areaCode &&
+            this.initRecord.type == houseType
+        ) {
             this.form.current.setFieldsValue({
                 name: this.initRecord.name,
-                sort: this.initRecord.sort
+                sort: this.initRecord.sort,
             })
         } else if (areaCode.length < 12) {
             this.form.current.setFieldsValue({
                 name: '',
                 sort: 0,
-                areaCode: []
+                areaCode: [],
             })
         } else {
-            await api.houseProjectNextSort({ areaCode, type: houseType })
+            await api
+                .houseProjectNextSort({ areaCode, type: houseType })
                 .then(({ data }) => {
                     this.form.current.setFieldsValue({
                         name: `项目${numberToChinese(data)}`,
-                        sort: data
+                        sort: data,
                     })
                 })
                 .catch(() => {
                     this.form.current.setFieldsValue({
                         name: '',
                         sort: 0,
-                        areaCode: []
+                        areaCode: [],
                     })
                 })
                 .finally(() => {
-                    this.loading = false;
+                    this.loading = false
-                });
+                })
         }
     }
 
     onHouseTypeChange(e) {
-        this.houseType = e.target.value;
+        this.houseType = e.target.value
         if (this.areaCode != '') {
-            this.nextSort(this.areaCode, this.houseType);
+            this.nextSort(this.areaCode, this.houseType)
         }
     }
 
     onAreaCodeChange(value) {
         this.areaCode = value[value.length - 1]
         if (this.houseType > 0) {
-            this.nextSort(this.areaCode, this.houseType);
+            this.nextSort(this.areaCode, this.houseType)
         }
     }
 
     render() {
         return (
-            <Form
+            <Form initialValues={initialValues} ref={this.form} className="yo-form">
-                initialValues={initialValues}
-                ref={this.form}
-                className="yo-form"
-            >
                 <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                     <div className="yo-form-group">
-                        <Form.Item label="类型" name="type" >
+                        <Form.Item label="类型" name="type">
-                            <Radio.Group disabled={this.state.exist} buttonStyle="solid" onChange={(e) => this.onHouseTypeChange(e)}>
+                            <Radio.Group
+                                disabled={this.state.exist}
+                                buttonStyle="solid"
+                                onChange={e => this.onHouseTypeChange(e)}
+                            >
                                 <Radio.Button value={1}>
                                     <span>住宅</span>
                                 </Radio.Button>
@@ -197,13 +206,17 @@ export default class form extends Component {
                                 </Radio.Button>
                             </Radio.Group>
                         </Form.Item>
-                        <Form.Item label="所属区域" name="areaCode" rules={[{ required: true, message: '请选择所属区域' }]}>
+                        <Form.Item
+                            label="所属区域"
+                            name="areaCode"
+                            rules={[{ required: true, message: '请选择所属区域' }]}
+                        >
                             <Cascader
                                 options={this.state.options.areaData}
                                 fieldNames={{
                                     label: 'name',
                                     value: 'code',
-                                    children: 'children'
+                                    children: 'children',
                                 }}
                                 expandTrigger="hover"
                                 // changeOnSelect
@@ -211,8 +224,16 @@ export default class form extends Component {
                                 onChange={(val, selectedOptions) => this.onAreaCodeChange(val)}
                             />
                         </Form.Item>
-                        <Form.Item label="项目名称" name="name" rules={[{ required: true, message: '片区名称', trigger: 'blur' }]}>
+                        <Form.Item
-                            <Input autoComplete="off" placeholder="选择所属区域和类型之后自动生成" disabled={true} />
+                            label="项目名称"
+                            name="name"
+                            rules={[{ required: true, message: '片区名称', trigger: 'blur' }]}
+                        >
+                            <Input
+                                autoComplete="off"
+                                placeholder="选择所属区域和类型之后自动生成"
+                                disabled={true}
+                            />
                         </Form.Item>
                         <Form.Item label="序号" name="sort">
                             <InputNumber
@@ -226,11 +247,12 @@ export default class form extends Component {
                         <Form.Item label="备注" name="note">
                             <Input.TextArea
                                 rows="4"
-                                placeholder="填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。" />
+                                placeholder="填写房屋所属单位的名称、道路的名称或大厦的名称，比如XX中学、XX大厦、XX小区等。登记项目时，应在项目备注中明确项目所指对象。"
+                            />
                         </Form.Item>
                     </div>
                 </Spin>
             </Form>
         )
     }
-}
+}