system-copyright-react/src/route/AppElectron/AppEdit.tsx

import { useState, useEffect } from 'react'
import EditAppInfo from './components/EditAppInfo/EditAppInfo';

// import EditAppDes from './components/EditAppDes/EditAppDes';
import EditAppFiles from './components/EditAppFiles/EditAppFiles';
// import EditAppFunction from './components/EditAppFunction/EditAppFunction';
// import EditBelongPeople from './components/EditBelongPeople/EditBelongPeople';
import AppInfo from './components/AppInfo/AppInfo';
import AppCompany from './components/AppCompany/AppCompany';
import { useParams } from 'react-router-dom'
import { runSystemList, bigClassList, smallClassList } from '../../request/api'
import './app-edit.css'
import {
    RightOutlined
} from '@ant-design/icons';
import {
    message,
    Spin,

} from 'antd';
import { appOrderDetail } from '../../request/api'
export default function AppEdit() {
    const [messageApi, contextHolder] = message.useMessage();
    const pathParams = useParams();
    const appOrderId = pathParams.appOrderId;
    const [systemList, setSystemList] = useState<any[]>([]); // 运行系统选项
    const [bigClass, setBigClass] = useState<any[]>([]); // 软件分类(大类)选项
    const [smallClass, setSmallClass] = useState<any[]>([]); // 软件分类(小类)选项
    // 获取运行系统选项
    const getRunSystemList = async () => {
        try {
            const res: any = await runSystemList();
            console.log('运行系统选项', res.map((item: any) => {
                return {
                    label: item.dataName,
                    value: item.dataName,
                }
            }));
            setSystemList(res.map((item: any) => {
                return {
                    label: item.dataName,
                    value: item.dataName,
                }
            }))
        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }
    }
    // 获取大类选项
    const getBigClassList = async () => {
        try {
            const res: any = await bigClassList();
            console.log('大类选项', res.map((item: any) => {
                return {
                    label: item.dataName,
                    value: item.dataId,
                }
            }));
            setBigClass(res.map((item: any) => {
                return {
                    label: item.dataId,
                    value: item.dataName,
                }
            }))
        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }
    }
    // 获取小类选项
    const getSmallClassList = async (id: string) => {
        try {
            const res: any = await smallClassList(id);
            console.log(res);
            setSmallClass(res.map((item: any) => {
                return {
                    label: item.dataId,
                    value: item.dataName,
                }
            }))
        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }
    }

    const [loading, setLoading] = useState(false);
    const [editProcess, setEditProcess] = useState(1);
    // 企业/机构认证
    const [companyInfo, setCompanyInfo] = useState<any>({
        companyName: '', // 企业名称
        companyNumber: '', // 企业统一社会信用代码
        companyPhoto: '', // 企业照片
        companyAuth: '',//授权书
    });
    // 软件基本信息
    const [appInfo, setAppInfo] = useState<any>({
        appName: '', // 项目名称
        subName: '', // 软件简称
        versionName: '', // 版本号
        packageName: '', // 包名APPID
        systemName: '', // 运行系统
        bigClassify: '', // 软件分类(大类)
        subClassify: '', // 软件分类(小类)
        developWay: '', // 开发方式
        completeTime: '', // 开发完成时期
        projOwnerName: '',//著作权人姓名
        projOwnerIdentity: '',//著作权人证件号
        projOwnerId: '',//著作权人信息ID
    })
    // 材料信息
    const [filesInfo, setFilesInfo] = useState<any>({
        sourceCodeDocFile: '',//源码 
        softwareDocFile: '',//软件
    })
    // 获取详情
    const getAppOrderDetail = async () => {
        try {
            setLoading(true)
            const res: any = await appOrderDetail(appOrderId);
            console.log('详情', res);
            setCompanyInfo({
                companyName: res.companyName, // 企业名称
                companyNumber: res.companyNumber, // 企业统一社会信用代码
                companyPhoto: res.companyPhoto, // 企业照片
                companyAuth: res.companyAuth,//授权书
            })
            setAppInfo({
                appName: res.appName, // 项目名称
                subName: res.subName, // 软件简称
                versionName: res.versionName, // 版本号 
                packageName: res.packageName, // 包名APPID
                systemName: res.systemName, // 运行系统
                bigClassify: res.bigClassify, // 软件分类(大类)
                subClassify: res.subClassify, // 软件分类(小类)
                developWay: res.developWay, // 开发方式
                completeTime: res.completeTime, // 开发完成时期
                projOwnerName: res.projOwnerName,//著作权人姓名
                projOwnerIdentity: res.projOwnerIdentity,//著作权人证件号
                projOwnerId: res.projOwnerId,//著作权人信息ID
            })
            setFilesInfo({
                sourceCodeDocFile: res.sourceCodeDocFile,//源码
                softwareDocFile: res.softwareDocFile,//软件 
            })
            setEditProcess(Number(res.appOrderProgress) + 1)
            setLoading(false)
        } catch (error: any) {

            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        } finally {
            setLoading(false)
        }


    }
    // 进度
    // 获取详情
    useEffect(() => {
        getAppOrderDetail()
        //获取进度
        // setEditProcess(1)
        getRunSystemList()
        getBigClassList()

        if (appInfo.bigClassify) {
            getSmallClassList(appInfo.bigClassify)
        }
    }, []);
    const height = window.innerHeight - 180;
    return (
        <Spin tip="加载中..." size="small" spinning={loading}>
            <div className='appEdit' style={{ height: `${height}px`, overflow: 'auto' }}>
                {contextHolder}
                <div className='editProcessBox'>
                    <div className='editProcess' >
                        <div className='editProcessNum'
                            style={{
                                background: editProcess >= 1 ? '#3B60E8' : '',
                                color: editProcess >= 1 ? '#fff' : '#B1B1B1',
                                borderColor: editProcess >= 1 ? '' : '#B1B1B1'
                            }}
                        >1</div>
                        <div className='editProcessTitle'
                            style={{
                                color: editProcess >= 1 ? '#353535' : '#878787',
                                fontWeight: editProcess >= 1 ? 'bold' : 'normal'
                            }}
                        >企业/机构认证</div>
                    </div>
                    <div className='editright'><RightOutlined /></div>
                    <div className='editProcess'>
                        <div className='editProcessNum' style={{
                            background: editProcess >= 2 ? '#3B60E8' : '',
                            color: editProcess >= 2 ? '#fff' : '#B1B1B1',
                            borderColor: editProcess >= 2 ? '' : '#B1B1B1'
                        }}>2</div>
                        <div className='editProcessTitle'
                            style={{
                                color: editProcess >= 2 ? '#353535' : '#878787',
                                fontWeight: editProcess >= 2 ? 'bold' : 'normal'
                            }}
                        >软件基本信息</div>
                    </div>
                    <div className='editright'><RightOutlined /></div>
                    <div className='editProcess'>
                        <div className='editProcessNum' style={{
                            background: editProcess >= 3 ? '#3B60E8' : '',
                            color: editProcess >= 3 ? '#fff' : '#B1B1B1',
                            borderColor: editProcess >= 3 ? '' : '#B1B1B1'
                        }}>3</div>
                        <div className='editProcessTitle'
                            style={{
                                color: editProcess >= 3 ? '#353535' : '#878787',
                                fontWeight: editProcess >= 3 ? 'bold' : 'normal'
                            }}
                        >鉴别材料</div>
                    </div>
                    <div className='editright'><RightOutlined /></div>
                    <div className='editProcess'>
                        <div className='editProcessNum' style={{
                            background: editProcess >= 4 ? '#3B60E8' : '',
                            color: editProcess >= 4 ? '#fff' : '#B1B1B1',
                            borderColor: editProcess >= 4 ? '' : '#B1B1B1'
                        }}>4</div>
                        <div className='editProcessTitle'
                            style={{
                                color: editProcess >= 4 ? '#353535' : '#878787',
                                fontWeight: editProcess >= 4 ? 'bold' : 'normal'
                            }}
                        >
                            {/* 功能特点 */}
                            填报完成
                        </div>
                    </div>
                    {/* <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 5 ? '#3B60E8' : '',
                        color: editProcess >= 5 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 5 ? '' : '#B1B1B1'
                    }}>5</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 5 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 5 ? 'bold' : 'normal'
                        }}
                    >著作权人</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 6 ? '#3B60E8' : '',
                        color: editProcess >= 6 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 6 ? '' : '#B1B1B1'
                    }}>6</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 6 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 6 ? 'bold' : 'normal'
                        }}
                    >填报完成</div>
                </div> */}


                </div>
                <div className='editFormBox'>
                    <div style={{
                        display: editProcess == 1 ? 'block' : 'none'
                    }}>
                        <AppCompany
                            appOrderId={appOrderId}
                            companyInfo={companyInfo}
                            setCompanyInfo={
                                (val: any) => {
                                    setCompanyInfo(val)
                                }
                            }
                            setEditProcess={
                                (num: number) => {
                                    setEditProcess(num)
                                }
                            }></AppCompany>
                        {/* <EditAppInfo setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppInfo> */}
                    </div>
                    <div style={{
                        display: editProcess == 2 ? 'block' : 'none'
                    }}>
                        <EditAppInfo
                            appOrderId={appOrderId}
                            bigClass={bigClass}
                            systemList={systemList}
                            smallClass={smallClass}
                            appInfo={appInfo}
                            setEditProcess={
                                (num: number) => {
                                    setEditProcess(num)
                                }
                            }></EditAppInfo>
                        {/* <EditAppDes setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppDes> */}
                    </div>
                    <div style={{
                        display: editProcess == 3 ? 'block' : 'none'
                    }}>
                        <EditAppFiles
                            appOrderId={appOrderId}
                            filesInfo={filesInfo}
                            setEditProcess={
                                (num: number) => {
                                    setEditProcess(num)
                                }
                            }></EditAppFiles>
                    </div>
                    <div style={{
                        display: editProcess == 4 ? 'block' : 'none'
                    }}>
                        {/* <EditAppFunction setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppFunction> */}
                        <AppInfo
                            appOrderId={appOrderId}
                            companyInfo={companyInfo}
                            appInfo={appInfo}
                            filesInfo={filesInfo}
                            setEditProcess={
                                (num: number) => {
                                    setEditProcess(num)
                                }
                            }></AppInfo>
                    </div>
                    {/* <div style={{
                    display: editProcess == 5 ? 'block' : 'none'
                }}>
                    <EditBelongPeople setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditBelongPeople>
                </div>
                <div style={{
                    display: editProcess == 6 ? 'block' : 'none'
                }}>
                    <AppInfo setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></AppInfo>
                </div> */}
                </div>
            </div>
        </Spin>
    )
}