import React, { useState, useEffect } from 'react' import SiteModal from '@/components/Modal/SiteModa'; import { Form, Input, notification, Select, Row, Col } from 'antd' const { Item } = Form; const { TextArea } = Input; const AddModal = props => { const { option } = props; const [form] = Form.useForm(); const [loading, setLoading] = useState(false); const [templateName, setTemplateName] = useState([]); const onSubmit = () => { form.submit() } const onSubmitSuccess = () => { const result = form.getFieldValue() props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result }) form.resetFields() } useEffect(() => { if (option) { setTemplateName(option.filter(item => item.Type === '公众号')) form.setFieldsValue({ type: '公众号' }) } }, [props]) const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 19, }, }; // useEffect(()=>{ // },[props.template]) const onChange = (value, option) => { form.setFieldsValue({ third_id: option.code }) // setTemplateName(option.filter(item => item.Type === value)) }; const onChangeType = (value) => { setTemplateName(option.filter(item => item.Type === value)) } return ( <SiteModal {...props} title="模板添加" bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: 200, borderRadius: '20px' }} width="800px" destroyOnClose cancelText="取消" okText="确认" onOk={() => onSubmit()} confirmLoading={loading} > <div style={{ width: "750px", height: "500px", overflowY: "scroll", overflowX: "hidden" }}> <Form form={form} {...layout} onFinish={onSubmitSuccess}> <Item label="模板名称" wrapperCol={{ span: 17 }} labelCol={{ span: 6 }} style={{ marginBottom: '0' }} > <div style={{ display: 'flex', justifyContent: 'space-between' }}> <Item label="" name="name" rules={[ { required: true, message: '请输入模板名称', }, ]} > <Input style={{ width: '12rem' }} placeholder="请输入模板名称" /> </Item> <Item label="模板类型" name="type" rules={[ { required: true, message: '请选择模板类型', }, ]} > <Select style={{ width: '10rem' }} onChange={(value) => onChangeType(value)} > <Select.Option value="公众号">公众号</Select.Option> <Select.Option value="短信">短信</Select.Option> </Select> </Item> </div> </Item> <Item label="请输入第三方模板名称" wrapperCol={{ span: 17 }} labelCol={{ span: 6 }} style={{ marginBottom: '0' }} > <div style={{ display: 'flex', justifyContent: 'space-between' }}> <Item label="" name="third_name" rules={[ { required: true, message: '请输入第三方模板名称', }, ]} > {/* <Input placeholder="请输入模板名称" /> */} <Select placeholder="请选择模板名称" style={{ width: '12rem' }} onChange={(value, option) => onChange(value, option)} > {templateName && templateName.length > 0 && templateName.map((item, index) => ( <Select.Option value={item.Name} key={index} code={item.Code}> {item.Name} </Select.Option> ))} </Select> </Item> <Item label="第三方模板编号" name="third_id" rules={[ { required: true, message: '请输入第三方模板编号', }, ]} > <Input disabled placeholder="请输入第三方模板编号" /> </Item> </div></Item> <Item label="模板参数" labelCol={{ span: 6 }} name="params" rules={[ { required: true, message: '请输入模板参数', }, ]} > <TextArea rows={4} style={{width:'96%'}} placeholder="first|Second|Third|Four" /> </Item> <Item label="参数说明" name="desc" labelCol={{ span: 6 }} rules={[ { required: true, message: '请输入参数说明', }, ]} > <TextArea style={{width:'96%'}} rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" /> </Item> <Item label="参数解析" name="analysis_params" labelCol={{ span: 6 }} rules={[ { required: true, message: '请输入参数解析', }, ]} > <TextArea rows={4} style={{width:'96%'}} placeholder="param1|param2|param3|param4" /> </Item> </Form> </div> </SiteModal> ) } export default AddModal;