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

import './proj-edit-step.css';
import { Col, Flex, message, Modal, Row, Spin, Pagination, Image } from "antd";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import { get, put, downloadUrl } from "../../../util/AjaxUtils.ts";
import { Button, Form, Input } from 'antd';
import { AxiosResponse, } from "axios";
import { errorImage } from "../../../util/CommonUtil.ts";
// import { useRowStyle } from 'antd/es/grid/style/index';

const { TextArea } = Input;

type FieldType = {
    projName: string;
    projIntroduction: string;
    projStyleType: string;
    projCodeType: string;
    projDesc: string;
};

export default function ProjEditStep1(props: any) {
    // 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 [isPageImgModal, setIsPageImgModal] = useState(false);


    // 页面样式相关
    const [page, setpage] = useState(1)
    const [total, settotal] = useState(0)
    const [pageImgArray, setpageImgArray] = useState<any[]>([])
    // 页面样式图片
    const [previewImgs, setpreviewImgs] = useState('')
    const [codeTypePageId, setcodeTypePageId] = useState('')
    const height = window.innerHeight - 200

    // 缓存一个被选中的图品信息 做弹窗选择确定和返回的缓存
    const [selectedId, setSelectedId] = useState('')
    const [selectedImg, setSelectedImg] = useState('')
    // 初始化数据
    const init = () => {
        setpage(1)
    }
    // 获取页面样式图片等信息
    const getPageImgData = (page: number) => {
        get({
            messageApi,
            url: `/api/code/type/page/listpage`,
            config: {
                params: {
                    page: page,
                    rows: 10
                }
            },
            onSuccess(data: any) {
                // console.log(data);
                settotal(data.data.total)
                setpageImgArray(data.data.rows)
            }
        })
    }
    const openPageImgModal = () => {
        getPageImgData(page)
        setIsPageImgModal(true)
    }
    // const pageImgArray1 = [
    //     { codeTypePageId: '1', previewImgs: '嘻嘻嘻' },
    //     { codeTypePageId: '2', previewImgs: '呵呵' },
    //     { codeTypePageId: '3', previewImgs: '哈哈' },
    //     { codeTypePageId: '4', previewImgs: '哥哥' },
    //     { codeTypePageId: '5', previewImgs: 'xx' },
    //     { codeTypePageId: '6', previewImgs: '11' }
    // ]
    // 初始化表格数据
    const getData = () => {
        get({
            messageApi,
            url: `/api/proj/get/edit-step1/${pathParams.projId}`,
            onSuccess({ data }: AxiosResponse) {
                // console.log(data);

                form.setFieldsValue({
                    projName: data.projName,
                    projIntroduction: data.projIntroduction,
                    projDesc: data.projDesc
                })
                // ${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}
                setpreviewImgs(data.codeTypePage.previewImgs)
                setcodeTypePageId(data.codeTypePage.codeTypePageId)
                setSelectedId(data.codeTypePage.codeTypePageId)
                setSelectedImg(data.codeTypePage.previewImgs)
            }
        })
    }

    useEffect(() => {
        getData()

    }, [])


    return (
        <div style={{ height: `${height}px`, overflow: 'auto' }}>
            {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-container" style={{ paddingBottom: '13px', boxSizing: "border-box" }}>
                <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}>
                            <div className='projNameInt' style={{ marginLeft: 10 }}>
                                <div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
                                <Form.Item<FieldType>
                                    // label="项目名称"
                                    name="projName"
                                    rules={[{ required: true, message: '请输入项目名称' }]}
                                >
                                    <Input
                                        style={{ height: '50px', width: '300px', fontSize: '16px' }}
                                    />
                                </Form.Item>
                            </div>


                        </Row>
                        <div className='projNameInt'>
                            <div className='projTitle '><span className='redicon'>*</span> 页面样式:</div>
                            <Form.Item<FieldType>
                            // label="项目名称"
                            // name="projName"
                            // rules={[{ required: true, message: '请选择页面样式' }]}
                            >
                                <div className='pageImg' onClick={openPageImgModal} style={{ width: 300, height: 150 }}>
                                    {/* <img src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${codeTypePageId}`} alt="" /> */}
                                    <Image
                                        // src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`}
                                        src={downloadUrl(previewImgs, false)}
                                        fallback={errorImage}
                                        preview={false} width={300} height={150} />
                                </div>
                                <div style={{ color: '#939393', marginTop: '10px' }}>点击图片选择页面样式</div>
                            </Form.Item>
                        </div>
                        <Row gutter={15}>
                            <Col span={24}>
                                <div className='projNameInt'>
                                    <div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
                                    <div style={{ width: '1250px' }}>

                                        <Form.Item<FieldType>
                                            // label="项目简介"
                                            name="projIntroduction"
                                            rules={[{ required: true, message: '请输入项目简介' }]}
                                        >
                                            <TextArea
                                                style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
                                                rows={3} placeholder="请用一段话简单描述系统"
                                            />
                                        </Form.Item>
                                    </div>

                                </div>
                            </Col>
                        </Row>
                        <Row gutter={15}>


                        </Row>
                        <Row gutter={15}>
                            <Col span={24}>
                                <div className='projNameInt' >
                                    <div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
                                    <div style={{ width: '1250px' }}>
                                        <Form.Item<FieldType>
                                            // label="项目详细介绍"
                                            name="projDesc"
                                            extra="请对项目做出详细介绍，此内容在操作手册中引用"
                                            rules={[{ required: true, message: '请输入项目详细介绍' }]}
                                        >
                                            <TextArea
                                                style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
                                                rows={8} placeholder="请输入项目详细介绍" />
                                        </Form.Item>
                                    </div>
                                </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' }}
                                        size='large'
                                        onClick={() => {
                                            props.closeModal()

                                        }}>
                                        关闭
                                    </Button>
                                    <Button type="primary"
                                        htmlType="submit"
                                        // style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
                                        size='large'
                                    >
                                        保存
                                    </Button>

                                </Flex>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
            </div>

            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                destroyOnClose={true}
                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'),
                            codeTypePageId
                        },
                        onBefore() {
                            setLoading(true);
                        },
                        onSuccess() {
                            messageApi.open({
                                type: 'success',
                                content: '编辑成功'
                            })
                            setTimeout(() => {
                                props.closeModal()
                                // window.location.reload(); // 刷新页面
                            }, 500);

                        },
                        onFinally() {
                            setLoading(false);
                        }
                    })
                }}
                onCancel={() => {
                    setIsEditModalOpen(false);
                }}>
                <div>确定提交吗？</div>
            </Modal>


            {/* 选择页面样式弹窗 */}
            <Modal title="选择页面样式"
                okText="确定"
                cancelText="取消"
                destroyOnClose={true}
                open={isPageImgModal}
                width={1070}
                style={{ position: 'relative' }}
                onOk={() => {
                    // console.log(codeTypePageId);

                    init()
                    // getData()
                    setcodeTypePageId(selectedId)
                    setpreviewImgs(selectedImg)
                    setIsPageImgModal(false)
                }}
                onCancel={() => {
                    init()
                    setSelectedId(codeTypePageId)
                    setSelectedImg(previewImgs)
                    // getData()
                    setIsPageImgModal(false);
                }}

            >
                {/* <div style={{ height: `${height - 40}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap' }}>
                    <div className='selectPage'>
                        <div className='selectPageImg'>
                            <Checkbox style={{ margin: 5 }} onChange={onChange}></Checkbox>
                        </div>
                    </div>
                    <div className='selectPage'>
                        <div className='selectPageImg'>
                            <Checkbox style={{ margin: 5 }} onChange={onChange}></Checkbox>
                        </div>
                    </div>
                </div> */}
                <div style={{ height: `${height - 80}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap', marginTop: 10, }}>
                    {
                        pageImgArray.map((item) => {
                            // const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
                            return (
                                <div key={item.codeTypePageId} className={item.codeTypePageId == selectedId ? 'page-img-select page-img-selected' : 'page-img-select'}
                                    style={{ marginRight: '10px', marginBottom: '10px', height: 250 }}
                                    onClick={() => {
                                        setSelectedId(item.codeTypePageId)
                                        setSelectedImg(item.previewImgs)
                                    }}
                                >
                                    <div className="page-img" >
                                        <Image
                                            // src={imgSrc}
                                            src={downloadUrl(item.previewImgs, false)}
                                            fallback={errorImage}
                                            preview={false} width={500} height={250} />
                                    </div>
                                    <div className="page-title">
                                        <div className="checkbox"></div>
                                        {/* <div className="text">{props.title ? props.title : '标题'}</div> */}
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
                <div className='pagination'>
                    {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
                    <Pagination
                        showSizeChanger={false}
                        defaultCurrent={1} total={total} defaultPageSize={10} onChange={(page) => {
                            // console.log(page);
                            setpage(page)
                            setpageImgArray([])
                            getPageImgData(page)
                        }} />
                </div>

            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />

        </div>
    )

}