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

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

@@ -87,6 +87,7 @@ export default class index extends Component {
dataIndex: 'sort',
width: 100,
sorter: true,
defaultSortOrder: 'ascend',
},
]
@@ -107,7 +108,7 @@ export default class index extends Component {
render: (text, record) => (
<QueryTableActions>
<Auth auth="sysApp:edit">
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
<a onClick={() => this.onOpen(this.editForm, record.id)}>编辑</a>
</Auth>
<Auth auth="sysApp:delete">
<Popconfirm
@@ -191,11 +192,11 @@ export default class index extends Component {
/**
* 打开新增/编辑弹窗
* @param {*} modal
* @param {*} record
* @param {*} id
*/
onOpen(modal, record) {
onOpen(modal, id) {
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: '区域类型',
dataIndex: 'levelType',
sorter: true,
width: 50,
width: 100,
render: text => <>{this.bindCodeValue(text, 'areacode_type')}</>,
},
{
@@ -60,14 +60,15 @@ export default class index extends Component {
{
title: '区域编号',
dataIndex: 'code',
width: 80,
width: 100,
sorter: true,
},
{
title: '行政编号',
dataIndex: 'adCode',
width: 80,
width: 100,
sorter: true,
defaultSortOrder: 'ascend',
},
{
title: '描述',

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

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

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

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

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

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

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

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

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

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

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

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