yinweiwen
2 years ago
23 changed files with 388 additions and 26 deletions
@ -0,0 +1,48 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function list(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
query: query, |
|||
actionType: 'GET_GATEWAY_LIST', |
|||
url: ApiTable.getGateways, |
|||
msg: { error: '获取网关配置列表失败' }, |
|||
reducer: { name: 'gateways' } |
|||
}) |
|||
} |
|||
|
|||
export function add(data) { |
|||
return dispatch => basicAction({ |
|||
type: 'post', |
|||
dispatch: dispatch, |
|||
data: data, |
|||
actionType: 'POST_GATEWAY_CONFIG', |
|||
url: ApiTable.addGatewayConfig, |
|||
msg: { option: '添加网关配置' } |
|||
}) |
|||
} |
|||
|
|||
export function edit(data, gatewayId) { |
|||
return dispatch => basicAction({ |
|||
type: 'put', |
|||
dispatch: dispatch, |
|||
data: data, |
|||
actionType: 'EDIT_GATEWAY_CONFIG', |
|||
url: `${ApiTable.editGatewayConfig.replace('{gatewayId}', gatewayId)}`, |
|||
msg: { option: '编辑网关配置' } |
|||
}) |
|||
} |
|||
|
|||
export function del(gatewayId) { |
|||
return dispatch => basicAction({ |
|||
type: 'del', |
|||
dispatch: dispatch, |
|||
actionType: 'DEL_GATEWAY_CONFIG', |
|||
url: ApiTable.delGatewayConfig.replace('{gatewayId}', gatewayId), |
|||
msg: { option: '删除网关配置' } |
|||
}) |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as gateway from './gateway' |
|||
|
|||
export default { |
|||
...gateway |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
import React, { useEffect, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Button, Modal, Form, Switch } from 'antd'; |
|||
import ProForm, { ProFormText, ProFormSelect, ProFormDateTimePicker } from '@ant-design/pro-form'; |
|||
import { useState } from 'react'; |
|||
|
|||
const ConfigModal = (props) => { |
|||
const { dispatch, actions, visible, close, editData, types, catalogs } = props |
|||
const formRef = useRef() |
|||
const { gateway } = actions |
|||
|
|||
return <Modal |
|||
title={`${editData ? '编辑' : '新增'}配置`} |
|||
visible={visible} |
|||
onOk={() => { |
|||
formRef.current.validateFields() |
|||
.then(v => { |
|||
dispatch(editData ? gateway.edit(v, editData.id) : gateway.add(v)) |
|||
.then(res => { |
|||
if (res.success) { |
|||
dispatch(gateway.list()) |
|||
close() |
|||
} |
|||
}) |
|||
}) |
|||
}} |
|||
onCancel={() => { |
|||
close() |
|||
}} |
|||
> |
|||
<ProForm |
|||
formRef={formRef} |
|||
autoFocusFirstInput |
|||
labelCol={{ span: 4 }} |
|||
wrapperCol={{ span: 18 }} |
|||
initialValues={ |
|||
editData ? |
|||
editData : |
|||
{ |
|||
excuteTime: '00:00', |
|||
isEnable: true |
|||
} |
|||
} |
|||
submitter={false} |
|||
formKey='config-form' |
|||
> |
|||
<ProFormText |
|||
label="任务名称" |
|||
name={'name'} |
|||
placeholder="请输入名称" |
|||
required |
|||
rules={[{ required: true, message: '请输入名称' }]} |
|||
/> |
|||
<ProFormSelect |
|||
options={catalogs} |
|||
cacheForSwr |
|||
name="catalog" |
|||
label="分类" |
|||
required |
|||
rules={[{ required: true, message: '请选择任务分类' }]} |
|||
/> |
|||
<ProFormSelect |
|||
options={types} |
|||
cacheForSwr |
|||
name="type" |
|||
label="类型" |
|||
required |
|||
rules={[{ required: true, message: '请选择任务类型' }]} |
|||
/> |
|||
<ProFormDateTimePicker |
|||
label="截止日期" |
|||
name="deadlineAt" |
|||
/> |
|||
</ProForm> |
|||
</Modal> |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global, } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(ConfigModal); |
|||
@ -0,0 +1,135 @@ |
|||
import React, { useState,useEffect,useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin,Button, Card, Input } from 'antd'; |
|||
import '../style.less'; |
|||
import { push } from 'react-router-redux' |
|||
import ProTable, { TableDropdown } from '@ant-design/pro-table'; |
|||
|
|||
const GatewayMode = ["tcp", "udp", "mqtt", "http", "dtu"] |
|||
const InMode = GatewayMode |
|||
const OutMode = GatewayMode |
|||
const ProtocolTypes = ["DeviceA", "DeviceB", "DeviceC", "DeviceD"] |
|||
|
|||
|
|||
|
|||
const Gateway = (props) => { |
|||
const { dispatch, actions, user, loading, gateways } = props |
|||
|
|||
const { gateway } = actions; |
|||
const [configModalVis, setConfigModalVis] = useState(false) |
|||
const [editData, setEditData] = useState(null) |
|||
|
|||
|
|||
useEffect(() => { |
|||
// dispatch(task.getTaskList())
|
|||
}, []) |
|||
|
|||
const actionRef = useRef(); |
|||
const columns = [ |
|||
{ |
|||
dataIndex: 'id', |
|||
valueType: 'indexBorder', |
|||
width: 48, |
|||
}, { |
|||
title: '名称', |
|||
dataIndex: 'name', |
|||
ellipsis: true |
|||
}, |
|||
{ |
|||
title: '输入模式', |
|||
dataIndex: 'in_mode', |
|||
filters: true, |
|||
onFilter: true, |
|||
valueType: 'select', |
|||
valueEnum: InMode, |
|||
}, |
|||
{ |
|||
title: '输出模式', |
|||
dataIndex: 'out_mode', |
|||
filters: true, |
|||
onFilter: true, |
|||
valueType: 'select', |
|||
valueEnum: OutMode, |
|||
}, { |
|||
title: '输入配置', |
|||
dataIndex: 'in_config' |
|||
}, { |
|||
title: '输出配置', |
|||
dataIndex: 'out_config' |
|||
}, { |
|||
title: '协议', |
|||
dataIndex: 'protocol', |
|||
valueType: 'select', |
|||
valueEnum: ProtocolTypes |
|||
}, { |
|||
title: '协议信息', |
|||
dataIndex: 'protocol_info' |
|||
}, { |
|||
title: '操作', |
|||
valueType: 'option', |
|||
key: 'option', |
|||
render: (txt, row, _, action) => [ |
|||
<Button type="primary" |
|||
onClick={() => { |
|||
setConfigModalVis(true) |
|||
setEditData({ ...row }) |
|||
}} |
|||
>编辑</Button> |
|||
], |
|||
} |
|||
] |
|||
|
|||
return ( |
|||
<Spin tip="biubiubiu~" spinning={loading}> |
|||
<ProTable |
|||
columns={columns} |
|||
actionRef={actionRef} |
|||
toolbar={{ |
|||
settings: [] |
|||
}} |
|||
search={false} |
|||
dataSource={gateways} |
|||
request={async (params) => { |
|||
const query = { |
|||
limit: params.pageSize, |
|||
offset: params.pageSize * (params.current - 1) |
|||
} |
|||
const res = await dispatch(gateway.list(query)); |
|||
return { |
|||
...res, |
|||
total: res.payload.data ? res.payload.data.count : 0 |
|||
} |
|||
}} |
|||
options={false} |
|||
toolBarRender={() => [ |
|||
<Button type="primary" key="primary" onClick={() => { setConfigModalVis(true) }}> |
|||
添加配置 |
|||
</Button>, |
|||
]} |
|||
> |
|||
</ProTable> |
|||
|
|||
{ |
|||
configModalVis ? |
|||
<ConfigModal |
|||
visible={true} |
|||
close={() => { |
|||
setConfigModalVis(false) |
|||
setEditData(null) |
|||
}} |
|||
editData={editData} |
|||
/> : '' |
|||
} |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Gateway); |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import Gateway from './Gateway'; |
|||
|
|||
export { Gateway }; |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'gateway', |
|||
name: '网关配置', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { SettingOutlined } from '@ant-design/icons'; |
|||
|
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
export function getNavItem(user, dispatch) { |
|||
return ( |
|||
<SubMenu key="gateway" icon={<SettingOutlined />} title={'网关配置'}> |
|||
<Menu.Item key="gateway_profile"> |
|||
<Link to="/gateway_profile/list">配置清单</Link> |
|||
</Menu.Item> |
|||
</SubMenu> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
'use strict'; |
|||
import { Gateway} from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/gateway_profile', |
|||
key: 'gateway', |
|||
breadcrumb: '网关配置', |
|||
component: Gateway |
|||
} |
|||
}]; |
|||
@ -0,0 +1,3 @@ |
|||
#example:hover { |
|||
font-size: larger; |
|||
} |
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
Loading…
Reference in new issue