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

import './proj-edit-step.css';
import { Breadcrumb, Col, DatePicker, Flex, message, Modal, Row, Spin, Select, Table, Space } from "antd";
import { FolderAddOutlined } from '@ant-design/icons';
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 type { SearchProps } from 'antd/es/input/Search';
import type { TableColumnsType } from 'antd';
const { Search } = Input;
const { Column } = Table;
type FieldType = {
    projSubName: string;
    projVersion: string;
    projDevCompleteDate: Dayjs;
    companyName: string;
    companyNameEn: string;
};
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: 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日';

    // 表格第几行数据
    const [clom,setClom] = useState('')
    // 著作人搜索
    const belongPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
        console.log(info?.source, value),
        alert(value)
    );
    // 申请人信息搜索 applicantPeopleSearch
    const applicantPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
        console.log(info?.source, value),
        alert(value)
    );

    // 表格相关
    // rowSelection object indicates the need for row selection
    const rowSelection = {
        // selectedRowKeys: React.Key[]
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setClom(String(selectedRowKeys))
        },
       
    };
    // 表格数据
    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
        },
        {
            key: '4',
            name: 'Disabled User',
            age: 99,
            address: 'Sydney No. 1 Lake Park',
        },
    ];



    useEffect(() => {
        get({
            messageApi,
            url: `/api/proj/get/edit-step2/${pathParams.projId}`,
            onSuccess({ data }: AxiosResponse) {
                form.setFieldsValue({
                    projSubName: data.projSubName,
                    projVersion: data.projVersion,
                    projDevCompleteDate: data.projDevCompleteDate ? dayjs(data.projDevCompleteDate, 'YYYY-MM-DD') : '',
                    companyName: data.companyName,
                    companyNameEn: data.companyNameEn,
                })
            }
        })
    }, [])

    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 style={{ marginTop: '26px', height: '1500px', marginBottom: '40px', background: 'var(--color-light)' }}>

                    <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={{}}
                                onFinish={() => {
                                    setIsEditModalOpen(true);
                                }}
                                autoComplete="off"

                            >
                                <Row gutter={15}>
                                    <div className='projNameInt'>

                                        <div style={{ display: 'flex' }}>
                                            <div className='projTitle '> 项目简称:</div>

                                            <Form.Item<FieldType>
                                                // label="项目简称"
                                                name="projSubName"
                                                rules={[{ required: false, message: '请输入项目简称' }]}
                                            >
                                                <Input
                                                    style={{ height: '50px', width: '411px', fontSize: '16px' }}

                                                    placeholder="请输入项目简称" />
                                            </Form.Item>
                                        </div>
                                        <div style={{ display: 'flex' }}>
                                            <div className='projTitle ' style={{ marginLeft: '112px' }}><span className='redicon'>*</span> 开发完成时间:</div>

                                            <Form.Item<FieldType>
                                                // label="开发完成时间"
                                                name="projDevCompleteDate"
                                                rules={[{ required: true, message: '请输入开发完成时间' }]}
                                            >
                                                <DatePicker placeholder="请选择开发完成日期"
                                                    format={dateFormat}
                                                    locale={locale}
                                                    // style={{ width: '100%' }}
                                                    style={{ height: '50px', width: '411px', fontSize: '16px' }}

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

                                    </div>

                                </Row>
                                <Row gutter={15}>
                                    <div style={{ display: 'flex' }}>
                                        <div className='projTitle '><span className='redicon'>*</span> 项目版本:</div>

                                        <Form.Item<FieldType>
                                            // label="项目版本"
                                            name="projVersion"
                                            rules={[{ required: true, message: '请输入项目版本' }]}
                                        >
                                            <Input
                                                style={{ height: '50px', width: '411px', fontSize: '16px' }}

                                                placeholder="请输入项目版本" />
                                        </Form.Item>
                                    </div>

                                    {/* <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> */}
                                    <div style={{ display: 'flex' }}>
                                        <div className='projTitle ' style={{ marginLeft: '112px' }}><span className='redicon'>*</span> 公司名称:</div>

                                        <Form.Item<FieldType>
                                            // label="公司名称"
                                            name="companyName"
                                            // extra="公司名称在操作手册中引用"
                                            rules={[{ required: true, message: '请输入公司名称' }]}
                                        >
                                            <Input

                                                style={{ height: '50px', width: '411px', fontSize: '16px' }}
                                                placeholder="请输入公司名称" />
                                        </Form.Item>
                                    </div>

                                </Row>

                                <Row gutter={15}>
                                    {/* <Col span={12}>
                                        <Form.Item<FieldType>
                                            label="公司名称"
                                            name="companyName"
                                            extra="公司名称在操作手册中引用"
                                            rules={[{ required: true, message: '请输入公司名称' }]}
                                        >
                                            <Input placeholder="请输入公司名称" />
                                        </Form.Item>
                                    </Col> */}
                                    <div style={{ display: 'flex' }}>
                                        <div className='projTitle '><span className='redicon'>*</span> 公司英文名称:</div>

                                        <Form.Item<FieldType>
                                            // label="公司英文名称"
                                            name="companyNameEn"
                                            // extra="公司英文名称在操作手册中引用"
                                            rules={[{ required: true, message: '请输入公司英文名称' }]}
                                        >
                                            <Input
                                                style={{ height: '50px', width: '411px', fontSize: '16px' }}

                                                placeholder="请输入公司英文名称" />
                                        </Form.Item>
                                    </div>

                                </Row>
                                <div className='Step-title' style={{ marginTop: '86px' }}>
                                    <div className='Step-titlel'></div>
                                    <div className='Step-titler'>选择知识产权所属者</div>
                                </div>
                                <div style={{ padding: '22px 15px' }}>
                                    <div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
                                        根据《中国版权登记业务平台软件登记》相关要求，申请人需要再国版权登记业务平台注册并通过实名制认证。
                                        <span style={{ color: '#FDB33E' }}>了解实名制认证流程</span>
                                    </div>
                                    <div className='belongPeople-center'>
                                        <Button onClick={() => {
                                            alert(' 创建所属者')

                                        }} type="primary" icon={<FolderAddOutlined style={{ fontSize: '18px' }} />} style={{ width: "160px", height: '43px', fontSize: '14px' }}>
                                            创建所属者
                                        </Button>
                                        <div className='belongPeople-search'>
                                            <Search placeholder="请输入持有者名称搜索对应信息模板" onSearch={belongPeopleSearch} style={{ width: '353px', height: '43px' }} />
                                        </div>
                                        <div className='belongPeople-select'>
                                            <Select
                                                style={{ height: '43px', width: '183px', fontSize: '16px' }}
                                                onChange={(value: string) => {
                                                    console.log(`selected ${value}`);
                                                    alert(`selected ${value}`)

                                                }}
                                                options={[
                                                    { value: 'code1', label: '全部类型' },
                                                    { value: 'code2', label: '呵呵' },
                                                    { value: 'code3', label: '哈哈' },
                                                ]}
                                                defaultValue="code1"
                                            />
                                        </div>
                                        <div className='belongPeople-select'>
                                            <Select
                                                style={{ height: '43px', width: '183px', fontSize: '16px' }}
                                                onChange={(value: string) => {
                                                    console.log(`selected ${value}`);
                                                    alert(`selected ${value}`)
                                                }}
                                                options={[
                                                    { value: 'code1', label: '全部状态' },
                                                    { value: 'code2', label: '嘿嘿' },
                                                    { value: 'code3', label: '嘻嘻' },
                                                ]}
                                                defaultValue="code1"
                                            />
                                        </div>
                                    </div>
                                    <div className='belongPeople-bot'>
                                        {/* 表格 */}

                                        <Table
                                            rowSelection={{
                                                type: 'radio',
                                                ...rowSelection,
                                            }}
                                            // columns={columns}
                                    
                                            dataSource={data}
                                        >
                                            <Column title="所属者名称" dataIndex="name" key="key" />
                                            <Column title="所属类型" dataIndex="name" key="key" />
                                            <Column title="所属证件类型" dataIndex="address" key="key" />
                                            <Column title="所属者身份证号" dataIndex="address" key="key" />
                                            <Column title="实名认证状态" dataIndex="address" key="key" />
                                            <Column
                                                title="Action"
                                                key="action"
                                                render={() => (
                                                    <Space size="middle">
                                                        <a onClick={() => { alert(`编辑第${clom}行数据`)}}>编辑 </a>
                                                        <span style={ {color:'red'}}>|</span>
                                                        <a onClick={() => { alert(`查看第${clom}行数据`)}}>查看</a>
                                                    </Space>
                                                )}
                                            />
                                        </Table>

                                    </div>
                                </div>
                                <div className='Step-title' style={{ marginTop: '86px' }}>
                                    <div className='Step-titlel'></div>
                                    <div className='Step-titler'>申请人信息</div>
                                </div>
                                <div style={{ padding: '22px 15px' }}>
                                    <div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
                                        联系人用于接受平台相关业务办理进度的通知信息与各类协议的线下签章等工作。
                                    </div>
                                    <div className='belongPeople-center'>
                                        <Button onClick={() => {
                                            alert(' 创建联系人')

                                        }} type="primary" icon={<FolderAddOutlined style={{ fontSize: '18px' }} />} style={{ width: "160px", height: '43px', fontSize: '14px' }}>
                                            创建联系人
                                        </Button>
                                        <div className='belongPeople-search'>
                                            <Search placeholder="请输入持有者名称搜索对应信息" onSearch={applicantPeopleSearch} style={{ width: '353px', height: '43px' }} />
                                        </div>
                                    </div>
                                    <div className='belongPeople-bot'>
                                        {/* 表格 */}
                                    </div>
                                </div>


                                <div style={{ marginTop: '107px' }}>
                                    <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>
                                </div>
                            </Form>
                        </div>
                    </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 />
            </div>

        </>
    )

}