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 EditModal = props => { const { option, visible, messageVersion } = props; const [form] = Form.useForm(); const [templateName, setTemplateName] = useState([]); const [loading, setLoading] = useState(false); const [flag, setFlag] = useState(0); 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; } props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result }); form.resetFields(); }; useEffect(() => { if (visible) { form.setFieldsValue({ name: props.template.name, type: props.template.type, third_name: props.template.third_name == '-' ? '' : props.template.third_name, third_id: props.template.third_id == '-' ? '' : props.template.third_id, weixin: props.template.weixin == '-' ? '' : props.template.weixin, params: props.template.template_params1 == '-' ? '' : props.template.template_params1, param1: props.template.template_params2 == '-' ? '' : props.template.template_params2, desc: props.template.desc == '-' ? '' : props.template.desc, analysis_params: props.template.analysis_params == '-' ? '' : props.template.analysis_params, }); setTimeout(() => { console.log(form.getFieldsValue().type); setFlag(flag + 1); }, 0); if (option) { setTemplateName(option.filter(item => item.Type === props.template.type)); } } }, [props.template, visible]); const layout = { layout: 'horizontal', labelCol: { span: 10, }, wrapperCol: { span: 19, }, }; const onChangeType = value => { form.setFieldsValue({ third_name: '', third_id: '', weixin: '' }); console.log(option.filter(item => item.Type === value), '123'); setTemplateName(option.filter(item => item.Type === value)); }; const onChange = (value, options) => { form.setFieldsValue({ third_id: options.code, }); // setTemplateName(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> } bodyStyle={{ width: '100%', minHeight: '100px' }} 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="解析参数(仅针对2.0规则)" labelCol={{ span: 6 }} name="param1"> <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" /> </Item> <Item label="参数说明" labelCol={{ span: 6 }} name="desc"> <TextArea style={{ width: '95%' }} rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" /> </Item> <Item label="解析规则版本(仅针对1.0规则)" labelCol={{ span: 6 }} name="analysis_params"> <TextArea style={{ width: '95%' }} rows={2} placeholder="param1|param2|param3|param4" /> </Item> </Form> </div> </SiteModal> ); }; export default EditModal;