ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
自带大佬气场
2021-06-20 17:46:05 +08:00
parent c8e63d67d8
commit c694078569
7 changed files with 1079 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web-react/src/components/query-list/index.jsx
View File

@@ -2,12 +2,13 @@ import React, { Component } from 'react'
import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
import { AntIcon } from 'components'
/**
* 渲染查询栏
* @returns
*/
function renderQueryBar() {
const propsMap = ['autoLoad', 'loadData', 'pageIndex', 'pageSize']
/**
* 渲染查询栏
* @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({
pageIndex: this.pagination.current,
pageSize: this.pagination.pageSize
}, this.query)
const res = await this.loadData(
{
pageIndex: this.pagination.current,
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
@@ -129,7 +136,7 @@ export default class QueryList extends Component {
* 返回表单字段值,加载数据,并且返回到第一页
* @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">
{this.props.operator}
</div>
<div className="yo-action-bar--actions">{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>

107
web-react/src/components/query-table/index.jsx
View File

@@ -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}条数据`,
position: ['bottomLeft']
showTotal: total => `总共${total}条数据`,
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({
pageIndex: this.pagination.current,
pageSize: this.pagination.pageSize,
...this.sorter
}, this.query)
const res = await this.loadData(
{
pageIndex: this.pagination.current,
pageSize: this.pagination.pageSize,
...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" />,
},
})
}
@@ -172,7 +181,7 @@ export default class QueryTable extends Component {
* 返回表单字段值,加载数据,并且返回到第一页
* @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()
@@ -217,7 +225,7 @@ export default class QueryTable extends Component {
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">
{operator}
</div>
<div className="yo-action-bar--actions">{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 ?
<Form ref={this.props.form}>
{renderTable.call(this, props, on)}
</Form>
:
renderTable.call(this, props, on)
}
{this.props.editable ? (
<Form ref={this.props.form}>{renderTable.call(this, props, on)}</Form>
) : (
renderTable.call(this, props, on)
)}
</section>
)
}

11
web-react/src/pages/business/house/member/form.jsx Normal file
View File

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

363
web-react/src/pages/business/house/member/index.jsx Normal file
View File

@@ -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>
)
}
}

66
web-react/src/pages/business/house/member/selector/index.jsx Normal file
View File

@@ -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>
)
}
}

263
web-react/src/pages/business/house/member/selector/selected-list.jsx Normal file
View File

@@ -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>
)
}
}

263
web-react/src/pages/business/house/member/selector/selector-list.jsx Normal file
View File

@@ -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>
)
}
}