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.
88 lines
3.5 KiB
88 lines
3.5 KiB
import TabsComp from '@/components/TabsComp';
|
|
import styles from '../../../GLQ/index.less';
|
|
import { useState } from 'react';
|
|
import { ConfigProvider, Form, Select, Table } from 'antd';
|
|
import { tableTheme } from '@/utils/theme';
|
|
import { rowClassName } from '@/utils';
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
|
export default function Page() {
|
|
const [activeTab, setActiveTab] = useState(1)
|
|
const [tableData, setTableData] = useState([]);
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
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: '载体类型', 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' }
|
|
]
|
|
|
|
const formItemSty = { width: '32%', marginBottom: 20 };
|
|
|
|
const onFinish = (values: any) => {
|
|
console.log('表单提交:', values);
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.params_warp}`}>
|
|
<TabsComp
|
|
dataSource={[{ id: 1, name: '密钥体导入' }]}
|
|
activeTab={activeTab}
|
|
onChange={(e) => setActiveTab(e)} />
|
|
|
|
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
|
|
<Form.Item name="aaa" label="密钥种类" style={formItemSty}>
|
|
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
</Form.Item>
|
|
<Form.Item name="aaa" label="产品名称" style={formItemSty}>
|
|
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
</Form.Item>
|
|
<Form.Item name="aaa" label="载体类型" style={formItemSty}>
|
|
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
</Form.Item>
|
|
<Form.Item name="aaa" label="载体型号" style={formItemSty}>
|
|
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
</Form.Item>
|
|
<Form.Item name="aaa" label="产品名称" style={formItemSty}>
|
|
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<div className='flex_jE' style={{ marginBottom: 30 }}>
|
|
<ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'导入'} onClick={() => { }} />
|
|
<ButtonComp text={'查询'} onClick={() => form.submit()} />
|
|
</div>
|
|
|
|
<div className='mb20 flex_aC_jS'>
|
|
<div>密钥体列表</div>
|
|
<ButtonComp type={'cancel'} text={'全部'} onClick={() => { }} />
|
|
</div>
|
|
|
|
<ConfigProvider theme={tableTheme}>
|
|
<Table
|
|
scroll={{ y: 41 * 9 }}
|
|
pagination={false}
|
|
bordered
|
|
columns={columns}
|
|
dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
|
|
rowKey={(record: any) => record?.id}
|
|
rowClassName={rowClassName}
|
|
/>
|
|
</ConfigProvider>
|
|
</div>
|
|
);
|
|
} |