master_basic
parent
7a160c80de
commit
c6884494e0
@ -0,0 +1,37 @@
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
|
||||
.item_tab,
|
||||
.active_tab {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 50px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active_tab {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item_tab {
|
||||
color: #333;
|
||||
&:hover {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.active_line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #3F9DC8 100%);
|
||||
top: 21px;
|
||||
}
|
||||
}
|
@ -0,0 +1,34 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import styles from './index.less';
|
||||
|
||||
interface PageProps {
|
||||
dataSource: { id: string | number; name: string }[]; // tabs
|
||||
activeTab: number; // 当前选中的tab
|
||||
onChange: (id: any) => void;
|
||||
}
|
||||
|
||||
const TabsComp: FC<PageProps> = ({ dataSource, activeTab, onChange }) => {
|
||||
return (
|
||||
<div className={styles.tabs}>
|
||||
{dataSource.map((item: any, i: number) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`${activeTab == item.id ? styles.active_tab : styles.item_tab}`}
|
||||
onClick={() => {
|
||||
if (item.id == activeTab) return;
|
||||
onChange(item.id);
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'relative' }}>
|
||||
{item.name}
|
||||
<div className={`${activeTab == item.id ? styles.active_line : ''}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabsComp
|
@ -1,9 +1,97 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Form, Radio, 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',
|
||||
}
|
||||
]
|
||||
|
||||
const formItemSty = { width: '32%', marginBottom: 20 };
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<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="33" label="" style={{ width: '100%', marginBottom: 20}}>
|
||||
<Radio.Group>
|
||||
<Radio value="1"> 申请新密钥体 </Radio>
|
||||
<Radio value="2"> 申请旧密钥体 </Radio>
|
||||
</Radio.Group>
|
||||
</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.Item name="aaa" label="申请数量" style={formItemSty}>
|
||||
<Select style={{width: 260}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
|
||||
<ButtonComp text={'申请密钥体'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
|
||||
<div className='mb20'>申请情况列表</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 9 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,67 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, 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 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',
|
||||
}, {
|
||||
title: '导入时间', dataIndex: 'name', key: 'name', align: 'center',
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<TabsComp
|
||||
dataSource={[{ id: 1, name: '已清理密钥体列表' }]}
|
||||
activeTab={activeTab}
|
||||
onChange={(e) => setActiveTab(e)} />
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
|
||||
<ButtonComp type={'cancel'} text={'刷新'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 13 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,41 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, 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 columns: any = [
|
||||
{
|
||||
title: '密钥体大代号', dataIndex: 'name', key: 'name', align: 'center',
|
||||
}, {
|
||||
title: '密钥体子代号', dataIndex: 'name', key: 'name', align: 'center',
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<TabsComp
|
||||
dataSource={[{ id: 1, name: '密钥体代号对照表' }]}
|
||||
activeTab={activeTab}
|
||||
onChange={(e) => setActiveTab(e)} />
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 13 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,107 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, DatePicker, Form, Input, 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>
|
||||
|
||||
<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}>
|
||||
<Input style={{width: 260}} />
|
||||
</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.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}>
|
||||
<DatePicker style={{width: 260}} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,62 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, 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 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',
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<TabsComp
|
||||
dataSource={[{ id: 1, name: '密钥体格式导入和删除' }]}
|
||||
activeTab={activeTab}
|
||||
onChange={(e) => setActiveTab(e)} />
|
||||
|
||||
<div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div>密钥体格式列表</div>
|
||||
<div style={{display: 'flex'}}>
|
||||
<ButtonComp type={'cancel'} text={'密钥体格式导入'} onClick={() => { }} />
|
||||
<div className='mr20'></div>
|
||||
<ButtonComp type={'delete'} text={'删除'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 9 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={[{}, {}, {}, {}, {},{}, {}, {}, {}, {}]}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,96 @@
|
||||
import styles from './index.less';
|
||||
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',
|
||||
}
|
||||
]
|
||||
|
||||
const formItemSty = { width: '32%', marginBottom: 20 };
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<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 style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
|
||||
<ButtonComp type={'cancel'} text={'发布'} onClick={() => { }} />
|
||||
<div className='mr20'></div>
|
||||
<ButtonComp text={'查询'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
|
||||
<div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,98 @@
|
||||
import styles from './index.less';
|
||||
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>
|
||||
|
||||
<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 style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 30 }}>
|
||||
<ButtonComp type={'cancel'} text={'导入'} onClick={() => { }} />
|
||||
<div className='mr20'></div>
|
||||
<ButtonComp text={'查询'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
|
||||
<div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,9 +1,108 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Form, Input, 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: '配发类型', 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',
|
||||
}, {
|
||||
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: '23%', marginBottom: 20 };
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<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: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="产品编号" style={formItemSty}>
|
||||
<Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体类型" style={formItemSty}>
|
||||
<Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体型号" style={formItemSty}>
|
||||
<Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="目的系统" style={formItemSty}>
|
||||
<Select style={{width: 180}} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="配发数量" style={formItemSty}>
|
||||
<Input style={{width: 180}} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="申请编号" style={formItemSty}>
|
||||
<Input style={{width: 180}} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className='mb20' style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div>配发情况列表</div>
|
||||
<ButtonComp type={'cancel'} text={'配发'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ x: 800, y: 41 * 11}}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={[]}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
export const rowClassName = (record:any, index: any) => {
|
||||
return index % 2 === 0 ? 'even-row' : 'odd-row';
|
||||
};
|
Loading…
Reference in new issue