add 人员管理和选房(缺编辑)

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

@@ -2,12 +2,13 @@ import React, { Component } from 'react'
 import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
-/**
+const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']
-    * 渲染查询栏
-    * @returns 
-    */
-function renderQueryBar() {
 
+/**
+ * 渲染查询栏
+ * @returns
+ */
+function renderQueryBar() {
     const { query, moreQuery } = this.props
 
     return (
@@ -15,20 +16,23 @@ function renderQueryBar() {
             <Form
                 layout="inline"
                 ref={this.form}
-                onFinish={(value) => this.onQuery(value)}
+                onFinish={value => this.onQuery(value)}
                 initialValues={this.props.queryInitialValues}
             >
                 {query}
                 <Form.Item>
                     <Button.Group className="mr-xs">
-                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>
+                            查询
+                        </Button>
                         <Tooltip placement="bottom" title="重置查询">
-                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            <Button
+                                onClick={() => this.onResetQuery()}
+                                icon={<AntIcon type="undo" />}
+                            />
                         </Tooltip>
                     </Button.Group>
-                    {
+                    {moreQuery && <Button>更多查询条件</Button>}
-                        moreQuery && <Button>更多查询条件</Button>
-                    }
                 </Form.Item>
             </Form>
         </div>
@@ -36,10 +40,9 @@ function renderQueryBar() {
 }
 
 export default class QueryList extends Component {
-
     state = {
         loading: false,
-        dataSource: []
+        dataSource: [],
     }
 
     // 查询表单实例
@@ -56,7 +59,7 @@ export default class QueryList extends Component {
         size: 'small',
         showSizeChanger: true,
         showQuickJumper: true,
-        showTotal: (total) => `总共${total}条数据`
+        showTotal: total => `总共${total}条数据`,
     }
 
     // 默认选中页码
@@ -68,7 +71,8 @@ export default class QueryList extends Component {
         super(props)
 
         this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}
 
         if (this.props.pageIndex) {
             this.pageIndex = this.props.pageIndex
@@ -96,13 +100,16 @@ export default class QueryList extends Component {
     onLoadData = async () => {
         this.onLoading()
 
-        const res = await this.props.loadData({
+        const res = await this.loadData(
-            pageIndex: this.pagination.current,
+            {
-            pageSize: this.pagination.pageSize
+                pageIndex: this.pagination.current,
-        }, this.query)
+                pageSize: this.pagination.pageSize,
+            },
+            this.query
+        )
 
         this.setState({
-            dataSource: res.rows || res.data || res.items
+            dataSource: res.rows || res.data || res.items,
         })
 
         this.pagination.total = res.totalCount
@@ -127,9 +134,9 @@ export default class QueryList extends Component {
     /**
      * 进行查询
      * 返回表单字段值,加载数据,并且返回到第一页
-     * @param {*} values 
+     * @param {*} values
      */
-    onQuery = (values) => {
+    onQuery = values => {
         this.query = values
         this.onReloadData(true)
     }
@@ -152,7 +159,7 @@ export default class QueryList extends Component {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
-                current: this.pageIndex
+                current: this.pageIndex,
             }
         }
         this.onLoadData()
@@ -162,30 +169,38 @@ export default class QueryList extends Component {
         this.pagination = {
             ...this.pagination,
             current,
-            pageSize
+            pageSize,
         }
         this.onLoadData()
     }
 
     render() {
+        const attrs = {}
+        Object.keys(this.props).forEach(key => {
+            if (!propsMap.includes(key)) {
+                attrs[key] = this.props[key]
+            }
+        })
 
         const props = {
             dataSource: this.state.dataSource,
             rowKey: record => record.id || Math.random().toString(16).slice(2),
-            ...this.props
+            ...attrs,
         }
 
         return (
             <section>
                 {this.props.query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
-                    <div className="yo-action-bar--actions">
+                    <div className="yo-action-bar--actions">{this.props.operator}</div>
-                        {this.props.operator}
-                    </div>
                     <div className="yo-action-bar--actions">
                         <Button.Group>
                             <Tooltip placement="bottom" title="刷新">
-                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                                <Button
+                                    onClick={() => this.onReloadData()}
+                                    type="text"
+                                    icon={<AntIcon type="reload" />}
+                                />
                             </Tooltip>
                         </Button.Group>
                     </div>
@@ -193,14 +208,15 @@ export default class QueryList extends Component {
                 <div className="yo-list">
                     <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                         <List {...props} />
-                        {
+                        {!!this.state.dataSource && !!this.state.dataSource.length && (
-                            !!this.state.dataSource && !!this.state.dataSource.length &&
                             <Pagination
                                 size="small"
                                 {...this.pagination}
-                                onChange={(current, pageSize) => this.onListChange(current, pageSize)}
+                                onChange={(current, pageSize) =>
+                                    this.onListChange(current, pageSize)
+                                }
                             />
-                        }
+                        )}
                     </Spin>
                 </div>
             </section>

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

@@ -2,7 +2,9 @@ import React, { Component } from 'react'
 import { Form, Button, Table, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
-const clearChildren = (data) => {
+const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']
+
+const clearChildren = data => {
     data.forEach(p => {
         if (p.children) {
             if (p.children.length) {
@@ -16,11 +18,10 @@ const clearChildren = (data) => {
 }
 
 /**
-     * 渲染查询栏
+ * 渲染查询栏
-     * @returns 
+ * @returns
-     */
+ */
 function renderQueryBar() {
-
     const { query, moreQuery, onQueryChange } = this.props
 
     return (
@@ -28,21 +29,26 @@ function renderQueryBar() {
             <Form
                 layout="inline"
                 ref={this.form}
-                onFinish={(value) => this.onQuery(value)}
+                onFinish={value => this.onQuery(value)}
                 initialValues={this.props.queryInitialValues}
-                onValuesChange={(changedValues, allValues) => onQueryChange && onQueryChange(changedValues, allValues)}
+                onValuesChange={(changedValues, allValues) =>
+                    onQueryChange && onQueryChange(changedValues, allValues)
+                }
             >
                 {query}
                 <Form.Item>
                     <Button.Group className="mr-xs">
-                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
+                        <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>
+                            查询
+                        </Button>
                         <Tooltip placement="bottom" title="重置查询">
-                            <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            <Button
+                                onClick={() => this.onResetQuery()}
+                                icon={<AntIcon type="undo" />}
+                            />
                         </Tooltip>
                     </Button.Group>
-                    {
+                    {moreQuery && <Button>更多查询条件</Button>}
-                        moreQuery && <Button>更多查询条件</Button>
-                    }
                 </Form.Item>
             </Form>
         </div>
@@ -54,14 +60,13 @@ function renderTable(props, on) {
 }
 
 export default class QueryTable extends Component {
-
     state = {
         // 加载状态
         loading: false,
         // 表格类型
         type: '',
         // 数据
-        dataSource: []
+        dataSource: [],
     }
 
     // 查询表单实例
@@ -78,8 +83,8 @@ export default class QueryTable extends Component {
         size: 'small',
         showSizeChanger: true,
         showQuickJumper: true,
-        showTotal: (total) => `总共${total}条数据`,
+        showTotal: total => `总共${total}条数据`,
-        position: ['bottomLeft']
+        position: ['bottomLeft'],
     }
 
     // 默认选中页码
@@ -97,7 +102,8 @@ export default class QueryTable extends Component {
         super(props)
 
         this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}
 
         if (this.props.pageIndex) {
             this.pageIndex = this.props.pageIndex
@@ -125,22 +131,25 @@ export default class QueryTable extends Component {
     onLoadData = async () => {
         this.onLoading()
 
-        const res = await this.loadData({
+        const res = await this.loadData(
-            pageIndex: this.pagination.current,
+            {
-            pageSize: this.pagination.pageSize,
+                pageIndex: this.pagination.current,
-            ...this.sorter
+                pageSize: this.pagination.pageSize,
-        }, this.query)
+                ...this.sorter,
+            },
+            this.query
+        )
         if (res.rows || res.data || res.items) {
             this.setState({
                 type: 'table',
-                dataSource: res.rows || res.data || res.items
+                dataSource: res.rows || res.data || res.items,
             })
 
             this.pagination.total = res.totalCount
         } else if (res) {
             this.setState({
                 type: 'tree',
-                dataSource: clearChildren(res)
+                dataSource: clearChildren(res),
             })
 
             this.pagination = false
@@ -155,8 +164,8 @@ export default class QueryTable extends Component {
     onLoading = () => {
         this.setState({
             loading: {
-                indicator: <AntIcon type="loading" />
+                indicator: <AntIcon type="loading" />,
-            }
+            },
         })
     }
 
@@ -170,9 +179,9 @@ export default class QueryTable extends Component {
     /**
      * 进行查询
      * 返回表单字段值,加载数据,并且返回到第一页
-     * @param {*} values 
+     * @param {*} values
      */
-    onQuery = (values) => {
+    onQuery = values => {
         this.query = values
         this.onReloadData(true)
     }
@@ -182,12 +191,11 @@ export default class QueryTable extends Component {
      * 初始化表单字段值,加载数据,并返回到第一页
      */
     onResetQuery = () => {
-
         const { queryInitialValues, onQueryChange } = this.props
 
         this.form.current.resetFields()
         this.query = {
-            ...queryInitialValues
+            ...queryInitialValues,
         }
         const values = this.form.current.getFieldsValue()
         onQueryChange && onQueryChange(values, values)
@@ -202,7 +210,7 @@ export default class QueryTable extends Component {
         if (resetPage) {
             this.pagination = {
                 ...this.pagination,
-                current: this.pageIndex
+                current: this.pageIndex,
             }
         }
         this.onLoadData()
@@ -210,14 +218,14 @@ export default class QueryTable extends Component {
 
     /**
      * 表格分页/筛选/排序
-     * @param {*} pagination 
+     * @param {*} pagination
-     * @param {*} filters 
+     * @param {*} filters
-     * @param {*} sorter 
+     * @param {*} sorter
      */
     onTableChange = (pagination, filters, sorter) => {
         this.pagination = {
             ...pagination,
-            showTotal: (total) => `总共${total}条数据`
+            showTotal: total => `总共${total}条数据`,
         }
         this.sorter = {
             sortField: sorter.field,
@@ -231,7 +239,7 @@ export default class QueryTable extends Component {
         if (!dataSource.find(item => !item.id)) {
             dataSource = [...dataSource, record]
             this.setState({
-                dataSource
+                dataSource,
             })
             return dataSource.length - 1
         }
@@ -239,11 +247,17 @@ export default class QueryTable extends Component {
     }
 
     render() {
-
         const { loading, dataSource } = this.state
 
         const { query, operator, columns } = this.props
 
+        const attrs = {}
+        Object.keys(this.props).forEach(key => {
+            if (!propsMap.includes(key)) {
+                attrs[key] = this.props[key]
+            }
+        })
+
         const props = {
             loading,
             pagination: this.pagination,
@@ -253,36 +267,35 @@ export default class QueryTable extends Component {
             size: 'middle',
             rowKey: record => record.id || Math.random().toString(16).slice(2),
             sticky: true,
-            ...this.props
+            ...attrs,
         }
 
         const on = {
-            onChange: (...args) => this.onTableChange.apply(this, args)
+            onChange: (...args) => this.onTableChange.apply(this, args),
         }
 
         return (
             <section>
                 {query && renderQueryBar.call(this)}
                 <div className="yo-action-bar">
-                    <div className="yo-action-bar--actions">
+                    <div className="yo-action-bar--actions">{operator}</div>
-                        {operator}
-                    </div>
                     <div className="yo-action-bar--actions">
                         <Button.Group>
                             <Tooltip placement="bottom" title="刷新">
-                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                                <Button
+                                    onClick={() => this.onReloadData()}
+                                    type="text"
+                                    icon={<AntIcon type="reload" />}
+                                />
                             </Tooltip>
                         </Button.Group>
                     </div>
                 </div>
-                {
+                {this.props.editable ? (
-                    this.props.editable ?
+                    <Form ref={this.props.form}>{renderTable.call(this, props, on)}</Form>
-                        <Form ref={this.props.form}>
+                ) : (
-                            {renderTable.call(this, props, on)}
+                    renderTable.call(this, props, on)
-                        </Form>
+                )}
-                        :
-                        renderTable.call(this, props, on)
-                }
             </section>
         )
     }

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

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class form extends Component {
+    render() {
+        return (
+            <div>
+                1
+            </div>
+        )
+    }
+}

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

@@ -0,0 +1,363 @@
+import React, { Component } from 'react'
+import {
+    Button,
+    Card,
+    Descriptions,
+    Divider,
+    Form,
+    Input,
+    List,
+    message as Message,
+    Popconfirm,
+    Select,
+    Switch,
+    Tag,
+} from 'antd'
+import { AntIcon, Auth, Container, Image, ModalForm, QueryList, QueryTreeLayout } from 'components'
+import { api } from 'common/api'
+import { toCamelCase } from 'util/format'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import FormBody from './form'
+import Selector from './selector'
+
+// 配置页面所需接口函数
+const apiAction = {
+    tree: api.getOrgTree,
+    page: api.houseMemberPage,
+    add: api.houseMemberAdd,
+    edit: api.houseMemberEdit,
+    delete: api.houseMemberDelete,
+
+    changeStatus: api.houseMemberChangeStatus,
+    resetPwd: api.sysUserResetPwd,
+}
+
+// 用于弹窗标题
+const name = '用户'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            sex: [],
+            commonStatus: [],
+        },
+    }
+
+    // 表格实例
+    list = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    // 树选中节点
+    selectId = undefined
+
+    selectorModal = React.createRef()
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        this.list.current.onLoading()
+        getDictData('sex', 'common_status').then(codes => {
+            this.setState({ codes }, () => {
+                this.list.current.onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        query = {
+            ...query,
+            sysEmpParam: {
+                orgId: this.selectId,
+            },
+        }
+
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 调用树结构数据接口
+     * [异步,必要]
+     * @returns
+     */
+    loadTreeData = async () => {
+        const { data } = await apiAction.tree()
+        return data
+    }
+
+    /**
+     * 树节点选中事件
+     * [必要]
+     * @param {*} id
+     */
+    onSelectTree(id) {
+        this.selectId = id
+        this.list.current.onReloadData()
+    }
+
+    /**
+     * 绑定字典数据
+     * @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({
+            orgId: this.selectId,
+            record,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        this.list.current.onLoading()
+        try {
+            await action
+            Message.success(successMessage)
+            this.list.current.onReloadData()
+        } catch {
+            this.list.current.onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record
+     */
+    onDelete(record) {
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    //#region 自定义方法
+    renderItem(record) {
+        return (
+            <List.Item
+                key={record.id}
+                actions={[
+                    <Auth auth="sysUser: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>,
+                    <Auth aut="sysUser:resetPwd">
+                        <a onClick={() => this.onResetPassword(record)}>重置密码</a>
+                    </Auth>,
+                ]}
+            >
+                <List.Item.Meta
+                    avatar={
+                        <>
+                            <Image
+                                type="avatar"
+                                shape="square"
+                                size={48}
+                                id={record.avatar}
+                                icon={<AntIcon type="user" />}
+                            />
+                            {record.roleCode && record.roleCode.includes('house_security_manager') && (
+                                <Button
+                                    size="small"
+                                    type="primary"
+                                    className="block w-100-p mt-xxs"
+                                    onClick={() => this.onOpen(this.selectorModal, record)}
+                                >
+                                    选房
+                                </Button>
+                            )}
+                        </>
+                    }
+                    title={
+                        <>
+                            {record.nickName || record.name}
+                            {record.roleName &&
+                                record.roleName.split(',').map((item, i) => (
+                                    <span key={i}>
+                                        <Divider type="vertical" />
+                                        <Tag color="pink">{item}</Tag>
+                                    </span>
+                                ))}
+                        </>
+                    }
+                    description={record.account}
+                />
+                <Descriptions className="flex-1" column={2}>
+                    <Descriptions.Item label="部门">{record.orgName}</Descriptions.Item>
+                    <Descriptions.Item label="性别">
+                        {this.bindCodeValue(record.sex, 'sex')}
+                    </Descriptions.Item>
+                    <Descriptions.Item label="手机">{record.phone || '未设置'}</Descriptions.Item>
+                    <Descriptions.Item label="邮箱">{record.email || '未设置'}</Descriptions.Item>
+                </Descriptions>
+                <div className="yo-list-content--h">
+                    <Auth auth="sysUser:changeStatus">
+                        <div className="yo-list-content--h--item text-center">
+                            <Switch
+                                checked={!record.status}
+                                loading={record.statusChanging}
+                                checkedChildren={this.bindCodeValue(0, 'common_status')}
+                                unCheckedChildren={this.bindCodeValue(1, 'common_status')}
+                                onChange={checked => this.onSetUserStatus(record, checked)}
+                            />
+                        </div>
+                    </Auth>
+                </div>
+            </List.Item>
+        )
+    }
+
+    onSetUserStatus(record, checked) {
+        this.onAction(
+            apiAction.changeStatus({
+                id: record.id,
+                status: +!checked,
+            }),
+            '设置成功'
+        )
+    }
+
+    onResetPassword(record) {
+        this.onAction(apiAction.resetPwd(record), '重置成功')
+    }
+    //#endregion
+
+    render() {
+        return (
+            <QueryTreeLayout
+                loadData={this.loadTreeData}
+                defaultExpanded={true}
+                onSelect={key => this.onSelectTree(key)}
+            >
+                <Container mode="fluid">
+                    <Card bordered={false}>
+                        <QueryList
+                            ref={this.list}
+                            autoLoad={false}
+                            loadData={this.loadData}
+                            query={
+                                <Auth auth="sysApp:page">
+                                    <Form.Item label="关键词" name="searchValue">
+                                        <Input
+                                            autoComplete="off"
+                                            placeholder="请输入姓名、账号、手机号"
+                                            className="w-200"
+                                        />
+                                    </Form.Item>
+                                    <Form.Item label="状态" name="searchStatus">
+                                        <Select
+                                            allowClear
+                                            placeholder="请选择状态"
+                                            className="w-200"
+                                        >
+                                            {this.state.codes.commonStatus.map(item => {
+                                                return (
+                                                    <Select.Option key={item.code} item={item.code}>
+                                                        {item.value}
+                                                    </Select.Option>
+                                                )
+                                            })}
+                                        </Select>
+                                    </Form.Item>
+                                </Auth>
+                            }
+                            operator={
+                                <Button
+                                    icon={<AntIcon type="plus" />}
+                                    onClick={() => this.onOpen(this.addForm)}
+                                >
+                                    新增
+                                    {name}
+                                </Button>
+                            }
+                            renderItem={record => this.renderItem(record)}
+                        />
+                    </Card>
+                </Container>
+
+                <ModalForm
+                    title={`新增${name}`}
+                    action={apiAction.add}
+                    ref={this.addForm}
+                    onSuccess={() => this.list.current.onReloadData()}
+                >
+                    <FormBody mode="add" />
+                </ModalForm>
+
+                <ModalForm
+                    title={`编辑${name}`}
+                    action={apiAction.edit}
+                    ref={this.editForm}
+                    onSuccess={() => this.list.current.onReloadData()}
+                >
+                    <FormBody mode="edit" />
+                </ModalForm>
+
+                <ModalForm
+                    bodyStyle={{ padding: 0 }}
+                    footer={false}
+                    width="80%"
+                    ref={this.selectorModal}
+                >
+                    <Selector />
+                </ModalForm>
+            </QueryTreeLayout>
+        )
+    }
+}

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

@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import { Tabs } from 'antd'
+import SelectorList from './selector-list'
+import SelectedList from './selected-list'
+
+export default class index extends Component {
+    state = {
+        userId: '',
+    }
+
+    selectorList = React.createRef()
+    selectedList = React.createRef()
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        this.setState({
+            userId: params.record.id,
+        })
+    }
+
+    //#region 自定义方法
+    onReloadAll() {
+        if (this.selectorList.current) {
+            this.selectorList.current.table.current.onReloadData()
+        }
+        if (this.selectedList.current) {
+            this.selectedList.current.table.current.onReloadData()
+        }
+    }
+    //#endregion
+
+    render() {
+        const { userId } = this.state
+
+        return (
+            <Tabs>
+                <Tabs.TabPane key="1" tab="选房">
+                    <SelectorList
+                        userId={userId}
+                        ref={this.selectorList}
+                        onReloadAll={() => this.onReloadAll()}
+                    />
+                </Tabs.TabPane>
+                <Tabs.TabPane key="2" tab="已选">
+                    <SelectedList
+                        userId={userId}
+                        ref={this.selectedList}
+                        onReloadAll={() => this.onReloadAll()}
+                    />
+                </Tabs.TabPane>
+            </Tabs>
+        )
+    }
+}

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

@@ -0,0 +1,263 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, InputNumber, message as Message, Radio, Select } from 'antd'
+import { AntIcon, Auth, Container, QueryTable } from 'components'
+import { api } from 'common/api'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import { getSearchInfo } from 'util/query'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.houseSelectedPage,
+}
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'houseSelector'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            dicHouseType: [],
+            dicHouseIndustry: [],
+        },
+
+        saving: false,
+
+        type: '',
+
+        selectedRowKeys: [],
+    }
+
+    // 表格实例
+    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 => this.bindCodeValue(text, 'dic_house_type'),
+        },
+        {
+            title: '地址',
+            dataIndex: 'address',
+            sorter: true,
+        },
+        {
+            title: '登记时间',
+            dataIndex: 'createdTime',
+            sorter: true,
+            width: 150,
+        },
+    ]
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @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(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const searchInfo = getSearchInfo({
+            query,
+            queryType: { type: '=' },
+        })
+
+        const { data } = await apiAction.page({
+            ...params,
+            searchInfo,
+            userId: this.props.userId,
+        })
+        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 {*} 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 自定义方法
+    async onHouseSelectRevoke() {
+        const { selectedRowKeys } = this.state
+        const { userId, onReloadAll } = this.props
+        this.setState({ saving: true })
+        await this.onAction(
+            api.houseSelectRevoke({
+                ids: selectedRowKeys,
+                userId,
+            }),
+            '撤销成功'
+        )
+        this.setState({
+            saving: false,
+            selectedRowKeys: [],
+        })
+        if (onReloadAll) {
+            onReloadAll()
+        }
+    }
+    //#endregion
+
+    render() {
+        const { codes, saving, type, selectedRowKeys } = this.state
+
+        return (
+            <Card bordered={false} className="mb-none">
+                <QueryTable
+                    ref={this.table}
+                    autoLoad={false}
+                    loadData={this.loadData}
+                    columns={this.columns}
+                    rowSelection={{
+                        selectedRowKeys,
+                        onChange: selectedRowKeys => this.setState({ selectedRowKeys }),
+                    }}
+                    queryInitialValues={{
+                        type: '',
+                    }}
+                    onQueryChange={values => {
+                        if (values.hasOwnProperty('type')) {
+                            this.setState({ type: values.type })
+                        }
+                    }}
+                    query={
+                        <Auth auth={{ [authName]: 'selectorPage' }}>
+                            <Form.Item label="编号" name="no">
+                                <InputNumber
+                                    formatter={value => value && value.padStart(3, '0')}
+                                    max={999}
+                                    min={1}
+                                    precision={0}
+                                    step={1}
+                                    placeholder="请输入房屋序号"
+                                />
+                            </Form.Item>
+                            <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>
+                                    ))}
+                                </Radio.Group>
+                            </Form.Item>
+                            {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>
+                                </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>
+                    }
+                    operator={
+                        <Auth auth={{ [authName]: 'select' }}>
+                            <Button
+                                loading={saving}
+                                disabled={!selectedRowKeys.length}
+                                type="danger"
+                                onClick={() => this.onHouseSelectRevoke()}
+                            >
+                                撤销
+                            </Button>
+                        </Auth>
+                    }
+                />
+            </Card>
+        )
+    }
+}

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

@@ -0,0 +1,263 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, InputNumber, message as Message, Radio, Select } from 'antd'
+import { AntIcon, Auth, Container, QueryTable } from 'components'
+import { api } from 'common/api'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import { getSearchInfo } from 'util/query'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.houseSelectorPage,
+}
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'houseSelector'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            dicHouseType: [],
+            dicHouseIndustry: [],
+        },
+
+        saving: false,
+
+        type: '',
+
+        selectedRowKeys: [],
+    }
+
+    // 表格实例
+    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 => this.bindCodeValue(text, 'dic_house_type'),
+        },
+        {
+            title: '地址',
+            dataIndex: 'address',
+            sorter: true,
+        },
+        {
+            title: '登记时间',
+            dataIndex: 'createdTime',
+            sorter: true,
+            width: 150,
+        },
+    ]
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @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(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const searchInfo = getSearchInfo({
+            query,
+            queryType: { type: '=' },
+        })
+
+        const { data } = await apiAction.page({
+            ...params,
+            searchInfo,
+            userId: this.props.userId,
+        })
+        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 {*} 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 自定义方法
+    async onHouseSelect() {
+        const { selectedRowKeys } = this.state
+        const { userId, onReloadAll } = this.props
+        this.setState({ saving: true })
+        await this.onAction(
+            api.houseSelect({
+                ids: selectedRowKeys,
+                userId,
+            }),
+            '选房成功'
+        )
+        this.setState({
+            saving: false,
+            selectedRowKeys: [],
+        })
+        if (onReloadAll) {
+            onReloadAll()
+        }
+    }
+    //#endregion
+
+    render() {
+        const { codes, saving, type, selectedRowKeys } = this.state
+
+        return (
+            <Card bordered={false} className="mb-none">
+                <QueryTable
+                    ref={this.table}
+                    autoLoad={false}
+                    loadData={this.loadData}
+                    columns={this.columns}
+                    rowSelection={{
+                        selectedRowKeys,
+                        onChange: selectedRowKeys => this.setState({ selectedRowKeys }),
+                    }}
+                    queryInitialValues={{
+                        type: '',
+                    }}
+                    onQueryChange={values => {
+                        if (values.hasOwnProperty('type')) {
+                            this.setState({ type: values.type })
+                        }
+                    }}
+                    query={
+                        <Auth auth={{ [authName]: 'selectorPage' }}>
+                            <Form.Item label="编号" name="no">
+                                <InputNumber
+                                    formatter={value => value && value.padStart(3, '0')}
+                                    max={999}
+                                    min={1}
+                                    precision={0}
+                                    step={1}
+                                    placeholder="请输入房屋序号"
+                                />
+                            </Form.Item>
+                            <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>
+                                    ))}
+                                </Radio.Group>
+                            </Form.Item>
+                            {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>
+                                </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>
+                    }
+                    operator={
+                        <Auth auth={{ [authName]: 'select' }}>
+                            <Button
+                                loading={saving}
+                                disabled={!selectedRowKeys.length}
+                                type="primary"
+                                onClick={() => this.onHouseSelect()}
+                            >
+                                确认选择
+                            </Button>
+                        </Auth>
+                    }
+                />
+            </Card>
+        )
+    }
+}