You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
4.0 KiB
102 lines
4.0 KiB
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 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>
|
|
);
|
|
} |