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

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: <a onClick={() => {nav(-1)}}>编辑项目</a>},
                    {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/>
        </>
    )

}