完善编辑步骤

src/components/card/CardProjEdit.tsx

@@ -1,17 +1,28 @@
 import './card-proj-edit.css';
-import {IProjEdit} from "../../interfaces/card/ICardProj.ts";
+import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
 
 export default function CardProjEdit(props: IProjEdit) {
+
+    const renderBtn = () => {
+        if (props.canBtnClick == false) {
+            return <a href="/#" className="edit" style={{color: 'var(--color-border)'}} onClick={(e) => {
+                e.preventDefault();
+            }}>{props.btnName ? props.btnName : '编辑'}</a>
+        } else {
+            return <a href="/#" className="edit" onClick={(e) => {
+                e.preventDefault();
+                props.handleEdit();
+            }}>{props.btnName ? props.btnName : '编辑'}</a>
+        }
+    }
+
     return (
         <div className="card-proj-edit">
             <div className="title">{props.title}</div>
             <div className="desc">{props.desc}</div>
             <div className="option">
-                <a href="/#" className="edit" onClick={(e) => {
+                {renderBtn()}
-                    e.preventDefault();
+                {props.status == EditStepEnum.EDITED ? <span className="status"></span> : <></>}
-                    props.handleEdit();
-                }}>编辑</a>
-                <span className="status"></span>
             </div>
         </div>
     )

src/components/list/ListProj.tsx

@@ -5,7 +5,6 @@ import {Input, Pagination, message} from 'antd';
 import type {SearchProps} from 'antd/es/input/Search';
 import {get} from "../../util/AjaxUtils.ts";
 
-
 const {Search} = Input;
 
 const onSearch: SearchProps['onSearch'] = (value, _e, info) => {

src/interfaces/card/ICardProj.ts

@@ -1,6 +1,15 @@
+export enum EditStepEnum {
+    EDITED = 'EDITED',
+    UN_EDIT = 'UN_EDIT'
+}
+
 export interface IProjEdit {
     title: string;
     desc?: string;
+    step?: number;
+    status: EditStepEnum;
+    btnName?: string;
+    canBtnClick?: boolean;
 
     handleEdit(): void;
 }

src/interfaces/dict/IDict.ts

@@ -0,0 +1,6 @@
+export interface ITree {
+    id: string;
+    pId: string;
+    name: string;
+    isParent: boolean;
+}

src/interfaces/proj/IEnv.ts

@@ -0,0 +1,21 @@
+export interface IEnvHard {
+    content:string;
+    projEnvHardId: string;
+    type: string;
+}
+
+export interface IEnvSoft {
+    content:string;
+    projEnvSoftId: string;
+    type: string;
+}
+
+export interface IEnvLang {
+    content:string;
+    projEnvLangId: string;
+}
+
+export interface IEnvTechnical {
+    content:string;
+    projEnvTechnicalId: string;
+}

src/layout/body/Body.tsx

@@ -5,27 +5,47 @@ import ProjCreate from "../../route/proj/ProjCreate.tsx";
 import ProjNew from "../../route/proj/ProjNew.tsx";
 import ProjEdit from "../../route/proj/ProjEdit.tsx";
 import AgentSelect from "../../route/agent/AgentSelect.tsx";
+import ProjEditStep1 from "../../route/proj/edit/ProjEditStep1.tsx";
+import ProjEditStep2 from "../../route/proj/edit/ProjEditStep2.tsx";
+import ProjEditStep3 from "../../route/proj/edit/ProjEditStep3.tsx";
+import ProjEditStep4 from "../../route/proj/edit/ProjEditStep4.tsx";
 
 const router = createBrowserRouter([
     {
         path: '/',
-        element: <Index />
+        element: <Index/>
     },
     {
         path: '/proj-create',
-        element: <ProjCreate />
+        element: <ProjCreate/>
     },
     {
         path: '/proj-new/:projChargeType',
-        element: <ProjNew />
+        element: <ProjNew/>
     },
     {
         path: '/proj-edit/:projId',
-        element: <ProjEdit />
+        element: <ProjEdit/>
+    },
+    {
+        path: '/proj-edit/step1/:projId',
+        element: <ProjEditStep1/>
+    },
+    {
+        path: '/proj-edit/step2/:projId',
+        element: <ProjEditStep2/>
+    },
+    {
+        path: '/proj-edit/step3/:projId',
+        element: <ProjEditStep3/>
+    },
+    {
+        path: '/proj-edit/step4/:projId',
+        element: <ProjEditStep4/>
     },
     {
         path: '/agent-select/:projId',
-        element: <AgentSelect />
+        element: <AgentSelect/>
     }
 ])
 

src/route/proj/ProjEdit.tsx

@@ -1,6 +1,6 @@
 import './proj-edit.css';
-import {Link, useNavigate} from "react-router-dom";
+import {Link, useNavigate, useParams} from "react-router-dom";
-import {Breadcrumb, Button} from "antd";
+import {Breadcrumb, Button, message} from "antd";
 import StepProjEdit from "../../components/step/StepProjEdit.tsx";
 import CardProjEdit from "../../components/card/CardProjEdit.tsx";
 import {Process} from "../../interfaces/step/IStepProj.ts";
@@ -8,13 +8,130 @@ import CardProjLoading from "../../components/card/CardProjLoading.tsx";
 import CardProjResult from "../../components/card/CardProjResult.tsx";
 import CardProjDownload from "../../components/card/CardProjDownload.tsx";
 import CardProjJump from "../../components/card/CardProjJump.tsx";
+import {useEffect, useState} from "react";
+import {get} from "../../util/AjaxUtils.ts";
+import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
 
 
 export default function ProjEdit() {
     const nav = useNavigate();
+    const pathParams = useParams();
+
+    const [messageApi, contextHolder] = message.useMessage();
+    const [editStepArray, setEditStepArray] = useState<IProjEdit[]>([]);
+    const [configArray, setConfigArray] = useState<IProjEdit[]>([]);
+    const [isAllStepEdited, setIsAllStepEdited] = useState(false);
+    const [isAllConfig, setIsAllConfig] = useState(false);
+    const [canGenerate, setCanGenerate] = useState(false);
     const height = window.innerHeight - 240;
+
+    const renderEditStep = (editSteps: any[]) => {
+        const editStepArray: IProjEdit[] = [];
+        editStepArray.push(
+            {
+                title: '标题简介',
+                desc: '完善代码、样式类型和详细介绍等内容',
+                step: 1,
+                status: editSteps[0].editStatus,
+                handleEdit() {
+                    nav(`/proj-edit/step1/${pathParams.projId}`)
+                }
+            },
+            {
+                title: '基本信息',
+                desc: '完善项目简介、编程语言、版本、公司等内容',
+                step: 2,
+                status: editSteps[1].editStatus,
+                handleEdit() {
+                    nav(`/proj-edit/step2/${pathParams.projId}`)
+                }
+            },
+            {
+                title: '软件功能特点',
+                desc: '请完善软件功能特点',
+                step: 3,
+                status: editSteps[2].editStatus,
+                handleEdit() {
+                    nav(`/proj-edit/step3/${pathParams.projId}`)
+                }
+            },
+            {
+                title: '著作人信息',
+                desc: '请完善著作人相关信息',
+                step: 4,
+                status: editSteps[3].editStatus,
+                handleEdit() {
+                    nav(`/proj-edit/step4/${pathParams.projId}`)
+                }
+            },
+            {
+                title: '申请人信息',
+                desc: '请完善申请人信息',
+                step: 5,
+                status: editSteps[4].editStatus,
+                handleEdit() {
+                }
+            },
+            {
+                title: '选择登录页面',
+                desc: '选择软件的登录页面模板',
+                step: 6,
+                status: editSteps[5].editStatus,
+                handleEdit() {
+                }
+            }
+        )
+        setEditStepArray(editStepArray);
+    }
+
+    const renderSetting = () => {
+        const configArray: IProjEdit[] = [];
+        configArray.push(
+            {
+                title: '登录界面设置',
+                desc: '请对登录界面完成个性化设置',
+                step: 1,
+                btnName: '设置',
+                status: EditStepEnum.UN_EDIT,
+                handleEdit() {
+                }
+            },
+            {
+                title: '系统菜单管理',
+                desc: '请对系统菜单进行设置',
+                step: 2,
+                btnName: '设置',
+                status: EditStepEnum.UN_EDIT,
+                handleEdit() {
+                }
+            },
+            {
+                title: '菜单顺序',
+                desc: '调整菜单顺序',
+                step: 3,
+                btnName: '设置',
+                status: EditStepEnum.UN_EDIT,
+                handleEdit() {
+                }
+            }
+        )
+        setConfigArray(configArray);
+    }
+
+    useEffect(() => {
+        get({
+            messageApi: messageApi,
+            url: `/api/proj/get/${pathParams.projId}`,
+            onSuccess({data}) {
+                renderEditStep(data.editSteps);
+                renderSetting();
+            }
+        })
+    }, [])
+
     return (
         <>
+            {contextHolder}
             <Breadcrumb
                 items={[
                     {title: <Link to={'/'}>首页</Link>},
@@ -24,26 +141,46 @@ export default function ProjEdit() {
             />
             <div className="proj-edit" style={{height: `${height}px`}}>
                 <StepProjEdit step={1} process={Process.COMPLETE} descTitle="完善信息"
-                              descDetail="123123123123123123123123123123123123123123123123"
+                              descDetail="完善项目的基本信息"
                               hasNext={true}>
-                    <CardProjEdit title="软件基本信息"
+                    {
-                                  desc="请完善软件的介绍、详介绍等基本信息"
+                        editStepArray.map((item, index) => {
-                                  handleEdit={() => {
+                            return <CardProjEdit key={`editStep-${index}`}
+                                                 title={item.title}
+                                                 desc={item.desc}
+                                                 status={item.status}
+                                                 handleEdit={item.handleEdit}
+                            />
+                        })
+                    }
 
-                                  }}
-                    />
                 </StepProjEdit>
-                <StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置" hasNext={true}>
+                <StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置"
-                    <CardProjEdit title="软件基本信息"
+                              descDetail="设置系统的菜单功能" hasNext={true}>
-                                  desc="请完善软件的介绍、详介绍等基本信息"
+                    {
-                                  handleEdit={() => {
+                        configArray.map((item, index) => {
-
+                            return <CardProjEdit key={`config-${index}`}
+                                                 title={item.title}
+                                                 desc={item.desc}
+                                                 btnName={item.btnName}
+                                                 status={item.status}
+                                                 handleEdit={item.handleEdit}
+                            />
+                        })
+                    }
+                    <CardProjJump title="预览系统"
+                                  desc="点击查看预览系统"
+                                  handleJump={() => {
+                                      nav('/agent-select/2');
                                   }}
                     />
                 </StepProjEdit>
                 <StepProjEdit step={3} process={Process.PENDING} descTitle="资料生成" hasNext={true}>
-                    <CardProjEdit title="软件基本信息"
+                    <CardProjEdit title="资料生成"
-                                  desc="请完善软件的介绍、详介绍等基本信息"
+                                  desc="生成软著所需要的资料，此操作后项目无法再次编辑"
+                                  btnName="生成"
+                                  status={EditStepEnum.UN_EDIT}
+                                  canBtnClick={canGenerate}
                                   handleEdit={() => {
                                       console.log('编辑')
                                   }}
@@ -74,10 +211,16 @@ export default function ProjEdit() {
                 </StepProjEdit>
             </div>
             <div className="btn-container">
-                <Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-primary)', color: 'var(--color-light)'}} onClick={() => {
+                <Button size="large" style={{
+                    width: '200px',
+                    fontSize: '14px',
+                    backgroundColor: 'var(--color-primary)',
+                    color: 'var(--color-light)'
+                }} onClick={() => {
                     nav(-1);
                 }}>返回</Button>
             </div>
+
         </>
     )
 }

src/route/proj/ProjNew.tsx

@@ -27,8 +27,8 @@ export default function ProjNew() {
         projName: '',
         projIntroduction: '',
     });
+    const [createProjId, setCreateProjId] = useState('');
     const listProjChargeAdditional: string[] = [];
-    let createProjId = '';
 
     useEffect(() => {
         get({
@@ -72,10 +72,6 @@ export default function ProjNew() {
         })
     }, []);
 
-    const onBack = () => {
-        nav(-1);
-    }
-
     return (
         <>
             {contextHolder}
@@ -128,7 +124,9 @@ export default function ProjNew() {
                                             style={{backgroundColor: 'var(--color-primary)'}}>
                                         提交并付款
                                     </Button>
-                                    <Button type="default" htmlType="button" onClick={onBack}>
+                                    <Button type="default" htmlType="button" onClick={() => {
+                                        nav(-1);
+                                    }}>
                                         返回上一级
                                     </Button>
                                 </Flex>
@@ -157,7 +155,7 @@ export default function ProjNew() {
                            },
                            onSuccess({data}) {
                                setIsEditModalOpen(true);
-                               createProjId = data.data;
+                               setCreateProjId(data.data);
                            },
                            onFinally() {
                                setLoading(false);

src/route/proj/edit/ProjEditStep1.tsx

@@ -0,0 +1,198 @@
+import './proj-edit-step.css';
+import {Breadcrumb, Col, Flex, message, Modal, Row, Select, Spin} from "antd";
+import {Link, useNavigate, 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";
+
+const {TextArea} = Input;
+
+type FieldType = {
+    projName: string;
+    projIntroduction: string;
+    projStyleType: string;
+    projCodeType: string;
+    projDesc: string;
+};
+
+export default function ProjEditStep1() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [form] = Form.useForm<FieldType>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const height = window.innerHeight - 180;
+
+    useEffect(() => {
+        get({
+            messageApi,
+            url: `/api/proj/get/edit-step1/${pathParams.projId}`,
+            onSuccess({data}: AxiosResponse) {
+                form.setFieldsValue({
+                    projName: data.projName,
+                    projIntroduction: data.projIntroduction,
+                    projStyleType: data.projStyleType,
+                    projCodeType: data.projCodeType,
+                    projDesc: data.projDesc
+                })
+            }
+        })
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: '标题简介'},
+                ]}
+            />
+            <div className="form-container" style={{height: `${height}px`}}>
+                <div className="form-body">
+                    <Form
+                        name="basic"
+                        form={form}
+                        layout="vertical"
+                        labelCol={{span: 8}}
+                        wrapperCol={{span: 24}}
+                        style={{width: '600px'}}
+                        onFinish={() => {
+                            setIsEditModalOpen(true);
+                        }}
+                        autoComplete="off"
+                    >
+                        <Row gutter={15}>
+                            <Col span={24}>
+                                <Form.Item<FieldType>
+                                    label="项目名称"
+                                    name="projName"
+                                    rules={[{required: true, message: '请输入项目名称'}]}
+                                >
+                                    <Input/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={24}>
+                                <Form.Item<FieldType>
+                                    label="项目简介"
+                                    name="projIntroduction"
+                                    rules={[{required: true, message: '请输入项目简介'}]}
+                                >
+                                    <TextArea rows={3} placeholder="请用一段话简单描述系统"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="样式类型"
+                                    name="projStyleType"
+                                    rules={[{required: true, message: '请选择样式类型'}]}
+                                >
+                                    <Select
+                                        placeholder="请选择样式类型"
+                                        onChange={(value: string) => {
+                                            console.log(`selected ${value}`);
+                                        }}
+                                        options={[
+                                            {value: 'DEFAULT', label: '默认(WEB)'},
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="代码类型"
+                                    name="projCodeType"
+                                    rules={[{required: true, message: '请选择代码类型'}]}
+                                >
+                                    <Select
+                                        placeholder="请选择代码类型"
+                                        onChange={(value: string) => {
+                                            console.log(`selected ${value}`);
+                                        }}
+                                        options={[
+                                            {value: 'code1', label: '默认类型'},
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={24}>
+                                <Form.Item<FieldType>
+                                    label="项目详细介绍"
+                                    name="projDesc"
+                                    extra="请对项目做出详细介绍，此内容在操作手册中引用"
+                                    rules={[{required: true, message: '请输入项目详细介绍'}]}
+                                >
+                                    <TextArea rows={8} placeholder="请输入项目详细介绍"/>
+                                </Form.Item>
+
+                            </Col>
+                        </Row>
+
+
+                        <Form.Item wrapperCol={{span: 24}}>
+                        <Flex align="center" justify="center" gap="large">
+                                <Button type="primary"
+                                        htmlType="submit"
+                                        style={{backgroundColor: 'var(--color-primary)'}}>
+                                    保存
+                                </Button>
+                                <Button type="default" htmlType="button" onClick={() => {
+                                    nav(-1);
+                                }}>
+                                    返回
+                                </Button>
+                            </Flex>
+                        </Form.Item>
+                    </Form>
+                </div>
+            </div>
+            <Modal title="提示"
+                   okText="确定"
+                   cancelText="取消"
+                   open={isEditModalOpen}
+                   onOk={() => {
+                       setIsEditModalOpen(false);
+                       put({
+                           messageApi,
+                           url: `/api/proj/update/edit-step1/${pathParams.projId}`,
+                           body: {
+                               projName: form.getFieldValue('projName'),
+                               projIntroduction: form.getFieldValue('projIntroduction'),
+                               projStyleType: form.getFieldValue('projStyleType'),
+                               projCodeType: form.getFieldValue('projCodeType'),
+                               projDesc: form.getFieldValue('projDesc'),
+                           },
+                           onBefore() {
+                               setLoading(true);
+                           },
+                           onSuccess() {
+                               messageApi.open({
+                                   type: 'success',
+                                   content: '编辑成功'
+                               })
+                           },
+                           onFinally() {
+                               setLoading(false);
+                           }
+                       })
+                   }}
+                   onCancel={() => {
+                       setIsEditModalOpen(false);
+                   }}>
+                <div>确定提交吗？</div>
+            </Modal>
+            <Spin tip="正在提交..." spinning={loading} fullscreen/>
+        </>
+    )
+
+}

src/route/proj/edit/ProjEditStep2.tsx

@@ -0,0 +1,187 @@
+import './proj-edit-step.css';
+import {Breadcrumb, Col, DatePicker, Flex, message, Modal, Row, Spin} from "antd";
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import {Link, useNavigate, 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 dayjs, {Dayjs} from 'dayjs';
+
+type FieldType = {
+    projSubName: string;
+    projVersion: string;
+    projDevCompleteDate: Dayjs;
+    companyName: string;
+    companyNameEn: string;
+};
+
+export default function ProjEditStep2() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [form] = Form.useForm<FieldType>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const height = window.innerHeight - 180;
+    const dateFormat = 'YYYY年MM月DD日';
+
+    useEffect(() => {
+        get({
+            messageApi,
+            url: `/api/proj/get/edit-step2/${pathParams.projId}`,
+            onSuccess({data}: AxiosResponse) {
+                form.setFieldsValue({
+                    projSubName: data.projSubName,
+                    projVersion: data.projVersion,
+                    projDevCompleteDate: dayjs(data.projDevCompleteDate, 'YYYY-MM-DD'),
+                    companyName: data.companyName,
+                    companyNameEn: data.companyNameEn,
+                })
+            }
+        })
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: '基本信息'},
+                ]}
+            />
+            <div className="form-container" style={{height: `${height}px`}}>
+                <div className="form-body">
+                    <Form
+                        name="basic"
+                        form={form}
+                        layout="vertical"
+                        labelCol={{span: 8}}
+                        wrapperCol={{span: 24}}
+                        style={{width: '800px'}}
+                        onFinish={() => {
+                            setIsEditModalOpen(true);
+                        }}
+                        autoComplete="off"
+                    >
+                        <Row gutter={15}>
+                            <Col span={24}>
+                                <Form.Item<FieldType>
+                                    label="项目简称"
+                                    name="projSubName"
+                                    rules={[{required: false, message: '请输入项目简称'}]}
+                                >
+                                    <Input placeholder="请输入项目简称"/>
+                                </Form.Item>
+                            </Col>
+
+
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="项目版本"
+                                    name="projVersion"
+                                    rules={[{required: true, message: '请输入项目版本'}]}
+                                >
+                                    <Input placeholder="请输入项目版本"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="开发完成时间"
+                                    name="projDevCompleteDate"
+                                    rules={[{required: true, message: '请输入开发完成时间'}]}
+                                >
+                                    <DatePicker placeholder="请选择开发完成日期"
+                                                format={dateFormat}
+                                                locale={locale}
+                                                style={{width: '100%'}}
+                                    />
+                                </Form.Item>
+                            </Col>
+                        </Row>
+
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="公司名称"
+                                    name="companyName"
+                                    extra="公司名称在操作手册中引用"
+                                    rules={[{required: true, message: '请输入公司名称'}]}
+                                >
+                                    <Input placeholder="请输入公司名称"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="公司英文名称"
+                                    name="companyNameEn"
+                                    extra="公司英文名称在操作手册中引用"
+                                    rules={[{required: true, message: '请输入公司英文名称'}]}
+                                >
+                                    <Input placeholder="请输入公司英文名称"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+
+                        <Form.Item wrapperCol={{span: 24}}>
+                            <Flex align="center" justify="center" gap="large">
+                                <Button type="primary"
+                                        htmlType="submit"
+                                        style={{backgroundColor: 'var(--color-primary)'}}>
+                                    保存
+                                </Button>
+                                <Button type="default" htmlType="button" onClick={() => {
+                                    nav(-1);
+                                }}>
+                                    返回
+                                </Button>
+                            </Flex>
+                        </Form.Item>
+                    </Form>
+                </div>
+            </div>
+            <Modal title="提示"
+                   okText="确定"
+                   cancelText="取消"
+                   open={isEditModalOpen}
+                   onOk={() => {
+                       setIsEditModalOpen(false);
+                       put({
+                           messageApi,
+                           url: `/api/proj/update/edit-step2/${pathParams.projId}`,
+                           body: {
+                               projSubName: form.getFieldValue('projSubName'),
+                               projVersion: form.getFieldValue('projVersion'),
+                               projDevCompleteDate: dayjs(form.getFieldValue('projDevCompleteDate')).format(dateFormat),
+                               companyName: form.getFieldValue('companyName'),
+                               companyNameEn: form.getFieldValue('companyNameEn'),
+                           },
+                           onBefore() {
+                               setLoading(true);
+                           },
+                           onSuccess() {
+                               messageApi.open({
+                                   type: 'success',
+                                   content: '编辑成功'
+                               })
+                           },
+                           onFinally() {
+                               setLoading(false);
+                           }
+                       })
+                   }}
+                   onCancel={() => {
+                       setIsEditModalOpen(false);
+                   }}>
+                <div>确定提交吗？</div>
+            </Modal>
+            <Spin tip="正在提交..." spinning={loading} fullscreen/>
+        </>
+    )
+
+}

src/route/proj/edit/ProjEditStep3.tsx

@@ -0,0 +1,310 @@
+import './proj-edit-step.css';
+import {Breadcrumb, Col, Flex, message, Modal, Row, Spin, Checkbox, Divider} from "antd";
+import {Link, useNavigate, 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 {IEnvHard, IEnvLang, IEnvSoft, IEnvTechnical} from "../../../interfaces/proj/IEnv.ts";
+
+const {TextArea} = Input;
+
+type FieldType = {
+    envHard: string;
+    envHardCustom: string;
+    envSoft: string;
+    envSoftCustom: string;
+    envLang: string;
+    envLangCustom: string;
+    envTechnical: string;
+    envTechnicalCustom: string;
+};
+
+type FormFieldType = {
+    envHard: string[];
+    envHardCustom: string;
+    envSoft: string[];
+    envSoftCustom: string;
+    envLang: string[];
+    envLangCustom: string;
+    envTechnical: string[];
+    envTechnicalCustom: string;
+};
+
+export default function ProjEditStep3() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [form] = Form.useForm<FormFieldType>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [envHardArray, setEnvHardArray] = useState<IEnvHard[]>([]);
+    const [envSoftArray, setEnvSoftArray] = useState<IEnvSoft[]>([]);
+    const [envLangArray, setEnvLangArray] = useState<IEnvLang[]>([]);
+    const [envTechnicalArray, setEnvTechnicalArray] = useState<IEnvTechnical[]>([]);
+    const height = window.innerHeight - 180;
+
+    const listEnvHard = () => {
+        return new Promise<IEnvHard[]>((resolve) => {
+            get({
+                messageApi,
+                url: '/api/proj-env-hard/list',
+                onSuccess({data}) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+    const listEnvSoft = () => {
+        return new Promise<IEnvSoft[]>((resolve) => {
+            get({
+                messageApi,
+                url: '/api/proj-env-soft/list',
+                onSuccess({data}) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+    const listEnvLang = () => {
+        return new Promise<IEnvLang[]>((resolve) => {
+            get({
+                messageApi,
+                url: '/api/proj/env/lang/list',
+                onSuccess({data}) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+    const listEnvTechnical = () => {
+        return new Promise<IEnvTechnical[]>((resolve) => {
+            get({
+                messageApi,
+                url: '/api/proj/env/technical/list',
+                onSuccess({data}) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+
+    const getData = () => {
+        return new Promise<FieldType>((resolve) => {
+            get({
+                messageApi,
+                url: `/api/proj/get/edit-step3/${pathParams.projId}`,
+                onSuccess({data}: AxiosResponse) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+
+    const render = async () => {
+        const envHards = await listEnvHard();
+        const envSofts = await listEnvSoft();
+        const envLangs = await listEnvLang();
+        const envTechnicals = await listEnvTechnical();
+        const data = await getData();
+        setEnvHardArray(envHards);
+        setEnvSoftArray(envSofts);
+        setEnvLangArray(envLangs);
+        setEnvTechnicalArray(envTechnicals);
+
+        form.setFieldsValue({
+            envHard: data.envHard.split(','),
+            envHardCustom: data.envHardCustom,
+            envSoft: data.envSoft.split(','),
+            envSoftCustom: data.envSoftCustom,
+            envLang: data.envLang.split(','),
+            envLangCustom: data.envLangCustom,
+            envTechnical: data.envTechnical.split(','),
+            envTechnicalCustom: data.envTechnicalCustom,
+        })
+    }
+
+    useEffect(() => {
+        render();
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: '软件功能特点'},
+                ]}
+            />
+            <div className="form-container" style={{height: `${height}px`}}>
+                <div className="form-body">
+                    <Form
+                        name="basic"
+                        form={form}
+                        layout="vertical"
+                        labelCol={{span: 8}}
+                        wrapperCol={{span: 24}}
+                        style={{width: '1000px'}}
+                        onFinish={() => {
+                            setIsEditModalOpen(true);
+                        }}
+                        autoComplete="off"
+                    >
+                        <Form.Item<FormFieldType>
+                            label="硬件环境"
+                            name="envHard"
+                            rules={[{required: true, message: '请选择硬件环境'}]}
+                        >
+                            <Checkbox.Group style={{width: '100%'}}>
+                                <Row>{envHardArray.map((item, index) => {
+                                    return (
+                                        <Col span={4} key={`envHard-${index}`}>
+                                            <Checkbox value={item.projEnvHardId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
+                                        </Col>
+                                    )
+                                })}</Row>
+                            </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item<FormFieldType>
+                            label="其他"
+                            name="envHardCustom"
+                            rules={[{required: false, message: '请输入其他硬件环境'}]}
+                        >
+                            <TextArea rows={3} placeholder="请输入其他硬件环境"/>
+                        </Form.Item>
+                        <Divider dashed />
+
+                        <Form.Item<FormFieldType>
+                            label="软件环境"
+                            name="envSoft"
+                            rules={[{required: true, message: '请选择软件环境'}]}
+                        >
+                            <Checkbox.Group style={{width: '100%'}}>
+                                <Row>{envSoftArray.map((item, index) => {
+                                    return (
+                                        <Col span={4} key={`envHard-${index}`}>
+                                            <Checkbox value={item.projEnvSoftId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
+                                        </Col>
+                                    )
+                                })}</Row>
+                            </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item<FormFieldType>
+                            label="其他"
+                            name="envSoftCustom"
+                            rules={[{required: false, message: '请输入其他软件环境'}]}
+                        >
+                            <TextArea rows={3} placeholder="请输入其他软件环境"/>
+                        </Form.Item>
+                        <Divider dashed />
+
+                        <Form.Item<FormFieldType>
+                            label="编程语言"
+                            name="envLang"
+                            rules={[{required: true, message: '请选择编程语言'}]}
+                        >
+                            <Checkbox.Group style={{width: '100%'}}>
+                                <Row>{envLangArray.map((item, index) => {
+                                    return (
+                                        <Col span={4} key={`envHard-${index}`}>
+                                            <Checkbox value={item.projEnvLangId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
+                                        </Col>
+                                    )
+                                })}</Row>
+                            </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item<FormFieldType>
+                            label="其他"
+                            name="envLangCustom"
+                            rules={[{required: false, message: '请输入其他编程语言'}]}
+                        >
+                            <TextArea rows={3} placeholder="请输入其他编程语言"/>
+                        </Form.Item>
+                        <Divider dashed />
+
+                        <Form.Item<FormFieldType>
+                            label="技术特点"
+                            name="envTechnical"
+                            rules={[{required: true, message: '请选择编程语言'}]}
+                        >
+                            <Checkbox.Group style={{width: '100%'}}>
+                                <Row>{envTechnicalArray.map((item, index) => {
+                                    return (
+                                        <Col span={4} key={`envHard-${index}`}>
+                                            <Checkbox value={item.projEnvTechnicalId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
+                                        </Col>
+                                    )
+                                })}</Row>
+                            </Checkbox.Group>
+                        </Form.Item>
+                        <Form.Item<FormFieldType>
+                            label="其他"
+                            name="envTechnicalCustom"
+                            rules={[{required: false, message: '请输入其他技术特点'}]}
+                        >
+                            <TextArea rows={3} placeholder="请输入其他技术特点"/>
+                        </Form.Item>
+                        <Divider dashed />
+                        <Form.Item wrapperCol={{span: 24}}>
+                            <Flex align="center" justify="center" gap="large">
+                                <Button type="primary"
+                                        htmlType="submit"
+                                        style={{backgroundColor: 'var(--color-primary)'}}>
+                                    保存
+                                </Button>
+                                <Button type="default" htmlType="button" onClick={() => {
+                                    nav(-1);
+                                }}>
+                                    返回
+                                </Button>
+                            </Flex>
+                        </Form.Item>
+                    </Form>
+                </div>
+            </div>
+            <Modal title="提示"
+                   okText="确定"
+                   cancelText="取消"
+                   open={isEditModalOpen}
+                   onOk={() => {
+                       setIsEditModalOpen(false);
+                       put({
+                           messageApi,
+                           url: `/api/proj/update/edit-step3/${pathParams.projId}`,
+                           body: {
+                               envHard: form.getFieldValue('envHard').join(','),
+                               envHardCustom: form.getFieldValue('envHardCustom'),
+                               envSoft: form.getFieldValue('envSoft').join(','),
+                               envSoftCustom: form.getFieldValue('envSoftCustom'),
+                               envLang: form.getFieldValue('envLang').join(','),
+                               envLangCustom: form.getFieldValue('envLangCustom'),
+                               envTechnical: form.getFieldValue('envTechnical').join(','),
+                               envTechnicalCustom: form.getFieldValue('envTechnicalCustom'),
+                           },
+                           onBefore() {
+                               setLoading(true);
+                           },
+                           onSuccess() {
+                               messageApi.open({
+                                   type: 'success',
+                                   content: '编辑成功'
+                               })
+                           },
+                           onFinally() {
+                               setLoading(false);
+                           }
+                       })
+                   }}
+                   onCancel={() => {
+                       setIsEditModalOpen(false);
+                   }}>
+                <div>确定提交吗？</div>
+            </Modal>
+            <Spin tip="正在提交..." spinning={loading} fullscreen/>
+        </>
+    )
+
+}

src/route/proj/edit/ProjEditStep4.tsx

@@ -0,0 +1,267 @@
+import './proj-edit-step.css';
+import {Breadcrumb, Cascader, Col, DatePicker, Flex, message, Modal, Row, Select, Spin} from "antd";
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import {Link, useNavigate, 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 dayjs, {Dayjs} from 'dayjs';
+import {ITree} from "../../../interfaces/dict/IDict.ts";
+
+type FieldType = {
+    authorName: string;
+    authorIdCardType: string;
+    authorIdCard: string;
+    authorNation: string;
+    authorProvince: string;
+    authorEstablishDate: Dayjs;
+};
+
+interface Option {
+    value?: string | number | null;
+    label: React.ReactNode;
+    children?: Option[];
+    isLeaf?: boolean;
+    id: string;
+    pId: string;
+}
+
+export default function ProjEditStep2() {
+    const nav = useNavigate();
+    const pathParams = useParams();
+    const [messageApi, contextHolder] = message.useMessage();
+    const [form] = Form.useForm<FieldType>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+    const [areaArray, setAreaArray] = useState<Option[]>([]);
+    const height = window.innerHeight - 180;
+    const dateFormat = 'YYYY年MM月DD日';
+
+    const listArea = (pId: string) => {
+        return new Promise<ITree[]>((resolve) => {
+            get({
+                messageApi,
+                url: '/api/area/list-area-ztree',
+                config: {
+                    params: {
+                        id: pId
+                    }
+                },
+                onSuccess({data}) {
+                    resolve(data);
+                }
+            })
+        })
+    }
+
+    useEffect(() => {
+        get({
+            messageApi,
+            url: `/api/proj/get/edit-step4/${pathParams.projId}`,
+            onSuccess({data}: AxiosResponse) {
+                form.setFieldsValue({
+                    authorName: data.authorName,
+                    authorIdCardType: data.authorIdCardType ? data.authorIdCardType : 'BUSINESS_LICENSE',
+                    authorIdCard: data.authorIdCard,
+                    authorNation: data.authorNation ? data.authorNation : '中国',
+                    authorProvince: data.authorProvince ? data.authorProvince.split(',') : '',
+                    authorEstablishDate: dayjs(data.authorEstablishDate, 'YYYY-MM-DD'),
+                })
+            }
+        })
+        listArea('0').then(data => {
+            const options: Option[] = data.map(item => {
+                return {
+                    value: item.name,
+                    label: item.name,
+                    isLeaf: !item.isParent,
+                    id: item.id,
+                    pId: item.pId
+                }
+            })
+            setAreaArray(options);
+        });
+    }, [])
+
+    return (
+        <>
+            {contextHolder}
+            <Breadcrumb
+                items={[
+                    {title: <Link to={'/'}>首页</Link>},
+                    {title: <Link to={'/proj-create'}>创建项目</Link>},
+                    {title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
+                    {title: '著作人信息'},
+                ]}
+            />
+            <div className="form-container" style={{height: `${height}px`}}>
+                <div className="form-body">
+                    <Form
+                        name="basic"
+                        form={form}
+                        layout="vertical"
+                        labelCol={{span: 8}}
+                        wrapperCol={{span: 24}}
+                        style={{width: '800px'}}
+                        onFinish={() => {
+                            setIsEditModalOpen(true);
+                        }}
+                        autoComplete="off"
+                    >
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="姓名或公司名称"
+                                    name="authorName"
+                                    rules={[{required: true, message: '请输入姓名或公司名称'}]}
+                                >
+                                    <Input placeholder="请输入姓名或公司名称"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="成立日期"
+                                    name="authorEstablishDate"
+                                    rules={[{required: true, message: '请选择成立日期'}]}
+                                >
+                                    <DatePicker placeholder="请选择成立日期"
+                                                format={dateFormat}
+                                                locale={locale}
+                                                style={{width: '100%'}}
+                                    />
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="证件类型"
+                                    name="authorIdCardType"
+                                    rules={[{required: true, message: '请选择证件类型'}]}
+                                >
+                                    <Select
+                                        placeholder="请选择样证件类型"
+                                        onChange={(value: string) => {
+                                            console.log(`selected ${value}`);
+                                        }}
+                                        options={[
+                                            {value: 'BUSINESS_LICENSE', label: '营业执照'},
+                                            {value: 'ID_CARD', label: '身份证'},
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="证件号"
+                                    name="authorIdCard"
+                                    rules={[{required: true, message: '请输入证件号'}]}
+                                >
+                                    <Input placeholder="请输入证件号"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={15}>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="国籍"
+                                    name="authorNation"
+                                    rules={[{required: true, message: '请选择国籍'}]}
+                                >
+                                    <Select
+                                        placeholder="请选择国籍"
+                                        options={[
+                                            {value: '中国', label: '中国'},
+                                        ]}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item<FieldType>
+                                    label="省市"
+                                    name="authorProvince"
+                                    rules={[{required: true, message: '请选择省市'}]}
+                                >
+                                    <Cascader options={areaArray}
+                                              loadData={(selectedOptions: Option[]) => {
+                                                  const targetOption = selectedOptions[selectedOptions.length - 1];
+                                                  listArea(targetOption.id).then(data => {
+                                                      targetOption.children = data.map(item => {
+                                                          return {
+                                                              value: item.name,
+                                                              label: item.name,
+                                                              isLeaf: !item.isParent,
+                                                              id: item.id,
+                                                              pId: item.pId
+                                                          }
+                                                      });
+                                                      setAreaArray([
+                                                          ...areaArray
+                                                      ])
+                                                  });
+                                              }}
+                                              placeholder="请选择省市"
+                                              changeOnSelect/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+
+                        <Form.Item wrapperCol={{span: 24}}>
+                            <Flex align="center" justify="center" gap="large">
+                                <Button type="primary"
+                                        htmlType="submit"
+                                        style={{backgroundColor: 'var(--color-primary)'}}>
+                                    保存
+                                </Button>
+                                <Button type="default" htmlType="button" onClick={() => {
+                                    nav(-1);
+                                }}>
+                                    返回
+                                </Button>
+                            </Flex>
+                        </Form.Item>
+                    </Form>
+                </div>
+            </div>
+            <Modal title="提示"
+                   okText="确定"
+                   cancelText="取消"
+                   open={isEditModalOpen}
+                   onOk={() => {
+                       setIsEditModalOpen(false);
+                       put({
+                           messageApi,
+                           url: `/api/proj/update/edit-step4/${pathParams.projId}`,
+                           body: {
+                               authorName: form.getFieldValue('authorName'),
+                               authorIdCardType: form.getFieldValue('authorIdCardType'),
+                               authorIdCard: form.getFieldValue('authorIdCard'),
+                               authorNation: form.getFieldValue('authorNation'),
+                               authorProvince: form.getFieldValue('authorProvince').join(','),
+                               authorEstablishDate: dayjs(form.getFieldValue('authorEstablishDate')).format(dateFormat),
+                           },
+                           onBefore() {
+                               setLoading(true);
+                           },
+                           onSuccess() {
+                               messageApi.open({
+                                   type: 'success',
+                                   content: '编辑成功'
+                               })
+                           },
+                           onFinally() {
+                               setLoading(false);
+                           }
+                       })
+                   }}
+                   onCancel={() => {
+                       setIsEditModalOpen(false);
+                   }}>
+                <div>确定提交吗？</div>
+            </Modal>
+            <Spin tip="正在提交..." spinning={loading} fullscreen/>
+        </>
+    )
+
+}

src/route/proj/edit/proj-edit-step.css

@@ -0,0 +1,12 @@
+.form-container {
+    background-color: var(--color-light);
+    padding: 30px 15px;
+    overflow: auto;
+}
+
+.form-container .form-body {
+    min-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/util/AjaxUtils.ts

@@ -63,7 +63,7 @@ export function post(req: Req) {
 
 export function put(req: Req) {
     req.onBefore?.();
-    Axios.put(req.url, req.config).then(res => {
+    Axios.put(req.url, req.body, req.config).then(res => {
         req.onSuccess(res);
     }).catch(error => {
         if (error.response) {