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

update 系统功能列表全部加上列宽

Browse Source
This commit is contained in:
自带大佬气场
2021-06-28 18:18:59 +08:00
parent 6dceac060d
commit 54955e26e5
14 changed files with 544 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web-react/src/assets/style/lib/visibility.less
View File

@@ -26,3 +26,21 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.ellipsis-2 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.ellipsis-3 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
}

1
web-react/src/common/api/requests/sys/appManage.js
View File

@@ -28,6 +28,7 @@ const urls = {
* 修改应用状态 * 修改应用状态
*/ */
sysAppChangeStatus: ['/sysApp/changeStatus', 'post'], sysAppChangeStatus: ['/sysApp/changeStatus', 'post'],
sysAppDetail: ['/sysApp/detail', 'get']
} }
export default urls export default urls

51
web-react/src/pages/system/app/form.jsx
View File

@@ -2,13 +2,13 @@ import React, { Component } from 'react'
import { Form, Input, InputNumber, Spin } from 'antd' import { Form, Input, InputNumber, Spin } from 'antd'
import { AntIcon, IconSelector } from 'components' import { AntIcon, IconSelector } from 'components'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import { api } from 'common/api'
const initialValues = { const initialValues = {
sort: 100 sort: 100,
} }
export default class form extends Component { export default class form extends Component {
state = { state = {
// 加载状态 // 加载状态
loading: true, loading: true,
@@ -33,17 +33,18 @@ export default class form extends Component {
* 填充数据 * 填充数据
* 可以在设置this.record之后对其作出数据结构调整 * 可以在设置this.record之后对其作出数据结构调整
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
*/ */
async fillData(params) { async fillData(params) {
this.record = cloneDeep(params.record)
//#region 从后端转换成前段所需格式 //#region 从后端转换成前段所需格式
if (params.id) {
this.record = (await api.sysAppDetail({ id: params.id })).data
}
//#endregion //#endregion
this.form.current.setFieldsValue(this.record) this.form.current.setFieldsValue(this.record)
this.setState({ this.setState({
loading: false loading: false,
}) })
} }
@@ -51,7 +52,7 @@ export default class form extends Component {
* 获取数据 * 获取数据
* 可以对postData进行数据结构调整 * 可以对postData进行数据结构调整
* [异步,必要] * [异步,必要]
* @returns * @returns
*/ */
async getData() { async getData() {
const form = this.form.current const form = this.form.current
@@ -73,17 +74,21 @@ export default class form extends Component {
render() { render() {
return ( return (
<Form <Form initialValues={initialValues} ref={this.form} className="yo-form">
initialValues={initialValues}
ref={this.form}
className="yo-form"
>
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}> <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
<div className="yo-form-group"> <div className="yo-form-group">
<Form.Item label="应用名称" name="name" rules={[{ required: true, message: '请输入应用名称' }]}> <Form.Item
label="应用名称"
name="name"
rules={[{ required: true, message: '请输入应用名称' }]}
>
<Input autoComplete="off" placeholder="请输入应用名称" /> <Input autoComplete="off" placeholder="请输入应用名称" />
</Form.Item> </Form.Item>
<Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码' }]}> <Form.Item
label="唯一编码"
name="code"
rules={[{ required: true, message: '请输入唯一编码' }]}
>
<Input autoComplete="off" placeholder="请输入唯一编码" /> <Input autoComplete="off" placeholder="请输入唯一编码" />
</Form.Item> </Form.Item>
<Form.Item label="图标" name="icon"> <Form.Item label="图标" name="icon">
@@ -94,10 +99,9 @@ export default class form extends Component {
<AntIcon <AntIcon
type="setting" type="setting"
onClick={() => onClick={() =>
this this.iconSelector.current.open(
.iconSelector this.form.current.getFieldValue('icon')
.current )
.open(this.form.current.getFieldValue('icon'))
} }
/> />
} }
@@ -113,9 +117,14 @@ export default class form extends Component {
</Form.Item> </Form.Item>
</div> </div>
</Spin> </Spin>
<IconSelector ref={this.iconSelector} onSelect={(icon) => this.form.current.setFieldsValue({ <IconSelector
icon ref={this.iconSelector}
})} /> onSelect={icon =>
this.form.current.setFieldsValue({
icon,
})
}
/>
</Form> </Form>
) )
} }

9
web-react/src/pages/system/app/index.jsx
View File

@@ -87,6 +87,7 @@ export default class index extends Component {
dataIndex: 'sort', dataIndex: 'sort',
width: 100, width: 100,
sorter: true, sorter: true,
defaultSortOrder: 'ascend',
}, },
] ]
@@ -107,7 +108,7 @@ export default class index extends Component {
render: (text, record) => ( render: (text, record) => (
<QueryTableActions> <QueryTableActions>
<Auth auth="sysApp:edit"> <Auth auth="sysApp:edit">
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <a onClick={() => this.onOpen(this.editForm, record.id)}>编辑</a>
</Auth> </Auth>
<Auth auth="sysApp:delete"> <Auth auth="sysApp:delete">
<Popconfirm <Popconfirm
@@ -191,11 +192,11 @@ export default class index extends Component {
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} id
*/ */
onOpen(modal, record) { onOpen(modal, id) {
modal.current.open({ modal.current.open({
record, id,
}) })
} }

7
web-react/src/pages/system/area/index.jsx
View File

@@ -48,7 +48,7 @@ export default class index extends Component {
title: '区域类型', title: '区域类型',
dataIndex: 'levelType', dataIndex: 'levelType',
sorter: true, sorter: true,
width: 50, width: 100,
render: text => <>{this.bindCodeValue(text, 'areacode_type')}</>, render: text => <>{this.bindCodeValue(text, 'areacode_type')}</>,
}, },
{ {
@@ -60,14 +60,15 @@ export default class index extends Component {
{ {
title: '区域编号', title: '区域编号',
dataIndex: 'code', dataIndex: 'code',
width: 80, width: 100,
sorter: true, sorter: true,
}, },
{ {
title: '行政编号', title: '行政编号',
dataIndex: 'adCode', dataIndex: 'adCode',
width: 80, width: 100,
sorter: true, sorter: true,
defaultSortOrder: 'ascend',
}, },
{ {
title: '描述', title: '描述',

16
web-react/src/pages/system/config/index.jsx
View File

@@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd' import { Button, Card, Form, Input, message as Message, Popconfirm, Tooltip } from 'antd'
import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components' import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
import { api } from 'common/api' import { api } from 'common/api'
import auth from 'components/authorized/handler' import auth from 'components/authorized/handler'
@@ -41,28 +41,41 @@ export default class index extends Component {
{ {
title: '参数名称', title: '参数名称',
dataIndex: 'name', dataIndex: 'name',
width: 200,
sorter: true, sorter: true,
}, },
{ {
title: '唯一编码', title: '唯一编码',
dataIndex: 'code', dataIndex: 'code',
width: 200,
sorter: true, sorter: true,
ellipsis: {
showTitle: false,
},
render: text => <Tooltip title={text}>{text}</Tooltip>,
}, },
{ {
title: '参数值', title: '参数值',
dataIndex: 'value', dataIndex: 'value',
width: 200,
sorter: true, sorter: true,
}, },
{ {
title: '所属分类', title: '所属分类',
dataIndex: 'groupCode', dataIndex: 'groupCode',
width: 140,
sorter: true, sorter: true,
render: text => this.bindCodeValue(text, 'consts_type'), render: text => this.bindCodeValue(text, 'consts_type'),
}, },
{ {
title: '备注', title: '备注',
dataIndex: 'remark', dataIndex: 'remark',
width: 400,
sorter: true, sorter: true,
ellipsis: {
showTitle: false,
},
render: text => <Tooltip title={text}>{text}</Tooltip>,
}, },
] ]
@@ -213,6 +226,7 @@ export default class index extends Component {
autoLoad={false} autoLoad={false}
loadData={this.loadData} loadData={this.loadData}
columns={this.columns} columns={this.columns}
scroll={{ x: 1140 }}
query={ query={
<Auth auth={{ [authName]: 'page' }}> <Auth auth={{ [authName]: 'page' }}>
<Form.Item label="参数名称" name="name"> <Form.Item label="参数名称" name="name">

213
web-react/src/pages/system/dict/dictdata/index.jsx
View File

@@ -14,20 +14,19 @@ const apiAction = {
add: api.sysDictDataAdd, add: api.sysDictDataAdd,
edit: api.sysDictDataEdit, edit: api.sysDictDataEdit,
delete: api.sysDictDataDelete, delete: api.sysDictDataDelete,
deleteBatch: api.sysDictDataDeleteBatch deleteBatch: api.sysDictDataDeleteBatch,
} }
// 用于弹窗标题 // 用于弹窗标题
const name = '字典值' const name = '字典值'
export default class index extends Component { export default class index extends Component {
state = { state = {
codes: { codes: {
commonStatus: [] commonStatus: [],
}, },
selectedRowKeys: [] selectedRowKeys: [],
} }
// 表格实例 // 表格实例
@@ -45,7 +44,7 @@ export default class index extends Component {
dataIndex: 'value', dataIndex: 'value',
sorter: true, sorter: true,
width: 200, width: 200,
render: (text, record, index) => render: (text, record, index) => (
<Form.Item <Form.Item
name={[index, 'value']} name={[index, 'value']}
rules={[{ required: true, message: '请输入文本' }]} rules={[{ required: true, message: '请输入文本' }]}
@@ -53,13 +52,14 @@ export default class index extends Component {
> >
<Input autoComplete="off" placeholder="请输入文本" /> <Input autoComplete="off" placeholder="请输入文本" />
</Form.Item> </Form.Item>
),
}, },
{ {
title: '字典值', title: '字典值',
dataIndex: 'code', dataIndex: 'code',
sorter: true, sorter: true,
width: 200, width: 200,
render: (text, record, index) => render: (text, record, index) => (
<Form.Item <Form.Item
name={[index, 'code']} name={[index, 'code']}
rules={[{ required: true, message: '请输入文本' }]} rules={[{ required: true, message: '请输入文本' }]}
@@ -67,18 +67,19 @@ export default class index extends Component {
> >
<Input autoComplete="off" placeholder="请输入字典值" /> <Input autoComplete="off" placeholder="请输入字典值" />
</Form.Item> </Form.Item>
),
}, },
{ {
title: '扩展值', title: '扩展值',
dataIndex: 'extCode', dataIndex: 'extCode',
width: 80, width: 80,
align: 'center', align: 'center',
render: (text, record, index) => render: (text, record, index) => (
<> <>
<Form.Item name={[index, 'extCode']} className="hidden"> <Form.Item name={[index, 'extCode']} className="hidden">
<Input type="hidden" /> <Input type="hidden" />
</Form.Item> </Form.Item>
{auth('sysDictData:edit') ? {auth('sysDictData:edit') ? (
<a <a
onClick={() => this.onOpen(this.jsonForm, record)} onClick={() => this.onOpen(this.jsonForm, record)}
style={{ style={{
@@ -87,50 +88,58 @@ export default class index extends Component {
transform: 'scaleY(.85)', transform: 'scaleY(.85)',
color: 'transparent', color: 'transparent',
backgroundImage: 'linear-gradient(135deg, #007bff, #52c41a)', backgroundImage: 'linear-gradient(135deg, #007bff, #52c41a)',
WebkitBackgroundClip: 'text' WebkitBackgroundClip: 'text',
}} }}
>JSON</a> >
: JSON
</a>
) : (
<>{text}</> <>{text}</>
} )}
</> </>
),
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sort', dataIndex: 'sort',
sorter: true, sorter: true,
width: 100, width: 100,
render: (text, record, index) => <Form.Item name={[index, 'sort']} className="mb-none"> render: (text, record, index) => (
<InputNumber <Form.Item name={[index, 'sort']} className="mb-none">
max={1000} <InputNumber
min={0} max={1000}
step={1} min={0}
className="w-100-p" step={1}
autoComplete="off" className="w-100-p"
placeholder="排序" autoComplete="off"
/> placeholder="排序"
</Form.Item> />
</Form.Item>
),
defaultSortOrder: 'ascend',
}, },
{ {
title: '备注', title: '备注',
dataIndex: 'remark', dataIndex: 'remark',
sorter: true, sorter: true,
render: (text, record, index) => <Form.Item name={[index, 'remark']} className="mb-none"> render: (text, record, index) => (
<Input autoComplete="off" placeholder="请输入备注" /> <Form.Item name={[index, 'remark']} className="mb-none">
</Form.Item> <Input autoComplete="off" placeholder="请输入备注" />
</Form.Item>
),
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
sorter: true, sorter: true,
width: 80, width: 80,
render: text => this.bindCodeValue(text, 'common_status') render: text => this.bindCodeValue(text, 'common_status'),
} },
] ]
/** /**
* 构造函数,在渲染前动态添加操作字段等 * 构造函数,在渲染前动态添加操作字段等
* @param {*} props * @param {*} props
*/ */
constructor(props) { constructor(props) {
super(props) super(props)
@@ -142,27 +151,28 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record, index) => (<QueryTableActions> render: (text, record, index) => (
{ <QueryTableActions>
record.id !== -1 ? {record.id !== -1 ? (
<Auth auth="sysDictData:edit"> <Auth auth="sysDictData:edit">
<a onClick={() => this.onEdit(index)}>保存编辑</a> <a onClick={() => this.onEdit(index)}>保存编辑</a>
</Auth> </Auth>
: ) : (
<Auth auth="sysDictData:add"> <Auth auth="sysDictData:add">
<a onClick={() => this.onAdd(index)}>保存新增</a> <a onClick={() => this.onAdd(index)}>保存新增</a>
</Auth> </Auth>
} )}
<Auth auth="sysDictData:delete"> <Auth auth="sysDictData:delete">
<Popconfirm <Popconfirm
placement="topRight" placement="topRight"
title="是否确认删除" title="是否确认删除"
onConfirm={() => this.onDelete(record)} onConfirm={() => this.onDelete(record)}
> >
<a>删除</a> <a>删除</a>
</Popconfirm> </Popconfirm>
</Auth> </Auth>
</QueryTableActions>) </QueryTableActions>
),
}) })
} }
} }
@@ -171,9 +181,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -186,26 +196,28 @@ export default class index extends Component {
componentDidMount() { componentDidMount() {
this.table.current.onLoading() this.table.current.onLoading()
getDictData('common_status').then(res => { getDictData('common_status').then(res => {
this.setState({ this.setState(
codes: res {
}, () => { codes: res,
this.table.current.onLoadData() },
}) () => {
this.table.current.onLoadData()
}
)
}) })
} }
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
query = { query = {
...query, ...query,
typeId: this.props.type.id typeId: this.props.type.id,
} }
const { data } = await apiAction.page({ const { data } = await apiAction.page({
@@ -225,15 +237,15 @@ export default class index extends Component {
/** /**
* 绑定字典数据 * 绑定字典数据
* @param {*} code * @param {*} code
* @param {*} name * @param {*} name
* @returns * @returns
*/ */
bindCodeValue(code, name) { bindCodeValue(code, name) {
name = toCamelCase(name) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find((p) => p.code == code) const c = codes.find(p => p.code == code)
if (c) { if (c) {
return c.value return c.value
} }
@@ -243,20 +255,20 @@ export default class index extends Component {
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record) { onOpen(modal, record) {
modal.current.open({ modal.current.open({
record record,
}) })
} }
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage, reload = true) { async onAction(action, successMessage, reload = true) {
const table = this.table.current const table = this.table.current
@@ -276,13 +288,10 @@ export default class index extends Component {
/** /**
* 删除 * 删除
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
apiAction.delete(record),
'删除成功'
)
} }
//#region 自定义方法 //#region 自定义方法
@@ -295,12 +304,12 @@ export default class index extends Component {
typeId: this.props.type.id, typeId: this.props.type.id,
sort: 100, sort: 100,
status: 0, status: 0,
remark: null remark: null,
} }
const index = this.table.current.onAddRow(record) const index = this.table.current.onAddRow(record)
if (index !== false) { if (index !== false) {
this.form.current.setFieldsValue({ this.form.current.setFieldsValue({
[index]: record [index]: record,
}) })
} }
} }
@@ -318,10 +327,7 @@ export default class index extends Component {
const record = form.getFieldsValue([index])[index] const record = form.getFieldsValue([index])[index]
// 为了正常显示checkbox,默认给id赋予了-1,在这里删除id以表示新增 // 为了正常显示checkbox,默认给id赋予了-1,在这里删除id以表示新增
record.id = undefined record.id = undefined
this.onAction( this.onAction(apiAction.add(record), '新增成功')
apiAction.add(record),
'新增成功'
)
} }
async onEdit(index) { async onEdit(index) {
@@ -335,21 +341,14 @@ export default class index extends Component {
} }
} }
const record = form.getFieldsValue([index])[index] const record = form.getFieldsValue([index])[index]
this.onAction( this.onAction(apiAction.edit(record), '编辑成功', false)
apiAction.edit(record),
'编辑成功',
false
)
} }
async onDeleteBatch() { async onDeleteBatch() {
await this.onAction( await this.onAction(apiAction.deleteBatch(this.state.selectedRowKeys), '删除成功')
apiAction.deleteBatch(this.state.selectedRowKeys),
'删除成功'
)
this.setState({ this.setState({
selectedRowKeys: [] selectedRowKeys: [],
}) })
} }
@@ -360,8 +359,8 @@ export default class index extends Component {
index = dataSource.indexOf(data) index = dataSource.indexOf(data)
this.form.current.setFieldsValue({ this.form.current.setFieldsValue({
[index]: { [index]: {
extCode extCode,
} },
}) })
dataSource[index].extCode = extCode dataSource[index].extCode = extCode
table.setState({ dataSource }) table.setState({ dataSource })
@@ -369,7 +368,6 @@ export default class index extends Component {
//#endregion //#endregion
render() { render() {
const { selectedRowKeys } = this.state const { selectedRowKeys } = this.state
return ( return (
@@ -387,9 +385,9 @@ export default class index extends Component {
rowSelection={{ rowSelection={{
selectedRowKeys, selectedRowKeys,
onChange: selectedRowKeys => this.setState({ selectedRowKeys }), onChange: selectedRowKeys => this.setState({ selectedRowKeys }),
getCheckboxProps: (record) => ({ getCheckboxProps: record => ({
disabled: record.id === -1 disabled: record.id === -1,
}) }),
}} }}
query={ query={
<Auth auth="sysDictData:page"> <Auth auth="sysDictData:page">
@@ -409,28 +407,27 @@ export default class index extends Component {
title="是否确认批量删除" title="是否确认批量删除"
onConfirm={() => this.onDeleteBatch()} onConfirm={() => this.onDeleteBatch()}
> >
<Button disabled={!selectedRowKeys.length} danger>批量删除</Button> <Button disabled={!selectedRowKeys.length} danger>
批量删除
</Button>
</Popconfirm> </Popconfirm>
</Auth> </Auth>
} }
footer={ footer={() => (
() => <Auth auth="sysDictData:add">
<Auth auth="sysDictData:add"> <Button
<Button block
block icon={<AntIcon type="plus" />}
icon={<AntIcon type="plus" />} onClick={() => this.onAddRow()}
onClick={() => this.onAddRow()} >
>新增{name}</Button> 新增{name}
</Auth> </Button>
} </Auth>
)}
/> />
</Card> </Card>
<ModalForm <ModalForm title="编辑" action={this.onSaveExtCode} ref={this.jsonForm}>
title="编辑"
action={this.onSaveExtCode}
ref={this.jsonForm}
>
<FormBody /> <FormBody />
</ModalForm> </ModalForm>
</Container> </Container>

138
web-react/src/pages/system/dict/index.jsx
View File

@@ -1,6 +1,14 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Button, Card, Form, Input, message as Message, Popconfirm, Radio } from 'antd' import { Button, Card, Form, Input, message as Message, Popconfirm, Radio } from 'antd'
import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components' import {
AntIcon,
Auth,
Container,
ModalForm,
QueryTable,
QueryTableActions,
QueryTreeLayout,
} from 'components'
import { api } from 'common/api' import { api } from 'common/api'
import auth from 'components/authorized/handler' import auth from 'components/authorized/handler'
import { toCamelCase } from 'util/format' import { toCamelCase } from 'util/format'
@@ -14,17 +22,16 @@ const apiAction = {
page: api.sysDictTypePage, page: api.sysDictTypePage,
add: api.sysDictTypeAdd, add: api.sysDictTypeAdd,
edit: api.sysDictTypeEdit, edit: api.sysDictTypeEdit,
delete: api.sysDictTypeDelete delete: api.sysDictTypeDelete,
} }
const name = '字典' const name = '字典'
export default class index extends Component { export default class index extends Component {
state = { state = {
codes: { codes: {
commonStatus: [] commonStatus: [],
} },
} }
// 表格实例 // 表格实例
@@ -43,24 +50,29 @@ export default class index extends Component {
{ {
title: '字典名称', title: '字典名称',
dataIndex: 'name', dataIndex: 'name',
width: 200,
sorter: true, sorter: true,
}, },
{ {
title: '类型', title: '类型',
key: 'type', key: 'type',
dataIndex: 'code', dataIndex: 'code',
width: 120,
sorter: true, sorter: true,
render: text => text ? '字典类型' : '目录' render: text => (text ? '字典类型' : '目录'),
}, },
{ {
title: '唯一编码', title: '唯一编码',
dataIndex: 'code', dataIndex: 'code',
width: 120,
sorter: true, sorter: true,
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sort', dataIndex: 'sort',
width: 80,
sorter: true, sorter: true,
defaultSortOrder: 'ascend',
}, },
{ {
title: '备注', title: '备注',
@@ -71,14 +83,15 @@ export default class index extends Component {
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
width: 80,
sorter: true, sorter: true,
render: text => this.bindCodeValue(text, 'common_status') render: text => this.bindCodeValue(text, 'common_status'),
}, },
] ]
/** /**
* 构造函数,在渲染前动态添加操作字段等 * 构造函数,在渲染前动态添加操作字段等
* @param {*} props * @param {*} props
*/ */
constructor(props) { constructor(props) {
super(props) super(props)
@@ -90,20 +103,22 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => (<QueryTableActions> render: (text, record) => (
<Auth auth="sysDict:edit"> <QueryTableActions>
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <Auth auth="sysDict:edit">
</Auth> <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
<Auth auth="sysDict:delete"> </Auth>
<Popconfirm <Auth auth="sysDict:delete">
placement="topRight" <Popconfirm
title="是否确认删除" placement="topRight"
onConfirm={() => this.onDelete(record)} title="是否确认删除"
> onConfirm={() => this.onDelete(record)}
<a>删除</a> >
</Popconfirm> <a>删除</a>
</Auth> </Popconfirm>
</QueryTableActions>) </Auth>
</QueryTableActions>
),
}) })
} }
} }
@@ -112,9 +127,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -127,26 +142,28 @@ export default class index extends Component {
componentDidMount() { componentDidMount() {
this.table.current.onLoading() this.table.current.onLoading()
getDictData('common_status').then(res => { getDictData('common_status').then(res => {
this.setState({ this.setState(
codes: res {
}, () => { codes: res,
this.table.current.onLoadData() },
}) () => {
this.table.current.onLoadData()
}
)
}) })
} }
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
query = { query = {
...query, ...query,
pid: this.selectId pid: this.selectId,
} }
const { data } = await apiAction.page({ const { data } = await apiAction.page({
@@ -157,10 +174,10 @@ export default class index extends Component {
} }
/** /**
* 调用树结构数据接口 * 调用树结构数据接口
* [异步,必要] * [异步,必要]
* @returns * @returns
*/ */
loadTreeData = async () => { loadTreeData = async () => {
const { data } = await apiAction.tree() const { data } = await apiAction.tree()
return data return data
@@ -169,7 +186,7 @@ export default class index extends Component {
/** /**
* 树节点选中事件 * 树节点选中事件
* [必要] * [必要]
* @param {*} id * @param {*} id
*/ */
onSelectTree(id) { onSelectTree(id) {
this.selectId = id this.selectId = id
@@ -178,15 +195,15 @@ export default class index extends Component {
/** /**
* 绑定字典数据 * 绑定字典数据
* @param {*} code * @param {*} code
* @param {*} name * @param {*} name
* @returns * @returns
*/ */
bindCodeValue(code, name) { bindCodeValue(code, name) {
name = toCamelCase(name) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find((p) => p.code == code) const c = codes.find(p => p.code == code)
if (c) { if (c) {
return c.value return c.value
} }
@@ -196,21 +213,21 @@ export default class index extends Component {
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record) { onOpen(modal, record) {
modal.current.open({ modal.current.open({
pid: this.selectId, pid: this.selectId,
record record,
}) })
} }
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage) { async onAction(action, successMessage) {
this.table.current.onLoading() this.table.current.onLoading()
@@ -225,13 +242,10 @@ export default class index extends Component {
/** /**
* 删除 * 删除
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
apiAction.delete(record),
'删除成功'
)
} }
//#region 自定义方法 //#region 自定义方法
@@ -242,7 +256,7 @@ export default class index extends Component {
<QueryTreeLayout <QueryTreeLayout
loadData={this.loadTreeData} loadData={this.loadTreeData}
defaultExpanded={true} defaultExpanded={true}
onSelect={(key) => this.onSelectTree(key)} onSelect={key => this.onSelectTree(key)}
> >
<Container mode="fluid"> <Container mode="fluid">
<Card bordered={false}> <Card bordered={false}>
@@ -252,7 +266,7 @@ export default class index extends Component {
loadData={this.loadData} loadData={this.loadData}
columns={this.columns} columns={this.columns}
queryInitialValues={{ queryInitialValues={{
type: 2 type: 2,
}} }}
query={ query={
<Auth auth="sysDict:page"> <Auth auth="sysDict:page">
@@ -275,12 +289,14 @@ export default class index extends Component {
<Button <Button
icon={<AntIcon type="plus" />} icon={<AntIcon type="plus" />}
onClick={() => this.onOpen(this.addForm)} onClick={() => this.onOpen(this.addForm)}
>新增{name}</Button> >
新增{name}
</Button>
</Auth> </Auth>
} }
expandable={{ expandable={{
expandedRowRender: record => <DictData type={record} />, expandedRowRender: record => <DictData type={record} />,
rowExpandable: record => !!record.code rowExpandable: record => !!record.code,
}} }}
/> />
</Card> </Card>

8
web-react/src/pages/system/log/oplog/index.jsx
View File

@@ -232,13 +232,7 @@ export default class index extends Component {
} }
expandable={{ expandable={{
expandedRowRender: record => ( expandedRowRender: record => (
<Descriptions <Descriptions bordered size="small" labelStyle={{ width: '150px' }}>
bordered
size="small"
style={{ maxWidth: '100%' }}
labelStyle={{ width: '150px' }}
contentStyle={{ wordBreak: 'break-all' }}
>
<Descriptions.Item span="1" label="方法名称"> <Descriptions.Item span="1" label="方法名称">
{record.methodName} {record.methodName}
</Descriptions.Item> </Descriptions.Item>

157
web-react/src/pages/system/log/vislog/index.jsx
View File

@@ -1,5 +1,16 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Alert, Button, Card, Descriptions, Form, Popconfirm, Input, message as Message, Select, DatePicker } from 'antd' import {
Alert,
Button,
Card,
Descriptions,
Form,
Popconfirm,
Input,
message as Message,
Select,
DatePicker,
} from 'antd'
import { Auth, Container, QueryTable } from 'components' import { Auth, Container, QueryTable } from 'components'
import { api } from 'common/api' import { api } from 'common/api'
import { toCamelCase } from 'util/format' import { toCamelCase } from 'util/format'
@@ -7,17 +18,17 @@ import { isEqual } from 'lodash'
import getDictData from 'util/dic' import getDictData from 'util/dic'
import moment from 'moment' import moment from 'moment'
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker
const apiAction = { const apiAction = {
page: api.sysVisLogPage, page: api.sysVisLogPage,
delete: api.sysVisLogDelete delete: api.sysVisLogDelete,
} }
export default class index extends Component { export default class index extends Component {
state = { state = {
codes: { codes: {
visType: [] visType: [],
} },
} }
// 表格实例 // 表格实例
table = React.createRef() table = React.createRef()
@@ -26,38 +37,54 @@ export default class index extends Component {
{ {
title: '日志名称', title: '日志名称',
dataIndex: 'name', dataIndex: 'name',
width: 200,
sorter: true, sorter: true,
}, },
{ {
title: '访问类型', title: '访问类型',
dataIndex: 'visType', dataIndex: 'visType',
render: text => (<>{this.bindCodeValue(text, 'vis_type')}</>), width: 120,
render: text => <>{this.bindCodeValue(text, 'vis_type')}</>,
sorter: true, sorter: true,
}, },
{ {
title: '是否成功', title: '是否成功',
dataIndex: 'success', dataIndex: 'success',
render: text => (<> {text ? '是' : '否'}</>), width: 120,
render: text => (
<>
{text ? (
<span className="text-success">是</span>
) : (
<span className="text-error">否</span>
)}
</>
),
sorter: true, sorter: true,
}, },
{ {
title: 'ip', title: 'ip',
dataIndex: 'ip', dataIndex: 'ip',
width: 180,
sorter: true, sorter: true,
}, },
{ {
title: '浏览器', title: '浏览器',
dataIndex: 'browser', dataIndex: 'browser',
width: 180,
sorter: true, sorter: true,
}, },
{ {
title: '访问时间', title: '访问时间',
dataIndex: 'visTime', dataIndex: 'visTime',
width: 180,
sorter: true, sorter: true,
defaultSortOrder: 'descend',
}, },
{ {
title: '访问人', title: '访问人',
dataIndex: 'account', dataIndex: 'account',
width: 180,
sorter: true, sorter: true,
}, },
] ]
@@ -66,9 +93,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -81,26 +108,29 @@ export default class index extends Component {
componentDidMount() { componentDidMount() {
this.table.current.onLoading() this.table.current.onLoading()
getDictData('vis_type').then(res => { getDictData('vis_type').then(res => {
this.setState({ this.setState(
codes: res {
}, () => { codes: res,
this.table.current.onLoadData() },
}) () => {
this.table.current.onLoadData()
}
)
}) })
} }
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
if (query.dates && query.dates.length) { if (query.dates && query.dates.length) {
query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss'); query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss')
query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss'); query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss')
delete query.dates; delete query.dates
} }
const { data } = await apiAction.page({ const { data } = await apiAction.page({
...params, ...params,
@@ -109,16 +139,16 @@ export default class index extends Component {
return data return data
} }
/** /**
* 绑定字典数据 * 绑定字典数据
* @param {*} code * @param {*} code
* @param {*} name * @param {*} name
* @returns * @returns
*/ */
bindCodeValue(code, name) { bindCodeValue(code, name) {
name = toCamelCase(name) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find((p) => +p.code === code) const c = codes.find(p => +p.code === code)
if (c) { if (c) {
return c.value return c.value
} }
@@ -129,8 +159,8 @@ export default class index extends Component {
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage) { async onAction(action, successMessage) {
this.table.current.onLoading() this.table.current.onLoading()
@@ -144,17 +174,18 @@ export default class index extends Component {
} }
onVisLogClear() { onVisLogClear() {
this.onAction( this.onAction(apiAction.delete(), '清空成功')
apiAction.delete(),
'清空成功'
)
} }
render() { render() {
return ( return (
<Container mode="fluid"> <Container mode="fluid">
<br /> <br />
<Alert closable type="error" message="页面刷新的时候也会有保存登录日志，但是没有ip显示" /> <Alert
closable
type="error"
message="页面刷新的时候也会有保存登录日志，但是没有ip显示"
/>
<br /> <br />
<Card bordered={false}> <Card bordered={false}>
<QueryTable <QueryTable
@@ -168,43 +199,37 @@ export default class index extends Component {
<Input autoComplete="off" placeholder="请输入日志名称" /> <Input autoComplete="off" placeholder="请输入日志名称" />
</Form.Item> </Form.Item>
<Form.Item label="访问类型" name="visType"> <Form.Item label="访问类型" name="visType">
<Select placeholder="请选择访问类型" <Select
placeholder="请选择访问类型"
allow-clear allow-clear
style={{ width: '170px' }} style={{ width: '170px' }}
> >
{ {this.state.codes.visType.map(item => {
this.state.codes.visType.map(item => { return (
return <Select.Option <Select.Option key={item.code} value={+item.code}>
key={item.code} {item.value}
value={+item.code} </Select.Option>
>{item.value}</Select.Option> )
}) })}
}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="是否成功" name="success"> <Form.Item label="是否成功" name="success">
<Select placeholder="请选择是否成功" style={{ width: '170px' }}> <Select placeholder="请选择是否成功" style={{ width: '170px' }}>
<Select.Option <Select.Option key="true">是</Select.Option>
key='true' <Select.Option key="false">否</Select.Option>
>
是</Select.Option>
<Select.Option
key='false'
>
否</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="访问时间" name="dates"> <Form.Item label="访问时间" name="dates">
<RangePicker <RangePicker
showTime={ showTime={{
{ hideDisabledOptions: true,
hideDisabledOptions: true, defaultValue: [
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] moment('00:00:00', 'HH:mm:ss'),
} moment('23:59:59', 'HH:mm:ss'),
} ],
}}
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
> ></RangePicker>
</RangePicker>
</Form.Item> </Form.Item>
</Auth> </Auth>
} }
@@ -220,16 +245,22 @@ export default class index extends Component {
</Auth> </Auth>
} }
expandable={{ expandable={{
expandedRowRender: record => expandedRowRender: record => (
<Descriptions bordered size="small"> <Descriptions
<Descriptions.Item span="3" label="具体消息"> bordered
size="small"
columns={1}
labelStyle={{ width: '150px' }}
>
<Descriptions.Item label="具体消息">
{record.message} {record.message}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
),
}} }}
/> />
</Card> </Card>
</Container> </Container>
) )
} }
} }

120
web-react/src/pages/system/org/index.jsx
View File

@@ -1,6 +1,14 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd' import { Button, Card, Form, Input, message as Message, Popconfirm } from 'antd'
import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions, QueryTreeLayout } from 'components' import {
AntIcon,
Auth,
Container,
ModalForm,
QueryTable,
QueryTableActions,
QueryTreeLayout,
} from 'components'
import { api } from 'common/api' import { api } from 'common/api'
import auth from 'components/authorized/handler' import auth from 'components/authorized/handler'
import { toCamelCase } from 'util/format' import { toCamelCase } from 'util/format'
@@ -13,17 +21,16 @@ const apiAction = {
page: api.getOrgPage, page: api.getOrgPage,
add: api.sysOrgAdd, add: api.sysOrgAdd,
edit: api.sysOrgEdit, edit: api.sysOrgEdit,
delete: api.sysOrgDelete delete: api.sysOrgDelete,
} }
const name = '机构' const name = '机构'
export default class index extends Component { export default class index extends Component {
state = { state = {
codes: { codes: {
orgType: [] orgType: [],
} },
} }
// 树框架实例 // 树框架实例
@@ -44,13 +51,13 @@ export default class index extends Component {
columns = [ columns = [
{ {
title: '机构名称', title: '机构名称',
width: '400px', width: 400,
dataIndex: 'name', dataIndex: 'name',
sorter: true, sorter: true,
}, },
{ {
title: '唯一编码', title: '唯一编码',
width: '200px', width: 200,
dataIndex: 'code', dataIndex: 'code',
sorter: true, sorter: true,
}, },
@@ -58,24 +65,26 @@ export default class index extends Component {
title: '机构类型', title: '机构类型',
dataIndex: 'type', dataIndex: 'type',
sorter: true, sorter: true,
render: text => (<>{this.bindCodeValue(text, 'org_type')}</>) render: text => <>{this.bindCodeValue(text, 'org_type')}</>,
}, },
{ {
title: '排序', title: '排序',
width: '80px', width: 80,
dataIndex: 'sort', dataIndex: 'sort',
sorter: true, sorter: true,
defaultSortOrder: 'ascend',
}, },
{ {
title: '备注', title: '备注',
dataIndex: 'remark', dataIndex: 'remark',
width: 400,
sorter: true, sorter: true,
}, },
] ]
/** /**
* 构造函数,在渲染前动态添加操作字段等 * 构造函数,在渲染前动态添加操作字段等
* @param {*} props * @param {*} props
*/ */
constructor(props) { constructor(props) {
super(props) super(props)
@@ -87,20 +96,22 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => (<QueryTableActions> render: (text, record) => (
<Auth auth="sysOrg:edit"> <QueryTableActions>
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <Auth auth="sysOrg:edit">
</Auth> <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
<Auth auth="sysOrg:delete"> </Auth>
<Popconfirm <Auth auth="sysOrg:delete">
placement="topRight" <Popconfirm
title="是否确认删除" placement="topRight"
onConfirm={() => this.onDelete(record)} title="是否确认删除"
> onConfirm={() => this.onDelete(record)}
<a>删除</a> >
</Popconfirm> <a>删除</a>
</Auth> </Popconfirm>
</QueryTableActions>) </Auth>
</QueryTableActions>
),
}) })
} }
} }
@@ -109,9 +120,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -124,26 +135,28 @@ export default class index extends Component {
componentDidMount() { componentDidMount() {
this.table.current.onLoading() this.table.current.onLoading()
getDictData('org_type').then(res => { getDictData('org_type').then(res => {
this.setState({ this.setState(
codes: res {
}, () => { codes: res,
this.table.current.onLoadData() },
}) () => {
this.table.current.onLoadData()
}
)
}) })
} }
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
query = { query = {
...query, ...query,
pid: this.selectId pid: this.selectId,
} }
const { data } = await apiAction.page({ const { data } = await apiAction.page({
@@ -166,7 +179,7 @@ export default class index extends Component {
/** /**
* 树节点选中事件 * 树节点选中事件
* [必要] * [必要]
* @param {*} id * @param {*} id
*/ */
onSelectTree(id) { onSelectTree(id) {
this.selectId = id this.selectId = id
@@ -175,15 +188,15 @@ export default class index extends Component {
/** /**
* 绑定字典数据 * 绑定字典数据
* @param {*} code * @param {*} code
* @param {*} name * @param {*} name
* @returns * @returns
*/ */
bindCodeValue(code, name) { bindCodeValue(code, name) {
name = toCamelCase(name) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find((p) => p.code === code) const c = codes.find(p => p.code == code)
if (c) { if (c) {
return c.value return c.value
} }
@@ -193,21 +206,21 @@ export default class index extends Component {
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record) { onOpen(modal, record) {
modal.current.open({ modal.current.open({
orgId: this.selectId, orgId: this.selectId,
record record,
}) })
} }
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage) { async onAction(action, successMessage) {
this.table.current.onLoading() this.table.current.onLoading()
@@ -227,13 +240,10 @@ export default class index extends Component {
/** /**
* 删除 * 删除
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
apiAction.delete(record),
'删除成功'
)
} }
//#region 自定义方法 //#region 自定义方法
@@ -245,7 +255,7 @@ export default class index extends Component {
ref={this.treeLayout} ref={this.treeLayout}
loadData={this.loadTreeData} loadData={this.loadTreeData}
defaultExpanded={true} defaultExpanded={true}
onSelect={(key) => this.onSelectTree(key)} onSelect={key => this.onSelectTree(key)}
> >
<Container mode="fluid"> <Container mode="fluid">
<Card bordered={false}> <Card bordered={false}>
@@ -265,7 +275,9 @@ export default class index extends Component {
<Button <Button
icon={<AntIcon type="plus" />} icon={<AntIcon type="plus" />}
onClick={() => this.onOpen(this.addForm)} onClick={() => this.onOpen(this.addForm)}
>新增{name}</Button> >
新增{name}
</Button>
} }
/> />
</Card> </Card>

90
web-react/src/pages/system/pos/index.jsx
View File

@@ -2,24 +2,22 @@ import React, { Component } from 'react'
import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd' import { Button, Card, Form, Input, Popconfirm, message as Message } from 'antd'
import { isEqual } from 'lodash' import { isEqual } from 'lodash'
import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components' import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
import { api } from "common/api" import { api } from 'common/api'
import auth from 'components/authorized/handler' import auth from 'components/authorized/handler'
import FormBody from './form' import FormBody from './form'
// 配置页面所需接口函数 // 配置页面所需接口函数
const apiAction = { const apiAction = {
page: api.sysPosPage, page: api.sysPosPage,
add: api.sysPosAdd, add: api.sysPosAdd,
edit: api.sysPosEdit, edit: api.sysPosEdit,
delete: api.sysPosDelete delete: api.sysPosDelete,
} }
// 用于弹窗标题 // 用于弹窗标题
const name = '职位' const name = '职位'
export default class index extends Component { export default class index extends Component {
// 表格实例 // 表格实例
table = React.createRef() table = React.createRef()
@@ -32,29 +30,34 @@ export default class index extends Component {
{ {
title: '职位名称', title: '职位名称',
dataIndex: 'name', dataIndex: 'name',
width: 400,
sorter: true, sorter: true,
}, },
{ {
title: '唯一编码', title: '唯一编码',
dataIndex: 'code', dataIndex: 'code',
width: 400,
sorter: true, sorter: true,
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sort', dataIndex: 'sort',
width: 80,
sorter: true, sorter: true,
defaultSortOrder: 'ascend',
}, },
{ {
title: '备注', title: '备注',
dataIndex: 'remark', dataIndex: 'remark',
width: 400,
sorter: true, sorter: true,
}, },
] ]
/** /**
* 构造函数,在渲染前动态添加操作字段等 * 构造函数,在渲染前动态添加操作字段等
* @param {*} props * @param {*} props
*/ */
constructor(props) { constructor(props) {
super(props) super(props)
@@ -65,20 +68,22 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => (<QueryTableActions> render: (text, record) => (
<Auth auth="sysApp:edit"> <QueryTableActions>
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <Auth auth="sysApp:edit">
</Auth> <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
<Auth auth="sysApp:delete"> </Auth>
<Popconfirm <Auth auth="sysApp:delete">
placement="topRight" <Popconfirm
title="是否确认删除" placement="topRight"
onConfirm={() => this.onDelete(record)} title="是否确认删除"
> onConfirm={() => this.onDelete(record)}
<a>删除</a> >
</Popconfirm> <a>删除</a>
</Auth> </Popconfirm>
</QueryTableActions>) </Auth>
</QueryTableActions>
),
}) })
} }
} }
@@ -87,9 +92,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -98,9 +103,9 @@ export default class index extends Component {
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
const { data } = await apiAction.page({ const { data } = await apiAction.page({
@@ -111,21 +116,21 @@ export default class index extends Component {
} }
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record) { onOpen(modal, record) {
modal.current.open({ modal.current.open({
record record,
}) })
} }
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage) { async onAction(action, successMessage) {
this.table.current.onLoading() this.table.current.onLoading()
@@ -140,13 +145,10 @@ export default class index extends Component {
/** /**
* 删除 * 删除
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
apiAction.delete(record),
'删除成功'
)
} }
render() { render() {
@@ -172,11 +174,11 @@ export default class index extends Component {
<Button <Button
icon={<AntIcon type="plus" />} icon={<AntIcon type="plus" />}
onClick={() => this.onOpen(this.addForm)} onClick={() => this.onOpen(this.addForm)}
>新增{name}</Button> >
新增{name}
</Button>
} }
> ></QueryTable>
</QueryTable>
</Card> </Card>
<ModalForm <ModalForm
title={`新增${name}`} title={`新增${name}`}
@@ -198,4 +200,4 @@ export default class index extends Component {
</Container> </Container>
) )
} }
} }

134
web-react/src/pages/system/role/index.jsx
View File

@@ -16,14 +16,13 @@ const apiAction = {
delete: api.sysRoleDelete, delete: api.sysRoleDelete,
grantMenu: api.sysRoleGrantMenu, grantMenu: api.sysRoleGrantMenu,
grantData: api.sysRoleGrantData grantData: api.sysRoleGrantData,
} }
// 用于弹窗标题 // 用于弹窗标题
const name = '角色' const name = '角色'
export default class index extends Component { export default class index extends Component {
// 表格实例 // 表格实例
table = React.createRef() table = React.createRef()
@@ -39,23 +38,27 @@ export default class index extends Component {
{ {
title: '角色名', title: '角色名',
dataIndex: 'name', dataIndex: 'name',
width: 400,
sorter: true, sorter: true,
}, },
{ {
title: '唯一编码', title: '唯一编码',
dataIndex: 'code', dataIndex: 'code',
width: 400,
sorter: true, sorter: true,
}, },
{ {
title: '排序', title: '排序',
dataIndex: 'sort', dataIndex: 'sort',
width: 80,
sorter: true, sorter: true,
} defaultSortOrder: 'ascend',
},
] ]
/** /**
* 构造函数,在渲染前动态添加操作字段等 * 构造函数,在渲染前动态添加操作字段等
* @param {*} props * @param {*} props
*/ */
constructor(props) { constructor(props) {
super(props) super(props)
@@ -67,44 +70,58 @@ export default class index extends Component {
title: '操作', title: '操作',
width: 150, width: 150,
dataIndex: 'actions', dataIndex: 'actions',
render: (text, record) => (<QueryTableActions> render: (text, record) => (
<Auth auth="sysRole:edit"> <QueryTableActions>
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a> <Auth auth="sysRole:edit">
</Auth> <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
<Auth auth="sysRole:delete"> </Auth>
<Popconfirm <Auth auth="sysRole:delete">
placement="topRight" <Popconfirm
title="是否确认删除" placement="topRight"
onConfirm={() => this.onDelete(record)} title="是否确认删除"
> onConfirm={() => this.onDelete(record)}
<a>删除</a> >
</Popconfirm> <a>删除</a>
</Auth> </Popconfirm>
<Auth auth={{ sysRole: [['grantMenu'], ['grantData']] }}> </Auth>
<Dropdown <Auth auth={{ sysRole: [['grantMenu'], ['grantData']] }}>
placement="bottomRight" <Dropdown
overlay={ placement="bottomRight"
<Menu> overlay={
<Auth auth="sysRole:grantMenu"> <Menu>
<Menu.Item> <Auth auth="sysRole:grantMenu">
<a onClick={() => this.onOpen(this.menuForm, record)}>授权菜单</a> <Menu.Item>
</Menu.Item> <a
</Auth> onClick={() =>
<Auth auth="sysRole:grantData"> this.onOpen(this.menuForm, record)
<Menu.Item> }
<a onClick={() => this.onOpen(this.dataForm, record)}>授权数据</a> >
</Menu.Item> 授权菜单
</Auth> </a>
</Menu> </Menu.Item>
} </Auth>
> <Auth auth="sysRole:grantData">
<a className="ant-dropdown-link"> <Menu.Item>
授权 <a
<AntIcon type="down" /> onClick={() =>
</a> this.onOpen(this.dataForm, record)
</Dropdown> }
</Auth> >
</QueryTableActions>) 授权数据
</a>
</Menu.Item>
</Auth>
</Menu>
}
>
<a className="ant-dropdown-link">
授权
<AntIcon type="down" />
</a>
</Dropdown>
</Auth>
</QueryTableActions>
),
}) })
} }
} }
@@ -113,9 +130,9 @@ export default class index extends Component {
* 阻止外部组件引发的渲染,提升性能 * 阻止外部组件引发的渲染,提升性能
* 可自行添加渲染条件 * 可自行添加渲染条件
* [必要] * [必要]
* @param {*} props * @param {*} props
* @param {*} state * @param {*} state
* @returns * @returns
*/ */
shouldComponentUpdate(props, state) { shouldComponentUpdate(props, state) {
return !isEqual(this.state, state) return !isEqual(this.state, state)
@@ -124,9 +141,9 @@ export default class index extends Component {
/** /**
* 调用加载数据接口,可在调用前对query进行处理 * 调用加载数据接口,可在调用前对query进行处理
* [异步,必要] * [异步,必要]
* @param {*} params * @param {*} params
* @param {*} query * @param {*} query
* @returns * @returns
*/ */
loadData = async (params, query) => { loadData = async (params, query) => {
const { data } = await apiAction.page({ const { data } = await apiAction.page({
@@ -138,20 +155,20 @@ export default class index extends Component {
/** /**
* 打开新增/编辑弹窗 * 打开新增/编辑弹窗
* @param {*} modal * @param {*} modal
* @param {*} record * @param {*} record
*/ */
onOpen(modal, record) { onOpen(modal, record) {
modal.current.open({ modal.current.open({
record record,
}) })
} }
/** /**
* 对表格上的操作进行统一处理 * 对表格上的操作进行统一处理
* [异步] * [异步]
* @param {*} action * @param {*} action
* @param {*} successMessage * @param {*} successMessage
*/ */
async onAction(action, successMessage) { async onAction(action, successMessage) {
this.table.current.onLoading() this.table.current.onLoading()
@@ -166,13 +183,10 @@ export default class index extends Component {
/** /**
* 删除 * 删除
* @param {*} record * @param {*} record
*/ */
onDelete(record) { onDelete(record) {
this.onAction( this.onAction(apiAction.delete(record), '删除成功')
apiAction.delete(record),
'删除成功'
)
} }
//#region 自定义方法 //#region 自定义方法
@@ -202,7 +216,9 @@ export default class index extends Component {
<Button <Button
icon={<AntIcon type="plus" />} icon={<AntIcon type="plus" />}
onClick={() => this.onOpen(this.addForm)} onClick={() => this.onOpen(this.addForm)}
>新增{name}</Button> >
新增{name}
</Button>
</Auth> </Auth>
} }
/> />

14
web-react/src/views/main/_layout/sider/index.jsx
View File

@@ -9,8 +9,7 @@ Swiper.use([Mousewheel, Scrollbar])
const { getState, subscribe } = store const { getState, subscribe } = store
let timer, let timer, swiper
swiper
const siderSwiperOptions = { const siderSwiperOptions = {
direction: 'vertical', direction: 'vertical',
@@ -31,17 +30,15 @@ const UpdateSwiper = () => {
}, 300) }, 300)
} }
export default class index extends Component { export default class index extends Component {
state = { state = {
...getState('layout') ...getState('layout'),
} }
constructor(props) { constructor(props) {
super(props) super(props)
this.unsubscribe = subscribe('layout', (state) => { this.unsubscribe = subscribe('layout', state => {
this.setState(state) this.setState(state)
}) })
} }
@@ -78,7 +75,10 @@ export default class index extends Component {
<div className="swiper-container" id="layout--swiper-container"> <div className="swiper-container" id="layout--swiper-container">
<div className="swiper-wrapper"> <div className="swiper-wrapper">
<div className="swiper-slide"> <div className="swiper-slide">
<Menu parent={this} menuStyle={{ height: '100%', borderRight: 0 }} /> <Menu
parent={this}
menuStyle={{ height: '100%', borderRight: 0 }}
/>
</div> </div>
</div> </div>
<div className="swiper-scrollbar" id="layout--swiper-scrollbar"></div> <div className="swiper-scrollbar" id="layout--swiper-scrollbar"></div>