master_basic
parent
36d2b3cf84
commit
890c8a910e
@ -1,9 +1,101 @@
|
||||
import styles from './index.less';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, DatePicker, Radio, Select, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
|
||||
const columns: any = [
|
||||
{ title: '产品名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品编号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '装配情况', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
const columns1: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
},
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '000标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品编号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '使用期/备用区', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '分发状态', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '安装方式', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '启用日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '套号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '载体类型', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<ButtonComp type={'special'} text={'用户密钥装配'} onClick={() => { }} />
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<Radio.Group>
|
||||
<Radio value="1" style={{ marginRight: 100 }}> 申请新密钥体 </Radio>
|
||||
<Radio value="2"> 申请旧密钥体 </Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<div className='mr16'>密钥类型</div>
|
||||
<Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16'>所属网络</div>
|
||||
<Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16'>启用日期</div>
|
||||
<DatePicker style={{width: 260}} />
|
||||
</div>
|
||||
|
||||
<div className='mb10'>可装配的密钥体列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 5 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='flex_jE mt20'>
|
||||
<ButtonComp text={'装配'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='mb10 mt30'>管理密钥装配列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 5 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns1}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='flex_jE mt20'>
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,66 @@
|
||||
import styles from './index.less';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Select, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
},
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '000标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '密钥种类名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '安装方式', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '载体类型', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '是否下载到邮箱', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<ButtonComp type={'special'} text={'专用密钥装配'} onClick={() => { }} />
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<div className='mr16'>密钥类型</div>
|
||||
<Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16'>管理代理</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</div>
|
||||
|
||||
<div className='mt30 mb30'>专用密钥装配列表</div>
|
||||
|
||||
<div className='mb10'>用户密钥装配列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 8 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='flex_jE mt20'>
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,102 @@
|
||||
import styles from './index.less';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, DatePicker, Select, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
|
||||
const columns: any = [
|
||||
{ title: '产品名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品编号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '装配情况', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
const columns1: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
},
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '000标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '产品编号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '安装方式', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '分发状态', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '启用日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '终止日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '密钥套号', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '载体类型', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<ButtonComp type={'special'} text={'用户密钥装配'} onClick={() => { }} />
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<div className='mr16'>密钥类型</div>
|
||||
<Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16'>所属网络</div>
|
||||
<Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16'>启用日期</div>
|
||||
<DatePicker style={{width: 260, marginRight: 20 }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<div className='mr16'>终止日期</div>
|
||||
<DatePicker style={{width: 260, marginRight: 20 }} />
|
||||
|
||||
<div className='mr16'>应用系统</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</div>
|
||||
|
||||
<div className='mb10'>可装配的密钥体列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 5 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='flex_jE mt20'>
|
||||
<ButtonComp text={'装配'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='mb10 mt30'>用户密钥装配列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 5 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns1}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='flex_jE mt20'>
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
|
||||
<ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,18 +1,51 @@
|
||||
// 表单样式
|
||||
.ant-form-item .ant-form-item-label>label::after {
|
||||
content: "";
|
||||
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 {
|
||||
.ant-table-thead>tr>th,
|
||||
.ant-table-content>table>tbody>tr>td {
|
||||
border-color: #D8D8D8 !important;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
box-shadow: 1px 4px 0px 0px #E3E8ED;
|
||||
}
|
||||
|
||||
|
||||
// 弹窗样式
|
||||
.ant-modal-content {
|
||||
padding: 0px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, #6DCFEA 0%, #3BA1CF 100%);
|
||||
box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
|
||||
border-radius: 6px 6px 0 0 !important;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.ant-modal-close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 20px;
|
||||
}
|
Loading…
Reference in new issue