update 更多查询条件

web-react/src/assets/style/lib/form.less

@@ -315,6 +315,13 @@
     white-space: normal;
   }
 }
+.ant-form-vertical {
+  .ant-form-item-label {
+    >label {
+      font-weight: bold;
+    }
+  }
+}
 .ant-form-item-required {
   &::before {
     content: '' !important;

web-react/src/common/api/requests/business/houseSafety/houseQuery.js

@@ -0,0 +1,5 @@
+const urls = {
+    houseQueryPage: ['/houseQuery/page', 'post'],
+}
+
+export default urls

web-react/src/common/api/requests/business/houseSafety/index.js

@@ -5,6 +5,7 @@ import houseMember from './houseMember'
 import houseSelector from './houseSelector'
 import houseTask from './houseTask'
 import houseInfo from './houseInfo'
+import houseQuery from './houseQuery'
 
 const urls = {
     ...houseProjectInfo,
@@ -13,7 +14,8 @@ const urls = {
     ...houseMember,
     ...houseSelector,
     ...houseTask,
-    ...houseInfo
+    ...houseInfo,
+    ...houseQuery
 }
 
 export default urls

web-react/src/components/form/input-number-range/index.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { Col, Input, InputNumber, Row } from 'antd'
+import { AntIcon } from 'components'
+
+export default class index extends Component {
+    render() {
+        const { unit, placeholder, value, onChange } = this.props
+
+        console.log(value)
+
+        return (
+            <Input.Group>
+                <Row align="middle">
+                    <Col flex="1">
+                        <InputNumber
+                            {...this.props}
+                            className="w-100-p"
+                            placeholder={placeholder && placeholder[0]}
+                            value={value && value[0]}
+                            onChange={e => {
+                                const result = [e, value && value[1]]
+                                onChange && onChange(result)
+                            }}
+                        />
+                    </Col>
+                    <span className="yo-addon">
+                        <AntIcon className="text-gray" type="swap-right" />
+                    </span>
+                    <Col flex="1">
+                        <InputNumber
+                            {...this.props}
+                            className="w-100-p"
+                            placeholder={placeholder && placeholder[1]}
+                            value={value && value[1]}
+                            onChange={e => {
+                                const result = [value && value[0], e]
+                                onChange && onChange(result)
+                            }}
+                        />
+                    </Col>
+                    {unit && <span className="yo-addon">{unit}</span>}
+                </Row>
+            </Input.Group>
+        )
+    }
+}

web-react/src/components/index.js

@@ -1,12 +1,13 @@
 export { default as AntIcon } from 'components/ant-icon'
 export { default as AuthorityView } from './authority-view'
 export { default as Auth } from './authorized'
-export { default as ColorSelector } from './color-selector'
+export { default as ColorSelector } from './form/color-selector'
 export { default as ComponentDynamic } from './component-dynamic'
 export { default as Container } from './container'
 export { default as IconSelector } from './icon-selector'
 export { default as Image } from './image'
 export { default as ModalForm } from './modal-form'
+export { default as InputNumberRange } from './form/input-number-range'
 export { default as PhotoPreview } from './photo-preview'
 export { default as QueryList } from './query-list'
 export { default as QueryTable } from './query-table'

web-react/src/components/query-list/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
+import { cloneDeep } from 'lodash'
 
 const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']
 
@@ -113,7 +114,7 @@ export default class QueryList extends Component {
                 pageIndex: this.pagination.current,
                 pageSize: this.pagination.pageSize,
             },
-            this.query
+            cloneDeep(this.query)
         )
 
         this.setState(

web-react/src/components/query-table/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Form, Button, Table, Tooltip, Drawer } from 'antd'
 import { AntIcon } from 'components'
-import { isEqual } from 'lodash'
+import { cloneDeep, isEqual } from 'lodash'
 
 const propsMap = ['columns', 'autoLoad', 'loadData', 'pageIndex', 'pageSize']
 
@@ -44,7 +44,8 @@ function renderQueryBar() {
                 onFinish={value => this.onQuery(value)}
                 initialValues={queryInitialValues}
                 onValuesChange={(changedValues, allValues) =>
-                    onQueryChange && onQueryChange(changedValues, allValues)
+                    onQueryChange &&
+                    this.queryForm.current.setFieldsValue(onQueryChange(changedValues, allValues))
                 }
             >
                 {query}
@@ -74,17 +75,28 @@ function renderQueryBar() {
 function renderMoreQueryBody() {
     const { moreQueryVisible } = this.state
 
-    const { moreQuery } = this.props
+    const { moreQuery, onQueryChange, queryInitialValues } = this.props
 
     return (
         <Drawer
-            width="33%"
+            width={700}
             title="查询"
             className="yo-drawer-form"
             visible={moreQueryVisible}
+            forceRender
             onClose={() => this.setState({ moreQueryVisible: false })}
         >
-            <Form ref={this.moreQueryForm}>
+            <Form
+                layout="vertical"
+                ref={this.moreQueryForm}
+                initialValues={queryInitialValues}
+                onValuesChange={(changedValues, allValues) =>
+                    onQueryChange &&
+                    this.moreQueryForm.current.setFieldsValue(
+                        onQueryChange(changedValues, allValues)
+                    )
+                }
+            >
                 <div className="yo-drawer-form--body">{moreQuery}</div>
                 <div className="ant-drawer-footer">
                     <Button.Group>
@@ -216,7 +228,7 @@ export default class QueryTable extends Component {
                 pageSize: this.pagination.pageSize,
                 ...this.sorter,
             },
-            this.query
+            cloneDeep(this.query)
         )
         if (res.rows || res.data || res.items) {
             this.setState({
@@ -291,7 +303,9 @@ export default class QueryTable extends Component {
             ...queryInitialValues,
             ...queryValues,
         }
-        onQueryChange && onQueryChange(this.query)
+
+        const changedValues = cloneDeep(this.query)
+        onQueryChange && onQueryChange(changedValues, changedValues)
         this.onReloadData(true)
     }
 

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

@@ -1,11 +1,24 @@
 import React, { Component } from 'react'
-import { Button, Card, Form, Input, message as Message, Popconfirm, Radio, Select, Tag } from 'antd'
-import { AntIcon, Auth, Container, QueryTable } from 'components'
+import {
+    Button,
+    Card,
+    Checkbox,
+    Col,
+    DatePicker,
+    Form,
+    Input,
+    InputNumber,
+    message as Message,
+    Row,
+    Tag,
+} from 'antd'
+import { AntIcon, Auth, Container, InputNumberRange, QueryTable } from 'components'
 import { api } from 'common/api'
 import auth from 'components/authorized/handler'
-import { isEqual } from 'lodash'
+import { first, isEqual, last } from 'lodash'
 import getDictData from 'util/dic'
 import { toCamelCase } from 'util/format'
+import { getSearchDateRange, getSearchInfo, QueryType } from 'util/query'
 
 /**
  * 注释段[\/**\/]为必须要改
@@ -15,7 +28,7 @@ import { toCamelCase } from 'util/format'
  * 配置页面所需接口函数
  */
 const apiAction = {
-    page: api.houseTaskPage,
+    page: api.houseQueryPage,
 }
 
 /**
@@ -28,16 +41,21 @@ const name = '/**/'
  * 统一配置权限标识
  * [必要]
  */
-const authName = 'houseTask'
+const authName = 'houseQuery'
 
 export default class index extends Component {
     state = {
         codes: {
-            houseType: [],
-            houseIndustry: [],
+            houseUsedStatus: [],
+            housePropertyRights: [],
+            landAttribute: [],
+            houseBaseInfo: [],
+            houseStructureType: [],
+            houseStorageOfDrawings: [],
+            houseGrade: [],
         },
 
-        type: '',
+        showDrawingMaterialText: false,
     }
 
     // 表格实例
@@ -113,7 +131,15 @@ export default class index extends Component {
     componentDidMount() {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
-        getDictData('house_type', 'house_industry').then(codes => {
+        getDictData(
+            'house_used_status',
+            'house_property_rights',
+            'land_attribute',
+            'house_base_info',
+            'house_structure_type',
+            'house_storage_of_drawings',
+            'house_grade'
+        ).then(codes => {
             this.setState({ codes }, () => {
                 onLoadData()
             })
@@ -128,9 +154,23 @@ export default class index extends Component {
      * @returns
      */
     loadData = async (params, query) => {
+        query.completedDate = getSearchDateRange(query.completedDate)
+        query.createdTime = getSearchDateRange(query.createdTime)
+
+        const searchInfo = getSearchInfo({
+            query,
+            queryType: {
+                areaCode: QueryType.Like,
+                completedDate: [QueryType.GreaterThanOrEqual, QueryType.LessThan],
+                createdTime: [QueryType.GreaterThanOrEqual, QueryType.LessThan],
+                totalArea: [QueryType.GreaterThanOrEqual, QueryType.LessThanOrEqual],
+                totalFloor: [QueryType.GreaterThanOrEqual, QueryType.LessThanOrEqual],
+            },
+        })
+
         const { data } = await apiAction.page({
             ...params,
-            ...query,
+            searchInfo,
         })
         return data
     }
@@ -193,6 +233,251 @@ export default class index extends Component {
     }
 
     //#region 自定义方法
+    rednerMoreQuery() {
+        const { codes, showDrawingMaterialText } = this.state
+
+        return (
+            <Row gutter={16}>
+                <Col span={24}>
+                    <Form.Item label="使用状态" name="houseUsedStatus">
+                        <Checkbox.Group>
+                            {codes.houseUsedStatus.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="有无幕墙" name="curtainWall">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            <Checkbox value={0}>无</Checkbox>
+                            <Checkbox value={1}>有</Checkbox>
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="有无面砖" name="faceBrick">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            <Checkbox value={0}>无</Checkbox>
+                            <Checkbox value={1}>有</Checkbox>
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="有无涂料" name="coating">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            <Checkbox value={0}>无</Checkbox>
+                            <Checkbox value={1}>有</Checkbox>
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="有无粉刷" name="painting">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            <Checkbox value={0}>无</Checkbox>
+                            <Checkbox value={1}>有</Checkbox>
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="安全管理员">
+                        <Input autoComplete="off" placeholder="请输入安全管理员" />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="片区监管员">
+                        <Input autoComplete="off" placeholder="请输入片区监管员" />
+                    </Form.Item>
+                </Col>
+                <Col span={24}>
+                    <Form.Item label="产权性质" name="propertyRights">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            {codes.housePropertyRights.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="土地性质" name="landAttribute">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            {codes.landAttribute.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="基础情况" name="baseInfo">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            {codes.houseBaseInfo.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={24}>
+                    <Form.Item label="结构类型" name="structureType">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            {codes.houseStructureType.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+                <Col span={24}>
+                    <Form.Item label="图纸资料存档处" name="drawingMaterial">
+                        <Form.Item name="drawingMaterial" className="mb-none">
+                            <Checkbox.Group>
+                                {codes.houseStorageOfDrawings.map(item => (
+                                    <Checkbox key={item.code} value={item.code}>
+                                        {item.value}
+                                    </Checkbox>
+                                ))}
+                            </Checkbox.Group>
+                        </Form.Item>
+                        {showDrawingMaterialText && (
+                            <Form.Item name="drawingMaterialText" className="mb-none mt-xs">
+                                <Input.TextArea autoSize placeholder="请输入其他图纸资料存档处" />
+                            </Form.Item>
+                        )}
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="竣工日期" name="completedDate">
+                        <DatePicker.RangePicker
+                            className="w-100-p"
+                            placeholder={['请选择竣工开始日期', '请选择竣工结束日期']}
+                        />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="填表日期" name="createdTime">
+                        <DatePicker.RangePicker
+                            className="w-100-p"
+                            placeholder={['请选择填表开始日期', '请选择填表结束日期']}
+                        />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="总建筑面积" name="totalArea">
+                        <InputNumberRange
+                            min={0}
+                            unit="m²"
+                            placeholder={['请输入最小总建筑面积', '请输入最大总建筑面积']}
+                        />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="总层数" name="totalFloor">
+                        <InputNumberRange
+                            min={0}
+                            precision={0}
+                            step={1}
+                            unit="层"
+                            placeholder={['请输入最小总层数', '请输入最大总层数']}
+                        />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="建设单位" name="buildingUnit">
+                        <Input autoComplete="off" placeholder="请输入建设单位" />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="设计单位" name="desingerUnit">
+                        <Input autoComplete="off" placeholder="请输入设计单位" />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="施工单位" name="constructionUnit">
+                        <Input autoComplete="off" placeholder="请输入施工单位" />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="监理单位" name="monitorUnit">
+                        <Input autoComplete="off" placeholder="请输入监理单位" />
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item label="产权单位" name="propertyUnit">
+                        <Input autoComplete="off" placeholder="请输入产权单位" />
+                    </Form.Item>
+                </Col>
+                <Col span={24}>
+                    <Form.Item label="综合等级" name="houseGrade">
+                        <Checkbox.Group>
+                            <Checkbox value="">全部</Checkbox>
+                            {codes.houseGrade.map(item => (
+                                <Checkbox key={item.code} value={+item.code}>
+                                    {item.value}
+                                </Checkbox>
+                            ))}
+                        </Checkbox.Group>
+                    </Form.Item>
+                </Col>
+            </Row>
+        )
+    }
+
+    onQueryChange(changedValues, allValues) {
+        console.log(changedValues)
+        if (changedValues.hasOwnProperty('drawingMaterial') && changedValues.drawingMaterial) {
+            this.setState({
+                showDrawingMaterialText: changedValues.drawingMaterial.includes('100'),
+            })
+            return
+        }
+
+        // 全部
+        const { codes } = this.state
+        const key = first(Object.keys(changedValues))
+        const mapCount = {
+            curtainWall: 2,
+            faceBrick: 2,
+            coating: 2,
+            painting: 2,
+            propertyRights: codes.housePropertyRights.length,
+            landAttribute: codes.landAttribute.length,
+            baseInfo: codes.houseBaseInfo.length,
+            structureType: codes.houseStructureType.length,
+            houseGrade: codes.houseGrade.length,
+        }
+        if (Object.keys(mapCount).includes(key)) {
+            return {
+                [key]: this.checkedNone(changedValues[key], mapCount[key]),
+            }
+        }
+    }
+
+    checkedNone(value, count) {
+        if (first(value) == '' && value.length > 1) {
+            // 在'无'之后选中其他值
+            value.shift()
+        } else if ((last(value) == '' && value.length > 1) || value.length === count) {
+            // 在其他值之后选中'无'
+            value = ['']
+        }
+        return value
+    }
     //#endregion
 
     render() {
@@ -207,33 +492,20 @@ export default class index extends Component {
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
+                        queryInitialValues={{
+                            houseUsedStatus: [1, 2],
+                            curtainWall: [''],
+                            faceBrick: [''],
+                            coating: [''],
+                            painting: [''],
+                            propertyRights: [''],
+                            landAttribute: [''],
+                            baseInfo: [''],
+                            structureType: [''],
+                            houseGrade: [''],
+                        }}
                         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>
@@ -243,11 +515,10 @@ export default class index extends Component {
                             </Auth>
                         }
                         moreQuery={
-                            <Auth auth={{ [authName]: 'page' }}>
-                                <Form.Item label="地址" name="addresstest">
-                                    <Input autoComplete="off" placeholder="请输入地址" />
-                                </Form.Item>
-                            </Auth>
+                            <Auth auth={{ [authName]: 'page' }}>{this.rednerMoreQuery()}</Auth>
+                        }
+                        onQueryChange={(changedValues, allValues) =>
+                            this.onQueryChange(changedValues, allValues)
                         }
                         operator={
                             <Auth auth={{ [authName]: 'add' }}>

web-react/src/util/global/index.js

@@ -38,4 +38,7 @@ export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQU
  */
 export const CITY = '黄石市'
 
+/**
+ * 响应式响应宽度
+ */
 export const SIDER_BREAK_POINT = 1366

web-react/src/util/query/index.js

@@ -1,3 +1,41 @@
+import moment from 'moment'
+
+/**
+ * 从键值对的query类型转换成数组类型
+ * 键:自动作为field值
+ * 值:得到一个数组作为value的值
+ * queryType:一个json类型,已query的键为键,QueryType为值. 如果是一个QueryType的数组,则自动对应到value中的各个值
+ * 示例:
+ *  
+    getSearchInfo({
+        query: {
+            value: '123',
+            text: '123',
+            code: 'abc',
+            check: ['1', '2', '3'],
+            range: [1, 10]
+        },
+        queryType: {
+            text: QueryType.Equal,
+            code: QueryType.Like,
+            check: QueryType.Equal,
+            range: [QueryType.GreaterThanOrEqual, QueryType.LessThan]
+        }
+    })
+
+    =>
+
+    [
+        { field: 'value', value: ['123'] },
+        { field: 'text', value: ['123'], type: '=' },
+        { field: 'code', value: ['abc'], type: 'like' },
+        { field: 'check', value: ['1', '2', '3'], type: '=' },
+        { field: 'range', value: [1], type: '>=' },
+        { field: 'range', value: [10], type: '<' }
+    ]
+ * @param {*} param0 
+ * @returns [{ field: '', value: [], type: '' } ...]
+ */
 export const getSearchInfo = ({ query, queryType }) => {
     const searchInfo = []
     Object.keys(query).forEach((p) => {
@@ -38,4 +76,32 @@ export const getSearchInfo = ({ query, queryType }) => {
     })
 
     return searchInfo
+}
+
+/**
+ * 获取查询用时间范围数组
+ * 在这里会自动将第二个时间增加1天
+ * 如果选择的日期范围为2021-01-01~2021-01-10,最终需要取得 >=2021-01-01 and <2021-01-11 的结果
+ * @param {*} range 时间范围数组
+ * @param {*} format 格式化
+ * @returns 
+ */
+export const getSearchDateRange = (range, format = 'YYYY-MM-DD', unit = 'days') => {
+    if (Array.isArray(range) && range.length === 2) {
+        range[1] = moment(range[1]).add(1, unit)
+        range = range.map(p => moment(p).format(format))
+    }
+    return range
+}
+
+/**
+ * 查询条件类型
+ */
+export const QueryType = {
+    GreaterThan: '>',
+    GreaterThanOrEqual: '>=',
+    LessThan: '<',
+    LessThanOrEqual: '<=',
+    Like: 'LIKE',
+    Equal: '='
 }