/* eslint-disable default-case */ /* eslint-disable no-undef */ 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, messageVersion, visible } = props; const [form] = Form.useForm(); const [loading, setLoading] = useState(false); const [templateName, setTemplateName] = useState([]); const onSubmit = () => { form.submit(); }; const onSubmitSuccess = () => { const result = form.getFieldValue(); if (result.type == 'APP' || result.type == 'WEB') { delete result.third_id; delete result.third_name; delete result.weixin; } console.log(result.type); console.log(result); props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result }); form.resetFields(); }; useEffect(() => { if (visible) { console.log(option); if (option) { setTemplateName(option.filter(item => item.Type === '公众号')); form.setFieldsValue({ type: '公众号', }); } } }, [props]); const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 19, }, }; const onChange = (value, option) => { form.setFieldsValue({ third_id: option.code, }); // setTemplateName(option.filter(item => item.Type === value)) }; const onChangeType = value => { form.setFieldsValue({ third_name: '', third_id: '', weixin: '' }); setTemplateName(option.filter(item => item.Type === value)); console.log(option.filter(item => item.Type === value)); }; const onChangeType1 = value => { form.setFieldsValue({ third_id: value, }); }; return ( <SiteModal {...props} title={ <span> <span style={{ marginRight: '20px' }}> <span>模板添加</span> </span> <span style={{ fontSize: '14px' }}>当前解析版本规则</span> <span style={{ color: 'rgb(24, 144, 255)' }}>{messageVersion}</span> </span> } style={{ top: 200, borderRadius: '20px' }} width="820px" destroyOnClose afterClose={() => { form.resetFields(); }} cancelText="取消" okText="确认" onOk={() => onSubmit()} confirmLoading={loading} > <div style={{ height: '500px', overflowY: 'scroll', overflowX: 'hidden' }}> <Form form={form} {...layout} onFinish={onSubmitSuccess}> <Row> <Col span={3} /> <Col span={12}> <Item label="模板名称" name="name" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} rules={[ { required: true, message: '请输入模板名称', }, ]} > <Input style={{ width: '80%' }} placeholder="请输入模板名称" /> </Item> </Col> <Col span={9}> <Item label="模板类型" name="type" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} rules={[ { required: true, message: '请选择模板类型', }, ]} > <Select style={{ width: '85%' }} onChange={value => onChangeType(value)}> <Select.Option value="公众号">公众号</Select.Option> <Select.Option value="短信">短信</Select.Option> <Select.Option value="APP">APP</Select.Option> <Select.Option value="WEB">WEB</Select.Option> <Select.Option value="企业微信">企业微信</Select.Option> </Select> </Item> </Col> </Row> {form.getFieldsValue().type === 'APP' || form.getFieldsValue().type === 'WEB' ? ( <></> ) : ( <> {form.getFieldsValue().type !== '企业微信' ? ( <> <Row> <Col span={12}> <Item label="第三方模板名称" name="third_name" wrapperCol={{ span: 12 }} labelCol={{ span: 12 }} rules={[ { required: true, message: '请选择第三方模板名称', }, ]} > {/* <Input placeholder="请输入模板名称" /> */} <Select placeholder="请选择模板名称" style={{ width: '120%' }} 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> </Col> <Col span={12}> <Item label="第三方模板编号" name="third_id" wrapperCol={{ span: 12 }} labelCol={{ span: 12 }} rules={[ { required: true, message: '请输入第三方模板编号', }, ]} > <Input placeholder="请输入第三方模板编号" style={{ width: '85%' }} /> </Item> </Col> </Row> </> ) : ( <> <Row> <Col span={12}> <Item label="第三方模板名称" wrapperCol={{ span: 12 }} labelCol={{ span: 12 }} name="third_name" rules={[ { required: true, message: '请选择第三方模板名称', }, ]} > <Select style={{ width: '120%' }} onChange={value => onChangeType1(value)} placeholder="请选择模板名称" > <Select.Option value="普通文本">普通文本</Select.Option> <Select.Option value="文字卡片">文字卡片</Select.Option> <Select.Option value="图片消息">图片消息</Select.Option> <Select.Option value="图片">图片</Select.Option> </Select> </Item> </Col> <Col span={12}> <Item label="企业微信应用id" wrapperCol={{ span: 12 }} labelCol={{ span: 12 }} name="weixin" rules={[ { required: true, message: '请输入企业微信号', }, ]} > <Input placeholder="请输入企业微信号" style={{ width: '160px' }} /> </Item> </Col> </Row> </> )} </> )} <Item label="模板参数(仅针对2.0规则)" labelCol={{ span: 6 }} name="params"> <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" /> </Item> <Item label="API解析参数(仅针对2.0规则)" labelCol={{ span: 6 }} name="param1"> <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" /> </Item> <Item label="参数说明" name="desc" labelCol={{ span: 6 }}> <TextArea style={{ width: '95%' }} rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" /> </Item> <Item label="解析规则版本(仅针对1.0规则)" name="analysis_params" labelCol={{ span: 6 }}> <TextArea rows={2} style={{ width: '95%' }} placeholder="param1|param2|param3|param4" /> </Item> </Form> </div> </SiteModal> ); }; export default AddModal;