管理设备2

.umirc.ts

@@ -8,6 +8,10 @@ export default defineConfig({
   theme: {
     '@primary-color': '#165DFF',
   },
+  dva: {
+    hmr: true,
+    // immer: true,
+  },
   routes: [
     {
       path: '/',
@@ -21,6 +25,10 @@ export default defineConfig({
               path: '/basic/login',
               component: '@/pages/Basic/List/Login',
             },
+            {
+              path: '/basic/device',
+              component: '@/pages/Basic/List/Device',
+            },
           ],
         },
       ],

src/models/basic/index.ts

@@ -0,0 +1,65 @@
+import { Effect, Reducer } from 'umi';
+
+export interface BasicInfo {
+  text: string;
+  dataName: string;
+  dbPasswd: string;
+  dbServerIp: string;
+  dbUser: string;
+  deviceNo: string;
+  managerNode: string;
+  nodeName: string;
+  supportUnit: string;
+  type: string;
+}
+
+export interface BasicInfoModelState {
+  basicInfo: BasicInfo;
+}
+
+export interface BasicModelType {
+  namespace: 'basic';
+  state: BasicInfoModelState;
+  effects: {
+    setActionData: Effect;
+  };
+  reducers: {
+    save: Reducer<any>;
+  };
+}
+
+const BasicModel: BasicModelType = {
+  namespace: 'basic',
+  state: {
+    basicInfo: {
+      text: '',
+      dbUser: '',
+      dbPasswd: '',
+      dbServerIp: '',
+      type: '1',
+      dataName: '数据中心名称',
+      nodeName: '管理节点名称',
+      deviceNo: '设备出厂编号',
+      supportUnit: '选择保障单位',
+      managerNode: '选择管理节点',
+    },
+  },
+  effects: {
+    *setActionData({ payload }, { call, put }) {
+      yield put({
+        type: 'save',
+        payload: { basicInfo: { ...payload } },
+      });
+    },
+  },
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default BasicModel;

src/pages/Basic/List/Device/index.less

@@ -0,0 +1,40 @@
+.page {
+  background-color: #fff;
+  padding: 40px 118px;
+
+  .name {
+    display: flex;
+    align-items: center;
+    margin-bottom: 32px;
+    b {
+      width: 6px;
+      height: 20px;
+      background: #464f66;
+      border-radius: 4px;
+      display: inline-block;
+      margin-right: 4px;
+    }
+
+    span {
+      font-size: 24px;
+      font-weight: 500;
+      color: #232b40;
+    }
+  }
+  .status {
+    font-size: 14px;
+    font-weight: 500;
+    color: #464f66;
+    margin-bottom: 30px;
+
+    span {
+      color: #e30000;
+    }
+  }
+
+  .box3 {
+    border-top: 1px solid #e3e4e6;
+    margin-top: 20px;
+    padding-top: 20px;
+  }
+}

src/pages/Basic/List/Device/index.tsx

@@ -0,0 +1,130 @@
+import styles from './index.less';
+import { Select, Input, Button, Row, Modal, Form, Tabs } from 'antd';
+import Fetch from '@/utils/fetch';
+import { useEffect, useState, FC } from 'react';
+import { connect, ConnectProps, Dispatch, BasicInfoModelState } from 'umi';
+
+interface PageProps extends ConnectProps {
+  basic: BasicInfoModelState;
+  dispatch: Dispatch;
+  match: any;
+}
+
+const Page: FC<PageProps> = ({ basic, dispatch }) => {
+  const [form] = Form.useForm();
+  const { basicInfo } = basic;
+  const { dbUser, dbPasswd, dbServerIp, text, type } = basicInfo;
+
+  console.log(basicInfo, 'basicInfo');
+
+  useEffect(() => {}, []);
+
+  const clickFile = () => {
+    // var inputObj = document.createElement('input')
+    // inputObj.setAttribute('id', '_ef');
+    // inputObj.setAttribute('type', 'file');
+    // inputObj.setAttribute("style", 'visibility:hidden');
+    // document.body.appendChild(inputObj);
+    // var $inputObj = $(inputObj);
+    // inputObj.click();
+    // $inputObj.change(function (e) {
+    //   var filec = e.target.files[0];//获取改变后的文件
+    //   if (filec) {
+    //     //文件已经选择好 下面可以写自己的上传代码了
+    //   }
+    // });
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.name}>
+        {' '}
+        <b /> <span>开通设施管理设备</span>
+      </div>
+      <div className={styles.status}>
+        当前状态：<span>{text || '未开通'}</span>
+      </div>
+      <Tabs
+        activeKey={type}
+        onChange={(k: string) => {
+          dispatch({
+            type: 'basic/setActionData',
+            payload: { type: k },
+          });
+        }}
+      >
+        <Tabs.TabPane key={'1'} tab="总部级" />
+        <Tabs.TabPane key={'2'} tab="大单位级别" />
+      </Tabs>
+      <div style={{ margin: '20px 0', fontWeight: 'bold', color: '#464F66' }}>
+        总部级设施管理设备开通
+      </div>
+      <Row align="middle">
+        <Row align="middle" className="mr40">
+          <span>数据中心名称</span>
+          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+        </Row>
+        <Row align="middle">
+          <span>设备出厂编号</span>
+          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+        </Row>
+      </Row>
+      <Row align="middle">
+        <Row align="middle" className="mr40">
+          <span>管理节点名称</span>
+          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+        </Row>
+        <Row align="middle">
+          <span>选择保障单位</span>
+          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+        </Row>
+      </Row>
+      <Row align="middle">
+        <Row align="middle" className="mr40">
+          <span>选择管理节点</span>
+          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+        </Row>
+      </Row>
+      <div className={styles.box3}>
+        <Row align="middle">
+          <Row align="middle" className="mr40">
+            <span>导入数据信息</span>
+            <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+            <Button type="primary" ghost size="large">
+              浏览
+            </Button>
+          </Row>
+          <Row align="middle">
+            <span>导入32字节</span>
+            <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+            <Button type="primary" ghost size="large">
+              浏览
+            </Button>
+          </Row>
+        </Row>
+        <Row align="middle">
+          <Row align="middle" className="mr40">
+            <span className="pl12">导入20字节</span>
+            <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+            <Button type="primary" ghost size="large">
+              浏览
+            </Button>
+          </Row>
+          <Row align="middle">
+            <span>导入16字节</span>
+            <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+            <Button type="primary" ghost size="large">
+              浏览
+            </Button>
+          </Row>
+        </Row>
+      </div>
+      <Button className="mt20" type="primary">
+        点击开通
+      </Button>
+    </div>
+  );
+};
+export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
+  basic,
+}))(Page);

src/pages/Basic/List/Login/index.less

@@ -50,14 +50,11 @@
     .btn {
       width: 240px;
       height: 40px;
-      background: #165dff;
       border-radius: 4px;
       cursor: pointer;
       text-align: center;
-      line-height: 40px;
       font-size: 14px;
       font-weight: 400;
-      color: #ffffff;
       margin-top: 52px;
     }
 
@@ -125,14 +122,11 @@
     .btn {
       width: 240px;
       height: 40px;
-      background: #165dff;
       border-radius: 4px;
       cursor: pointer;
       text-align: center;
-      line-height: 40px;
       font-size: 14px;
       font-weight: 400;
-      color: #ffffff;
       margin-top: 22px;
       margin-bottom: 20px;
     }

src/pages/Basic/List/Login/index.tsx

@@ -1,12 +1,22 @@
 import styles from './index.less';
 import { Select, Input, Button, Row, Modal, Form } from 'antd';
 import Fetch from '@/utils/fetch';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, FC } from 'react';
+import { connect, ConnectProps, Dispatch, BasicInfoModelState } from 'umi';
 
-const Page = () => {
+interface PageProps extends ConnectProps {
-  const [text, setText] = useState<string>('');
+  basic: BasicInfoModelState;
-  const [visible, setVisible] = useState<boolean>(true);
+  dispatch: Dispatch;
+  match: any;
+}
+
+const Page: FC<PageProps> = ({ basic, dispatch }) => {
+  const [visible, setVisible] = useState<boolean>(false);
   const [form] = Form.useForm();
+  const { basicInfo } = basic;
+  const { dbUser, dbPasswd, dbServerIp, text } = basicInfo;
+
+  console.log(basicInfo, 'basicInfo');
 
   useEffect(() => {
     getData();
@@ -14,13 +24,34 @@ const Page = () => {
 
   const getData = async () => {
     const res = await Fetch('/openi/resource/getResourceStatus');
-    console.log(res, 'res');
     if (res.result === 'success') {
-      setText(res.result?.data?.[0]?.resource ? '已开通' : '未开通');
+      dispatch({
+        type: 'basic/setActionData',
+        payload: {
+          text: res.result?.data?.[0]?.resource ? '已开通' : '未开通',
+        },
+      });
+    }
+  };
+
+  const open = async () => {
+    const res = await Fetch.post('/openi/resource/clickOpenResource');
+    if (res.result === 'success') {
+      form.setFieldsValue({ dbUser, dbPasswd, dbServerIp });
+      setVisible(true);
     }
   };
 
-  const handleFinish = (v: any) => {};
+  const handleFinish = (v: any) => {
+    const { dbUser, dbPasswd, dbServerIp } = v;
+    dispatch({
+      type: 'basic/setActionData',
+      payload: { dbUser, dbPasswd, dbServerIp },
+    });
+    setVisible(false);
+  };
+
+  const disabled = text === '已开通';
 
   return (
     <div className={styles.login}>
@@ -32,7 +63,9 @@ const Page = () => {
         <div className={styles.status}>
           当前状态：<span>{text}</span>
         </div>
-        <div className={styles.btn}>点击开通</div>
+        <Button type="primary" onClick={open} className={styles.btn}>
+          点击开通
+        </Button>
         <div className={styles.tip}>
           注：请先开通设施密码管理设备，在开通设施密码管理证书体系，才能正常运行系统。
         </div>
@@ -46,10 +79,21 @@ const Page = () => {
         <div className={styles.status}>
           当前状态：<span>未开通</span>
         </div>
-        <div className={styles.btn}>点击开通</div>
+        <Button
+          type="primary"
+          disabled={!disabled}
+          onClick={open}
+          className={styles.btn}
+        >
+          点击开通
+        </Button>
         <div style={{ marginLeft: 23 }}>
           <span>选择单位</span>
-          <Select size="large" style={{ width: 330, marginLeft: 10 }}>
+          <Select
+            disabled={!disabled}
+            size="large"
+            style={{ width: 330, marginLeft: 10 }}
+          >
             <Select.Option>2020</Select.Option>
             <Select.Option>2021</Select.Option>
             <Select.Option>2022</Select.Option>
@@ -57,8 +101,14 @@ const Page = () => {
         </div>
         <Row align="middle">
           <span>输出文件路径</span>
-          <Input size="large" style={{ width: 255, margin: '20px 10px' }} />
+          <Input
-          <Button size="large">下载</Button>
+            disabled={!disabled}
+            size="large"
+            style={{ width: 255, margin: '20px 10px' }}
+          />
+          <Button type="primary" ghost disabled={!disabled} size="large">
+            下载
+          </Button>
         </Row>
       </div>
       <Modal
@@ -83,7 +133,7 @@ const Page = () => {
         >
           <Form.Item
             label="数据库用户名"
-            name="name"
+            name="dbUser"
             rules={[
               {
                 required: true,
@@ -95,7 +145,7 @@ const Page = () => {
           </Form.Item>
           <Form.Item
             label="数据库密码"
-            name="name"
+            name="dbPasswd"
             rules={[
               {
                 required: true,
@@ -103,11 +153,11 @@ const Page = () => {
               },
             ]}
           >
-            <Input.Password />
+            <Input.Password autoComplete="new-password" />
           </Form.Item>
           <Form.Item
             label="数据库服务器IP地址"
-            name="name"
+            name="dbServerIp"
             rules={[
               {
                 required: true,
@@ -122,4 +172,6 @@ const Page = () => {
     </div>
   );
 };
-export default Page;
+export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
+  basic,
+}))(Page);

src/pages/index.tsx

@@ -8,7 +8,9 @@ import '@/styles/iconfont/iconfont.css';
 const IndexPage = ({ ...props }) => {
   //重定向页面
   useEffect(() => {
-    history.replace('/basic/login');
+    if (props.location.pathname === '/') {
+      history.replace('/basic/login');
+    }
   }, []);
 
   return <ConfigProvider locale={zhCN}>{props.children}</ConfigProvider>;

src/styles/base.less

@@ -379,6 +379,10 @@
   padding-left: 10px;
 }
 
+.pl12 {
+  padding-left: 12px;
+}
+
 .pl15 {
   padding-left: 15px;
 }