system-copyright-react/src/route/proj/edit/ProjEditStep3.tsx

import './proj-edit-step.css';
import { message, Modal, Spin ,Button} from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put } from "../../../util/AjaxUtils.ts";
// import {Button, Form, Input} from 'antd';
import { AxiosResponse } from "axios";
import { useNavigate } from 'react-router-dom';



export default function ProjEditStep3() {
    const navigate = useNavigate()
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();

    const [loading, setLoading] = useState<boolean>(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);

    const [envHardDev, setenvHardDev] = useState('')
    const [envHardProd, setenvHardProd] = useState('')
    const [envIndustry, setenvIndustry] = useState('')
    // const [envLang, setenvLang] = useState('')
    const [envSoftDev, setenvSoftDev] = useState('')
    const [envSoftProd, setenvSoftProd] = useState('')
    const [envSystemDev, setenvSystemDev] = useState('')
    const [envSystemProd, seenvSystemProd] = useState('')
    const [envTechnical, setenvTechnical] = useState('')
    const height = window.innerHeight - 180;
    // const [defaultData, setDefaultData] = useState<any[]>([])
    // 

    const getData = () => {

        get({
            messageApi,
            url: `/api/proj/get/edit-step3/${pathParams.projId}`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                console.log('获取页面信息', data);
                setenvHardDev(data.envHardDev)
                setenvHardProd(data.envHardProd)
                setenvIndustry(data.envIndustry)
                setenvSoftDev(data.envSoftDev)
                setenvSoftProd(data.envSoftProd)
                setenvSystemDev(data.envSystemDev)
                seenvSystemProd(data.envSystemProd)
                setenvTechnical(data.envTechnical)
            }
        })

    }
    // 硬件开发环境
    const getEnvHardDev = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-env-hard-dev`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('硬件开发环境', data);
                setenvHardDev(data.data)
            }
        })
    }
    // 硬件运行环境
    const getEnvHardProd = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-env-hard-proj`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('硬件运行环境', data);
                setenvHardProd(data.data)
            }
        })
    }

    // 软件环境 开发
    const getEnvsoftDev = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-env-soft`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('软件环境', data);
                setenvSoftDev(data.data[0])
            }
        })
    }
    // 软件环境 运行
    const getEnvsoftProd = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-env-soft`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('软件环境', data);
                setenvSoftProd(data.data[1])
            }
        })
    }

    // 开发系统 api/proj/dict/get-system-dev
    const getSystemdev = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-system-dev`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('开发系统', data);
                setenvSystemDev(data.data)
            }
        })
    }
    // 运行系统 api/proj/dict/get-system-prod
    const getSystemprod = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-system-prod`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('运行系统', data);
                seenvSystemProd(data.data)
            }
        })
    }
    // 技术特点 api/proj/dict/get-technical
    const getTechnical = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-technical`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                // console.log('技术特点', data);
                setenvTechnical(data.data)
            }
        })
    }
    // 面向领域 api/proj/dict/get-industry
    const getIndustry = () => {
        get({
            messageApi,
            url: `/api/proj/dict/get-industry`,
            onSuccess({ data }: AxiosResponse) {
                // resolve(data);
                console.log('面向领域', data);
                setenvIndustry(data.data)
            }
        })
    }
    useEffect(() => {
        // render();
        getData()
    }, [])

    return (
        <div style={{ height: `${height}px`, overflow: 'auto', marginTop: '18px' }}>
            {contextHolder}

            <div className="form-container" style={{height: `${height}px`,overflow: 'auto',paddingBottom:'10px'}}>
                <div className='Step-title'>
                    <div className='Step-titlel'></div>
                    <div className='Step-titler'>软件功能特点</div>
                </div>
                <div className='step-software'>
                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            开发的硬件环境
                        </div>
                        <div className='step-software-text'>
                            {envHardDev}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getEnvHardDev()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            运行的硬件环境
                        </div>
                        <div className='step-software-text'>
                            {envHardProd}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getEnvHardProd()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            开发软件的操作系统
                        </div>
                        <div className='step-software-text'>
                            {envSystemDev}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getSystemdev()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            该软件的运行平台/操作系统
                        </div>
                        <div className='step-software-text'>
                            {envSystemProd}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getSystemprod()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            软件开发环境/开发工具
                        </div>
                        <div className='step-software-text'>
                            {envSoftDev}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getEnvsoftDev()}}>
                            生成
                        </div>
                    </div>
                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            软件运行支撑环境/支持软件
                        </div>
                        <div className='step-software-text'>
                            {envSoftProd}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getEnvsoftProd()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            编程语言
                        </div>
                        <div className='step-software-text'>
                            Java
                        </div>

                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            面向领域/行业
                        </div>
                        <div className='step-software-text'>
                            {envIndustry}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getIndustry()}}>
                            生成
                        </div>
                    </div>

                    <div className='step-software-context'>
                        <div className='step-software-title'>
                            技术特点
                        </div>
                        <div className='step-software-text'>
                            {envTechnical}
                        </div>
                        <div className='step-software-btn' onClick={()=>{getTechnical()}}>
                            生成
                        </div>
                    </div>

                </div>
                <div className='software-btn'>
                    <Button className='software-back'
                        type="default"
                        size='large'
                    onClick={()=>{navigate(-1)}}>
                        返回
                    </Button>
                    <Button className='software-up' 
                    size='large'
                    type="primary"
                    onClick={()=>{
                        setIsEditModalOpen(true)
                    }}>
                        保存
                    </Button>
                </div>

            </div>

            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                open={isEditModalOpen}
                onOk={() => {
                    setIsEditModalOpen(false);
                    put({
                        messageApi,
                        url: `/api/proj/update/edit-step3/${pathParams.projId}`,
                        body: {
                            envHardDev: envHardDev,
                            envHardProd:envHardProd ,
                            envIndustry: envIndustry,
                            envLang: "Java",
                            envSoftDev: envSoftDev,
                            envSoftProd: envSoftProd,
                            envSystemDev: envSystemDev,
                            envSystemProd:envSystemProd,
                            envTechnical: envTechnical
                        },
                        onBefore() {
                            setLoading(true);
                        },
                        onSuccess() {
                            messageApi.open({
                                type: 'success',
                                content: '编辑成功'
                            })
                        },
                        onFinally() {
                            setLoading(false);
                        }
                    })
                }}
                onCancel={() => {
                    setIsEditModalOpen(false);
                }}>
                <div>确定提交吗？</div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />
        </div>
    )

}