|
|
|
@ -1,14 +1,28 @@
|
|
|
|
|
import styles from '../../../GLQ/index.less';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { ConfigProvider, DatePicker, Modal, Radio, Select, Table } from 'antd';
|
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
import { ConfigProvider, DatePicker, Form, Modal, Pagination, Radio, Select, Table, message } from 'antd';
|
|
|
|
|
|
|
|
|
|
import { rowClassName } from '@/utils';
|
|
|
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import { secretFormatList, secretList } from '@/services/my';
|
|
|
|
|
|
|
|
|
|
export default function Page() {
|
|
|
|
|
const [tableData, setTableData] = useState([]);
|
|
|
|
|
const [tableData1, setTableData1] = useState([]);
|
|
|
|
|
const [visibility, setVisibility] = useState(false);
|
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
const [pageNumber, setPageNumber] = useState(1);
|
|
|
|
|
const [pageSize, setpageSize] = useState(10);
|
|
|
|
|
const [total, setTotal] = useState();
|
|
|
|
|
|
|
|
|
|
const [usageReserveArea, setUsageReserveArea] = useState('1');
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
|
const [allRowKeys, setAllRowKeys] = useState([]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
initForm()
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const columns: any = [
|
|
|
|
|
{ title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
|
|
|
|
@ -23,85 +37,129 @@ export default function Page() {
|
|
|
|
|
return <span>{c + 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: 'deviceName', key: 'deviceName', align: 'center' },
|
|
|
|
|
{ title: '管理实体标识', dataIndex: 'managementFlag', key: 'managementFlag', align: 'center' },
|
|
|
|
|
{ title: '310标识', dataIndex: 'distType', key: 'distType', align: 'center' },
|
|
|
|
|
{ title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
|
|
|
|
|
{ title: '产品编号', dataIndex: 'productNum', key: 'productNum', align: 'center' },
|
|
|
|
|
{ title: '使用期/备用区', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '使用区/备用区', dataIndex: 'usageReserveArea', key: 'usageReserveArea', 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: 'installMethod', key: 'installMethod', align: 'center' },
|
|
|
|
|
{
|
|
|
|
|
title: '启用日期', dataIndex: 'activeDate', key: 'activeDate', align: 'center',
|
|
|
|
|
render: (text: any) => {
|
|
|
|
|
return <span>{text || '--'}</span>;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ title: '套号', dataIndex: 'setNumber', key: 'setNumber', align: 'center' },
|
|
|
|
|
{ title: '载体类型', dataIndex: 'carrierType', key: 'carrierType', align: 'center' },
|
|
|
|
|
{ title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const formItemSty = { width: 'auto', marginBottom: 20, marginRight: 30 };
|
|
|
|
|
|
|
|
|
|
const disabledDate = (current: any) => {
|
|
|
|
|
return current && current < moment().startOf('day');
|
|
|
|
|
};
|
|
|
|
|
const initForm = () => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const disabledTime = (current, type) => {
|
|
|
|
|
if (type === 'start' && current && current.isSame(moment(), 'day')) {
|
|
|
|
|
const currentTime = moment();
|
|
|
|
|
const disabledHours = generateOptions(0, currentTime.hour());
|
|
|
|
|
const disabledMinutes = generateOptions(0, currentTime.minute());
|
|
|
|
|
return {
|
|
|
|
|
disabledHours: () => disabledHours,
|
|
|
|
|
disabledMinutes: () => disabledMinutes,
|
|
|
|
|
const onFinish = () => {
|
|
|
|
|
pageNumber == 1 ? getList() : setPageNumber(1);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
getList();
|
|
|
|
|
setSelectedRowKeys([])
|
|
|
|
|
}, [pageNumber]);
|
|
|
|
|
|
|
|
|
|
// 管理系统管理盘数据维护 -- 列表
|
|
|
|
|
const _secretFormatList = () => {
|
|
|
|
|
let res = false
|
|
|
|
|
secretFormatList({ pageNumber: 1, pageSize: 10 }).then((res) => {
|
|
|
|
|
if (res?.result == "success") {
|
|
|
|
|
if (res.data[0].length > 0) { res = true }
|
|
|
|
|
} else {
|
|
|
|
|
message.error(res?.errorMsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return res
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取密钥体列表
|
|
|
|
|
const getList = () => {
|
|
|
|
|
if (_secretFormatList()) {
|
|
|
|
|
message.info('请先完成管理系统管理盘数据维护--数据导入!')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
secretList({ pageNumber, pageSize }).then((res) => {
|
|
|
|
|
if (res?.result == "success") {
|
|
|
|
|
res.data[0].list = res.data[0].list.filter((val: any) => { return val?.content != 'PMCS' })
|
|
|
|
|
setTotal(res.data[0].total - 1)
|
|
|
|
|
setTableData(res.data[0].list)
|
|
|
|
|
const keys = res.data[0].list.map((item: any) => item?.id);
|
|
|
|
|
setAllRowKeys(keys);
|
|
|
|
|
} else {
|
|
|
|
|
message.error(res?.errorMsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
return {};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const generateOptions = (start, end) => Array.from({ length: end - start }, (_, i) => start + i);
|
|
|
|
|
const pageOnChange = (pageNumber: number) => {
|
|
|
|
|
setPageNumber(pageNumber);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onShowSizeChange = (current: any, pageSize: any) => {
|
|
|
|
|
setpageSize(pageSize);
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const disabledDate = (current: any) => {
|
|
|
|
|
return current && current < moment().startOf('day');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={`${styles.params_warp}`}>
|
|
|
|
|
<ButtonComp type={'special'} text={'管理密钥装配'} onClick={() => { }} />
|
|
|
|
|
|
|
|
|
|
<div className='flex_aiC mt20 mb20'>
|
|
|
|
|
<Radio.Group>
|
|
|
|
|
<Radio value="1" style={{ marginRight: 50 }}> 使用区密钥状态 </Radio>
|
|
|
|
|
<Radio.Group value={usageReserveArea}>
|
|
|
|
|
<Radio value="1" style={{ marginRight: 30 }}> 使用区密钥状态 </Radio>
|
|
|
|
|
<Radio value="2"> 备用区密钥装配 </Radio>
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='flex_aiC mt20 mb20'>
|
|
|
|
|
<div className='mr16'>密钥类型</div>
|
|
|
|
|
<Select style={{ width: 260, marginRight: 20 }} placeholder={'请选择密钥类型'}
|
|
|
|
|
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
|
|
|
|
|
<Form.Item name="keyType" label="密钥类型" style={formItemSty}>
|
|
|
|
|
<Select style={{ width: 260, marginRight: 16 }} placeholder={'请选择密钥类型'}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: '密钥-111', value: '密钥-111'},
|
|
|
|
|
{ label: '密钥-222', value: '密钥-222'}
|
|
|
|
|
{ label: '密钥种类1', value: '密钥种类1' },
|
|
|
|
|
{ label: '密钥种类2', value: '密钥种类2' }
|
|
|
|
|
]} />
|
|
|
|
|
|
|
|
|
|
<div className='mr16'>所属网络</div>
|
|
|
|
|
<Select style={{ width: 260, marginRight: 20 }} placeholder={'请选择所属网络'}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name="keyType" label="所属网络" style={formItemSty}>
|
|
|
|
|
<Select style={{ width: 260, marginRight: 16 }} placeholder={'请选择所属网络'}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: '离线', value: '离线' },
|
|
|
|
|
{ label: '指挥专网', value: '指挥专网' },
|
|
|
|
|
{ label: '军事综合信息网', value: '军事综合信息网' },
|
|
|
|
|
{ label: '资源管理网', value: '资源管理网' }
|
|
|
|
|
]} />
|
|
|
|
|
|
|
|
|
|
<div className='mr16'>启用日期</div>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item name="keyType" label="启用日期" style={formItemSty} rules={[{ required: true, message: '请选择启用日期' }]}>
|
|
|
|
|
<DatePicker
|
|
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
|
|
style={{ width: 260 }}
|
|
|
|
|
disabledDate={disabledDate}
|
|
|
|
|
disabledTime={disabledTime}
|
|
|
|
|
format="YYYY-MM-DD HH:mm" />
|
|
|
|
|
</div>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
|
|
<div className='mb10'>可装配的密钥体列表</div>
|
|
|
|
|
<Table
|
|
|
|
|
scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
scroll={tableData1.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
pagination={false}
|
|
|
|
|
bordered
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={tableData}
|
|
|
|
|
dataSource={tableData1}
|
|
|
|
|
rowKey={(record: any) => record?.id}
|
|
|
|
|
rowClassName={rowClassName}
|
|
|
|
|
/>
|
|
|
|
@ -111,6 +169,7 @@ export default function Page() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='mb10 mt30'>管理密钥装配列表</div>
|
|
|
|
|
|
|
|
|
|
<Table
|
|
|
|
|
scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
pagination={false}
|
|
|
|
@ -119,7 +178,26 @@ export default function Page() {
|
|
|
|
|
dataSource={tableData}
|
|
|
|
|
rowKey={(record: any) => record?.id}
|
|
|
|
|
rowClassName={rowClassName}
|
|
|
|
|
rowSelection={tableData.length > 0 ? {
|
|
|
|
|
type: 'radio',
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
onChange: (selectedKeys: any) => {
|
|
|
|
|
setSelectedRowKeys(selectedKeys);
|
|
|
|
|
}
|
|
|
|
|
} : null}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{total > 0 && <div className='flex_aiC_jB mt20'>
|
|
|
|
|
<div>共 {total} 条</div>
|
|
|
|
|
<Pagination
|
|
|
|
|
current={pageNumber}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
total={total}
|
|
|
|
|
showQuickJumper
|
|
|
|
|
onChange={pageOnChange}
|
|
|
|
|
onShowSizeChange={onShowSizeChange}
|
|
|
|
|
/>
|
|
|
|
|
</div>}
|
|
|
|
|
|
|
|
|
|
<div className='flex_jE mt20'>
|
|
|
|
|
<ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => { }} />
|
|
|
|
|