ai-admin/src/components/RegularManage/addRegular.js

import React, {
    useState, useEffect, useContext
} from 'react';
import { Form, Modal, Button, message, Space, Input } from 'antd';
import apiObj from '@api/index';
import RegularContext from './regular-context';
import { getValueFromEvent } from '@utils/index'
const { post, api, xPost } = apiObj;
const { TextArea } = Input;
function EditBlock(props) {
    useEffect(() => {
    }, []);
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const { regularDetail, type, flag } = useContext(RegularContext);
    const initialValues = regularDetail;
    const onFinish = values => {
        console.log(flag);
        if (flag == 1) {
            setVisible(true)
        } else {
            addRegular(values)
        }
    };
    //添加
    function addRegular(params) {
        let url
        if (type == 1) {
            url = api.addRegular
        } else {
            url = api.upRegularById
            params.id = regularDetail.id
        }
        post(url, params).then((res) => {
            if (res.data.code === 200) {
                props.userChange()
                message.success(res.data.message);
                form.resetFields();
            } else {
                message.error(res.data.message);
            }
        })
    }

    function cancel() {
        props.cancel()
    }
    return (
        <>
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                form={form}
                name="register"
                layout='horizontal'
                onFinish={onFinish}
                initialValues={initialValues}
            >
                <Form.Item label="正则式名称" name="name" getValueFromEvent={getValueFromEvent} rules={[{ required: true,message:'请输入正则式名称'},{ max: 30,message:'正则式名称不能超过30个字符' },{ pattern: /^[^\s]*$/,message: '请输入正则式名称',}]}>
                    <Input placeholder="请输入" autoComplete='off'/>
                </Form.Item>
                <Form.Item label="正则式值" name="val"  rules={[{ required: true,message:'请输入正则式值'},{ max: 512,message:'正则式值不能超过512个字符' },{ pattern: /^[^\s]*$/,message: '请输入正则式值',}]}>
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        placeholder="请输入"
                    />
                </Form.Item>
                <Form.Item label="说明" name="description" getValueFromEvent={getValueFromEvent} rules={[{ max: 200,message:'说明不能超过200个字符' }]}>
                    <TextArea
                        autoSize={{ minRows: 5, maxRows: 5 }}
                        placeholder="请输入"
                    />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }} style={{ marginTop: 15 }}>
                    <Space size="middle" >
                        <Button htmlType="button" onClick={e => cancel()}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <Modal
                title="提示"
                okText='确定'
                cancelText='取消'
                width={400}
                visible={visible}
                onOk={addRegular}
                /*confirmLoading={confirmLoading}*/
                onCancel={() => cancel()}
                maskClosable={false}
            >
                <p>该正则式关联字段校验规则，修改后将同步更新，确认修改？</p>
            </Modal>
        </>
    );
}

export default EditBlock;