flx-lms-fe/src/pages/staffmanage_staffinfo/form/StaffInfoadd.js

import React, { PureComponent } from 'react';
import {
    Modal,
    Form,
    Input,
    Select,
    InputNumber,
    Row,
    Col,
    message
} from 'antd';
import {
    UserOutlined,
    PhoneOutlined,
    TeamOutlined,
    ApartmentOutlined
} from '@ant-design/icons';

const { Option } = Select;

class StaffInfoAdd extends PureComponent {
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }

    // 提交表单
    handleSubmit = (values) => {
        console.log('新增人员信息:', values);
        
        // 这里可以调用API接口保存数据
        // 模拟保存成功
        message.success('新增人员成功！');
        
        // 重置表单
        this.formRef.current?.resetFields();
        
        // 调用父组件的回调函数
        if (this.props.onSuccess) {
            this.props.onSuccess(values);
        }
        
        // 关闭弹窗
        this.handleCancel();
    };

    // 取消操作
    handleCancel = () => {
        // 重置表单
        this.formRef.current?.resetFields();
        
        // 调用父组件的关闭回调
        if (this.props.onCancel) {
            this.props.onCancel();
        }
    };

    render() {
        const { visible, loading = false } = this.props;

        return (
            <Modal
                title="新增人员"
                open={visible}
                onOk={() => this.formRef.current?.submit()}
                onCancel={this.handleCancel}
                width={600}
                confirmLoading={loading}
                destroyOnClose={true}
                maskClosable={false}
            >
                <Form
                    ref={this.formRef}
                    layout="vertical"
                    onFinish={this.handleSubmit}
                    initialValues={{
                        workType: '全职'
                    }}
                >
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="name"
                                label="姓名"
                                rules={[
                                    { required: true, message: '请输入姓名' },
                                    { min: 2, max: 10, message: '姓名长度为2-10个字符' }
                                ]}
                            >
                                <Input
                                    placeholder="请输入姓名"
                                    prefix={<UserOutlined />}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="age"
                                label="年龄"
                                rules={[
                                    { required: true, message: '请输入年龄' }
                                ]}
                            >
                                <InputNumber
                                    placeholder="请输入年龄"
                                    min={18}
                                    max={65}
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="department"
                                label="部门"
                                rules={[
                                    { required: true, message: '请选择部门' }
                                ]}
                            >
                                <Select
                                    placeholder="请选择部门"
                                    suffixIcon={<ApartmentOutlined />}
                                >
                                    <Option value="技术部">技术部</Option>
                                    <Option value="产品部">产品部</Option>
                                    <Option value="运营部">运营部</Option>
                                    <Option value="财务部">财务部</Option>
                                    <Option value="人事部">人事部</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="position"
                                label="岗位"
                                rules={[
                                    { required: true, message: '请选择岗位' }
                                ]}
                            >
                                <Select
                                    placeholder="请选择岗位"
                                    suffixIcon={<TeamOutlined />}
                                >
                                    <Option value="高级工程师">高级工程师</Option>
                                    <Option value="产品经理">产品经理</Option>
                                    <Option value="运营专员">运营专员</Option>
                                    <Option value="会计">会计</Option>
                                    <Option value="HR专员">HR专员</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="workType"
                                label="工作性质"
                                rules={[
                                    { required: true, message: '请选择工作性质' }
                                ]}
                            >
                                <Select placeholder="请选择工作性质">
                                    <Option value="全职">全职</Option>
                                    {/* <Option value="兼职">兼职</Option> */}
                                    <Option value="实习">实习</Option>
                                    <Option value="外包">外包</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="phone"
                                label="电话"
                                rules={[
                                    { required: true, message: '请输入电话号码' },
                                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
                                ]}
                            >
                                <Input
                                    placeholder="请输入电话号码"
                                    prefix={<PhoneOutlined />}
                                    maxLength={11}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
}

export default StaffInfoAdd;