From 2b0e9d28b30d9976eae91ea2670f1e0675d0dd72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?= <188633308@qq.com> Date: Tue, 29 Jun 2021 15:45:19 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=A1=A8=E6=A0=BC=E6=9F=A5=E8=AF=A2?= =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=9B=B4=E5=A4=9A=E6=9F=A5=E8=AF=A2=E6=9D=A1?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/query-table/index.jsx | 95 ++++++- .../src/pages/business/house/query/index.jsx | 267 ++++++++++++++++++ 2 files changed, 348 insertions(+), 14 deletions(-) create mode 100644 web-react/src/pages/business/house/query/index.jsx diff --git a/web-react/src/components/query-table/index.jsx b/web-react/src/components/query-table/index.jsx index 750906b..db24757 100644 --- a/web-react/src/components/query-table/index.jsx +++ b/web-react/src/components/query-table/index.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Form, Button, Table, Tooltip } from 'antd' +import { Form, Button, Table, Tooltip, Drawer } from 'antd' import { AntIcon } from 'components' import { isEqual } from 'lodash' @@ -34,15 +34,15 @@ const rowNoColumn = { * @returns */ function renderQueryBar() { - const { query, moreQuery, onQueryChange } = this.props + const { query, moreQuery, onQueryChange, queryInitialValues } = this.props return (
this.onQuery(value)} - initialValues={this.props.queryInitialValues} + initialValues={queryInitialValues} onValuesChange={(changedValues, allValues) => onQueryChange && onQueryChange(changedValues, allValues) } @@ -55,18 +55,62 @@ function renderQueryBar() { } + {moreQuery && ( + + )}
) } +function renderMoreQueryBody() { + const { moreQueryVisible } = this.state + + const { moreQuery } = this.props + + return ( + this.setState({ moreQueryVisible: false })} + > +
+
{moreQuery}
+
+ + + +
+
+ + ) +} + function renderTable(props, on) { return } @@ -79,10 +123,14 @@ export default class QueryTable extends Component { type: 'tree', // 数据 dataSource: [], + + moreQueryVisible: false, } // 查询表单实例 - form = React.createRef() + queryForm = React.createRef() + // 更多查询表单实例 + moreQueryForm = React.createRef() // 查询值 query = {} @@ -213,7 +261,13 @@ export default class QueryTable extends Component { * @param {*} values */ onQuery = values => { - this.query = values + const { queryInitialValues } = this.props + + this.query = { + ...queryInitialValues, + ...this.query, + ...values, + } this.onReloadData(true) } @@ -221,15 +275,23 @@ export default class QueryTable extends Component { * 重置查询 * 初始化表单字段值,加载数据,并返回到第一页 */ - onResetQuery = () => { - const { queryInitialValues, onQueryChange } = this.props + onResetQuery = from => { + const { queryInitialValues, onQueryChange, query, moreQuery } = this.props + + let queryValues = {} + if (from === this.queryForm) { + from.current.resetFields() + queryValues = moreQuery ? this.moreQueryForm.current.getFieldsValue() : {} + } else if (from === this.moreQueryForm) { + from.current.resetFields() + queryValues = query ? this.queryForm.current.getFieldsValue() : {} + } - this.form.current.resetFields() this.query = { ...queryInitialValues, + ...queryValues, } - const values = this.form.current.getFieldsValue() - onQueryChange && onQueryChange(values, values) + onQueryChange && onQueryChange(this.query) this.onReloadData(true) } @@ -277,12 +339,16 @@ export default class QueryTable extends Component { return false } + onOpenMoreQuery = () => { + this.setState({ moreQueryVisible: true }) + } + render() { const { rowNumber } = this const { loading, dataSource, type } = this.state - const { query, operator, columns, expandable, expandedRowRender } = this.props + const { query, moreQuery, operator, columns, expandable, expandedRowRender } = this.props const attrs = {} Object.keys(this.props).forEach(key => { @@ -337,6 +403,7 @@ export default class QueryTable extends Component { ) : ( renderTable.call(this, props, on) )} + {moreQuery && renderMoreQueryBody.call(this)} ) } diff --git a/web-react/src/pages/business/house/query/index.jsx b/web-react/src/pages/business/house/query/index.jsx new file mode 100644 index 0000000..95653c2 --- /dev/null +++ b/web-react/src/pages/business/house/query/index.jsx @@ -0,0 +1,267 @@ +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 { 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 name = '/**/' + +/** + * 统一配置权限标识 + * [必要] + */ +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')}`} +
+ {text} + + ), + }, + { + 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({ [authName]: [['edit'], ['delete']] }) + } + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @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 {*} id + */ + onOpen(modal, id) { + modal.current.open({ id }) + } + + /** + * 对表格上的操作进行统一处理 + * [异步] + * @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 {*} id + */ + onDelete(id) { + this.onAction(apiAction.delete({ id }), '删除成功') + } + + //#region 自定义方法 + //#endregion + + render() { + const { codes, type } = this.state + + return ( + +
+ + + + + 全部 + {codes.houseType.map(item => ( + + {item.value} + + ))} + + + {type == 2 && ( + + + + )} + + + + + + + + } + moreQuery={ + + + + + + } + operator={ + + + + } + /> + + + ) + } +}