merge

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

@@ -1,17 +1,21 @@
 import React, { Component } from 'react'
-import { Button, Card, message as Message, Modal } from 'antd'
-import { ComponentDynamic, Container } from 'components'
+import { Button, Card, Col, message as Message, Modal, Row, Spin } from 'antd'
+import { AntIcon, ComponentDynamic, Container } from 'components'
 import { isEqual } from 'lodash'
 import { api } from 'common/api'
 
-const parts = [{
-    component: () => import('./part')
-}]
+const parts = [
+    {
+        component: () => import('./part'),
+    },
+]
 
 export default class index extends Component {
-
     state = {
-        saving: false
+        loading: true,
+        record: null,
+
+        saving: false,
     }
 
     children = []
@@ -22,21 +26,35 @@ export default class index extends Component {
         return !isEqual(this.state, state)
     }
 
+    componentDidMount() {
+        // 获取详细数据
+        const { id } = this.props.param
+        if (id) {
+            api.houseCodeDetail({ id }).then(({ data }) => {
+                this.setState({
+                    record: data,
+                    loading: false,
+                })
+            })
+        }
+    }
+
     async onSubmit() {
         for (const child of this.children) {
             try {
                 const data = await child.getData()
                 this.formData = {
                     ...this.formData,
-                    ...data
+                    ...data,
                 }
-            } catch {
-                return
+            } catch (e) {
+                return e
             }
         }
 
+        //#region 提交数据
         this.setState({ saving: true })
-        if (!this.props.param.record) {
+        if (!this.state.record) {
             // 新增
             try {
                 const { success } = await api.houseCodeAdd(this.formData)
@@ -44,12 +62,10 @@ export default class index extends Component {
                     Message.success('保存成功')
                     Modal.confirm({
                         content: '已添加成功，是否继续添加？',
-                        onOk: () => {
-
-                        },
+                        onOk: () => {},
                         onCancel: () => {
                             window.closeContentWindow()
-                        }
+                        },
                     })
                 }
             } finally {
@@ -58,7 +74,10 @@ export default class index extends Component {
         } else {
             // 编辑
             try {
-                const { success } = await api.houseCodeEdit(this.formData)
+                const { success } = await api.houseCodeEdit({
+                    id: this.state.record.id,
+                    ...this.formData,
+                })
                 if (success) {
                     Message.success('保存成功')
                 }
@@ -66,35 +85,57 @@ export default class index extends Component {
                 this.setState({ saving: false })
             }
         }
+        //#endregion
     }
 
     render() {
+        const { id } = this.props
 
-        const { id, param } = this.props
+        const { loading, record, saving } = this.state
 
         return (
             <div className="yo-form-page">
-                <Container mode="fluid">
-                    <br />
-                    <div className="yo-adorn--house-top" />
-                    <Card className="yo-form-page--body">
-                        {
-                            parts.map((item, i) => (
-                                <section key={i} id={`form-${i}-${id}`}>
-                                    {item.title && <h5>{parts.title}</h5>}
-                                    <ComponentDynamic is={item.component} param={param} onRef={(r) => this.children.push(r)} />
-                                </section>
-                            ))
-                        }
-                    </Card>
+                <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((item, i) => (
+                                    <section key={i} 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}
+                                                    record={record}
+                                                    onRef={r => this.children.push(r)}
+                                                />
+                                            )}
+                                        </Spin>
+                                    </section>
+                                ))}
+                            </Card>
+                        </Col>
+                    </Row>
                 </Container>
                 <div className="yo-form-page--bar">
                     <Container mode="fluid">
                         <div className="yo-form-page--bar-inner">
                             <span></span>
                             <span>
-                                <Button>取消</Button>
-                                <Button type="primary" onClick={() => this.onSubmit()} loading={this.state.saving}>保存</Button>
+                                <Button onClick={() => window.closeContentWindow()}>取消</Button>
+                                <Button
+                                    loading={saving}
+                                    type="primary"
+                                    onClick={() => this.onSubmit()}
+                                >
+                                    保存
+                                </Button>
                             </span>
                         </div>
                     </Container>

web-react/src/pages/business/house/code/form/part.jsx

@@ -1,36 +1,49 @@
 import React, { Component } from 'react'
-import { Button, Cascader, Form, Input, InputNumber, Radio, Spin, Select, Row, Col, Tag, Alert, Tooltip } from 'antd'
+import {
+    Button,
+    Cascader,
+    Form,
+    Input,
+    InputNumber,
+    Radio,
+    Spin,
+    Select,
+    Row,
+    Col,
+    Tag,
+    Alert,
+    Tooltip,
+} from 'antd'
 import { AntIcon, Auth } from 'components'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, isEqual } from 'lodash'
 import getDictData from 'util/dic'
 import { api } from 'common/api'
 import { CITY } from 'util/global'
 
 const initialValues = {
     type: 1,
-    industry: 1
+    industry: 1,
 }
 
 const labelCol = { flex: '150px' }
 const wrapperCol = { flex: '1' }
 
 export default class form extends Component {
-
     state = {
         // 加载状态
         loading: true,
         codes: {
-            dicHouseType: [],
-            dicHouseIndustry: []
+            houseType: [],
+            houseIndustry: [],
         },
         options: {
             areaTree: [],
             projects: [],
-            zones: []
+            zones: [],
         },
 
         houseCode: '',
-        showIndustry: false
+        showIndustry: false,
     }
 
     // 表单实例
@@ -41,6 +54,10 @@ export default class form extends Component {
     // 初始化数据
     record = {}
 
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
     /**
      * mount后回调
      */
@@ -48,7 +65,9 @@ export default class form extends Component {
         if (this.props.onRef) {
             this.props.onRef(this)
         }
-        this.fillData(this.props.param)
+        this.fillData({
+            record: this.props.record,
+        })
     }
 
     componentWillUnmount() {
@@ -59,10 +78,9 @@ export default class form extends Component {
      * 填充数据
      * 可以在设置this.record之后对其作出数据结构调整
      * [异步,必要]
-     * @param {*} params 
+     * @param {*} params
      */
     async fillData(params) {
-
         this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
         await this.initMap()
@@ -75,12 +93,12 @@ export default class form extends Component {
                 areaCode.substr(0, 4),
                 areaCode.substr(0, 6),
                 areaCode.substr(0, 9),
-                areaCode
+                areaCode,
             ]
             // 获取项目和片区列表
             const data = await this.getProjectsAndZones({
                 areaCode: this.record.areaCode,
-                type
+                type,
             })
             Object.assign(options, data)
             // 定位
@@ -88,19 +106,19 @@ export default class form extends Component {
             this.setMarker(position)
             this.map.setCenter(position)
         }
-        const codes = await getDictData('dic_house_type', 'dic_house_industry')
+        const codes = await getDictData('house_type', 'house_industry')
         const { data: areaTree } = await api.getAreaTree()
         options.areaTree = areaTree
         this.setState({
             codes,
-            options
+            options,
         })
         this.showHouseCode()
         //#endregion
         this.form.current.setFieldsValue(this.record)
 
         this.setState({
-            loading: false
+            loading: false,
         })
     }
 
@@ -108,7 +126,7 @@ export default class form extends Component {
      * 获取数据
      * 可以对postData进行数据结构调整
      * [异步,必要]
-     * @returns 
+     * @returns
      */
     async getData() {
         const form = this.form.current
@@ -116,9 +134,6 @@ export default class form extends Component {
         const valid = await form.validateFields()
         if (valid) {
             const postData = form.getFieldsValue()
-            if (this.record) {
-                postData.id = this.record.id
-            }
             //#region 从前段转换后端所需格式
             if (postData.areaCode) {
                 postData.areaCode = postData.areaCode[3]
@@ -130,7 +145,6 @@ export default class form extends Component {
 
     //#region 自定义方法
     initMap() {
-
         // eslint-disable-next-line no-undef
         const amap = AMap
 
@@ -140,7 +154,7 @@ export default class form extends Component {
             const district = new amap.DistrictSearch({
                 subdistrict: 0,
                 extensions: 'all',
-                level: 'city'
+                level: 'city',
             })
 
             district.search(city, (status, result) => {
@@ -152,15 +166,15 @@ export default class form extends Component {
 
                 const geocoder = new amap.Geocoder({ city })
                 geocoder.getLocation(city, (status, result) => {
-
-                    if (status !== 'complete' || !(result.geocodes && result.geocodes.length)) return
+                    if (status !== 'complete' || !(result.geocodes && result.geocodes.length))
+                        return
 
                     this.citycode = result.geocodes[0].addressComponent.citycode
 
                     this.map = new amap.Map(this.refs.map, {
                         mask,
                         zoom: 12,
-                        center: result.geocodes[0].location
+                        center: result.geocodes[0].location,
                     })
 
                     this.map.on('click', e => {
@@ -176,7 +190,7 @@ export default class form extends Component {
                                 path,
                                 strokeColor: '#ccc',
                                 strokeWeight: 4,
-                                map: this.map
+                                map: this.map,
                             })
                         }
 
@@ -186,13 +200,13 @@ export default class form extends Component {
                     const auto = new amap.AutoComplete({
                         input: this.refs['map-search'].input,
                         city,
-                        citylimit: true
+                        citylimit: true,
                     })
 
                     const placeSearch = new amap.PlaceSearch({
                         city,
                         citylimit: true,
-                        pageSize: 1
+                        pageSize: 1,
                     })
 
                     auto.on('select', ({ poi: { name: keywords, adcode } }) => {
@@ -206,15 +220,13 @@ export default class form extends Component {
                             }
                         })
                     })
-
                 })
             })
         })
     }
 
     setMarker(position, geocoder) {
-
-        const set = (position) => {
+        const set = position => {
             if (this.marker) {
                 this.marker.setPosition(position)
             } else {
@@ -242,7 +254,6 @@ export default class form extends Component {
 
                         set(position)
                         resolve(position)
-
                     } else {
                         console.error('根据经纬度查询地址失败')
 
@@ -260,7 +271,7 @@ export default class form extends Component {
         this.form.current.setFieldsValue({
             address,
             lng,
-            lat
+            lat,
         })
     }
 
@@ -279,13 +290,13 @@ export default class form extends Component {
             if (mode.includes('projects')) {
                 const { data: projects } = await api.houseProjectList({
                     areaCode: areaCode[3],
-                    type
+                    type,
                 })
                 result.projects = projects
             }
             if (mode.includes('zones')) {
                 const { data: zones } = await api.houseZoneList({
-                    areaCode: areaCode[3]
+                    areaCode: areaCode[3],
                 })
                 result.zones = zones
             }
@@ -300,7 +311,7 @@ export default class form extends Component {
         this.setState({ loading: true })
         const { data: no } = await api.houseCodeNo({ projectId })
         this.form.current.setFieldsValue({
-            no
+            no,
         })
         this.setState({ loading: false })
     }
@@ -308,7 +319,7 @@ export default class form extends Component {
     showHouseCode(values) {
         if (this.record) {
             this.setState({
-                houseCode: this.record.houseCode
+                houseCode: this.record.houseCode,
             })
         } else if (values) {
             const { type, industry, areaCode, projectId, no } = values
@@ -323,7 +334,8 @@ export default class form extends Component {
                     if (!industry) {
                         this.setState({ houseCode: '' })
                     } else {
-                        const tag = this.state.codes.dicHouseIndustry.find(p => p.code == industry).extCode.tag
+                        const tag = this.state.codes.houseIndustry.find(p => p.code == industry)
+                            .extCode.tag
                         houseCode += `-${tag}`
                         this.setState({ houseCode })
                     }
@@ -340,16 +352,16 @@ export default class form extends Component {
         if (changedValues.hasOwnProperty('type')) {
             this.setState({
                 showIndustry: changedValues.type == 2,
-                loading: true
+                loading: true,
             })
             const data = await this.getProjectsAndZones()
             form.setFieldsValue({ projectId: undefined })
             this.setState({
                 options: {
                     ...this.state.options,
-                    ...data
+                    ...data,
                 },
-                loading: false
+                loading: false,
             })
             this.showHouseCode(form.getFieldsValue())
         }
@@ -362,9 +374,9 @@ export default class form extends Component {
             this.setState({
                 options: {
                     ...this.state.options,
-                    ...data
+                    ...data,
                 },
-                loading: false
+                loading: false,
             })
             this.showHouseCode(form.getFieldsValue())
         }
@@ -392,15 +404,14 @@ export default class form extends Component {
         this.setState({
             options: {
                 ...this.state.options,
-                ...data
+                ...data,
             },
-            loading: false
+            loading: false,
         })
     }
     //#endregion
 
     render() {
-
         const { loading, codes, options, showIndustry, houseCode } = this.state
 
         return (
@@ -409,61 +420,70 @@ export default class form extends Component {
                 ref={this.form}
                 // labelCol={labelCol}
                 // wrapperCol={wrapperCol}
-                onValuesChange={(changedValues, allValues) => this.onValuesChange(changedValues, allValues)}
+                onValuesChange={(changedValues, allValues) =>
+                    this.onValuesChange(changedValues, allValues)
+                }
                 layout="vertical"
-
             >
                 <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
                     <Row gutter={16}>
                         <Col span={10}>
                             <div className="yo-map-container">
                                 <div className="yo-map--search">
-                                    <Input.Search allowClear placeholder="请输入关键字" ref="map-search" />
+                                    <Input.Search
+                                        allowClear
+                                        placeholder="请输入关键字"
+                                        ref="map-search"
+                                    />
                                 </div>
                                 <div className="h-700" ref="map"></div>
                             </div>
                         </Col>
                         <Col span={14}>
-                            <Form.Item label="房屋性质" name="type" rules={[{ required: true, message: '请选择房屋性质' }]}>
-                                <Radio.Group
-                                    disabled={!!this.record}
-                                    buttonStyle="solid"
-                                >
-                                    {codes.dicHouseType.map(item => (
-                                        <Radio.Button
-                                            key={item.code}
-                                            value={+item.code}
-                                        >{item.value}</Radio.Button>
+                            <Form.Item
+                                label="房屋性质"
+                                name="type"
+                                rules={[{ required: true, message: '请选择房屋性质' }]}
+                            >
+                                <Radio.Group disabled={!!this.record} buttonStyle="solid">
+                                    {codes.houseType.map(item => (
+                                        <Radio.Button key={item.code} value={+item.code}>
+                                            {item.value}
+                                        </Radio.Button>
                                     ))}
                                 </Radio.Group>
                             </Form.Item>
-                            {
-                                showIndustry &&
-                                <Form.Item label="所属行业、系统" name="industry" rules={[{ required: true, message: '请选择所属行业、系统' }]}>
-                                    <Radio.Group
-                                        disabled={!!this.record}
-                                        buttonStyle="solid"
-                                    >
-                                        {codes.dicHouseIndustry.map(item => (
-                                            <Radio.Button
-                                                key={item.code}
-                                                value={+item.code}
-                                            >{item.value}</Radio.Button>
+                            {showIndustry && (
+                                <Form.Item
+                                    label="所属行业、系统"
+                                    name="industry"
+                                    rules={[{ required: true, message: '请选择所属行业、系统' }]}
+                                >
+                                    <Radio.Group disabled={!!this.record} buttonStyle="solid">
+                                        {codes.houseIndustry.map(item => (
+                                            <Radio.Button key={item.code} value={+item.code}>
+                                                {item.value}
+                                            </Radio.Button>
                                         ))}
                                     </Radio.Group>
                                 </Form.Item>
-                            }
+                            )}
                             <Form.Item label="房屋编码" required className="mb-none">
                                 <Row gutter={16}>
                                     <Col flex="100%">
-                                        <Form.Item name="areaCode" rules={[{ required: true, message: '请选择房屋所在区域' }]}>
+                                        <Form.Item
+                                            name="areaCode"
+                                            rules={[
+                                                { required: true, message: '请选择房屋所在区域' },
+                                            ]}
+                                        >
                                             <Cascader
                                                 allowClear={false}
-                                                displayRender={(labels) => labels.join(' - ')}
+                                                displayRender={labels => labels.join(' - ')}
                                                 fieldNames={{
                                                     label: 'name',
                                                     value: 'code',
-                                                    children: 'children'
+                                                    children: 'children',
                                                 }}
                                                 options={options.areaTree}
                                                 expandTrigger="hover"
@@ -473,13 +493,20 @@ export default class form extends Component {
                                     <Col flex="1">
                                         <Row gutter={8}>
                                             <Col flex="1">
-                                                <Form.Item name="projectId" rules={[{ required: true, message: '请选择项目' }]}>
+                                                <Form.Item
+                                                    name="projectId"
+                                                    rules={[
+                                                        { required: true, message: '请选择项目' },
+                                                    ]}
+                                                >
                                                     <Select placeholder="请选择项目">
                                                         {options.projects.map(item => (
                                                             <Select.Option
                                                                 key={item.id}
                                                                 value={item.id}
-                                                            >{item.name}({item.note})</Select.Option>
+                                                            >
+                                                                {item.name}({item.note})
+                                                            </Select.Option>
                                                         ))}
                                                     </Select>
                                                 </Form.Item>
@@ -488,8 +515,18 @@ export default class form extends Component {
                                                 <Col>
                                                     <Button.Group>
                                                         <Button>项目管理</Button>
-                                                        <Tooltip placement="top" title="重新加载项目列表">
-                                                            <Button icon={<AntIcon type="reload" />} onClick={() => this.onReloadProjectsOrZones('projects')}></Button>
+                                                        <Tooltip
+                                                            placement="top"
+                                                            title="重新加载项目列表"
+                                                        >
+                                                            <Button
+                                                                icon={<AntIcon type="reload" />}
+                                                                onClick={() =>
+                                                                    this.onReloadProjectsOrZones(
+                                                                        'projects'
+                                                                    )
+                                                                }
+                                                            ></Button>
                                                         </Tooltip>
                                                     </Button.Group>
                                                 </Col>
@@ -497,9 +534,12 @@ export default class form extends Component {
                                         </Row>
                                     </Col>
                                     <Col flex="1">
-                                        <Form.Item name="no" rules={[{ required: true, message: '请输入房屋序号' }]}>
+                                        <Form.Item
+                                            name="no"
+                                            rules={[{ required: true, message: '请输入房屋序号' }]}
+                                        >
                                             <InputNumber
-                                                formatter={(value) => value.padStart(3, '0')}
+                                                formatter={value => value.padStart(3, '0')}
                                                 max={999}
                                                 min={1}
                                                 precision={0}
@@ -509,14 +549,10 @@ export default class form extends Component {
                                             />
                                         </Form.Item>
                                     </Col>
-                                    {
-                                        showIndustry &&
-                                        <Col>-</Col>
-                                    }
+                                    {showIndustry && <Col>-</Col>}
                                 </Row>
                             </Form.Item>
-                            {
-                                houseCode &&
+                            {houseCode && (
                                 <Form.Item>
                                     <Tag
                                         color="purple"
@@ -524,27 +560,64 @@ export default class form extends Component {
                                             fontSize: '24px',
                                             fontWeight: 'bold',
                                             letterSpacing: '10px',
-                                            padding: '12px'
+                                            padding: '12px',
                                         }}
-                                    >{houseCode}</Tag>
+                                    >
+                                        {houseCode}
+                                    </Tag>
                                 </Form.Item>
-                            }
+                            )}
                             <Alert
                                 message={<b>房屋编码说明</b>}
-                                description={<>
-                                    房屋所在市<AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" />—县（市、区）<AntIcon type="border" /><AntIcon type="border" />—街道（乡、镇）<AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" />—社区、居（村）委会）<AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" />—项目<AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" />—实物幢序号<AntIcon type="border" /><AntIcon type="border" /><AntIcon type="border" />。 根据省厅既有建筑物编号规则，房屋所在区域编号按照市、县（市、区）、街道（乡、镇）、社区、居（村）委会）、项目分类，其中市、县（市）区部分按照《中华人民共和国行政区划代码》（GB2260）标准编码，街道（乡、镇）按《县以下行政区划代码编码规则》（GB10114-88）标准编码，社区、居（村）委会部分按照统计局提供编码设定。各地上报各街道社区名称后，上述编号由系统自动生成。<br />各社区下辖项目由各地负责统一编码，住宅项目序号一般一个小区一号，采用3位数，001号起编，范围为001~999。实物幢序号由各地负责统一编码，以幢为单位，采用3位数，001号起编，范围为001~999。
-                                </>} />
+                                description={
+                                    <>
+                                        房屋所在市
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        —县（市、区）
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        —街道（乡、镇）
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        —社区、居（村）委会）
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        —项目
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        —实物幢序号
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />
+                                        <AntIcon type="border" />。
+                                        根据省厅既有建筑物编号规则，房屋所在区域编号按照市、县（市、区）、街道（乡、镇）、社区、居（村）委会）、项目分类，其中市、县（市）区部分按照《中华人民共和国行政区划代码》（GB2260）标准编码，街道（乡、镇）按《县以下行政区划代码编码规则》（GB10114-88）标准编码，社区、居（村）委会部分按照统计局提供编码设定。各地上报各街道社区名称后，上述编号由系统自动生成。
+                                        <br />
+                                        各社区下辖项目由各地负责统一编码，住宅项目序号一般一个小区一号，采用3位数，001号起编，范围为001~999。实物幢序号由各地负责统一编码，以幢为单位，采用3位数，001号起编，范围为001~999。
+                                    </>
+                                }
+                            />
                             <br />
                             <Form.Item label="所属片区" required>
                                 <Row gutter={8}>
                                     <Col flex="1">
-                                        <Form.Item name="zoneId" rules={[{ required: true, message: '请选择所属片区' }]} noStyle>
-                                            <Select placeholder="请选择所属片区" className="w-100-p">
+                                        <Form.Item
+                                            name="zoneId"
+                                            rules={[{ required: true, message: '请选择所属片区' }]}
+                                            noStyle
+                                        >
+                                            <Select
+                                                placeholder="请选择所属片区"
+                                                className="w-100-p"
+                                            >
                                                 {options.zones.map(item => (
-                                                    <Select.Option
-                                                        key={item.id}
-                                                        value={item.id}
-                                                    >{item.name}</Select.Option>
+                                                    <Select.Option key={item.id} value={item.id}>
+                                                        {item.name}
+                                                    </Select.Option>
                                                 ))}
                                             </Select>
                                         </Form.Item>
@@ -554,26 +627,58 @@ export default class form extends Component {
                                             <Button.Group>
                                                 <Button>片区管理</Button>
                                                 <Tooltip placement="top" title="重新加载片区列表">
-                                                    <Button icon={<AntIcon type="reload" />} onClick={() => this.onReloadProjectsOrZones('zones')}></Button>
+                                                    <Button
+                                                        icon={<AntIcon type="reload" />}
+                                                        onClick={() =>
+                                                            this.onReloadProjectsOrZones('zones')
+                                                        }
+                                                    ></Button>
                                                 </Tooltip>
                                             </Button.Group>
                                         </Col>
                                     </Auth>
                                 </Row>
                             </Form.Item>
-                            <Form.Item label="房屋地址" name="address" rules={[{ required: true, message: '请输入房屋地址' }]}>
-                                <Input autoComplete="off" placeholder="请输入房屋地址或在地图上选择地点" />
+                            <Form.Item
+                                label="房屋地址"
+                                name="address"
+                                rules={[{ required: true, message: '请输入房屋地址' }]}
+                            >
+                                <Input
+                                    autoComplete="off"
+                                    placeholder="请输入房屋地址或在地图上选择地点"
+                                />
                             </Form.Item>
                             <Form.Item label="地理坐标" required>
                                 <Row gutter={16}>
                                     <Col span={12}>
-                                        <Form.Item name="lng" className="mb-none" rules={[{ required: true, message: '请在地图中选择坐标' }]}>
-                                            <Input disabled placeholder="请在地图中选择坐标" prefix="经度" />
+                                        <Form.Item
+                                            name="lng"
+                                            className="mb-none"
+                                            rules={[
+                                                { required: true, message: '请在地图中选择坐标' },
+                                            ]}
+                                        >
+                                            <Input
+                                                disabled
+                                                placeholder="请在地图中选择坐标"
+                                                prefix="经度"
+                                            />
                                         </Form.Item>
                                     </Col>
                                     <Col span={12}>
-                                        <Form.Item name="lat" className="mb-none" rules={[{ required: true, message: '请在地图中选择坐标' }]}>
-                                            <Input disabled placeholder="请在地图中选择坐标" prefix="纬度" />
+                                        <Form.Item
+                                            name="lat"
+                                            className="mb-none"
+                                            rules={[
+                                                { required: true, message: '请在地图中选择坐标' },
+                                            ]}
+                                        >
+                                            <Input
+                                                disabled
+                                                placeholder="请在地图中选择坐标"
+                                                prefix="纬度"
+                                            />
                                         </Form.Item>
                                     </Col>
                                 </Row>

web-react/src/pages/business/house/code/index.jsx

@@ -1,5 +1,16 @@
 import React, { Component } from 'react'
-import { Button, Card, Cascader, Form, Input, InputNumber, Popconfirm, message as Message, Radio, Select } from 'antd'
+import {
+    Button,
+    Card,
+    Cascader,
+    Form,
+    Input,
+    InputNumber,
+    Popconfirm,
+    message as Message,
+    Radio,
+    Select,
+} from 'antd'
 import { isEqual } from 'lodash'
 import { AntIcon, Auth, Container, QueryTable, QueryTableActions } from 'components'
 import { api } from 'common/api'
@@ -10,25 +21,24 @@ import { getSearchInfo } from 'util/query'
 
 // 配置页面所需接口函数
 const apiAction = {
-    page: api.houseCodePage
+    page: api.houseCodePage,
 }
 
 // 用于弹窗标题
 const name = '房屋编码'
 
 export default class index extends Component {
-
     state = {
         codes: {
-            dicHouseType: [],
-            dicHouseIndustry: []
+            houseType: [],
+            houseIndustry: [],
         },
 
         options: {
-            areaTree: []
+            areaTree: [],
         },
 
-        type: ''
+        type: '',
     }
 
     // 表格实例
@@ -41,14 +51,19 @@ export default class index extends Component {
             dataIndex: 'houseCode',
             sorter: true,
             width: 300,
-            render: (text, record) => `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${record.no.toString().padStart(3, '0')}`
+            render: (text, record) =>
+                `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${record.no
+                    .toString()
+                    .padStart(3, '0')}`,
         },
         {
             title: '房屋性质及行业',
             dataIndex: 'type',
             sorter: true,
             width: 150,
-            render: (text, record) => this.bindCodeValue(text, 'dic_house_type') + (text === 2 ? `(${this.bindCodeValue(record.industry, 'dic_house_industry')})` : '')
+            render: (text, record) =>
+                this.bindCodeValue(text, 'house_type') +
+                (text === 2 ? `(${this.bindCodeValue(record.industry, 'house_industry')})` : ''),
         },
         {
             title: '地址',
@@ -65,7 +80,7 @@ export default class index extends Component {
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -77,20 +92,22 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="houseCode:edit">
-                        <a onClick={() => this.onOpen(record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="houseCode:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="houseCode:edit">
+                            <a onClick={() => this.onOpen(record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="houseCode:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -99,9 +116,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -114,28 +131,30 @@ export default class index extends Component {
     componentDidMount() {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
-        getDictData('dic_house_type', 'dic_house_industry').then(async (res) => {
+        getDictData('house_type', 'house_industry').then(async res => {
             const { data } = await api.getAreaTree()
-            this.setState({
-                codes: res,
-                options: {
-                    areaTree: data
+            this.setState(
+                {
+                    codes: res,
+                    options: {
+                        areaTree: data,
+                    },
+                },
+                () => {
+                    onLoadData()
                 }
-            }, () => {
-                onLoadData()
-            })
+            )
         })
     }
 
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
-
         if (query.areaCode) {
             query.areaCode = query.areaCode.pop()
         }
@@ -146,8 +165,8 @@ export default class index extends Component {
                 no: '=',
                 type: '=',
                 address: 'like',
-                houseCode: 'like'
-            }
+                houseCode: 'like',
+            },
         })
 
         const { data } = await apiAction.page({
@@ -159,15 +178,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code == code)
+            const c = codes.find(p => p.code == code)
             if (c) {
                 return c.value
             }
@@ -177,8 +196,8 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(record) {
         const path = 'business/house/code/form'
@@ -187,11 +206,13 @@ export default class index extends Component {
             title: record ? '修改房屋编码' : '新增房屋编码',
             subTitle:
                 record &&
-                `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${record.no.toString().padStart(3, '0')}`,
+                `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${record.no
+                    .toString()
+                    .padStart(3, '0')}`,
             path,
             param: {
-                record
-            }
+                id: record.id,
+            },
         })
         // modal.current.open({
         //     record
@@ -201,8 +222,8 @@ export default class index extends Component {
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         const { onLoading, onLoaded, onReloadData } = this.table.current
@@ -222,20 +243,16 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     //#region 自定义方法
     //#endregion
 
     render() {
-
         const { options, codes, type } = this.state
 
         return (
@@ -248,9 +265,9 @@ export default class index extends Component {
                         loadData={this.loadData}
                         columns={this.columns}
                         queryInitialValues={{
-                            type: ''
+                            type: '',
                         }}
-                        onQueryChange={(values) => {
+                        onQueryChange={values => {
                             if (values.hasOwnProperty('type')) {
                                 this.setState({ type: values.type })
                             }
@@ -259,11 +276,11 @@ export default class index extends Component {
                             <Auth auth="houseCode:page">
                                 <Form.Item name="areaCode">
                                     <Cascader
-                                        displayRender={(labels) => labels.join(' - ')}
+                                        displayRender={labels => labels.join(' - ')}
                                         fieldNames={{
                                             label: 'name',
                                             value: 'code',
-                                            children: 'children'
+                                            children: 'children',
                                         }}
                                         options={options.areaTree}
                                         className="w-400"
@@ -273,7 +290,7 @@ export default class index extends Component {
                                 </Form.Item>
                                 <Form.Item label="编号" name="no">
                                     <InputNumber
-                                        formatter={(value) => value && value.padStart(3, '0')}
+                                        formatter={value => value && value.padStart(3, '0')}
                                         max={999}
                                         min={1}
                                         precision={0}
@@ -284,31 +301,28 @@ export default class index extends Component {
                                 <Form.Item label="房屋性质" name="type">
                                     <Radio.Group buttonStyle="solid">
                                         <Radio.Button value="">全部</Radio.Button>
-                                        {
-                                            codes.dicHouseType.map(item => (
-                                                <Radio.Button
-                                                    key={item.code}
-                                                    value={item.code}
-                                                >{item.value}</Radio.Button>
-                                            ))
-                                        }
+                                        {codes.houseType.map(item => (
+                                            <Radio.Button key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Radio.Button>
+                                        ))}
                                     </Radio.Group>
                                 </Form.Item>
-                                {
-                                    type == 2 &&
+                                {type == 2 && (
                                     <Form.Item label="行业" name="industry">
-                                        <Select allowClear className="w-150" placeholder="请选择行业">
-                                            {
-                                                codes.dicHouseIndustry.map(item => (
-                                                    <Select.Option
-                                                        key={item.code}
-                                                        value={item.code}
-                                                    >{item.value}</Select.Option>
-                                                ))
-                                            }
+                                        <Select
+                                            allowClear
+                                            className="w-150"
+                                            placeholder="请选择行业"
+                                        >
+                                            {codes.houseIndustry.map(item => (
+                                                <Select.Option key={item.code} value={item.code}>
+                                                    {item.value}
+                                                </Select.Option>
+                                            ))}
                                         </Select>
                                     </Form.Item>
-                                }
+                                )}
                                 <Form.Item label="地址" name="address">
                                     <Input autoComplete="off" placeholder="请输入地址" />
                                 </Form.Item>
@@ -322,7 +336,9 @@ export default class index extends Component {
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen()}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             </Auth>
                         }
                     />

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

@@ -0,0 +1,230 @@
+import React, { Component } from 'react'
+import { Form, Spin, Upload } from 'antd'
+import { AntIcon, PhotoPreview } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+import { BlobToBase64, GetFileName, PreviewFile } from 'util/file'
+import { api } from 'common/api'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class aspect extends Component {
+    state = {
+        loading: true,
+        codes: {},
+        options: {},
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    photoPreview = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 绑定数据
+     */
+    componentDidMount() {
+        this.fillData({
+            record: this.props.record,
+        })
+    }
+
+    /**
+     * DOM加载完成钩子,在此将自身传递给父级
+     */
+    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 { houseInfo } = this.record
+            const fileValue = []
+            const fileList =
+                !houseInfo.facadePhoto || !houseInfo.facadePhoto.length
+                    ? []
+                    : houseInfo.facadePhoto.split(',')
+            for (const fileId of fileList) {
+                try {
+                    const file = await PreviewFile(fileId)
+                    const base64 = await BlobToBase64(file)
+                    fileValue.push({
+                        uid: fileId,
+                        response: fileId,
+                        name: file.name,
+                        url: base64,
+                        status: 'done',
+                    })
+                } catch {
+                    const { data: file } = await api.sysFileInfoDetail({ id: fileId })
+                    fileValue.push({
+                        uid: fileId,
+                        response: '文件已丢失',
+                        name: file.fileOriginName,
+                        status: 'error',
+                    })
+                }
+            }
+
+            houseInfo.facadePhoto = fileValue
+        }
+        //#endregion
+        this.form.current && 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 从前段转换后端所需格式
+            postData.houseInfo.facadePhoto = postData.houseInfo.facadePhoto
+                .map(item => (item.uid.startsWith('rc-upload') ? item.response : item.uid))
+                .join(',')
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {}
+
+    async onFileUpload({ file, onProgress, onSuccess, onError }) {
+        onProgress({
+            percent: 0,
+        })
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            const { data: fileId } = await api.sysFileInfoUpload(fd)
+            onSuccess(fileId)
+        } catch {
+            onError()
+        }
+    }
+
+    async onFilePreview(file, key) {
+        const fileList = this.form.current
+            .getFieldValue(['houseInfo', key])
+            .filter(p => p.status === 'done')
+        const items = []
+        for (const _file of fileList) {
+            const img = new Image()
+            const src = _file.url || _file.thumbUrl
+            img.src = src
+            items.push({
+                src,
+                w: img.naturalWidth,
+                h: img.naturalHeight,
+            })
+        }
+        this.photoPreview.current.initPhotoSwipe(items, {
+            index: fileList.indexOf(file),
+        })
+    }
+
+    async onFileDownload(file) {
+        const { data, headers } = await api.sysFileInfoDownload({ id: file.response })
+        const url = window.URL.createObjectURL(data)
+        const fileName = GetFileName(headers['content-disposition'])
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        a.click()
+        window.URL.revokeObjectURL(url)
+        a.remove()
+    }
+    //#endregion
+
+    render() {
+        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.Item
+                        label="外立面照片"
+                        name={['houseInfo', 'facadePhoto']}
+                        valuePropName="fileList"
+                        getValueFromEvent={e => {
+                            if (Array.isArray(e)) {
+                                return e
+                            }
+                            return e && e.fileList
+                        }}
+                    >
+                        <Upload
+                            listType="picture-card"
+                            customRequest={e => this.onFileUpload(e)}
+                            showUploadList={{
+                                showRemoveIcon: true,
+                                showDownloadIcon: true,
+                            }}
+                            onPreview={file => this.onFilePreview(file, 'facadePhoto')}
+                            onDownload={file => this.onFileDownload(file)}
+                        >
+                            <div>
+                                <AntIcon type="plus" />
+                                <div className="ant-upload-text">外立面照片</div>
+                            </div>
+                        </Upload>
+                    </Form.Item>
+                </Form>
+
+                <PhotoPreview ref={this.photoPreview} />
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,238 @@
+import React, { Component } from 'react'
+import { Button, Form, Spin, Upload } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+import { BlobToBase64, GetFileName, PreviewFile } from 'util/file'
+import { api } from 'common/api'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+const uploads = [
+    {
+        key: 'anEntryDocument',
+        label: '立项文件',
+    },
+    {
+        key: 'planningPermission',
+        label: '规划许可',
+    },
+    {
+        key: 'completionRecord',
+        label: '竣工验收备案',
+    },
+    {
+        key: 'monitorDocument',
+        label: '监理文件',
+    },
+    {
+        key: 'identificationReport',
+        label: '鉴定报告',
+    },
+    {
+        key: 'otherDocument',
+        label: '其他附件',
+    },
+]
+
+export default class attachments extends Component {
+    state = {
+        loading: true,
+        codes: {},
+        options: {},
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 绑定数据
+     */
+    componentDidMount() {
+        this.fillData({
+            record: this.props.record,
+        })
+    }
+
+    /**
+     * DOM加载完成钩子,在此将自身传递给父级
+     */
+    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 { houseInfo } = this.record
+            const keys = uploads.map(p => p.key)
+            for (const key of keys) {
+                const fileValue = []
+                const fileList =
+                    !houseInfo[key] || !houseInfo[key].length ? [] : houseInfo[key].split(',')
+                for (const fileId of fileList) {
+                    try {
+                        const file = await PreviewFile(fileId)
+                        const base64 = await BlobToBase64(file)
+                        fileValue.push({
+                            uid: fileId,
+                            response: fileId,
+                            name: file.name,
+                            url: base64,
+                            status: 'done',
+                        })
+                    } catch {
+                        const { data: file } = await api.sysFileInfoDetail({ id: fileId })
+                        fileValue.push({
+                            uid: fileId,
+                            response: '文件已丢失',
+                            name: file.fileOriginName,
+                            status: 'error',
+                        })
+                    }
+                }
+
+                houseInfo[key] = fileValue
+            }
+        }
+        //#endregion
+        this.form.current && 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 从前段转换后端所需格式
+            const { houseInfo } = postData
+            for (const key in houseInfo) {
+                houseInfo[key] = houseInfo[key]
+                    .map(item => (item.uid.startsWith('rc-upload') ? item.response : item.uid))
+                    .join(',')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {}
+
+    async onFileUpload({ file, onProgress, onSuccess, onError }) {
+        onProgress({
+            percent: 0,
+        })
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            const { data: fileId } = await api.sysFileInfoUpload(fd)
+            onSuccess(fileId)
+        } catch {
+            onError()
+        }
+    }
+
+    async onFileDownload(file) {
+        const { data, headers } = await api.sysFileInfoDownload({ id: file.response })
+        const url = window.URL.createObjectURL(data)
+        const fileName = GetFileName(headers['content-disposition'])
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        a.click()
+        window.URL.revokeObjectURL(url)
+        a.remove()
+    }
+    //#endregion
+
+    render() {
+        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)
+                    }
+                >
+                    {uploads.map((item, i) => (
+                        <Form.Item
+                            key={i}
+                            label={item.label}
+                            name={['houseInfo', item.key]}
+                            valuePropName="fileList"
+                            getValueFromEvent={e => {
+                                if (Array.isArray(e)) {
+                                    return e
+                                }
+                                return e && e.fileList
+                            }}
+                        >
+                            <Upload
+                                customRequest={e => this.onFileUpload(e)}
+                                showUploadList={{
+                                    showRemoveIcon: true,
+                                    showDownloadIcon: true,
+                                }}
+                                onPreview={() => false}
+                                onDownload={file => this.onFileDownload(file)}
+                            >
+                                <Button type="dashed" icon={<AntIcon type="upload" />}>
+                                    上传{item.label}
+                                </Button>
+                            </Upload>
+                        </Form.Item>
+                    ))}
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,167 @@
+import React, { Component } from 'react'
+import { Checkbox, Col, Form, Input, Row, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, isEqual, sortBy } from 'lodash'
+import getDictData from 'util/dic'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class drawing extends Component {
+    state = {
+        loading: true,
+        codes: {
+            houseStorageOfDrawings: [],
+        },
+        options: {},
+
+        showDrawingMaterialText: false,
+    }
+
+    // 表单实例
+    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 从后端转换成前段所需格式
+        if (this.record) {
+            const { houseInfo } = this.record
+            // checkbox
+            if (houseInfo.drawingMaterial) {
+                houseInfo.drawingMaterial = houseInfo.drawingMaterial.split(',')
+            }
+            this.setState({
+                showDrawingMaterialText:
+                    !!houseInfo.drawingMaterial && houseInfo.drawingMaterial.includes('100'),
+            })
+        }
+        const codes = await getDictData('house_storage_of_drawings')
+        console.log(codes)
+        this.setState({ codes })
+        //#endregion
+        this.form.current && 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 从前段转换后端所需格式
+            const { houseInfo } = postData
+            // checkbox
+            if (houseInfo.drawingMaterial) {
+                houseInfo.drawingMaterial = sortBy(houseInfo.drawingMaterial, p => +p).join(',')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {
+        const { houseInfo } = changedValues
+        if (houseInfo.hasOwnProperty('drawingMaterial')) {
+            this.setState({ showDrawingMaterialText: houseInfo.drawingMaterial.includes('100') })
+        }
+    }
+    //#endregion
+
+    render() {
+        const { loading, codes, showDrawingMaterialText } = 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.Item
+                        label="图纸资料存档处"
+                        name={['houseInfo', 'drawingMaterial']}
+                        rules={[{ required: true, message: '请选择图纸资料存档处' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseStorageOfDrawings.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    {showDrawingMaterialText && (
+                        <Form.Item
+                            colon={false}
+                            label=" "
+                            name={['houseInfo', 'drawingMaterialText']}
+                        >
+                            <Input.TextArea autoSize placeholder="请输入其他图纸资料存档处" />
+                        </Form.Item>
+                    )}
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,155 @@
+import React, { Component } from 'react'
+import { Form, Radio, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+import getDictData from 'util/dic'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class identification extends Component {
+    state = {
+        loading: true,
+        codes: {
+            houseIdentification: [],
+            houseGovernment: [],
+            houseUsedStatus: [],
+            houseGrade: [],
+        },
+        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 从后端转换成前段所需格式
+        const codes = await getDictData(
+            'house_identification',
+            'house_government',
+            'house_used_status',
+            'house_grade'
+        )
+        this.setState({ codes })
+        //#endregion
+        this.form.current && 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() {
+        const { loading, codes } = 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.Item
+                        label="房屋使用状态"
+                        name={['houseInfo', 'houseUsedStatus']}
+                        rules={[{ required: true, message: '请选择房屋使用状态' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.houseUsedStatus.map(item => (
+                                <Radio.Button key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Radio.Button>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="综合等级"
+                        name={['houseInfo', 'houseGrade']}
+                        rules={[{ required: true, message: '请选择综合等级' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.houseGrade.map(item => (
+                                <Radio.Button key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Radio.Button>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { Row, Col, Card, Anchor } from 'antd'
-import { defaultsDeep } from 'lodash'
-import { ComponentDynamic, Container } from 'components'
+import { Row, Col, Card, Anchor, Spin, Divider } from 'antd'
+import { merge } from 'lodash'
+import { AntIcon, ComponentDynamic, Container } from 'components'
 
 const parts = [
     {
@@ -10,107 +10,113 @@ const parts = [
         component: () => import('./building'),
     },
     {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
+        title: '权属情况',
+        component: () => import('./ownership'),
     },
     {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
+        title: '调查情况',
+        component: () => import('./investigation'),
     },
     {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
+        title: '鉴定治理',
+        component: () => import('./identification'),
     },
     {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
+        title: '图纸资料存档处',
+        component: () => import('./drawing'),
     },
     {
-        title: '建筑物基本信息',
-        component: () => import('./building'),
+        title: '相关附件资料',
+        component: () => import('./attachments'),
+    },
+    {
+        title: '建筑概貌',
+        component: () => import('./aspect'),
+    },
+    {
+        title: '调查单位',
+        component: () => import('./unit'),
     },
 ]
 
 export default class index extends Component {
-
     container = window
-    forms = []
 
-    constructor(props) {
-        super(props)
+    children = []
 
-        // 使父组件获取到当前组件实例
-        if (props.onRef) {
-            props.onRef(this)
+    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) => {
+    setContainer = container => {
         this.container = (ReactDOM.findDOMNode(container) || {}).parentNode
     }
 
-    onGetData = () => {
-        return new Promise(async (resolve, reject) => {
-            let formData = {},
-                flag = true
-            for (let i = 0; i < this.forms.length; i++) {
-                const form = this.forms[i]
-                try {
-                    const data = await form.onGetData()
-                    formData = defaultsDeep(formData, data)
-                } catch (err) {
-                    flag = false
-                    reject(err)
-                }
-            }
-            if (flag) {
-                resolve(formData)
-            }
-        })
+    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) => {
-                                    return (
-                                        <section key={i} id={`form-${i}-${this.props.id}`}>
-                                            {part.title && <h5>{part.title}</h5>}
-                                            <ComponentDynamic is={part.component} {...this.props} onRef={c => this.forms.push(c)} />
-                                        </section>
-                                    )
-                                })
-                            }
+                            {parts.map((part, i) => (
+                                <React.Fragment key={i}>
+                                    <section 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>
+                                    {i < parts.length - 1 && <Divider />}
+                                </React.Fragment>
+                            ))}
                         </Card>
                     </Col>
                     <Col flex="240px">
                         <Anchor
-                            getContainer={this.getContainer}
+                            getContainer={() => this.container}
                             offsetTop={24}
-                            targetOffset={48}
+                            targetOffset={100}
                             wrapperStyle={{ backgroundColor: 'transparent' }}
-                            onClick={(e) => e.preventDefault()}
+                            onClick={e => e.preventDefault()}
                         >
-                            {
-                                parts.map((part, i) => {
-                                    return (
-                                        <Anchor.Link
-                                            key={i}
-                                            href={`#form-${i}-${this.props.id}`}
-                                            title={part.title}
-                                        />
-                                    )
-                                })
-                            }
+                            {parts.map((part, i) => (
+                                <Anchor.Link key={i} href={`#form-${i}-${id}`} title={part.title} />
+                            ))}
                         </Anchor>
                     </Col>
                 </Row>

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

@@ -0,0 +1,301 @@
+import React, { Component } from 'react'
+import { Checkbox, Form, Input, Radio, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, first, isEqual, last, sortBy } from 'lodash'
+import getDictData from 'util/dic'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+const checkboxKeys = [
+    'houseSite',
+    'adjacentConstruction',
+    'chemicalErosion',
+    'repairAndReinforce',
+    'historicalCalamity',
+    'functionalChange',
+]
+
+export default class investigation extends Component {
+    state = {
+        loading: true,
+        codes: {
+            houseHouseSite: [],
+            houseAdjacentConstruction: [],
+            houseChemicalErosion: [],
+            houseStructuralDismantling: [],
+            houseAddingLayer: [],
+            houseRepairAndReinforce: [],
+            houseHistoricalCalamity: [],
+            houseFunctionalChange: [],
+        },
+        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 从后端转换成前段所需格式
+        if (this.record) {
+            const { houseInfo } = this.record
+            // checkbox
+            checkboxKeys.forEach(key => {
+                if (houseInfo[key]) {
+                    houseInfo[key] = houseInfo[key].split(',')
+                }
+            })
+        }
+        const codes = await getDictData(
+            'house_house_site',
+            'house_adjacent_construction',
+            'house_chemical_erosion',
+            'house_structural_dismantling',
+            'house_adding_layer',
+            'house_repair_and_reinforce',
+            'house_historical_calamity',
+            'house_functional_change'
+        )
+        this.setState({ codes })
+        //#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 从前段转换后端所需格式
+            const { houseInfo } = postData
+            // checkbox
+            checkboxKeys.forEach(key => {
+                if (houseInfo[key]) {
+                    houseInfo[key] = sortBy(houseInfo[key], p => +p).join(',')
+                }
+            })
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {
+        const { houseInfo } = changedValues
+        const key = Object.keys(houseInfo).shift()
+        if (
+            [
+                'adjacentConstruction',
+                'chemicalErosion',
+                'repairAndReinforce',
+                'historicalCalamity',
+                'functionalChange',
+            ].includes(key)
+        ) {
+            this.checkedNone(houseInfo[key], key)
+        }
+    }
+
+    checkedNone(value, key) {
+        const form = this.form.current
+        if (first(value) == 0 && value.length > 1) {
+            // 在'无'之后选中其他值
+            value.shift()
+            form.setFieldsValue({
+                houseInfo: { [key]: value },
+            })
+        } else if (last(value) == 0 && value.length > 1) {
+            // 在其他值之后选中'无'
+            value = ['0']
+            form.setFieldsValue({
+                houseInfo: { [key]: value },
+            })
+        }
+        return value
+    }
+    //#endregion
+
+    render() {
+        const { loading, codes } = 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.Item
+                        label="房屋场地"
+                        name={['houseInfo', 'houseSite']}
+                        rules={[{ required: true, message: '请选择房屋场地' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseHouseSite.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="相邻施工"
+                        name={['houseInfo', 'adjacentConstruction']}
+                        rules={[{ required: true, message: '请选择相邻施工' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseAdjacentConstruction.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="化学侵蚀"
+                        name={['houseInfo', 'chemicalErosion']}
+                        rules={[{ required: true, message: '请选择化学侵蚀' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseChemicalErosion.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="结构拆改"
+                        name={['houseInfo', 'structuralDismantling']}
+                        rules={[{ required: true, message: '请选择结构拆改' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.houseStructuralDismantling.map(item => (
+                                <Radio.Button key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Radio.Button>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="加层改造"
+                        name={['houseInfo', 'addingLayer']}
+                        rules={[{ required: true, message: '请选择加层改造' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.houseAddingLayer.map(item => (
+                                <Radio.Button key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Radio.Button>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="修缮加固"
+                        name={['houseInfo', 'repairAndReinforce']}
+                        rules={[{ required: true, message: '请选择修缮加固' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseRepairAndReinforce.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="历史灾害"
+                        name={['houseInfo', 'historicalCalamity']}
+                        rules={[{ required: true, message: '请选择历史灾害' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseHistoricalCalamity.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item
+                        label="使用功能变更"
+                        name={['houseInfo', 'functionalChange']}
+                        rules={[{ required: true, message: '请选择使用功能变更' }]}
+                    >
+                        <Checkbox.Group>
+                            {codes.houseFunctionalChange.map(item => (
+                                <Checkbox key={item.code} value={item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                    <Form.Item label="其他调查内容" name={['houseInfo', 'otherContents']}>
+                        <Input.TextArea autoSize placeholder="请输入其他调查内容" />
+                    </Form.Item>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,253 @@
+import React, { Component } from 'react'
+import { Col, Form, Input, InputNumber, Radio, Row, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+import getDictData from 'util/dic'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class ownership extends Component {
+    state = {
+        loading: true,
+        codes: {
+            housePropertyRights: [],
+        },
+        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 从后端转换成前段所需格式
+        const codes = await getDictData('house_property_rights')
+        this.setState({ codes })
+        //#endregion
+        this.form.current && 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() {
+        const { loading, codes } = 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.Item label="产权性质" name={['houseInfo', 'propertyRights']}>
+                        <Radio.Group buttonStyle="solid">
+                            {codes.housePropertyRights.map(item => (
+                                <Radio.Button key={item.code} value={item.code}>
+                                    {item.value}
+                                </Radio.Button>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    <Form.Item label="房屋包含的住宅总套数" className="mb-none">
+                        <Row>
+                            <Col>
+                                <Form.Item colon={false} label="直管公房" required>
+                                    <Form.Item
+                                        name={['houseInfo', 'straightHouseCount']}
+                                        rules={[{ required: true, message: '请输入直管公房' }]}
+                                        noStyle
+                                    >
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item colon={false} label="单位自管公房" required>
+                                    <Form.Item
+                                        name={['houseInfo', 'selfHouseCount']}
+                                        rules={[{ required: true, message: '请输入单位自管公房' }]}
+                                        noStyle
+                                    >
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item colon={false} label="其他">
+                                    <Form.Item name={['houseInfo', 'otherCount']} noStyle>
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <Form.Item colon={false} label="商品房" required>
+                                    <Form.Item
+                                        name={['houseInfo', 'businessCount']}
+                                        rules={[{ required: true, message: '请输入商品房' }]}
+                                        noStyle
+                                    >
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item colon={false} label="房改房" required>
+                                    <Form.Item
+                                        name={['houseInfo', 'changeHouseCount']}
+                                        rules={[{ required: true, message: '请输入房改房' }]}
+                                        noStyle
+                                    >
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item colon={false} label="拆迁安置房" required>
+                                    <Form.Item
+                                        name={['houseInfo', 'resettlementHouseCount']}
+                                        rules={[{ required: true, message: '请输入拆迁安置房' }]}
+                                        noStyle
+                                    >
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <Form.Item colon={false} label="私房">
+                                    <Form.Item name={['houseInfo', 'privateHouseCount']} noStyle>
+                                        <InputNumber min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套；</div>
+                                </Form.Item>
+                            </Col>
+                            <Col>
+                                <Form.Item colon={false} label="总共">
+                                    <Form.Item name={['houseInfo', 'houseCount']} noStyle>
+                                        <InputNumber disabled min={0} step={1} placeholder="几" />
+                                    </Form.Item>
+                                    <div className="ant-form-text">套</div>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                    </Form.Item>
+                    <Form.Item label="产权单位" name={['houseInfo', 'propertyUnit']}>
+                        <Input autoComplete="off" placeholder="请输入产权单位" />
+                    </Form.Item>
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item label="负责人" name={['houseInfo', 'propertyUnitUser']}>
+                                <Input autoComplete="off" placeholder="请输入负责人" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="负责人电话"
+                                name={['houseInfo', 'propertyUnitUserTel']}
+                            >
+                                <Input autoComplete="off" placeholder="请输入负责人电话" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="联系人" name={['houseInfo', 'propertyUnitConent']}>
+                                <Input autoComplete="off" placeholder="请输入联系人" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="联系人电话"
+                                name={['houseInfo', 'propertyUnitConentTel']}
+                            >
+                                <Input autoComplete="off" placeholder="请输入联系人电话" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,154 @@
+import React, { Component } from 'react'
+import { Col, Form, Input, Row, 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 unit 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 && 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() {
+        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)
+                    }
+                >
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                label="调查登记机构"
+                                name={['houseInfo', 'investigateAgency']}
+                                rules={[{ required: true, message: '请输入调查登记机构' }]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入调查登记机构" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="调查人员"
+                                name={['houseInfo', 'investigateUser']}
+                                rules={[{ required: true, message: '请输入调查人员' }]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入调查人员" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="审核人员"
+                                name={['houseInfo', 'offlineAuditor']}
+                                rules={[{ required: true, message: '请输入审核人员' }]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入审核人员" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                label="主管部门"
+                                name={['houseInfo', 'competentDepartment']}
+                                rules={[{ required: true, message: '请输入主管部门' }]}
+                            >
+                                <Input autoComplete="off" placeholder="请输入主管部门" />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
-import { Tabs, Button, message } from 'antd'
-import { defaultsDeep } from 'lodash'
-import { ComponentDynamic, Container } from 'components'
+import { Button, Descriptions, message as Message, Spin, Tabs } from 'antd'
+import { merge, isEqual } from 'lodash'
+import { AntIcon, ComponentDynamic, Container } from 'components'
+import { api } from 'common/api'
 
 const tabs = [
     {
@@ -38,107 +39,178 @@ const tabs = [
     //     active: false,
     //     show: false,
     // },
-    // {
-    //     title: '巡查登记',
-    //     name: 'patrol',
-    //     path: 'patrol',
-    //     active: false,
-    //     show: true,
-    // },
+    {
+        title: '巡查登记',
+        component: () => import('./patrol'),
+        active: false,
+        show: true,
+    },
 ]
 
 export default class index extends Component {
-
     state = {
-        actived: '0'
-    }
-    forms = []
+        actived: '0',
 
-    onSubmit = async () => {
-        let formData = {},
-            flag = true
-        for (let i = 0; i < this.forms.length; i++) {
-            const form = this.forms[i]
+        loading: true,
+        record: null,
+
+        saveDisabled: true,
+        saving: false,
+    }
+
+    children = []
+
+    formData = {}
+
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    componentDidMount() {
+        // 获取详细数据
+        const { taskId } = this.props.param
+        if (taskId) {
+            api.houseInfoGetByTaskId({ taskId }).then(({ data }) => {
+                this.setState({
+                    record: data,
+                    loading: false,
+                })
+            })
+        }
+    }
+
+    call(child, index) {
+        this.children[index] = child
+        if (this.children.filter(p => p).length === tabs.filter(p => p.show).length) {
+            this.setState({ saveDisabled: false })
+        }
+    }
+
+    async onSubmit() {
+        for (const child of this.children) {
             try {
-                const data = await form.onGetData()
-                formData = defaultsDeep(formData, data)
-            } catch (err) {
-                if (err) {
-                    err.errorFields.forEach(p => {
-                        message.error(p.errors[0])
-                    })
-                }
-                flag = false
+                const data = await child.getData()
+                merge(this.formData, data)
+            } catch (e) {
+                return e
             }
         }
 
-        if (!flag) {
-            return
-        }
+        //#region 提交数据
+        console.log(this.formData)
+        this.setState({ saving: true })
 
-        console.log(formData)
-
-        message.success('提交成功')
+        setTimeout(() => {
+            Message.success('提交成功')
+            this.setState({ saving: false })
+        }, 3000)
+        //#endregion
     }
 
     render() {
+        const { loading, record, saveDisabled, saving } = this.state
+
         return (
             <div className="yo-form-page">
                 <div className="yo-form-page-layout">
                     {/* 底部工具栏(需放在前面) */}
                     <div className="yo-form-page--bar yo-form-page--bar--with-tab">
-                        <Container>
+                        <Container mode="fluid">
                             <div className="yo-form-page--bar-inner">
+                                <span></span>
                                 <span>
-                                    {/* 可以在工具栏中增加其他控件(只能在一行内) */}
-                                </span>
-                                <span>
-                                    <Button onClick={() => window.closeContentWindow()}>取消</Button>
-                                    <Button onClick={this.onSubmit} type="primary">保存</Button>
+                                    <Button onClick={() => window.closeContentWindow()}>
+                                        取消
+                                    </Button>
+                                    <Button
+                                        disabled={saveDisabled}
+                                        loading={saving}
+                                        type="primary"
+                                        onClick={() => this.onSubmit()}
+                                    >
+                                        保存
+                                    </Button>
                                 </span>
                             </div>
                         </Container>
                     </div>
-                    <div className="yo-form-page--header"></div>
+                    <div className="yo-form-page--header" style={{ paddingBottom: 0 }}>
+                        <Container mode="fluid">
+                            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                                <Descriptions column={4}>
+                                    <Descriptions.Item label="区县（市）">
+                                        {record && record.houseCode.areaName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="街道（乡镇）">
+                                        {record && record.houseCode.roadName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="社区">
+                                        {record && record.houseCode.commName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item label="片区">
+                                        {record && record.houseCode.zoneName}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="编号">
+                                        {record &&
+                                            `${record.houseCode.areaName}-${
+                                                record.houseCode.roadName
+                                            }-${record.houseCode.commName}-${
+                                                record.houseCode.projectFullName
+                                            }-${record.houseCode.no.toString().padStart(3, '0')}`}
+                                    </Descriptions.Item>
+                                    <Descriptions.Item span="2" label="编码">
+                                        {record && record.houseCode.houseCode}
+                                    </Descriptions.Item>
+                                </Descriptions>
+                            </Spin>
+                        </Container>
+                    </div>
                     <div className="yo-tab-external-mount">
                         <Tabs
                             activeKey={this.state.actived}
                             animated={false}
-                            onChange={(activeKey) => { this.setState({ actived: activeKey }) }}
+                            onChange={activeKey => {
+                                this.setState({ actived: activeKey })
+                            }}
                         >
-                            {
-                                tabs.map((tab, i) => {
-                                    if (tab.show) {
-                                        return (
-                                            <Tabs.TabPane
-                                                key={i}
-                                                forceRender={false}
-                                                tab={tab.title}
-                                            ></Tabs.TabPane>
-                                        )
-                                    }
-                                    return <></>
-                                })
-                            }
+                            {tabs.map((tab, i) => {
+                                if (tab.show) {
+                                    return (
+                                        <Tabs.TabPane
+                                            key={i}
+                                            forceRender={false}
+                                            tab={tab.title}
+                                        ></Tabs.TabPane>
+                                    )
+                                }
+                                return <></>
+                            })}
                         </Tabs>
                         <div className="yo-tab-external-mount-content">
-                            {
-                                tabs.map((tab, i) => {
-                                    if (tab.show) {
-                                        return (
-                                            <div
-                                                key={i}
-                                                className={
-                                                    (this.state.actived === i.toString() ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive') + ' yo-tab-external-tabpane'
-                                                }
-                                            >
-                                                <ComponentDynamic is={tab.component} {...this.props} onRef={c => this.forms.push(c)} />
-                                            </div>
-                                        )
-                                    }
-                                    return <></>
-                                })
-                            }
+                            {tabs.map((tab, i) => {
+                                if (tab.show) {
+                                    return (
+                                        <div
+                                            key={i}
+                                            className={[
+                                                this.state.actived === i.toString()
+                                                    ? 'yo-tab-external-tabpane-active'
+                                                    : 'yo-tab-external-tabpane-inactive',
+                                                'yo-tab-external-tabpane',
+                                            ].join(' ')}
+                                        >
+                                            <ComponentDynamic
+                                                is={tab.component}
+                                                id={this.props.id}
+                                                record={record}
+                                                loading={loading}
+                                                onRef={child => this.call(child, i)}
+                                            />
+                                        </div>
+                                    )
+                                }
+                                return <></>
+                            })}
                         </div>
                     </div>
                 </div>

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 && 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/grade.jsx

@@ -0,0 +1,183 @@
+import React, { Component } from 'react'
+import { Form, Tooltip, Radio, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, first, isEqual, last, sortBy } from 'lodash'
+import getDictData from 'util/dic'
+import store from 'store'
+
+const { getState, subscribe } = store
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class handling extends Component {
+    state = {
+        loading: true,
+        codes: {
+            housePatrolInitGrade: [],
+            housePatrolDamageGrade: [],
+            houseGrade: [],
+        },
+    }
+    form = React.createRef()
+
+    constructor(props) {
+        super(props)
+
+        this.unsubscribe = subscribe('business', business => {
+            const initGrade = this.getInitGrade(business.completedDate)
+            this.form.current.setFieldsValue({
+                patrolInfo: {
+                    initGrade,
+                },
+            })
+        })
+    }
+
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    componentDidMount() {
+        this.fillData({
+            record: this.props.record,
+        })
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe()
+    }
+
+    call() {
+        if (this.props.onRef) {
+            this.props.onRef(this)
+        }
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.record = cloneDeep(params.record)
+
+        const _state = { loading: false }
+        //#region 从后端转换成前段所需格式
+        if (this.record) {
+            const { patrolInfo } = this.record
+            patrolInfo.initGrade = this.getInitGrade(getState('business').completedDate)
+        }
+        _state.codes = await getDictData(
+            'house_patrol_init_grade',
+            'house_patrol_damage_grade',
+            'house_grade'
+        )
+        //#endregion
+        this.form.current && this.form.current.setFieldsValue(this.record)
+
+        this.setState(_state)
+        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
+        }
+    }
+
+    getInitGrade(completedDate) {
+        const date = completedDate.find(p => p.id === this.props.id)
+        if (date) {
+            const { value: year } = date
+            if (year > 1999) {
+                return 1
+            }
+            if (year > 1994 && year < 2000) {
+                return 2
+            }
+            if (year > 1979 && year < 1995) {
+                return 3
+            }
+            if (year < 1980) {
+                return 4
+            }
+        }
+    }
+
+    render() {
+        const { loading, codes, initGradeValue } = this.state
+        console.log(initGradeValue)
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Form {...layout} ref={this.form}>
+                    <Form.Item
+                        label="初始等级"
+                        name={['patrolInfo', 'initGrade']}
+                        rules={[{ required: true, message: '请选择初始等级' }]}
+                    >
+                        <Tooltip title="初始等级无法手动更改，由房屋详情的竣工日期决定：2000年之后竣工的为一级，1995年~1999年竣工的为二级，1980年~1994年竣工的为三级，早于1980年竣工的为四级。选择房屋竣工日期后，初始等级会自动填充。">
+                            <Radio.Group disabled buttonStyle="solid">
+                                {codes.housePatrolInitGrade.map(item => {
+                                    return (
+                                        <Radio.Button key={item.code} value={+item.code}>
+                                            {item.value}
+                                        </Radio.Button>
+                                    )
+                                })}
+                            </Radio.Group>
+                        </Tooltip>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="损坏等级"
+                        name={['patrolInfo', 'damageGrade']}
+                        rules={[{ required: true, message: '请选择损坏等级' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.housePatrolDamageGrade.map(item => {
+                                return (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                )
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="综合等级"
+                        name={['patrolInfo', 'comprehensiveGrade']}
+                        rules={[{ required: true, message: '请选择综合等级' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.houseGrade.map(item => {
+                                return (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                )
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import { Form, Input, Radio, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, first, isEqual, last, sortBy } from 'lodash'
+import getDictData from 'util/dic'
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class handling extends Component {
+    state = {
+        loading: true,
+        codes: {
+            housePatrolHandlingOpinion: [],
+            housePatrolRectifyReform: [],
+        },
+    }
+    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)
+        const _state = { loading: false }
+        //#region 从后端转换成前段所需格式
+        _state.codes = await getDictData(
+            'house_patrol_handling_opinion',
+            'house_patrol_rectify_Reform'
+        )
+        //#endregion
+        this.form.current && this.form.current.setFieldsValue(this.record)
+
+        this.setState(_state)
+        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
+        }
+    }
+    render() {
+        const { loading, codes } = this.state
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Form {...layout} ref={this.form}>
+                    <Form.Item
+                        label="处理建议"
+                        name={['patrolInfo', 'handlingOpinion']}
+                        rules={[{ required: true, message: '请选择处理建议' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.housePatrolHandlingOpinion.map(item => {
+                                return (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                )
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+
+                    <Form.Item label="处理建议备注" name={['patrolInfo', 'handlingOpinionRemark']}>
+                        <Input.TextArea
+                            autoSize={{ minRows: 3 }}
+                            placeholder="请输入处理建议备注"
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="整改情况"
+                        name={['patrolInfo', 'rectifyAndReform']}
+                        rules={[{ required: true, message: '请选择整改情况' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.housePatrolRectifyReform.map(item => {
+                                return (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                )
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+
+                    <Form.Item label="整改情况备注" name={['patrolInfo', 'rectifyAndReformRemark']}>
+                        <Input.TextArea
+                            autoSize={{ minRows: 3 }}
+                            placeholder="请输入整改情况备注"
+                        />
+                    </Form.Item>
+                </Form>
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { Anchor, Card, Col, Divider, Row, Spin } from 'antd'
+import { AntIcon, ComponentDynamic, Container } from 'components'
+import { isEqual, merge } from 'lodash'
+
+const parts = [
+    {
+        title: '巡查基本情况',
+        component: () => import('./base'),
+    },
+    {
+        title: '房屋检查',
+        component: () => import('./inspection'),
+    },
+    {
+        title: '等级划分',
+        component: () => import('./grade'),
+    },
+    {
+        title: '处理情况',
+        component: () => import('./handling'),
+    },
+    {
+        title: '本期巡查结果',
+        component: () => import('./result'),
+    },
+]
+
+export default class index extends Component {
+    // 子表单实例集合
+    children = []
+
+    // 整合提交数据
+    formData = {}
+
+    // 锚点挂载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) {
+            const { onRef } = this.props
+            if (onRef) onRef(this)
+        }
+    }
+
+    /**
+     * 从下级组件获取表单数据,并传递给更上级组件
+     * [异步,必要]
+     * @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 (
+            <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-patrol-${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}
+                                                    {...this.props}
+                                                    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-patrol-${i}-${id}`}
+                                    title={part.title}
+                                />
+                            ))}
+                        </Anchor>
+                    </Col>
+                </Row>
+            </Container>
+        )
+    }
+}

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

@@ -0,0 +1,291 @@
+import React, { Component } from 'react'
+import { Col, Form, Input, Row, Spin, Upload } from 'antd'
+import { AntIcon, PhotoPreview } from 'components'
+import { cloneDeep, isEqual } from 'lodash'
+import { BlobToBase64, GetFileName, PreviewFile } from 'util/file'
+import { api } from 'common/api'
+
+const initialValues = {}
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+const imageUploads = [{ key: 'settlementTiltFiles' }, { key: 'otherInfoFiles' }]
+
+export default class inspection extends Component {
+    state = {
+        loading: true,
+        codes: {},
+        options: {},
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    photoPreview = 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 从后端转换成前段所需格式
+        if (this.record) {
+            const { patrolInfo } = this.record
+            const keys = imageUploads.map(p => p.key)
+            for (const key of keys) {
+                const fileValue = []
+                const fileList =
+                    !patrolInfo[key] || !patrolInfo[key].length ? [] : patrolInfo[key].split(',')
+                for (const fileId of fileList) {
+                    try {
+                        const file = await PreviewFile(fileId)
+                        const base64 = await BlobToBase64(file)
+                        fileValue.push({
+                            uid: fileId,
+                            response: fileId,
+                            name: file.name,
+                            url: base64,
+                            status: 'done',
+                        })
+                    } catch {
+                        const { data: file } = await api.sysFileInfoDetail({ id: fileId })
+                        fileValue.push({
+                            uid: fileId,
+                            response: '文件已丢失',
+                            name: file.fileOriginName,
+                            status: 'error',
+                        })
+                    }
+                }
+
+                patrolInfo[key] = fileValue
+            }
+        }
+        //#endregion
+        this.form.current && 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 从前段转换后端所需格式
+            const { patrolInfo } = postData
+            const keys = imageUploads.map(p => p.key)
+            for (const key of keys) {
+                patrolInfo[key] = patrolInfo[key]
+                    .map(item => (item.uid.startsWith('rc-upload') ? item.response : item.uid))
+                    .join(',')
+            }
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    /**
+     * 表单change事件处理,包括了所有字段的change
+     * [异步,非必要]
+     * @param {*} changedValues
+     * @param {*} allValues
+     */
+    async onValuesChange(changedValues, allValues) {}
+
+    async onFileUpload({ file, onProgress, onSuccess, onError }) {
+        onProgress({
+            percent: 0,
+        })
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            const { data: fileId } = await api.sysFileInfoUpload(fd)
+            onSuccess(fileId)
+        } catch {
+            onError()
+        }
+    }
+
+    async onFilePreview(file, key) {
+        const fileList = this.form.current
+            .getFieldValue(['patrolInfo', key])
+            .filter(p => p.status === 'done')
+        const items = []
+        for (const _file of fileList) {
+            const img = new Image()
+            const src = _file.url || _file.thumbUrl
+            img.src = src
+            items.push({
+                src,
+                w: img.naturalWidth,
+                h: img.naturalHeight,
+            })
+        }
+        this.photoPreview.current.initPhotoSwipe(items, {
+            index: fileList.indexOf(file),
+        })
+    }
+
+    async onFileDownload(file) {
+        const { data, headers } = await api.sysFileInfoDownload({ id: file.response })
+        const url = window.URL.createObjectURL(data)
+        const fileName = GetFileName(headers['content-disposition'])
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        a.click()
+        window.URL.revokeObjectURL(url)
+        a.remove()
+    }
+    //#endregion
+
+    render() {
+        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)
+                    }
+                >
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item label="沉降倾斜情况" name={['patrolInfo', 'settlementTilt']}>
+                                <Input.TextArea
+                                    autoSize={{ minRows: 4.6 }}
+                                    placeholder="请输入沉降倾斜情况"
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name={['patrolInfo', 'settlementTiltFiles']}
+                                valuePropName="fileList"
+                                getValueFromEvent={e => {
+                                    if (Array.isArray(e)) {
+                                        return e
+                                    }
+                                    return e && e.fileList
+                                }}
+                            >
+                                <Upload
+                                    listType="picture-card"
+                                    customRequest={e => this.onFileUpload(e)}
+                                    showUploadList={{
+                                        showRemoveIcon: true,
+                                        showDownloadIcon: true,
+                                    }}
+                                    onPreview={file =>
+                                        this.onFilePreview(file, 'settlementTiltFiles')
+                                    }
+                                    onDownload={file => this.onFileDownload(file)}
+                                >
+                                    <div>
+                                        <AntIcon type="plus" />
+                                        <div className="ant-upload-text">沉降倾斜照片</div>
+                                    </div>
+                                </Upload>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item label="其他情况" name={['patrolInfo', 'otherInfo']}>
+                                <Input.TextArea
+                                    autoSize={{ minRows: 4.6 }}
+                                    placeholder="请输入其他情况"
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name={['patrolInfo', 'otherInfoFiles']}
+                                valuePropName="fileList"
+                                getValueFromEvent={e => {
+                                    if (Array.isArray(e)) {
+                                        return e
+                                    }
+                                    return e && e.fileList
+                                }}
+                            >
+                                <Upload
+                                    listType="picture-card"
+                                    customRequest={e => this.onFileUpload(e)}
+                                    showUploadList={{
+                                        showRemoveIcon: true,
+                                        showDownloadIcon: true,
+                                    }}
+                                    onPreview={file => this.onFilePreview(file, 'otherInfoFiles')}
+                                    onDownload={file => this.onFileDownload(file)}
+                                >
+                                    <div>
+                                        <AntIcon type="plus" />
+                                        <div className="ant-upload-text">其他情况照片</div>
+                                    </div>
+                                </Upload>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Form.Item label="主要安全隐患综述" name={['patrolInfo', 'mainSafety']}>
+                        <Input.TextArea
+                            autoSize={{ minRows: 4.6 }}
+                            placeholder="请输入主要安全隐患综述"
+                        />
+                    </Form.Item>
+                </Form>
+
+                <PhotoPreview ref={this.photoPreview} />
+            </Spin>
+        )
+    }
+}

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

@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+import { Form, Input, Radio, Spin } from 'antd'
+import { AntIcon } from 'components'
+import { cloneDeep, first, isEqual, last, sortBy } from 'lodash'
+
+const layout = {
+    labelCol: { flex: '150px' },
+    wrapperCol: { flex: '1' },
+}
+
+export default class result extends Component {
+    state = {
+        loading: true,
+        codes: {
+            patrolResult: [
+                { code: '0', value: '正常' },
+                { code: '-1', value: '异常' },
+            ],
+        },
+    }
+    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 从后端转换成前段所需格式
+
+        //#endregion
+        this.form.current && 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
+        }
+    }
+    render() {
+        const { loading, codes } = this.state
+
+        return (
+            <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                <Form {...layout} ref={this.form}>
+                    <Form.Item
+                        label="正常与否"
+                        name={['patrolInfo', 'patrolResult']}
+                        rules={[{ required: true, message: '请选择本期巡查结果' }]}
+                    >
+                        <Radio.Group buttonStyle="solid">
+                            {codes.patrolResult.map(item => {
+                                return (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                )
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+                    <Form.Item label="异常情况描述" name={['patrolInfo', 'patrolResultRemark']}>
+                        <Input.TextArea autoSize placeholder="请输入异常情况描述" />
+                    </Form.Item>
+                </Form>
+            </Spin>
+        )
+    }
+}

web-react/src/pages/business/house/member/selector/index.jsx

@@ -45,7 +45,7 @@ export default class index extends Component {
         const { userId } = this.state
 
         return (
-            <Tabs>
+            <Tabs tabBarStyle={{ padding: '0 24px' }}>
                 <Tabs.TabPane key="1" tab="选房">
                     <SelectorList
                         userId={userId}

web-react/src/pages/business/house/member/selector/selected-list.jsx

@@ -27,8 +27,8 @@ const authName = 'houseSelector'
 export default class index extends Component {
     state = {
         codes: {
-            dicHouseType: [],
-            dicHouseIndustry: [],
+            houseType: [],
+            houseIndustry: [],
         },
 
         saving: false,
@@ -57,7 +57,7 @@ export default class index extends Component {
             dataIndex: 'type',
             sorter: true,
             width: 150,
-            render: text => this.bindCodeValue(text, 'dic_house_type'),
+            render: text => this.bindCodeValue(text, 'house_type'),
         },
         {
             title: '地址',
@@ -91,7 +91,7 @@ export default class index extends Component {
     componentDidMount() {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
-        getDictData('dic_house_type', 'dic_house_industry').then(codes => {
+        getDictData('house_type', 'house_industry').then(codes => {
             this.setState({ codes }, () => {
                 onLoadData()
             })
@@ -218,7 +218,7 @@ export default class index extends Component {
                             <Form.Item label="房屋性质" name="type">
                                 <Radio.Group buttonStyle="solid">
                                     <Radio.Button value="">全部</Radio.Button>
-                                    {codes.dicHouseType.map(item => (
+                                    {codes.houseType.map(item => (
                                         <Radio.Button key={item.code} value={item.code}>
                                             {item.value}
                                         </Radio.Button>
@@ -228,7 +228,7 @@ export default class index extends Component {
                             {type == 2 && (
                                 <Form.Item label="行业" name="industry">
                                     <Select allowClear className="w-150" placeholder="请选择行业">
-                                        {codes.dicHouseIndustry.map(item => (
+                                        {codes.houseIndustry.map(item => (
                                             <Select.Option key={item.code} value={item.code}>
                                                 {item.value}
                                             </Select.Option>

web-react/src/pages/business/house/member/selector/selector-list.jsx

@@ -27,8 +27,8 @@ const authName = 'houseSelector'
 export default class index extends Component {
     state = {
         codes: {
-            dicHouseType: [],
-            dicHouseIndustry: [],
+            houseType: [],
+            houseIndustry: [],
         },
 
         saving: false,
@@ -57,7 +57,7 @@ export default class index extends Component {
             dataIndex: 'type',
             sorter: true,
             width: 150,
-            render: text => this.bindCodeValue(text, 'dic_house_type'),
+            render: text => this.bindCodeValue(text, 'house_type'),
         },
         {
             title: '地址',
@@ -91,7 +91,7 @@ export default class index extends Component {
     componentDidMount() {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
-        getDictData('dic_house_type', 'dic_house_industry').then(codes => {
+        getDictData('house_type', 'house_industry').then(codes => {
             this.setState({ codes }, () => {
                 onLoadData()
             })
@@ -218,7 +218,7 @@ export default class index extends Component {
                             <Form.Item label="房屋性质" name="type">
                                 <Radio.Group buttonStyle="solid">
                                     <Radio.Button value="">全部</Radio.Button>
-                                    {codes.dicHouseType.map(item => (
+                                    {codes.houseType.map(item => (
                                         <Radio.Button key={item.code} value={item.code}>
                                             {item.value}
                                         </Radio.Button>
@@ -228,7 +228,7 @@ export default class index extends Component {
                             {type == 2 && (
                                 <Form.Item label="行业" name="industry">
                                     <Select allowClear className="w-150" placeholder="请选择行业">
-                                        {codes.dicHouseIndustry.map(item => (
+                                        {codes.houseIndustry.map(item => (
                                             <Select.Option key={item.code} value={item.code}>
                                                 {item.value}
                                             </Select.Option>

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之后对其作出数据结构调整
-    * [异步,必要]
-    * @param {*} params 
-    */
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
     async fillData(params) {
-        const areaCodeDefault = params.record ? params.record.areaCode : params.pid ? params.pid : '';
-        this.houseType = params.record ? params.record.type : 1;
+        const areaCodeDefault = params.record
+            ? 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];
-                areaCode[level] = item.code;
+                const item = data[i]
+                areaCode[level] = item.code
 
                 if (item.code === areaCodeDefault) {
-                    areaCode.length = level + 1;
-                    return true;
+                    areaCode.length = level + 1
+                    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,84 @@ export default class form extends Component {
 
     async loadAreaData() {
         const { data } = await api.getAreaTree()
-        const clearChiildren = (data) => {
-            data.forEach((item) => {
+        console.log(data)
+        const clearChiildren = data => {
+            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;
-        if (!!this.initRecord && this.initRecord.areaCode == areaCode && this.initRecord.type == houseType) {
+        this.loading = true
+        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
-                initialValues={initialValues}
-                ref={this.form}
-                className="yo-form"
-            >
+            <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" >
-                            <Radio.Group disabled={this.state.exist} buttonStyle="solid" onChange={(e) => this.onHouseTypeChange(e)}>
+                        <Form.Item label="类型" name="type">
+                            <Radio.Group
+                                disabled={this.state.exist}
+                                buttonStyle="solid"
+                                onChange={e => this.onHouseTypeChange(e)}
+                            >
                                 <Radio.Button value={1}>
                                     <span>住宅</span>
                                 </Radio.Button>
@@ -197,13 +207,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 +225,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' }]}>
-                            <Input autoComplete="off" placeholder="选择所属区域和类型之后自动生成" disabled={true} />
+                        <Form.Item
+                            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 +248,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>
         )
     }
-}
+}

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

@@ -1,6 +1,14 @@
 import React, { Component } from 'react'
 import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
-import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components'
+import {
+    AntIcon,
+    Auth,
+    Container,
+    ModalForm,
+    QueryTable,
+    QueryTableActions,
+    QueryTreeLayout,
+} from 'components'
 import { api } from 'common/api'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
@@ -13,17 +21,16 @@ const apiAction = {
     page: api.getHouseProjectPage,
     add: api.houseProejctAdd,
     edit: api.houseProejctEdit,
-    delete: api.houseProejctDelete
+    delete: api.houseProejctDelete,
 }
 
 const name = '项目'
 
 export default class index extends Component {
-
     state = {
         codes: {
-            dicHouseType: []
-        }
+            houseType: [],
+        },
     }
 
     // 表格实例
@@ -37,57 +44,62 @@ export default class index extends Component {
     // 树选中节点
     selectCode = undefined
     columns = [
-
         {
             title: '项目名称',
             dataIndex: 'name',
+            width: 150,
             sorter: true,
         },
         {
             title: '社区',
             dataIndex: 'areaName',
+            width: 100,
             sorter: true,
         },
         {
             title: '备注',
             dataIndex: 'note',
+            width: 150,
             sorter: true,
         },
         {
             title: '类型',
             dataIndex: 'type',
             sorter: true,
-            render: text => (<>{this.bindCodeValue(text, 'dic_house_type')}</>)
-        }
+            width: 80,
+            render: text => <>{this.bindCodeValue(text, 'house_type')}</>,
+        },
     ]
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
 
-        const flag = auth({ sysArea: [['edit'], ['delete']] })
+        const flag = auth({ houseProjectInfo: [['edit'], ['delete']] })
 
         if (flag) {
             this.columns.push({
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="houseProjectInfo:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="houseProjectInfo:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="houseProjectInfo:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="houseProjectInfo:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -95,9 +107,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -109,26 +121,28 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDictData('dic_house_type').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                this.table.current.onLoadData()
-            })
+        getDictData('house_type').then(res => {
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    this.table.current.onLoadData()
+                }
+            )
         })
     }
     /**
-    * 调用加载数据接口,可在调用前对query进行处理
-    * [异步,必要]
-    * @param {*} params 
-    * @param {*} query 
-    * @returns 
-    */
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
     loadData = async (params, query) => {
-
         query = {
             ...query,
-            pid: this.selectCode
+            pid: this.selectCode,
         }
         //首次加载根据code列升序排序
         // if (!params.sortField) {
@@ -155,7 +169,7 @@ export default class index extends Component {
     /**
      * 树节点选中事件
      * [必要]
-     * @param {*} id 
+     * @param {*} id
      */
     onSelectTree(code) {
         this.selectCode = code
@@ -164,15 +178,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => +p.code === code)
+            const c = codes.find(p => +p.code === code)
             if (c) {
                 return c.value
             }
@@ -182,21 +196,21 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record) {
         modal.current.open({
             pid: this.selectCode,
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -211,13 +225,10 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     render() {
@@ -225,7 +236,7 @@ export default class index extends Component {
             <QueryTreeLayout
                 loadData={this.loadTreeData}
                 defaultExpanded={true}
-                onSelect={(key) => this.onSelectTree(key)}
+                onSelect={key => this.onSelectTree(key)}
                 replaceFields={{ value: 'code', title: 'name', children: 'children' }}
             >
                 <Container mode="fluid">
@@ -250,12 +261,12 @@ export default class index extends Component {
                                     <Button
                                         icon={<AntIcon type="plus" />}
                                         onClick={() => this.onOpen(this.addForm)}
-                                    >新增{name}</Button>
+                                    >
+                                        新增{name}
+                                    </Button>
                                 </Auth>
                             }
-                        >
-
-                        </QueryTable>
+                        ></QueryTable>
                     </Card>
                 </Container>
                 <ModalForm
@@ -278,4 +289,4 @@ export default class index extends Component {
             </QueryTreeLayout>
         )
     }
-}
+}

web-react/src/pages/business/house/task/index.jsx

@@ -0,0 +1,265 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm, Radio, Select, Tag } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.houseTaskPage,
+}
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'houseTask'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            houseType: [],
+            houseIndustry: [],
+        },
+
+        type: '',
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '房屋编码',
+            dataIndex: 'houseCode',
+            sorter: true,
+            width: 300,
+            render: (text, record) => (
+                <>
+                    {`${record.areaName}-${record.roadName}-${record.commName}-${
+                        record.note
+                    }-${record.no.toString().padStart(3, '0')}`}
+                    <br />
+                    <Tag color="purple">{text}</Tag>
+                </>
+            ),
+        },
+        {
+            title: '房屋性质及行业',
+            dataIndex: 'type',
+            sorter: true,
+            width: 150,
+            render: text => this.bindCodeValue(text, 'house_type'),
+        },
+        {
+            title: '地址',
+            dataIndex: 'address',
+            sorter: true,
+        },
+        {
+            title: '任务截止时间',
+            dataIndex: 'endTime',
+            sorter: true,
+            width: 150,
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ houseInfo: 'getByTaskId' })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth={{ houseInfo: 'getByTaskId' }}>
+                            <a onClick={() => this.onOpen(record.id)}>登记</a>
+                        </Auth>
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('house_type', 'house_industry').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(taskId) {
+        window.openContentWindow({
+            title: '房屋登记',
+            path: 'business/house/info/form',
+            param: {
+                taskId,
+            },
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        const { codes, type } = this.state
+
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        queryInitialValues={{
+                            type: '',
+                        }}
+                        onQueryChange={values => {
+                            if (values.hasOwnProperty('type')) {
+                                this.setState({ type: values.type })
+                            }
+                        }}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="房屋性质" name="type">
+                                    <Radio.Group buttonStyle="solid">
+                                        <Radio.Button value="">全部</Radio.Button>
+                                        {codes.houseType.map(item => (
+                                            <Radio.Button key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Radio.Button>
+                                        ))}
+                                    </Radio.Group>
+                                </Form.Item>
+                                {type == 2 && (
+                                    <Form.Item label="行业" name="industry">
+                                        <Select
+                                            allowClear
+                                            className="w-150"
+                                            placeholder="请选择行业"
+                                        >
+                                            {codes.houseIndustry.map(item => (
+                                                <Select.Option key={item.code} value={item.code}>
+                                                    {item.value}
+                                                </Select.Option>
+                                            ))}
+                                        </Select>
+                                    </Form.Item>
+                                )}
+                                <Form.Item label="地址" name="address">
+                                    <Input autoComplete="off" placeholder="请输入地址" />
+                                </Form.Item>
+                                <Form.Item label="房屋唯一编码" name="houseCode">
+                                    <Input autoComplete="off" placeholder="请输入房屋唯一编码" />
+                                </Form.Item>
+                            </Auth>
+                        }
+                    />
+                </Card>
+            </Container>
+        )
+    }
+}

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

@@ -1,24 +1,36 @@
 import React, { Component } from 'react'
-import { Cascader, Form, Input, InputNumber, Select, Spin, TreeSelect } from 'antd'
+import { Form, Input, InputNumber, Spin, TreeSelect } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
-import getDictData from 'util/dic'
 import { api } from 'common/api'
-import { numberToChinese } from 'util/format';
+import { numberToChinese } from 'util/format'
+import store from 'store'
 
+const { getState, subscribe } = store
+const storePath = 'user'
 const initialValues = {
-    sort: 100
+    sort: 100,
 }
 export default class form extends Component {
     state = {
         // 加载状态
         loading: true,
-
+        exist: false,
         options: {
-            areaData: []
-        }
+            orgData: [],
+        },
+        user: getState(storePath),
     }
 
+    constructor(props) {
+        super(props)
+
+        this.unsubscribe = subscribe(storePath, () => {
+            this.setState({
+                user: getState(storePath),
+            })
+        })
+    }
     // 表单实例
     form = React.createRef()
 
@@ -31,67 +43,55 @@ export default class form extends Component {
     componentDidMount() {
         this.props.created && this.props.created(this)
     }
-
+    componentWillUnmount() {
+        this.unsubscribe()
+    }
     /**
-         * 填充数据
-         * 可以在设置this.record之后对其作出数据结构调整
-         * [异步,必要]
-         * @param {*} params 
-         */
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
     async fillData(params) {
-
+        const { user } = this.state
         this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
-        const areaData = await this.loadAreaData()
+        const orgData = await this.loadOrgData()
 
         this.setState({
-            options: { areaData }
+            exist: !!params.record,
+            options: { orgData },
         })
 
-        const areaCode = [];
-        const findCode = (data, level) => {
-            level = level || 0;
-            for (let i = 0; i < data.length; i++) {
-                const item = data[i];
-                areaCode[level] = item.code;
-
-                if (item.code === params.record.areaCode) {
-                    areaCode.length = level + 1;
-                    return true;
+        //街道角色新增，不管左侧树选中与否，默认值均为本街道
+        if (user.adminType === 2) {
+            user.roles.map(role => {
+                if (role.code == 'road_manager') {
+                    params.orgId = user.loginEmpInfo.orgId
                 }
-
-                if (item.children && item.children.length) {
-                    const found = findCode(item.children, level + 1);
-                    if (found) {
-                        return true;
-                    }
-                }
-            }
-        };
-
-        if (params.record && params.record.areaCode) {
-            findCode(areaData);
+            })
         }
 
         this.record = {
             pid: params.orgId,
             ...this.record,
-            areaCode
         }
-        this.record.areaCode = areaCode
-        //#endregion
 
+        //#endregion
+        if (!params.record && !!params.orgId) {
+            this.onOrgIdChanged(params.orgId)
+        }
         this.form.current.setFieldsValue(this.record)
 
         this.setState({
-            loading: false
+            loading: false,
         })
     }
     /**
      * 获取数据
      * 可以对postData进行数据结构调整
      * [异步,必要]
-     * @returns 
+     * @returns
      */
     async getData() {
         const form = this.form.current
@@ -102,74 +102,64 @@ export default class form extends Component {
             if (this.record) {
                 postData.id = this.record.id
             }
-            //#region 从前段转换后端所需格式
-            postData.areaCode = postData.areaCode[postData.areaCode.length - 1]
+            //#region 从前段转换后端所需格
             //#endregion
             return postData
         }
     }
 
-    async loadAreaData() {
-        const { data } = await api.getAreaTree({ level: 3 })
-        const clearChiildren = (data) => {
-            data.forEach((item) => {
-                if (item.children && item.children.length) {
-                    clearChiildren(item.children);
-                } else {
-                    delete item.children;
-                }
-            });
-        };
-        clearChiildren(data);
+    async loadOrgData() {
+        const { data } = await api.getOrgTree({ type: 4 })
         return data
     }
 
-    onAreaCodeChange(value) {
-        this.loading = true;
-        // const { data } = api.houseZoneAutoIncrement({ code: selectedOptions[selectedOptions.length - 1] });
+    onOrgIdChanged(value) {
+        this.loading = true
 
-        api.houseZoneAutoIncrement({ code: value[value.length - 1] })
+        api.houseZoneAutoIncrement({ roadId: value })
             .then(({ data }) => {
                 this.form.current.setFieldsValue({
-                    name: `片区${numberToChinese(data)}`
+                    name: `片区${numberToChinese(data)}`,
+                    sort: data,
                 })
             })
             .catch(() => {
                 this.form.current.setFieldsValue({
                     name: '',
-                    areaCode: []
+                    sort: 0,
                 })
             })
             .finally(() => {
-                this.loading = false;
-            });
+                this.loading = false
+            })
     }
 
     render() {
         return (
-            <Form
-                initialValues={initialValues}
-                ref={this.form}
-                className="yo-form"
-            >
+            <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="areaCode" rules={[{ required: true, message: '请选择所属区域' }]}>
-                            <Cascader
-                                options={this.state.options.areaData}
-                                fieldNames={{
-                                    label: 'name',
-                                    value: 'code',
-                                    children: 'children'
-                                }}
-                                expandTrigger="hover"
-                                // changeOnSelect
-                                placeholder="请选择所属区域"
-                                onChange={(val, selectedOptions) => this.onAreaCodeChange(val)}
+                        <Form.Item
+                            label="所属街道"
+                            name="pid"
+                            rules={[{ required: true, message: '请选择所属街道' }]}
+                        >
+                            <TreeSelect
+                                treeData={this.state.options.orgData}
+                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                treeDefaultExpandAll
+                                placeholder="请选择所属街道"
+                                onChange={(value, label, extra) => this.onOrgIdChanged(value)}
+                                disabled={this.state.exist}
                             />
                         </Form.Item>
-                        <Form.Item label="片区名称" name="name" rules={[{ required: true, message: '片区名称', trigger: 'blur' }]}>
-                            <Input autoComplete="off" placeholder="请输入机构名称" />
+
+                        <Form.Item
+                            label="片区名称"
+                            name="name"
+                            rules={[{ required: true, message: '片区名称', trigger: 'blur' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入机构名称" disabled />
                         </Form.Item>
                         <Form.Item label="排序" name="sort">
                             <InputNumber
@@ -177,6 +167,7 @@ export default class form extends Component {
                                 min={0}
                                 placeholder="请输入排序"
                                 className="w-100-p"
+                                disabled
                             />
                         </Form.Item>
                         <Form.Item label="备注" name="remark">
@@ -187,4 +178,4 @@ export default class form extends Component {
             </Form>
         )
     }
-}
+}

web-react/src/pages/business/house/zone/index.jsx

@@ -1,6 +1,14 @@
 import React, { Component } from 'react'
 import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
-import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components'
+import {
+    AntIcon,
+    Auth,
+    Container,
+    ModalForm,
+    QueryTable,
+    QueryTableActions,
+    QueryTreeLayout,
+} from 'components'
 import { api } from 'common/api'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
@@ -12,14 +20,13 @@ const apiAction = {
     tree: api.getOrgTree,
     page: api.houseZonePage,
     add: api.houseZoneAdd,
-    edit: api.sysOrgEdit,
-    delete: api.sysOrgDelete
+    edit: api.houseZoneEdit,
+    delete: api.sysOrgDelete,
 }
 
 const name = '片区'
 
 export default class index extends Component {
-
     // 树框架实例
     treeLayout = React.createRef()
 
@@ -58,32 +65,34 @@ export default class index extends Component {
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
 
-        const flag = auth({ sysOrg: [['edit'], ['delete']] })
+        const flag = auth({ houseZone: [['edit'], ['delete']] })
 
         if (flag) {
             this.columns.push({
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="sysOrg:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysOrg:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="houseZone:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="houseZone:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -92,9 +101,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -111,14 +120,14 @@ export default class index extends Component {
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         query = {
             ...query,
-            pid: this.selectId
+            pid: this.selectId,
         }
 
         const { data } = await apiAction.page({
@@ -141,7 +150,7 @@ export default class index extends Component {
     /**
      * 树节点选中事件
      * [必要]
-     * @param {*} id 
+     * @param {*} id
      */
     onSelectTree(id) {
         this.selectId = id
@@ -150,15 +159,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code === code)
+            const c = codes.find(p => p.code === code)
             if (c) {
                 return c.value
             }
@@ -168,21 +177,21 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record) {
         modal.current.open({
             orgId: this.selectId,
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -202,13 +211,10 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     //#region 自定义方法
@@ -220,7 +226,7 @@ export default class index extends Component {
                 ref={this.treeLayout}
                 loadData={this.loadTreeData}
                 defaultExpanded={true}
-                onSelect={(key) => this.onSelectTree(key)}
+                onSelect={key => this.onSelectTree(key)}
             >
                 <Container mode="fluid">
                     <Card bordered={false}>
@@ -239,7 +245,9 @@ export default class index extends Component {
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             }
                         />
                     </Card>

web-react/src/pages/system/app/index.jsx

@@ -15,18 +15,17 @@ const apiAction = {
     edit: api.sysAppEdit,
     delete: api.sysAppDelete,
 
-    setDefault: api.sysAppSetAsDefault
+    setDefault: api.sysAppSetAsDefault,
 }
 
 // 用于弹窗标题
 const name = '应用'
 
 export default class index extends Component {
-
     state = {
         codes: {
-            commonStatus: []
-        }
+            commonStatus: [],
+        },
     }
 
     // 表格实例
@@ -42,51 +41,58 @@ export default class index extends Component {
         {
             title: '应用名称',
             dataIndex: 'name',
+            width: 300,
             sorter: true,
         },
         {
             title: '唯一编码',
             dataIndex: 'code',
+            width: 300,
             sorter: true,
         },
         {
             title: '是否默认',
             dataIndex: 'active',
+            width: 200,
             sorter: true,
-            render: (text, record) => (<>
-                {text ? '是' : '否'}
-                {
-                    !record.active && <Auth auth="sysApp:setAsDefault">
-                        <QueryTableActions>
-                            <span></span>
-                            <Popconfirm
-                                placement="topRight"
-                                title="是否确认设置为默认应用"
-                                onConfirm={() => this.onSetDefault(record)}
-                            >
-                                <a>设为默认</a>
-                            </Popconfirm>
-                        </QueryTableActions>
-                    </Auth>
-                }
-            </>)
+            render: (text, record) => (
+                <>
+                    {text ? '是' : '否'}
+                    {!record.active && (
+                        <Auth auth="sysApp:setAsDefault">
+                            <QueryTableActions>
+                                <span></span>
+                                <Popconfirm
+                                    placement="topRight"
+                                    title="是否确认设置为默认应用"
+                                    onConfirm={() => this.onSetDefault(record)}
+                                >
+                                    <a>设为默认</a>
+                                </Popconfirm>
+                            </QueryTableActions>
+                        </Auth>
+                    )}
+                </>
+            ),
         },
         {
             title: '状态',
             dataIndex: 'status',
+            width: 100,
             sorter: true,
-            render: text => (<>{this.bindCodeValue(text, 'common_status')}</>)
+            render: text => <>{this.bindCodeValue(text, 'common_status')}</>,
         },
         {
             title: '排序',
             dataIndex: 'sort',
+            width: 100,
             sorter: true,
         },
     ]
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -98,20 +104,22 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="sysApp:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysApp:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="sysApp:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="sysApp:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -120,9 +128,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -136,20 +144,23 @@ export default class index extends Component {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
         getDictData('common_status').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                onLoadData()
-            })
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    onLoadData()
+                }
+            )
         })
     }
 
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         const { data } = await apiAction.page({
@@ -161,15 +172,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code === code)
+            const c = codes.find(p => p.code == code)
             if (c) {
                 return c.value
             }
@@ -179,20 +190,20 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record) {
         modal.current.open({
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         const { onLoading, onLoaded, onReloadData } = this.table.current
@@ -212,21 +223,15 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     //#region 自定义方法
     async onSetDefault(record) {
-        this.onAction(
-            apiAction.setDefault(record),
-            '设置成功'
-        )
+        this.onAction(apiAction.setDefault(record), '设置成功')
     }
     //#endregion
 
@@ -255,7 +260,9 @@ export default class index extends Component {
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             </Auth>
                         }
                     />

web-react/src/pages/system/area/index.jsx

@@ -1,6 +1,14 @@
 import React, { Component } from 'react'
 import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
-import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components'
+import {
+    AntIcon,
+    Auth,
+    Container,
+    ModalForm,
+    QueryTable,
+    QueryTableActions,
+    QueryTreeLayout,
+} from 'components'
 import { api } from 'common/api'
 import auth from 'components/authorized/handler'
 import { toCamelCase } from 'util/format'
@@ -13,17 +21,16 @@ const apiAction = {
     page: api.sysAreaPage,
     add: api.sysAreaAdd,
     edit: api.sysAreaEdit,
-    delete: api.sysAreaDelete
+    delete: api.sysAreaDelete,
 }
 
 const name = '区域'
 
 export default class index extends Component {
-
     state = {
         codes: {
-            dicAreacodeType: []
-        }
+            areacodeType: [],
+        },
     }
 
     // 表格实例
@@ -41,37 +48,43 @@ export default class index extends Component {
             title: '区域类型',
             dataIndex: 'levelType',
             sorter: true,
-            render: text => (<>{this.bindCodeValue(text, 'dic_areacode_type')}</>)
+            width: 50,
+            render: text => <>{this.bindCodeValue(text, 'areacode_type')}</>,
         },
         {
             title: '区域名称',
             dataIndex: 'name',
+            width: 100,
             sorter: true,
         },
         {
             title: '区域编号',
             dataIndex: 'code',
+            width: 80,
             sorter: true,
         },
         {
             title: '行政编号',
             dataIndex: 'adCode',
+            width: 80,
             sorter: true,
         },
         {
             title: '描述',
             dataIndex: 'note',
+            width: 200,
             sorter: false,
         },
         {
             title: '排序',
             dataIndex: 'sort',
+            width: 80,
             sorter: true,
         },
     ]
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -83,20 +96,22 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="sysArea:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysArea:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="sysArea:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="sysArea:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -104,9 +119,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -118,31 +133,33 @@ export default class index extends Component {
      */
     componentDidMount() {
         this.table.current.onLoading()
-        getDictData('dic_areacode_type').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                this.table.current.onLoadData()
-            })
+        getDictData('areacode_type').then(res => {
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    this.table.current.onLoadData()
+                }
+            )
         })
     }
     /**
-    * 调用加载数据接口,可在调用前对query进行处理
-    * [异步,必要]
-    * @param {*} params 
-    * @param {*} query 
-    * @returns 
-    */
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
     loadData = async (params, query) => {
-
         query = {
             ...query,
-            pcode: this.selectCode
+            pcode: this.selectCode,
         }
         //首次加载根据code列升序排序
         if (!params.sortField) {
-            params.sortField = 'code';
-            params.sortOrder = 'ascend';
+            params.sortField = 'code'
+            params.sortOrder = 'ascend'
         }
         const { data } = await apiAction.page({
             ...params,
@@ -164,7 +181,7 @@ export default class index extends Component {
     /**
      * 树节点选中事件
      * [必要]
-     * @param {*} id 
+     * @param {*} id
      */
     onSelectTree(code) {
         this.selectCode = code
@@ -173,15 +190,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => +p.code === code)
+            const c = codes.find(p => +p.code === code)
             if (c) {
                 return c.value
             }
@@ -191,21 +208,21 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record) {
         modal.current.open({
             pcode: this.pcode,
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         this.table.current.onLoading()
@@ -220,13 +237,10 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     render() {
@@ -234,7 +248,7 @@ export default class index extends Component {
             <QueryTreeLayout
                 loadData={this.loadTreeData}
                 defaultExpanded={true}
-                onSelect={(key) => this.onSelectTree(key)}
+                onSelect={key => this.onSelectTree(key)}
                 replaceFields={{ value: 'code', title: 'name', children: 'children' }}
             >
                 <Container mode="fluid">
@@ -259,12 +273,12 @@ export default class index extends Component {
                                     <Button
                                         icon={<AntIcon type="plus" />}
                                         onClick={() => this.onOpen(this.addForm)}
-                                    >新增{name}</Button>
+                                    >
+                                        新增{name}
+                                    </Button>
                                 </Auth>
                             }
-                        >
-
-                        </QueryTable>
+                        ></QueryTable>
                     </Card>
                 </Container>
                 <ModalForm
@@ -287,4 +301,4 @@ export default class index extends Component {
             </QueryTreeLayout>
         )
     }
-}
+}

web-react/src/pages/system/file/index.jsx

@@ -0,0 +1,398 @@
+import React, { Component } from 'react'
+import {
+    Button,
+    Card,
+    Form,
+    Input,
+    message as Message,
+    Popconfirm,
+    Select,
+    Tag,
+    Tooltip,
+    Upload,
+} from 'antd'
+import { AntIcon, Auth, Container, PhotoPreview, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import { ArrayBufferToBase64, GetFileName, PreviewFileArrayBuffer } from 'util/file'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.sysFileInfoPage,
+    delete: api.sysFileInfoDelete,
+}
+
+/**
+ * 用于弹窗标题
+ * [必要]
+ */
+const name = '/**/'
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'sysFileInfo'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            fileStorageLocation: [],
+        },
+
+        uploading: false,
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    photoPreview = React.createRef()
+
+    columns = [
+        {
+            title: '文件名称',
+            dataIndex: 'fileOriginName',
+            width: 300,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '文件后缀',
+            dataIndex: 'fileSuffix',
+            width: 120,
+            sorter: true,
+            render: text => <Tag color="green">{text}</Tag>,
+        },
+        {
+            title: '文件大小',
+            dataIndex: 'fileSizeKb',
+            width: 120,
+            sorter: true,
+            render: text => (
+                <>
+                    {text}
+                    <small>KB</small>
+                </>
+            ),
+        },
+        {
+            title: '存储位置',
+            dataIndex: 'fileLocation',
+            width: 120,
+            sorter: true,
+            render: text => this.bindCodeValue(text, 'file_storage_location'),
+        },
+        {
+            title: '文件仓库',
+            dataIndex: 'fileBucket',
+            width: 200,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '唯一标识id',
+            dataIndex: 'fileObjectName',
+            width: 250,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '上传时间',
+            dataIndex: 'createdTime',
+            width: 200,
+            sorter: true,
+            defaultSortOrder: 'descend',
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ [authName]: 'delete' })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <a onClick={() => this.onFileDownload(record)}>下载</a>
+                        <Auth auth={{ [authName]: 'delete' }}>
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                        {['png', 'jpeg', 'jpg', 'gif', 'tif', 'bmp'].includes(
+                            record.fileSuffix
+                        ) && <a onClick={() => this.onFilePreview(record)}>预览</a>}
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('file_storage_location').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            record,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record
+     */
+    onDelete(record) {
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    //#region 自定义方法
+    async onFileUpload({ file }) {
+        this.setState({ uploading: true })
+        const table = this.table.current
+        table.onLoading()
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            await api.sysFileInfoUpload(fd)
+            table.onReloadData()
+        } catch {
+            table.onLoaded()
+        } finally {
+            this.setState({ uploading: false })
+        }
+    }
+
+    async onFilePreview({ id }) {
+        const key = Math.random().toString(16).slice(2)
+        const hide = Message.loading({
+            key,
+            content: '正在获取文件...',
+            duration: 0,
+        })
+        const file = await PreviewFileArrayBuffer(id)
+        if (file) {
+            const base64 = await ArrayBufferToBase64(file)
+            var img = new Image()
+            img.onload = () => {
+                const items = [
+                    {
+                        src: base64,
+                        w: img.naturalWidth,
+                        h: img.naturalHeight,
+                    },
+                ]
+                this.photoPreview.current.initPhotoSwipe(items)
+
+                hide()
+            }
+            img.onerror = () => {
+                Message.error({
+                    key,
+                    content: '获取文件失败',
+                })
+            }
+            img.src = base64
+        } else {
+            Message.error({
+                key,
+                content: '获取文件失败',
+            })
+        }
+    }
+
+    async onFileDownload({ id }) {
+        const key = Math.random().toString(16).slice(2)
+        const hide = Message.loading({
+            key,
+            content: '正在获取文件...',
+            duration: 0,
+        })
+        try {
+            const { data, headers } = await api.sysFileInfoDownload({ id })
+            const url = window.URL.createObjectURL(data)
+            const fileName = GetFileName(headers['content-disposition'])
+            const a = document.createElement('a')
+            a.href = url
+            a.download = fileName
+            a.click()
+            window.URL.revokeObjectURL(url)
+            a.remove()
+            hide()
+        } catch {
+            Message.error({
+                key,
+                content: '下载文件失败',
+            })
+        }
+    }
+    //#endregion
+
+    render() {
+        const { codes, uploading } = this.state
+
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="文件名" name="fileOriginName">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入文件名"
+                                        className="w-200"
+                                    />
+                                </Form.Item>
+                                <Form.Item label="存储位置" name="fileLocation">
+                                    <Select placeholder="请选择存储位置" className="w-200">
+                                        {codes.fileStorageLocation.map(item => (
+                                            <Select.Option key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Select.Option>
+                                        ))}
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item label="文件仓库" name="fileBucket">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入文件仓库"
+                                        className="w-200"
+                                    />
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth={{ [authName]: 'add' }}>
+                                <Upload customRequest={e => this.onFileUpload(e)} fileList={[]}>
+                                    <Button loading={uploading} icon={<AntIcon type="upload" />}>
+                                        上传文件
+                                    </Button>
+                                </Upload>
+                            </Auth>
+                        }
+                    />
+                </Card>
+
+                <PhotoPreview ref={this.photoPreview} />
+            </Container>
+        )
+    }
+}