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

import './proj-edit-step.css';
import {
    Breadcrumb,
    Button,
    Col,
    Form,
    GetProp,
    Input,
    message,
    Row,
    Space,
    Upload,
    UploadFile,
    UploadProps
} from "antd";
import {Link, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {DevUserId, downloadUrl, get, post, uploadImageUrl} from "../../../util/AjaxUtils.ts";

type FormFieldType = {
    loginpageId: string;
    logo: string;
    bgImgs: string;
    subTitle: string;
    copyrightOwner: string;
    copyrightDate: string;
    adminUsername: string;
    adminPassword: string;
};

type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

export default function ProjConfigLoginpageShow() {
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FormFieldType>();
    const [logoImgArray, setLogoImgArray] = useState<UploadFile[]>([]);
    const [bgImgArray, setBgImgArray] = useState<UploadFile[]>([]);
    const [iframeSrcDoc, setIframeSrcDoc] = useState();
    const height = window.innerHeight - 210;

    const beforeUpload = (file: FileType) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('只能上传 JPG/PNG 格式文件!');
        }
        return isJpgOrPng;
    };

    const preview = () => {
        post<any>({
            messageApi,
            url: '/api/proj/preview',
            body: {
                projId: pathParams.projId,
                loginpageId: form.getFieldValue('loginpageId'),
                logo: logoImgArray.length > 0 ? logoImgArray[0].uid : '',
                bgImgs: bgImgArray.length > 0 ? bgImgArray[0].uid : '',
                subTitle: form.getFieldValue('subTitle'),
                copyrightOwner: form.getFieldValue('copyrightOwner'),
                copyrightDate: form.getFieldValue('copyrightDate'),
            },
            onSuccess({data}) {
                setIframeSrcDoc(data.data);
            }
        })
    }

    useEffect(() => {
        get<any>({
            messageApi,
            url: `/api/proj/get/config-loginpage/${pathParams.projId}`,
            onSuccess({data}) {
                form.setFieldValue('loginpageId', data.loginpageId);
                form.setFieldValue('subTitle', data.subTitle);
                form.setFieldValue('copyrightOwner', data.copyrightOwner);
                form.setFieldValue('copyrightDate', data.copyrightDate);
                form.setFieldValue('adminUsername', data.adminUsername);
                form.setFieldValue('adminPassword', data.adminPassword);
                if (data.logo) {
                    const url = downloadUrl(data.logo);
                    logoImgArray.push({
                        uid: data.logo,
                        name: 'logo.png',
                        status: 'done',
                        url: url,
                        thumbUrl: url,
                    })
                    setLogoImgArray([
                        ...logoImgArray
                    ])
                }
                if (data.bgImgs) {
                    const url = downloadUrl(data.bgImgs);
                    bgImgArray.push({
                        uid: data.bgImgs,
                        name: 'bg.png',
                        status: 'done',
                        url: url,
                        thumbUrl: url,
                    })
                    setBgImgArray([
                        ...bgImgArray
                    ])
                }
                preview();
            }
        })

    }, [])

    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="loginpage-body">
                    <Row gutter={15}>
                        <Col span={6}>
                            <Form
                                name="basic"
                                form={form}
                                layout="vertical"
                                labelCol={{span: 8}}
                                wrapperCol={{span: 24}}
                                disabled={true}
                                autoComplete="off"
                            >
                                <Form.Item label="副标题"
                                           name="subTitle"
                                           rules={[{required: false, message: '请输入副标题'}]}>
                                    <Input placeholder="请输入副标题" onChange={() => {
                                        preview()
                                    }}/>
                                </Form.Item>
                                <Form.Item>
                                    <Space.Compact>
                                        <Form.Item label="版权时间"
                                                   name="copyrightDate"
                                                   rules={[{required: false, message: '请输入版权时间'}]}
                                                   style={{display: 'inline-block', marginBottom: '0'}}>
                                            <Input placeholder="请输入版权时间" onChange={() => {
                                                preview()
                                            }}/>
                                        </Form.Item>
                                        <Form.Item label="版权人"
                                                   name="copyrightOwner"
                                                   rules={[{required: false, message: '请输入版权人'}]}
                                                   style={{display: 'inline-block', marginBottom: '0'}}>
                                            <Input placeholder="请输入版权人" onChange={() => {
                                                preview()
                                            }}/>
                                        </Form.Item>
                                    </Space.Compact>
                                </Form.Item>
                                <Form.Item>
                                    <Space.Compact>
                                        <Form.Item label="用户名"
                                                   name="adminUsername"
                                                   rules={[{required: true, message: '请输入用户名'}]}
                                                   style={{display: 'inline-block', marginBottom: '0'}}>
                                            <Input placeholder="请输入用户名"/>
                                        </Form.Item>
                                        <Form.Item label="密码"
                                                   name="adminPassword"
                                                   rules={[{required: true, message: '请输入密码'}]}
                                                   style={{display: 'inline-block', marginBottom: '0'}}>
                                            <Input placeholder="请输入密码"/>
                                        </Form.Item>
                                    </Space.Compact>
                                </Form.Item>
                                <Form.Item label="LOGO">
                                    <Upload
                                        name="image"
                                        listType="picture"
                                        maxCount={1}
                                        defaultFileList={logoImgArray}
                                        action={uploadImageUrl()}
                                        headers={{'X-USER-ID': DevUserId}}
                                        beforeUpload={beforeUpload}
                                    >
                                        <Button size="small" type="primary"
                                                style={{backgroundColor: 'var(--color-primary)'}}
                                                disabled={logoImgArray.length > 0}>上传</Button>
                                    </Upload>
                                </Form.Item>
                                <Form.Item label="背景">
                                    <Upload
                                        name="image"
                                        listType="picture"
                                        maxCount={1}
                                        defaultFileList={bgImgArray}
                                        action={uploadImageUrl()}
                                        headers={{'X-USER-ID': DevUserId}}
                                        beforeUpload={beforeUpload}
                                    >
                                        <Button size="small" type="primary"
                                                style={{backgroundColor: 'var(--color-primary)'}}
                                                disabled={bgImgArray.length > 0}>上传</Button>
                                    </Upload>
                                </Form.Item>
                            </Form>
                        </Col>
                        <Col span={18}>
                            <iframe srcDoc={iframeSrcDoc} style={{
                                width: '100%',
                                height: `${height - 10}px`,
                                border: '1px solid var(--color-border)'
                            }}/>
                        </Col>
                    </Row>
                </div>
            </div>
        </>
    )

}