master_basic
parent
974041b860
commit
451803b302
@ -1,9 +1,86 @@
|
|||||||
import styles from './index.less';
|
import ContentWarp from '@/components/ContentWarp';
|
||||||
|
import styles from '../../index.less';
|
||||||
|
import { Form, Input, Select } from 'antd';
|
||||||
|
import ButtonComp from '@/components/ButtonComp';
|
||||||
|
|
||||||
|
// 网络GLQ配置 --> 远程文件配置--> 管理配置
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
console.log('表单提交:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.params_warp}>
|
||||||
{'网络GLQ配置 --> 远程文件配置--> 管理配置'}
|
<ContentWarp text={'管理文件配置'}>
|
||||||
|
<div className='pd20'>配置隔离器应用程序运行管理参数</div>
|
||||||
|
<div className='line'></div>
|
||||||
|
<div className='pd20 pb100'>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
onFinish={onFinish}
|
||||||
|
labelCol={{ span: 2 }}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name="a3"
|
||||||
|
label="设备位置"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请选择设备位置' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
style={{ width: 560 }}
|
||||||
|
onChange={(e) => {}}
|
||||||
|
options={[]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="a2"
|
||||||
|
label="设备类型"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请选择设备类型' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
style={{ width: 560 }}
|
||||||
|
onChange={(e) => {}}
|
||||||
|
options={[]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="a1"
|
||||||
|
label="存在热备"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请选择存在热备' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
style={{ width: 560 }}
|
||||||
|
onChange={(e) => {}}
|
||||||
|
options={[]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="a5"
|
||||||
|
label="设备标识"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入设备标识' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input style={{ width: '560px' }} />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
<div className={styles.btn_warp}>
|
||||||
|
<div className='mr20'>
|
||||||
|
<ButtonComp text={'文件提交'} onClick={() => form.submit()} />
|
||||||
|
</div>
|
||||||
|
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ContentWarp>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,9 +1,65 @@
|
|||||||
import styles from './index.less';
|
import ContentWarp from '@/components/ContentWarp';
|
||||||
|
import styles from '../../index.less';
|
||||||
|
import { Form, Input } from 'antd';
|
||||||
|
import ButtonComp from '@/components/ButtonComp';
|
||||||
|
|
||||||
|
// 网络GLQ配置 --> 远程文件配置--> 网络参数
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
console.log('表单提交:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.params_warp}>
|
||||||
{'网络GLQ配置 --> 远程文件配置--> 网络参数'}
|
<ContentWarp text={'网络参数配置'}>
|
||||||
|
<div className='pd20'>配置隔离器网络运行参数</div>
|
||||||
|
<div className='line'></div>
|
||||||
|
<div className='pd20 pb100'>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
onFinish={onFinish}
|
||||||
|
labelCol={{ span: 2 }}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name="a3"
|
||||||
|
label="IP地址"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入IP地址' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input style={{ width: '560px' }} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="a2"
|
||||||
|
label="子网掩码"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入子网掩码' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input style={{ width: '560px' }} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="a1"
|
||||||
|
label="默认网关"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: '请输入默认网关' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input style={{ width: '560px' }} />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
<div className={styles.btn_warp}>
|
||||||
|
<div className='mr20'>
|
||||||
|
<ButtonComp text={'文件提交'} onClick={() => form.submit()} />
|
||||||
|
</div>
|
||||||
|
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ContentWarp>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,97 @@
|
|||||||
import styles from './index.less';
|
|
||||||
|
|
||||||
|
import ContentWarp from '@/components/ContentWarp';
|
||||||
|
import styles from '../../index.less';
|
||||||
|
import { ConfigProvider, Form, Input, Table } from 'antd';
|
||||||
|
import ButtonComp from '@/components/ButtonComp';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { tableTheme } from '@/utils/theme';
|
||||||
|
|
||||||
|
// 网络GLQ配置 --> 远程文件配置--> 服务列表
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [tableData, setTableData] = useState([]);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [limit, setLimit] = useState(10);
|
||||||
|
const [total, setTotal] = useState(0);
|
||||||
|
|
||||||
|
const onFinish = (values: any) => {
|
||||||
|
console.log('表单提交:', values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: any = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
key: 'index',
|
||||||
|
align: 'center',
|
||||||
|
render: (text: any, record: any, index: any) => {
|
||||||
|
return <span>{(page - 1) * limit + index + 1}</span>;
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
title: '服务名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
align: 'center',
|
||||||
|
render: (text: any) => <a>{text}</a>,
|
||||||
|
}, {
|
||||||
|
title: '服务器IP',
|
||||||
|
dataIndex: 'age',
|
||||||
|
key: 'age',
|
||||||
|
align: 'center',
|
||||||
|
}, {
|
||||||
|
title: '服务端口',
|
||||||
|
dataIndex: 'age',
|
||||||
|
key: 'age',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const rowClassName = (record:any, index: any) => {
|
||||||
|
return index % 2 === 0 ? 'even-row' : 'odd-row';
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.params_warp}>
|
||||||
{'网络GLQ配置 --> 远程文件配置--> 服务列表'}
|
<ContentWarp text={'服务列表配置'}>
|
||||||
|
<div className='pd20'>配置隔离器与应用服务器通信参数列表</div>
|
||||||
|
<div className='line'></div>
|
||||||
|
<div className='pd20 pb100'>
|
||||||
|
|
||||||
|
<Form form={form} layout={'inline'} onFinish={onFinish} className='mb20'>
|
||||||
|
<Form.Item name="aaa" label="服务名称" rules={[{ required: true, message: '请输入服务名称' }]} >
|
||||||
|
<Input style={{ width: '280px', marginRight: 24 }} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="bbb" label="服务IP" rules={[{ required: true, message: '请输入服务名称' }]} >
|
||||||
|
<Input style={{ width: '280px' }} />
|
||||||
|
</Form.Item>
|
||||||
|
<div style={{ display: 'flex', marginLeft: 20 }}>
|
||||||
|
<div className='mr20'>
|
||||||
|
<ButtonComp type={'cancel'} text={'端口'} onClick={() => { }} />
|
||||||
|
</div>
|
||||||
|
<ButtonComp text={'提交'} onClick={() => form.submit()} />
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<ConfigProvider theme={tableTheme}>
|
||||||
|
<Table
|
||||||
|
scroll={{y: 451}}
|
||||||
|
pagination={false}
|
||||||
|
bordered
|
||||||
|
columns={columns}
|
||||||
|
dataSource={[{},{},{},{},{}]}
|
||||||
|
rowKey={(record: any) => record?.id}
|
||||||
|
rowClassName={rowClassName}
|
||||||
|
/>
|
||||||
|
</ConfigProvider>
|
||||||
|
|
||||||
|
<div className={styles.btn_warp}>
|
||||||
|
<div className='mr20'>
|
||||||
|
<ButtonComp text={'发送数据'} onClick={() => { }} />
|
||||||
|
</div>
|
||||||
|
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => { }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ContentWarp>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,14 @@
|
|||||||
.ant-form-item .ant-form-item-label >label::after {
|
.ant-form-item .ant-form-item-label>label::after {
|
||||||
content: "";
|
content: "";
|
||||||
margin-inline-end: 10px;
|
margin-inline-end: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-cell {
|
||||||
|
padding: 9px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-container,
|
||||||
|
.ant-table-thead >tr>th,
|
||||||
|
.ant-table-content >table >tbody>tr>td {
|
||||||
|
border-color: #D8D8D8 !important;
|
||||||
}
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
// 表格主题
|
||||||
|
export const tableTheme = {
|
||||||
|
components: {
|
||||||
|
Table: {
|
||||||
|
headerBg: 'linear-gradient(180deg, #FFFFFF 0%, #DEE7EB 100%)',
|
||||||
|
headerBorderRadius: 0,
|
||||||
|
headerColor: '#191919',
|
||||||
|
rowHoverBg: '#e6f4ff'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
Reference in new issue