AddModal.jsx 7.59 KB
Newer Older
mayongxin's avatar
mayongxin committed
1
import React, { useState, useEffect } from 'react'
2
import SiteModal from '@/components/Modal/SiteModa';
皮倩雯's avatar
皮倩雯 committed
3
import { Form, Input, notification, Select, Row, Col } from 'antd'
4 5

const { Item } = Form;
mayongxin's avatar
mayongxin committed
6
const { TextArea } = Input;
7

mayongxin's avatar
mayongxin committed
8

皮倩雯's avatar
皮倩雯 committed
9 10
const AddModal = props => {
    const { option } = props;
shaoan123's avatar
shaoan123 committed
11

12 13
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
shaoan123's avatar
shaoan123 committed
14
    const [templateName, setTemplateName] = useState([]);
mayongxin's avatar
mayongxin committed
15 16 17 18 19
    const onSubmit = () => {
        form.submit()
    }
    const onSubmitSuccess = () => {
        const result = form.getFieldValue()
shaoan123's avatar
shaoan123 committed
20
        props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
21
    }
shaoan123's avatar
shaoan123 committed
22 23 24 25 26 27 28 29 30
    useEffect(() => {
        if (option) {
            console.log('option',option);
            setTemplateName(option.filter(item => item.Type === '公众号'))
            form.setFieldsValue({
                type: '公众号'
            })
        }
    }, [props])
皮倩雯's avatar
皮倩雯 committed
31 32 33
    const layout = {
        layout: 'horizontal',
        labelCol: {
shaoan123's avatar
shaoan123 committed
34
            span: 4,
皮倩雯's avatar
皮倩雯 committed
35 36 37 38 39
        },
        wrapperCol: {
            span: 19,
        },
    };
40
    // useEffect(()=>{
shaoan123's avatar
shaoan123 committed
41

42
    // },[props.template])
shaoan123's avatar
shaoan123 committed
43
    const onChange = (value, option) => {
皮倩雯's avatar
皮倩雯 committed
44
        form.setFieldsValue({
shaoan123's avatar
shaoan123 committed
45 46 47 48 49 50 51 52
            third_id: option.code
        })
        // setTemplateName(option.filter(item => item.Type === value))

    };
    const onChangeType = (value) => {
        setTemplateName(option.filter(item => item.Type === value))
    }
53 54 55 56 57 58 59 60 61 62 63 64 65
    return (
        <SiteModal
            {...props}
            title="模板添加"
            bodyStyle={{ width: '100%', minHeight: '100px' }}
            style={{ top: 200, borderRadius: '20px' }}
            width="800px"
            destroyOnClose
            cancelText="取消"
            okText="确认"
            onOk={() => onSubmit()}
            confirmLoading={loading}
        >
皮倩雯's avatar
皮倩雯 committed
66 67
            <div style={{ width: "750px", height: "400px", overflowY: "scroll", overflowX: "hidden" }}>
                <Form form={form}  {...layout} onFinish={onSubmitSuccess}>
shaoan123's avatar
shaoan123 committed
68 69 70 71 72 73 74
                    <Item
                        label="模板名称"
                        wrapperCol={{ span: 17 }}
                        labelCol={{ span: 6 }}
                        style={{ marginBottom: '0' }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
皮倩雯's avatar
皮倩雯 committed
75
                            <Item
shaoan123's avatar
shaoan123 committed
76
                                label=""
皮倩雯's avatar
皮倩雯 committed
77 78 79 80 81 82 83 84
                                name="name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入模板名称',
                                    },
                                ]}
                            >
shaoan123's avatar
shaoan123 committed
85
                                <Input    style={{ width: '12rem' }} placeholder="请输入模板名称" />
皮倩雯's avatar
皮倩雯 committed
86 87 88 89 90 91 92 93 94 95 96
                            </Item>
                            <Item
                                label="模板类型"
                                name="type"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择模板类型',
                                    },
                                ]}
                            >
shaoan123's avatar
shaoan123 committed
97 98 99
                                <Select style={{ width: '10rem' }} onChange={(value) => onChangeType(value)} >
                                    <Select.Option value="公众号">公众号</Select.Option>
                                    <Select.Option value="短信">短信</Select.Option>
皮倩雯's avatar
皮倩雯 committed
100 101
                                </Select>
                            </Item>
shaoan123's avatar
shaoan123 committed
102 103 104 105 106 107 108 109 110 111 112
                        </div>
                    </Item>


                    <Item
                        label="请输入第三方模板名称"
                        wrapperCol={{ span: 17 }}
                        labelCol={{ span: 6 }}
                        style={{ marginBottom: '0' }}
                    >
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
皮倩雯's avatar
皮倩雯 committed
113
                            <Item
shaoan123's avatar
shaoan123 committed
114
                                label=""
皮倩雯's avatar
皮倩雯 committed
115 116 117 118 119 120 121 122 123 124 125
                                name="third_name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入第三方模板名称',
                                    },
                                ]}
                            >
                                {/* <Input placeholder="请输入模板名称" /> */}
                                <Select
                                    placeholder="请选择模板名称"
shaoan123's avatar
shaoan123 committed
126 127
                                    style={{ width: '12rem' }}
                                    onChange={(value, option) => onChange(value, option)}
皮倩雯's avatar
皮倩雯 committed
128
                                >
shaoan123's avatar
shaoan123 committed
129 130 131 132
                                    {templateName &&
                                        templateName.length > 0 &&
                                        templateName.map((item, index) => (
                                            <Select.Option value={item.Name} key={index} code={item.Code}>
皮倩雯's avatar
皮倩雯 committed
133
                                                {item.Name}
shaoan123's avatar
shaoan123 committed
134
                                            </Select.Option>
皮倩雯's avatar
皮倩雯 committed
135 136 137 138 139 140 141 142 143 144 145 146 147
                                        ))}
                                </Select>
                            </Item>
                            <Item
                                label="第三方模板编号"
                                name="third_id"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入第三方模板编号',
                                    },
                                ]}
                            >
shaoan123's avatar
shaoan123 committed
148
                                <Input disabled placeholder="请输入第三方模板编号" />
皮倩雯's avatar
皮倩雯 committed
149
                            </Item>
shaoan123's avatar
shaoan123 committed
150
                        </div></Item>
皮倩雯's avatar
皮倩雯 committed
151

shaoan123's avatar
shaoan123 committed
152 153
                    <Item
                        label="模板参数"
皮倩雯's avatar
皮倩雯 committed
154

shaoan123's avatar
shaoan123 committed
155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
                        name="params"
                        rules={[
                            {
                                required: true,
                                message: '请输入模板参数',
                            },
                        ]}
                    >
                        <TextArea rows={4} placeholder="first|Second|Third|Four" />
                    </Item>
                    <Item
                        label="参数说明"
                        name="desc"
                        rules={[
                            {
                                required: true,
                                message: '请输入参数说明',
                            },
                        ]}
                    >
                        <TextArea rows={4} placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息" />
                    </Item>
                    <Item
                        label="参数解析"
                        name="analysis_params"
                        rules={[
                            {
                                required: true,
                                message: '请输入参数解析',
                            },
                        ]}
                    >
                        <TextArea rows={4} placeholder="param1|param2|param3|param4" />
                    </Item>
mayongxin's avatar
mayongxin committed
189 190
                </Form>
            </div>
191 192 193 194 195

        </SiteModal>
    )
}
export default AddModal;