master_basic
鲁誉程 12 months ago
parent 36d2b3cf84
commit 890c8a910e

@ -35,7 +35,7 @@ export default function Page() {
<Form.Item name="sss" label="文件路径" style={{ width: '80%', marginBottom: 20 }}>
<div style={{ display: 'flex' }}>
<Input style={{ width: 500 }} />
<ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'选择'} onClick={() => { }} />
<ButtonComp style={{ marginLeft: 20 }} type={'cancel'} text={'选择'} onClick={() => { }} />
</div>
</Form.Item>
<Form.Item name="aaa" label="载体位置" style={formItemSty}>

@ -1,12 +1,13 @@
import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Table } from 'antd';
import { ConfigProvider, Modal, 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 [visibility, setVisibility] = useState(false);
const columns: any = [
{
@ -33,10 +34,31 @@ export default function Page() {
{ title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
]
const columns1: any = [
{
title: '序号',
key: 'index',
align: 'center',
width: 80,
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: '310标识', dataIndex: 'name', key: 'name', 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: '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={() => { }} />
<ButtonComp style={{margin: '20px 0 '}} text={'选择设备'} onClick={() => { }} />
<ButtonComp style={{ margin: '20px 0 ' }} text={'选择设备'} onClick={() => setVisibility(true)} />
<ConfigProvider theme={tableTheme}>
<Table
scroll={{ y: 41 * 9 }}
@ -48,6 +70,49 @@ export default function Page() {
rowClassName={rowClassName}
/>
</ConfigProvider>
<Modal
title="选择设备"
open={visibility}
centered
width={1100}
onOk={() => { }}
onCancel={() => setVisibility(false)}
footer={null}>
<div className='flex_aC mb20 pt10'>
<div className='mr16'></div>
<Select style={{ width: 120, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
<div className='mr16'></div>
<Select style={{ width: 120, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
<div className='mr16'></div>
<Select style={{ width: 120, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
<div className='mr16'></div>
<Select style={{ width: 120, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
<ButtonComp text={'查找'} onClick={() => { }} />
</div>
<ConfigProvider theme={tableTheme}>
<Table
scroll={{ y: 41 * 8 }}
pagination={false}
bordered
columns={columns1}
dataSource={[{}, {}, {}, {}, {}, {}, {}, {}, {}]}
rowKey={(record: any) => record?.id}
rowClassName={rowClassName}
/>
</ConfigProvider>
<div className='flex_jE mt20'>
<ButtonComp style={{marginRight: 20}} text={'确定'} onClick={() => { }} />
<ButtonComp type='cancel' text={'取消'} onClick={() => { }} />
</div>
</Modal>
</div>
);
}

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

@ -22,6 +22,14 @@
margin-bottom: 20px;
}
.pt10 {
padding-top: 10px;
}
.mt10 {
margin-top: 10px;
}
.mb10 {
margin-bottom: 10px;
}
@ -34,6 +42,15 @@
margin-left: 16px;
}
.mt30 {
margin-top: 30px;
}
.mb30 {
margin-bottom: 30px;
}
.line {
width: 100%;
height: 1px;
@ -51,6 +68,7 @@
.flex_aC {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.flex_jE {

Loading…
Cancel
Save