diff --git a/web-react/src/components/query-table/index.jsx b/web-react/src/components/query-table/index.jsx index ac4f06b..31e9b69 100644 --- a/web-react/src/components/query-table/index.jsx +++ b/web-react/src/components/query-table/index.jsx @@ -21,7 +21,7 @@ const clearChildren = (data) => { */ function renderQueryBar() { - const { query, moreQuery } = this.props + const { query, moreQuery, onQueryChange } = this.props return (
@@ -30,6 +30,7 @@ function renderQueryBar() { ref={this.form} onFinish={(value) => this.onQuery(value)} initialValues={this.props.queryInitialValues} + onValuesChange={(changedValues, allValues) => onQueryChange && onQueryChange(changedValues, allValues)} > {query} @@ -181,10 +182,15 @@ export default class QueryTable extends Component { * 初始化表单字段值,加载数据,并返回到第一页 */ onResetQuery = () => { + + const { queryInitialValues, onQueryChange } = this.props + this.form.current.resetFields() this.query = { - ...this.props.queryInitialValues + ...queryInitialValues } + const values = this.form.current.getFieldsValue() + onQueryChange && onQueryChange(values, values) this.onReloadData(true) } diff --git a/web-react/src/pages/business/house/code/form/index.jsx b/web-react/src/pages/business/house/code/form/index.jsx new file mode 100644 index 0000000..6814566 --- /dev/null +++ b/web-react/src/pages/business/house/code/form/index.jsx @@ -0,0 +1,50 @@ +import React, { Component } from 'react' +import { Button, Card } from 'antd' +import { ComponentDynamic, Container } from 'components' +import { isEqual } from 'lodash' + +const parts = [{ + component: () => import('./part') +}] + +export default class index extends Component { + + + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + render() { + + const { id, param } = this.props + + return ( +
+ +
+ + { + parts.map((item, i) => ( +
+ {item.title &&
{parts.title}
} + +
+ )) + } +
+
+
+ +
+ + + + + +
+
+
+
+ ) + } +} diff --git a/web-react/src/pages/business/house/code/form/part.jsx b/web-react/src/pages/business/house/code/form/part.jsx new file mode 100644 index 0000000..dd76dec --- /dev/null +++ b/web-react/src/pages/business/house/code/form/part.jsx @@ -0,0 +1,123 @@ +import React, { Component } from 'react' +import { Form, Input, InputNumber, Radio, Spin } from 'antd' +import { AntIcon, IconSelector } from 'components' +import { cloneDeep } from 'lodash' +import getDictData from 'util/dic' + +const initialValues = {} + +const labelCol = { flex: '150px' } +const wrapperCol = { flex: '1' } + +export default class form extends Component { + + state = { + // 加载状态 + loading: true, + codes: { + dicHouseType: [], + dicHouseIndustry: [] + } + } + + // 表单实例 + form = React.createRef() + + iconSelector = React.createRef() + + // 初始化数据 + record = {} + + /** + * mount后回调 + */ + componentDidMount() { + this.fillData(this.props.param) + } + + /** + * 填充数据 + * 可以在设置this.record之后对其作出数据结构调整 + * [异步,必要] + * @param {*} params + */ + async fillData(params) { + + this.record = cloneDeep(params.record) + //#region 从后端转换成前段所需格式 + const codes = await getDictData('dic_house_type', 'dic_house_industry') + this.setState({ + codes + }) + //#endregion + this.form.current.setFieldsValue(this.record) + + this.setState({ + loading: false + }) + } + + /** + * 获取数据 + * 可以对postData进行数据结构调整 + * [异步,必要] + * @returns + */ + async getData() { + const form = this.form.current + + const valid = await form.validateFields() + if (valid) { + const postData = form.getFieldsValue() + if (this.record) { + postData.id = this.record.id + } + //#region 从前段转换后端所需格式 + //#endregion + return postData + } + } + + //#region 自定义方法 + //#endregion + + render() { + + const { loading, codes } = this.state + + return ( +
+ }> + + + {codes.dicHouseType.map(item => ( + {item.value} + ))} + + + + + {codes.dicHouseIndustry.map(item => ( + {item.value} + ))} + + + + this.form.current.setFieldsValue({ + icon + })} /> + + ) + } +} diff --git a/web-react/src/pages/business/house/code/index.jsx b/web-react/src/pages/business/house/code/index.jsx new file mode 100644 index 0000000..9582ffa --- /dev/null +++ b/web-react/src/pages/business/house/code/index.jsx @@ -0,0 +1,334 @@ +import React, { Component } from 'react' +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' +import getDictData from 'util/dic' +import auth from 'components/authorized/handler' +import { toCamelCase } from 'util/format' +import { getSearchInfo } from 'util/query' + +// 配置页面所需接口函数 +const apiAction = { + page: api.houseCodePage +} + +// 用于弹窗标题 +const name = '房屋编码' + +export default class index extends Component { + + state = { + codes: { + dicHouseType: [], + dicHouseIndustry: [] + }, + + options: { + areaTree: [] + }, + + type: '' + } + + // 表格实例 + table = 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')}` + }, + { + 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')})` : '') + }, + { + title: '地址', + dataIndex: 'address', + sorter: true, + }, + { + title: '登记时间', + dataIndex: 'createdTime', + sorter: true, + width: 150, + }, + ] + + /** + * 构造函数,在渲染前动态添加操作字段等 + * @param {*} props + */ + constructor(props) { + super(props) + + const flag = auth({ houseCode: [['edit'], ['delete']] }) + + if (flag) { + this.columns.push({ + title: '操作', + width: 150, + dataIndex: 'actions', + render: (text, record) => ( + + this.onOpen(record)}>编辑 + + + this.onDelete(record)} + > + 删除 + + + ) + }) + } + } + + /** + * 阻止外部组件引发的渲染,提升性能 + * 可自行添加渲染条件 + * [必要] + * @param {*} props + * @param {*} state + * @returns + */ + shouldComponentUpdate(props, state) { + return !isEqual(this.state, state) + } + + /** + * 加载字典数据,之后开始加载表格数据 + * 如果必须要加载字典数据,可直接对表格设置autoLoad=true + */ + componentDidMount() { + const { onLoading, onLoadData } = this.table.current + onLoading() + getDictData('dic_house_type', 'dic_house_industry').then(async (res) => { + const { data } = await api.getAreaTree() + this.setState({ + codes: res, + options: { + areaTree: data + } + }, () => { + onLoadData() + }) + }) + } + + /** + * 调用加载数据接口,可在调用前对query进行处理 + * [异步,必要] + * @param {*} params + * @param {*} query + * @returns + */ + loadData = async (params, query) => { + + if (query.areaCode) { + query.areaCode = query.areaCode.pop() + } + + const searchInfo = getSearchInfo({ + query, + queryType: { + no: '=', + type: '=', + address: 'like', + houseCode: 'like' + } + }) + + const { data } = await apiAction.page({ + ...params, + searchInfo, + }) + 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(record) { + const path = 'business/house/code/form' + window.openContentWindow({ + key: record ? record.id : path, + title: record ? '修改房屋编码' : '新增房屋编码', + subTitle: + record && + `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${record.no.toString().padStart(3, '0')}`, + path, + param: { + 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 自定义方法 + //#endregion + + render() { + + const { options, codes, type } = this.state + + return ( + +
+ + { + if (values.hasOwnProperty('type')) { + this.setState({ type: values.type }) + } + }} + query={ + + + labels.join(' - ')} + fieldNames={{ + label: 'name', + value: 'code', + children: 'children' + }} + options={options.areaTree} + className="w-400" + expandTrigger="hover" + placeholder="请选择所在区域" + /> + + + value && value.padStart(3, '0')} + max={999} + min={1} + precision={0} + step={1} + placeholder="请输入房屋序号" + /> + + + + 全部 + { + codes.dicHouseType.map(item => ( + {item.value} + )) + } + + + { + type == 2 && + + + + } + + + + + + + + } + operator={ + + + + } + /> + + {this.props.supportInfo} +
+ ) + } +} diff --git a/web-react/src/views/main/_layout/content/index.jsx b/web-react/src/views/main/_layout/content/index.jsx index ef52e9e..2ebe6f2 100644 --- a/web-react/src/views/main/_layout/content/index.jsx +++ b/web-react/src/views/main/_layout/content/index.jsx @@ -59,7 +59,7 @@ class ComponentDynamic extends Component { supportInfo={ - 技术支持: 宽易科技 + Ewide Core ©2021 v1.0 }