xgd_system/src/pages/InstallExe/index.tsx

import { FC, useEffect, useState } from 'react';
import { history, useLocation, useParams } from "umi";
import { message } from 'antd';
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import ButtonComp from '@/components/ButtonComp';
import GBase from './exeDialog/GBase'
import HGoogleEarth from './exeDialog/HGoogleEarth';
import MSXML from './exeDialog/MSXML';
import FlashPlayer from './exeDialog/FlashPlayer';
import Net from './exeDialog/Net';
import NetSP1 from './exeDialog/NetSP1';
import CoreArea from './exeDialog/CoreArea';
import DutyArea from './exeDialog/DutyArea';
import CodeManage from './exeDialog/CodeManage';
import CodeDriver from './exeDialog/CodeDriver';
import DeviceDriver from './exeDialog/DeviceDriver';
import { subjectInfo } from '@/utils/sysSubjectInfo';

const typeData = [
  // 依赖程序
  { name: 'GBase', select: false },
  { name: 'GBase升级程序', select: false },
  { name: 'FlashPlayer9', select: false },
  { name: 'MSXML4', select: false },
  { name: '.NET 2.0', select: false },
  { name: '.NET 2.0 SP1', select: false },
  { name: 'HGoogleEarth', select: false },
  { name: 'MySQLServer 5.1', select: false },
  { name: 'MyODBC 3.51', select: false },
  // 专用核心密码管理分系统
  { name: '核心区安装程序', select: false },
  { name: '执勤区安装程序', select: false },
  { name: '密钥格式管理安装程序', select: false },
  { name: '密码资源输入输出设备驱动', select: false },
  // 一体化密码机
  { name: '一体化密码机管理软件', select: false },
  { name: '一体化密码机驱动安装程序', select: false },
  // JJP903C密码钥匙
  { name: '认证服务器Install', select: false },
  { name: '用户登录组件', select: false },
]

interface PageProps { }

const InstallExe: FC<PageProps> = ({ }) => {
  const urlParams = useParams();

  const [listData, setListData] = useState<any[]>(typeData);
  const [open1, setOpen1] = useState(false); // Gbase
  const [open2, setOpen2] = useState(false); // HGoogleEarth
  const [open3, setOpen3] = useState(false); // MSXML4
  const [open4, setOpen4] = useState(false); // FlashPlayer
  const [open5, setOpen5] = useState(false); // Net2.0
  const [open6, setOpen6] = useState(false); // NET 2.0 SP1

  const [open7, setOpen7] = useState(false); // 核心区安装程序
  const [open8, setOpen8] = useState(false); // 执勤区安装程序
  const [open9, setOpen9] = useState(false); // 密码资源输入输出设备驱动

  const [open11, setOpen11] = useState(false); // 一体化密码机管理软件
  const [open12, setOpen12] = useState(false); // 一体化密码机驱动安装程序

  let sysData = localStorage.getItem(`${urlParams?.fileType}`);

  useEffect(() => {
    if (sysData) {
      let info = JSON.parse(sysData)
      if (info?.installExe) {
        setListData(info.installExe);
      } else {
        info.installExe = typeData
        localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify(info));
        setListData(typeData);
      }
    } else {
      localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify(subjectInfo));
    }
  }, [])

  const itemDom = (item: any, index: number) => {
    return (
      <div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
        onClick={() => {

          const notRequireds = [
            'MySQLServer 5.1',
            'MyODBC 3.51',
            '密钥格式管理安装程序',
            '认证服务器Install',
            '用户登录组件'
          ]

          // needArr 校验依赖程序中是否有未安装的
          let needArr = false;
          listData.slice(0, 7).forEach((k, i) => {
            if (!k.select) { needArr = true }
          })

          const updatedList = listData.map((data: any, key: number) => {
            if (data.name === item.name) {
              // 如果(选中) 或者 (不需要安装的) 就返回
              if (data.select || notRequireds.includes(item.name)) return data;

              // 依赖程序必安装的完成后才能点就右侧2块的内容（专用核心密码管理分系统、一体化密码机、JJP903C密码钥匙)
              if (key > 8 && needArr) {
                message.info('请将需要的依赖程序安装完成！');
                return data
              }

              openDialog(item.name);
              return { ...data, select: !data.select };
            }
            return data;
          });
          setListData(updatedList);
        }}>
        {item.name}
      </div>
    )
  }

  const openDialog = (name: string) => {
    switch (name) {
      case 'GBase':
        setOpen1(true)
        break;
      case 'GBase升级程序':
        if (sysData) {
          let info = JSON.parse(sysData);
          info.installExe[1].select = true;
          localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify(info));
          message.success('GBase升级成功！')
        }
        break;
      case 'HGoogleEarth':
        setOpen2(true)
        break;
      case 'MSXML4':
        setOpen3(true)
        break;
      case 'FlashPlayer9':
        setOpen4(true)
        break;
      case '.NET 2.0':
        setOpen5(true)
        break;
      case '.NET 2.0 SP1':
        setOpen6(true)
        break;
      case '核心区安装程序':
        setOpen7(true)
        break;
      case '执勤区安装程序':
        setOpen8(true)
        break;
      case '密码资源输入输出设备驱动':
        setOpen9(true)
        break;
      case '一体化密码机管理软件':
        setOpen11(true)
        break;
      case '一体化密码机驱动安装程序':
        setOpen12(true)
        break;
    }
  }

  const setInstallExe = (index: number, text: string) => {
    if (sysData) {
      let info = JSON.parse(sysData);
      info.installExe[index].select = true;
      localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify(info));
      message.success(text)
    }
  }

  // 取消选中
  const uncheck = (name: any) => {
    if (name) {
      setListData((prevListData) => {
        return prevListData.map((e) => {
          if (e.name === name) {
            return { ...e, select: false };
          }
          return e;
        });
      });
    }
  };

  return (
    <div className={styles.exeInstall}>
      <div className={styles.title_con}>一体化对称密码管理系统</div>
      <div className='flex_acB_jE'>
        {/* 左 */}
        <ContentWarp style={{ width: '28.5%', padding: '7vh 3vh 3vh 3vh' }} text={'依赖程序'}>
          {listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
        </ContentWarp>

        {/* 中 */}
        <ContentWarp style={{ width: '28.5%', padding: '7vh 3vh 3vh 3vh' }} text={'专用核心密码管理分系统'}>
          {listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
        </ContentWarp>

        {/* 右 */}
        <div style={{ width: '28.5%' }}>
          <ContentWarp style={{ marginBottom: '8%', padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }} text={'一体化密码机'}>
            {listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
          </ContentWarp>

          <ContentWarp text={'JJP903C密码钥匙'} style={{ padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }}>
            {listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
          </ContentWarp>
        </div>
      </div>
      <div className='flex_jE' style={{ marginTop: '3vh', paddingRight: '4.5vh' }}>
        <ButtonComp text={'退出'} onClick={() => { }} />
      </div>

      {/* 依赖程序安装--弹窗 */}
      <GBase
        open={open1}
        onCancel={(e) => { uncheck(e); setOpen1(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }}
      />
      <HGoogleEarth
        open={open2}
        onCancel={(e) => { uncheck(e); setOpen2(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />
      <MSXML
        open={open3}
        onCancel={(e) => { uncheck(e); setOpen3(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />
      <FlashPlayer
        open={open4}
        onCancel={(e) => { uncheck(e); setOpen4(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />
      <Net
        open={open5}
        onCancel={(e) => { uncheck(e); setOpen5(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />
      <NetSP1
        open={open6}
        onCancel={(e) => { uncheck(e); setOpen6(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />

      {/* 专用核心密码管理分系统--弹窗 */}
      <CoreArea
        open={open7}
        onCancel={(e) => { uncheck(e); setOpen7(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />

      <DutyArea
        open={open8}
        onCancel={(e) => { uncheck(e); setOpen8(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />

      <DeviceDriver
        open={open9}
        onCancel={(e) => { uncheck(e); setOpen9(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />

      {/* 一体化密码机--弹窗 */}
      <CodeManage 
        open={open11} 
        onCancel={(e) => { uncheck(e); setOpen11(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />

      <CodeDriver
        open={open12}
        onCancel={(e) => { uncheck(e); setOpen12(false) }}
        setInstallExe={(i, t) => { setInstallExe(i, t) }} />
    </div>
  )
}

export default InstallExe;