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 { countType } from '@/utils';

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 [listData, setListData] = useState<any[]>([]);
  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 urlParams = useParams();

  useEffect(() => {
    let data = localStorage.getItem('installExe');
    if (data) {
      setListData(JSON.parse(data));
    } else {
      localStorage.setItem('installExe', JSON.stringify(typeData));
      setListData(typeData);
    }
  }, [])

  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;

              // 暂时先gbase升级程序（没找到安装流程图片）通过点击就安装成功
              if (data.name == 'GBase升级程序') {

                message.success('GBase升级成功！')
                let installExe: any = localStorage.getItem('installExe')
                let obj = JSON.parse(installExe);
                obj[1].select = true;
                localStorage.setItem('installExe', JSON.stringify(data));
                return { ...data, select: !data.select };
              }

              // 依赖程序必安装的完成后才能点就右侧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 '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 '核心区安装程序':
        install()
        break;
    }
  }

  // 在指定的目录下安装快捷方式
  const install = async () => {
    try {
      const response = await fetch('http://localhost:3000/createShortcut', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        mode: "cors",
        body: JSON.stringify({
          folderPath: `C:/Users/lyc/Desktop/${countType[urlParams?.fileType]}`,
          shortcutName: '专用核心密码机管理软件',
          shortcutURL: `http://localhost:8000/initialSystem/${urlParams?.fileType}`
        }),
      });
      const data = await response.text();
      message.success(data); // 处理服务器返回的数据
    } catch (error) {
      message.error(error); // 处理请求错误
    }
  }

  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={() => history.push('/index')} />
      </div>

      {/* 安装程序弹窗 */}
      <GBase open={open1} onCancel={() => setOpen1(false)} />
      <HGoogleEarth open={open2} onCancel={() => setOpen2(false)} />
      <MSXML open={open3} onCancel={() => setOpen3(false)} />
      <FlashPlayer open={open4} onCancel={() => setOpen4(false)} />
      <Net open={open5} onCancel={() => setOpen5(false)} />
      <NetSP1 open={open6} onCancel={() => setOpen6(false)} />
    </div>
  )
}

export default InstallExe;