更新

src/pages/MY/KeyBodyManage/Import/index.tsx

@@ -1,7 +1,7 @@
 import TabsComp from '@/components/TabsComp';
 import styles from '../../../GLQ/index.less';
 import { useState } from 'react';
-import { ConfigProvider, Form, Select, Table } from 'antd';
+import { ConfigProvider, Form, Input, Modal, Select, Table } from 'antd';
 import { tableTheme } from '@/utils/theme';
 import { rowClassName } from '@/utils';
 import ButtonComp from '@/components/ButtonComp';
@@ -9,11 +9,13 @@ import ButtonComp from '@/components/ButtonComp';
 export default function Page() {
   const [activeTab, setActiveTab] = useState(1)
   const [tableData, setTableData] = useState([]);
+  const [visibility, setVisibility] = useState(false);
 
   const [form] = Form.useForm();
 
   const columns: any = [
-    {title: '序号',
+    {
+      title: '序号',
       key: 'index',
       align: 'center',
       width: 100,
@@ -21,17 +23,17 @@ 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: '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: '32%',  marginBottom: 20 };
+  const formItemSty = { width: '32%', marginBottom: 20 };
 
   const onFinish = (values: any) => {
     console.log('表单提交:', values);
@@ -46,24 +48,24 @@ export default function Page() {
 
       <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 }]} />
+          <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 }]} />
+          <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 }]} />
+          <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 }]} />
+          <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 }]} />
+          <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 style={{ marginRight: 20 }} type={'cancel'} text={'导入'} onClick={() => setVisibility(true)} />
         <ButtonComp text={'查询'} onClick={() => form.submit()} />
       </div>
 
@@ -83,6 +85,35 @@ export default function Page() {
           rowClassName={rowClassName}
         />
       </ConfigProvider>
+
+      <Modal
+        title="请确认或者输入产品编号"
+        open={visibility}
+        centered
+        width={500}
+        onOk={() => { }}
+        onCancel={() => setVisibility(false)}
+        footer={null}>
+        <div>
+          <div className='mb20'>
+            类型判断1：
+            <div>产品编号 <Input style={{ width: 260 }} /></div>
+          </div>
+          <div className='mb20'>
+            类型判断2：
+            <div>请选择载体1的输入路径</div>
+            <div className='flex_aC'>
+              文件路径<Input style={{ width: 260 }} /> <ButtonComp text={'选择'} onClick={() => { }} />
+            </div>
+          </div>
+          <div>类型判断3： 是否到密钥体？</div>
+          <div>类型判断4： 导入密钥体成功</div>
+        </div>
+        <div className='flex_jE mt20'>
+          <ButtonComp style={{marginRight: 20}} text={'确定'} onClick={() => { }} />
+          <ButtonComp type='cancel' text={'取消'} onClick={() => setVisibility(false)} />
+        </div>
+      </Modal>
     </div>
   );
 }

src/pages/MY/KeyManage/DataMaintenance/index.tsx

@@ -1,12 +1,13 @@
 import styles from '../../../GLQ/index.less';
 import { useState } from 'react';
-import { ConfigProvider, Table } from 'antd';
+import { ConfigProvider, Modal, 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 = [
     {
@@ -30,7 +31,7 @@ export default function Page() {
       <ButtonComp type={'special'} text={'管理系统管理盘数据维护'} onClick={() => { }} />
 
       <div className='flex_aC mt20 mb20'>
-        <ButtonComp text={'数据导入'} onClick={() => { }} />
+        <ButtonComp text={'数据导入'} onClick={() => setVisibility(true)} />
       </div>
 
       <ConfigProvider theme={tableTheme}>
@@ -44,6 +45,24 @@ export default function Page() {
           rowClassName={rowClassName}
         />
       </ConfigProvider>
+
+      <Modal
+        title="xx部一体化对称密码管理系统"
+        open={visibility}
+        centered
+        width={500}
+        onOk={() => { }}
+        onCancel={() => setVisibility(false)}
+        footer={null}>
+        <div>
+          <div>类型判断1： 选择文件弹窗</div>
+          <div>类型判断2： 导入成功</div>
+          <div>类型判断3： 已经存在管理盘数据，是否重新导入？</div>
+        </div>
+        <div className='flex_jE mt20'>
+          <ButtonComp text={'确定'} onClick={() => { }} />
+        </div>
+      </Modal>
     </div>
   );
 }

src/pages/MY/KeyManage/ManageKeys/index.tsx

@@ -1,12 +1,13 @@
 import styles from '../../../GLQ/index.less';
 import { useState } from 'react';
-import { ConfigProvider, DatePicker, Radio, Select, Table } from 'antd';
+import { ConfigProvider, DatePicker, Modal, 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 [visibility, setVisibility] = useState(false);
 
   const columns: any = [
     { title: '产品名称', dataIndex: 'name', key: 'name', align: 'center' },
@@ -75,7 +76,7 @@ export default function Page() {
       </ConfigProvider>
 
       <div className='flex_jE mt20'>
-        <ButtonComp text={'装配'} onClick={() => { }} />
+        <ButtonComp text={'装配'} onClick={() => setVisibility(true)} />
       </div>
 
       <div className='mb10 mt30'>管理密钥装配列表</div>
@@ -96,6 +97,29 @@ export default function Page() {
         <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
         <ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
       </div>
+
+      <Modal
+        title="xx部一体化对称密码管理系统"
+        open={visibility}
+        centered
+        width={500}
+        onOk={() => { }}
+        onCancel={() => setVisibility(false)}
+        footer={null}>
+        <div>
+          <div className='mb20'>
+            类型判断1： 
+            <div className='ml20'>装配信息:</div>
+            <div className='ml20'>产品名称 ZY310，</div>
+            <div className='ml20'>产品编号 8151电，</div>
+            <div className='ml20'>启用日期 20231011</div>
+          </div>
+          <div>类型判断2： 没有需要装配管理密钥的密码设备！</div>
+        </div>
+        <div className='flex_jE mt20'>
+          <ButtonComp text={'确定'} onClick={() => { }} />
+        </div>
+      </Modal>
     </div>
   );
 }

src/styles/minix.less

@@ -6,6 +6,10 @@
   padding-bottom: 100px;
 }
 
+.ml20 {
+  margin-left: 20px;
+}
+
 .mr20 {
   margin-right: 20px;
 }