import React, { useState, useEffect, useRef } from 'react'; import { Form, Input, Select, Space, TreeSelect, Empty, Switch, Button, message } from 'antd'; import { DeleteOutlined } from '@ant-design/icons'; import { AddSMSStatus } from '@/services/messagemanage/messagemanage'; const { Option } = Select; const { TextArea } = Input; const ShortMessageConfig = props => { const { formValue, id, template } = props; const [form] = Form.useForm(); useEffect(() => { console.log(template, 'template'); getFormData(); }, []); const getFormData = () => { console.log(formValue, 'formValue'); if (formValue) { form.setFieldsValue({ ...formValue, SMSStatus: formValue.SMSStatus === 1 }); } }; // 监听表单 const changeValue = (changedFields, allFields) => { console.log(Object.keys(changedFields), allFields, 'changedFields'); if (Object.keys(changedFields)[0] === 'SMSContent') { let regex = /\{@(.+?)\}/g; let originalList = allFields.lines || []; let list = changedFields.SMSContent.match(regex)?.map(item => { let Name = item.substring(2, item.length - 1); let orgItem = originalList.find(ele => ele.Name === Name); return { Name, Description: orgItem ? orgItem.Description : '', DefaultValue: orgItem ? orgItem.DefaultValue : '', }; }); if (list) { form.setFieldsValue({ lines: list }); } else { form.setFieldsValue({ lines: [] }); } } if (Object.keys(changedFields)[0] === 'SMSType') { let content = template.find(item => item.id === changedFields.SMSType); let regex = /\{@(.+?)\}/g; let list = content.Param.match(regex)?.map(item => { let Name = item.substring(2, item.length - 1); return { Name, Description: '', DefaultValue: '', }; }); form.setFieldsValue({ SMSContent: content.Param, lines: list, SMSNumber: content.Code }); } }; const onFinish = () => { if (!id) { message.error('请保存基础信息'); return; } form.validateFields().then(values => { let value = JSON.parse(JSON.stringify(values)); AddSMSStatus({ ...value, SMSStatus: value.SMSStatus ? 1 : 0, id, }).then(res => { if (res.code === 0) { message.success('保存成功'); } else { message.error(res.msg); } }); }); }; return ( <div> <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 22 }} onValuesChange={changeValue} labelAlign="left" > <div style={{ display: 'flex' }}> <Form.Item label="消息类型" name="SMSType" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ width: '400px', marginRight: '15px', display: 'block' }} > <Select placeholder="请选择消息类型"> {template.map(item => ( <Option value={item.id} key={item.id}> {item.Name} </Option> ))} </Select> </Form.Item> <Form.Item label="短信编号" name="SMSNumber" style={{ width: '400px', display: 'block' }} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} > <Input placeholder="请填写消息标题" /> </Form.Item> <Form.Item label="是否开启" name="SMSStatus" valuePropName="checked" style={{ width: '400px', display: 'block' }} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </div> <Form.Item label="内容" name="SMSContent" style={{ display: 'block', width: '1200px' }}> <TextArea rows={4} placeholder="请输入内容" /> </Form.Item> <Form.List name="lines"> {fields => ( <> {fields.map(({ key, name, ...restField }) => ( <Space key={key} style={{ display: 'flex', marginBottom: 8, }} align="baseline" > <Form.Item {...restField} label="参数名" name={[name, 'Name']} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} > <Input readOnly /> </Form.Item> <Form.Item {...restField} name={[name, 'Description']} label="含义" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} rules={[ { required: true, message: '请填写含义', }, ]} > <Input placeholder="请填写含义" /> </Form.Item> <Form.Item {...restField} name={[name, 'DefaultValue']} label="默认值" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} // rules={[ // { // required: true, // message: '请填写默认值', // }, // ]} > <Input placeholder="请填写默认值" /> </Form.Item> {/* <MinusCircleOutlined onClick={() => remove(name)} /> */} </Space> ))} {/* <Form.Item> <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> Add field </Button> </Form.Item> */} </> )} </Form.List> <Form.Item> <Button type="primary" onClick={onFinish}> 保存 </Button> </Form.Item> </Form> </div> ); }; export default ShortMessageConfig;