master_basic
鲁誉程 1 year ago
parent 7a160c80de
commit c6884494e0

@ -10,7 +10,7 @@
.confirm_btn {
background: linear-gradient(180deg, #87CDEE 0%, #69C0E9 34%, #7ECDF2 51%, #56B9E6 63%, #81D7FE 100%);
box-shadow: 0px 1px 4px 0px rgba(189, 204, 224, 0.5);
box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
border-radius: 4px;
border: 1px solid rgba(76, 106, 118, 0.22);
color: #fff;
@ -23,3 +23,11 @@
border: 1px solid rgba(171, 207, 223, 0.22);
color: #65686E;
}
.delete_btn {
background: linear-gradient(180deg, #FFE5C5 0%, #FFE1B4 30%, #FCEED7 52%, #FFDC9B 73%, #F8E7C5 100%);
box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
border-radius: 4px;
border: 1px solid #C2BFB8;
color: #65686E;
}

@ -23,14 +23,9 @@ const ButtonComp: FC<PageProps> = ({
return (
<>
{
type == 'confirm' &&
<div className={`${styles.btn} ${styles.confirm_btn}`} onClick={click}>{text}</div>
}
{
type == 'cancel' &&
<div className={`${styles.btn} ${styles.cancel_btn}`} onClick={onClick}>{text}</div>
}
{ type == 'confirm' && <div className={`${styles.btn} ${styles.confirm_btn}`} onClick={click}>{text}</div> }
{ type == 'cancel' && <div className={`${styles.btn} ${styles.cancel_btn}`} onClick={onClick}>{text}</div> }
{ type == 'delete' && <div className={`${styles.btn} ${styles.delete_btn}`} onClick={onClick}>{text}</div> }
</>
)
}

@ -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

@ -4,12 +4,12 @@ import { ConfigProvider, Form, Input, Table } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
import { tableTheme } from '@/utils/theme';
import { rowClassName } from '@/utils';
// 网络GLQ配置 --> 远程文件配置--> 安全策略
export default function Page() {
const [form] = Form.useForm();
const [tableData, setTableData] = useState([]);
const [total, setTotal] = useState(0);
const onFinish = (values: any) => {
console.log('表单提交:', values);
@ -25,42 +25,20 @@ export default function Page() {
return <span>{index + 1}</span>;
},
}, {
title: '单位名称',
dataIndex: 'name',
key: 'name',
align: 'center',
title: '单位名称', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '设备名称',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '设备名称', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '设备IP',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '设备IP', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '电话号码',
dataIndex: 'name',
key: 'name',
align: 'center',
title: '电话号码', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '设备属性',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '设备属性', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '设备型号',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '设备型号', dataIndex: 'name', key: 'name', align: 'center',
},
]
const rowClassName = (record:any, index: any) => {
return index % 2 === 0 ? 'even-row' : 'odd-row';
};
return (
<div className={styles.params_warp}>
<ContentWarp text={'安全策略配置'}>

@ -5,12 +5,12 @@ import { ConfigProvider, Form, Input, Table } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
import { tableTheme } from '@/utils/theme';
import { rowClassName } from '@/utils';
// 网络GLQ配置 --> 远程文件配置--> 服务列表
export default function Page() {
const [form] = Form.useForm();
const [tableData, setTableData] = useState([]);
const [total, setTotal] = useState(0);
const onFinish = (values: any) => {
console.log('表单提交:', values);
@ -26,27 +26,14 @@ export default function Page() {
return <span>{index + 1}</span>;
},
}, {
title: '服务名称',
dataIndex: 'name',
key: 'name',
align: 'center',
title: '服务名称', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '服务器IP',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '服务器IP', dataIndex: 'name', key: 'name', align: 'center',
}, {
title: '服务端口',
dataIndex: 'age',
key: 'age',
align: 'center',
title: '服务端口', dataIndex: 'name', key: 'name', align: 'center',
},
]
const rowClassName = (record:any, index: any) => {
return index % 2 === 0 ? 'even-row' : 'odd-row';
};
return (
<div className={styles.params_warp}>
<ContentWarp text={'服务列表配置'}>

@ -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="&nbsp;&nbsp;&nbsp;&nbsp;下载授权" 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="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优先级" 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,135 @@
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 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',
}
]
const columns1: 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',
}
]
const [form] = Form.useForm();
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)} />
<div className='mb20' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Radio.Group>
<Radio value="1" style={{ marginRight: 100 }}> </Radio>
<Radio value="2"> </Radio>
</Radio.Group>
<div>xxxxxxx</div>
</div>
<ConfigProvider theme={tableTheme}>
<Table
scroll={{ y: 41 * 9 }}
pagination={false}
bordered
columns={columns}
dataSource={tableData}
rowKey={(record: any) => record?.id}
rowClassName={rowClassName}
/>
</ConfigProvider>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 0' }}>
<ButtonComp text={'添加'} onClick={() => { }} />
</div>
<div className='mb20' style={{ height: 1, background: '#EDEDED' }}></div>
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20' style={{position: 'relative'}}>
<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>
<div style={{position: 'absolute', right: 0, bottom: '20px'}}>
<ButtonComp text={'查询'} onClick={() => { }} />
</div>
</Form>
<ConfigProvider theme={tableTheme}>
<Table
scroll={{ y: 41 * 9 }}
pagination={false}
bordered
columns={columns1}
dataSource={tableData}
rowKey={(record: any) => record?.id}
rowClassName={rowClassName}
/>
</ConfigProvider>
<div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20}}>
<ButtonComp type={'cancel'} text={'移出'} onClick={() => form.submit()} />
<div className='mr20'></div>
<ButtonComp type={'cancel'} text={'制作'} onClick={() => form.submit()} />
<div className='mr20'></div>
<ButtonComp type={'cancel'} text={'预览'} onClick={() => form.submit()} />
<div className='mr20'></div>
<ButtonComp type={'cancel'} text={'打印'} onClick={() => form.submit()} />
</div>
</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>
);
}

@ -12,3 +12,7 @@
.ant-table-content >table >tbody>tr>td {
border-color: #D8D8D8 !important;
}
.ant-table {
box-shadow: 1px 4px 0px 0px #E3E8ED;
}

@ -22,6 +22,10 @@
margin-bottom: 20px;
}
.mb10 {
margin-bottom: 10px;
}
.line {
width: 100%;
height: 1px;

@ -0,0 +1,3 @@
export const rowClassName = (record:any, index: any) => {
return index % 2 === 0 ? 'even-row' : 'odd-row';
};
Loading…
Cancel
Save