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

import './proj-edit-step.css';
import { Col, Flex, message, Modal, Row, Select, Spin } from "antd";
import { 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 (
        <div style={{ height: `${height}px`, overflow: 'auto',marginTop:'18px' }}>
            {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 style={{  }}>
                <div className="form-container" >

                    <div className='Step-title'>
                        <div className='Step-titlel'></div>
                        <div className='Step-titler'>标题简介</div>
                    </div>
                    <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}>
                                    <div className='projNameInt'>
                                        <div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
                                        <Form.Item<FieldType>
                                            // label="项目名称"
                                            name="projName"
                                            rules={[{ required: true, message: '请输入项目名称' }]}
                                        >
                                            <Input 
                                            style={{ height: '50px', width: '411px', fontSize: '16px' }}
                                             />
                                        </Form.Item>
                                    </div>
                                </Col>
                            </Row>
                            <Row gutter={15}>
                                <Col span={24}>
                                    <div className='projNameInt'>
                                        <div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
                                        <Form.Item<FieldType>
                                            // label="项目简介"
                                            name="projIntroduction"
                                            rules={[{ required: true, message: '请输入项目简介' }]}
                                        >
                                            <TextArea 
                                            style={{ resize: 'none', width: "411px", height: '105px', fontSize: '14px' }} 
                                            rows={3} placeholder="请用一段话简单描述系统" 
                                            />
                                        </Form.Item>
                                    </div>
                                </Col>
                            </Row>
                            <Row gutter={15}>
                                <Col span={24}>
                                    <div className='projNameInt'>
                                        <div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
                                        <Form.Item<FieldType>
                                            // label="样式类型"
                                            name="projStyleType"
                                            rules={[{ required: true, message: '请选择样式类型' }]}
                                        >
                                            <Select
                                                style={{ height: '50px', width: '411px', fontSize: '16px' }}
                                                placeholder="请选择样式类型"
                                                onChange={(value: string) => {
                                                    console.log(`selected ${value}`);
                                                }}
                                                options={[
                                                    { value: 'DEFAULT', label: '默认(WEB)' },
                                                ]}
                                            />
                                        </Form.Item>
                                    </div>
                                </Col>
                                <Col span={24}>
                                    <div className='projNameInt'>
                                        <div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
                                        <Form.Item<FieldType>
                                            // label="代码类型"
                                            name="projCodeType"
                                            rules={[{ required: true, message: '请选择代码类型' }]}
                                        >
                                            <Select
                                                style={{ height: '50px', width: '411px', fontSize: '16px' }}
                                                placeholder="请选择代码类型"
                                                onChange={(value: string) => {
                                                    console.log(`selected ${value}`);
                                                }}
                                                options={[
                                                    { value: 'code1', label: '默认类型' },
                                                ]}
                                            />
                                        </Form.Item>
                                    </div>

                                </Col>
                            </Row>
                            <Row gutter={15}>
                                <Col span={24}>
                                    <div className='projNameInt'>
                                        <div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
                                        <Form.Item<FieldType>
                                            // label="项目详细介绍"
                                            name="projDesc"
                                            extra="请对项目做出详细介绍，此内容在操作手册中引用"
                                            rules={[{ required: true, message: '请输入项目详细介绍' }]}
                                        >
                                            <TextArea
                                                style={{ resize: 'none', width: "411px", height: '125px', fontSize: '14px' }}
                                                rows={8} placeholder="请输入项目详细介绍" />
                                        </Form.Item>
                                    </div>

                                </Col>
                            </Row>

                            <div className='setProBtn'>
                                <Form.Item wrapperCol={{ span: 24 }}>
                                    <Flex align="center" justify="center" gap="large">
                                        <Button type="default" htmlType="button"
                                            style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
                                            onClick={() => {
                                                nav(-1);
                                            }}>
                                            返回
                                        </Button>
                                        <Button type="primary"
                                            htmlType="submit"
                                            style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
                                        >
                                            保存
                                        </Button>

                                    </Flex>
                                </Form.Item>
                            </div>
                        </Form>
                    </div>
                </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 />

        </div>
    )

}