job-manage/src/pages/Main/Company/Department/index.tsx

import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
    ProTable, TableDropdown, PageContainer, ModalForm, ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag, Form } from 'antd';
import { useRef, useState } from 'react';
export const waitTimePromise = async (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export const waitTime = async (time: number = 100) => {
    await waitTimePromise(time);
};

const columns: ProColumns[] = [
    {
        title: 'ID',
        dataIndex: 'id',
    },
    {
        title: '企业名称',
        dataIndex: 'name',
    },
    {
        title: '来源',
        dataIndex: 'state',
    },
    {
        title: '登录次数',
        dataIndex: 'app_id',
    },
    {
        title: 'ApiKey',
        dataIndex: 'api_key',
    },
    {
        title: 'SecretKey',
        dataIndex: 'secret_key',
    },
    {
        title: '操作',
        valueType: 'option',
        key: 'option',
        render: (text, record, _, action) => [
            <a
                key="editable"
                onClick={() => {
                    action?.startEditable?.(record.id);
                }}
            >
                编辑
            </a>,
        ],
    },
];

export default () => {
    const [form] = Form.useForm<ProjectType.form>();
    const [data, setData] = useState([{id: 1}])
    return (
        <>
            <PageContainer>
                <ProTable
                    dataSource={data}
                    columns={columns}
                    pagination={{
                        pageSize: 5,
                        onChange: (page) => console.log(page),
                    }}
                    toolBarRender={() => [
                        <ModalForm<ProjectType.form>
                            title="新增项目"
                            trigger={
                                <Button type="primary">
                                    <PlusOutlined />
                                    新建表单
                                </Button>
                            }
                            submitter={{
                                render: (props, defaultDoms) => {
                                    return [
                                        <Button
                                            key="extra-reset"
                                            onClick={() => {
                                                props.reset();
                                            }}
                                        >
                                            重置
                                        </Button>,
                                        ...defaultDoms,
                                    ];
                                },
                            }}
                            form={form}
                            autoFocusFirstInput
                            modalProps={{
                                destroyOnClose: true,
                                onCancel: () => console.log('run'),
                            }}
                            submitTimeout={2000}
                            onFinish={async (values) => {
                                await waitTime(2000);
                                console.log(values.name);
                                return true;
                            }}
                        >
                            <ProFormText
                                name="name"
                                label="项目名"
                                placeholder="请输入项目名"
                            />
                            <ProFormSelect
                                name="aip_id"
                                label="选择百度接口"
                                placeholder="请选择百度接口"
                            />
                        </ModalForm>
                    ]}
                />
            </PageContainer>

        </>

    );
};