perf:新增消息模板管理

src/pages/platformCenter/messageManage/templateManage/TemplateManage.jsx

-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
     // Tree,
     Table,
@@ -6,13 +6,16 @@ import {
     Input,
     Button,
     Select,
-    Popconfirm
+    Popconfirm,
+    message
 } from 'antd';
 import { PlusCircleOutlined } from '@ant-design/icons';
 
 const { Search } = Input;
 const { Option } = Select;
 import EditModal from './components/EditModal'
+import AddModal from './components/AddModal'
+import { GetMessageTemplate, UpdateMessageTemplate, DeleteMessageTemplate, InsertMessageTemplate, GetThirdpartyTemplates } from '@/services/platform/messagemanage'
 import styles from './TemplateManage.less'
 
 
@@ -20,7 +23,7 @@ import styles from './TemplateManage.less'
 const TemplateManage = () => {
 
     const [visibleParams, setvisibleParams] = useState({
-        modalVisible: false, // 新增弹窗
+        addVisible: false, // 新增弹窗
         delVisible: false, // 删除弹窗
         editVisible: false, // 修改弹窗
         spinLoading: false, // 加载弹窗
@@ -29,12 +32,49 @@ const TemplateManage = () => {
         checkBoxLoading: false,
     });
     const [currentTemplate, setCurrentTempalte] = useState({});
+    const [data, setData] = useState([])
+    const [flag,setFlag] = useState(0)
+
+
+    useEffect(() => {
+        getTemplateList()
+
+    }, [flag])
+
+    const getTemplateList = (obj) => {
+        GetMessageTemplate(obj).then(
+            res => {
+                let list = []
+                if (res.code === 0) {
+                    res.data.map((item, index) => {
+                        list.push({
+                            key: item.Id,
+                            Id:item.Id,
+                            name: item.LikeName,
+                            type: item.Type,
+                            third_name: item.Name,
+                            third_id:item.No,
+                            template_params: item.TDescription,
+                            analysis_params: item.ParsingRules,
+                            desc: item.ParsingDescription
+                        })
+                    })
+                    setData(list)
+                }
+            }
+        )
+    }
     const columns = [
+        {
+            title: '编号',
+            dataIndex: 'Id',
+            key: 'Id',
+            render: text => <a>{text}</a>,
+        },
         {
             title: '模板名称',
             dataIndex: 'name',
             key: 'name',
-            render: text => <a>{text}</a>,
         },
         {
             title: '模板类型',
@@ -56,16 +96,16 @@ const TemplateManage = () => {
             dataIndex: 'template_params',
             key: 'template_params',
         },
+        {
+            title: '模板参数说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
         {
             title: '解析参数',
             dataIndex: 'analysis_params',
             key: 'analysis_params',
         },
-        {
-            title: '参数说明',
-            dataIndex: 'desc',
-            key: 'desc',
-        },
         {
             title: '操作',
             dataIndex: 'action',
@@ -85,11 +125,11 @@ const TemplateManage = () => {
                 </Button>
                     <div onClick={e => e.stopPropagation()}>
                         <Popconfirm
-                            title="是否删除该连接的历史记录？"
+                            title="是否删除该模板？"
                             okText="确认"
                             cancelText="取消"
                             onConfirm={() => {
-                                //delConfirm(record);
+                                delTemplate(record);
                             }}
                         >
                             <Button size="small" danger>
@@ -102,179 +142,99 @@ const TemplateManage = () => {
         },
 
     ];
-    const data = [
-        {
-            key: '1',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '2',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '3',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '4',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '5',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '6',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '7',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '8',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '9',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '10',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '11',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '12',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
-
-        },
-        {
-            key: '13',
-            name: "节水报表通知",
-            type: "节水报表通知",
-            third_name: "节水报表通知",
-            third_id: "节水报表通知",
-            template_params: "节水报表通知",
-            analysis_params: "节水报表通知",
-            desc: "节水报表通知"
-
 
-        },
-    ]
     const placeholder = '请输入模板名称'
-    const handleSearch = () => {
-
+    const handleSearch = (value) => {
+        getTemplateList({ queryInfo: value })
+    }
+    const handleReset = () => {
+        getTemplateList()
     }
-    const changeDesc = (record)=>{
+    const handleSelectType = (value) => {
+        if (value === '全部') {
+            getTemplateList()
+        } else {
+            getTemplateList({ tempType: value })
+        }
+    }
+    const changeDesc = (record) => {
 
         setCurrentTempalte(record)
-        handleShowModal("editVisible",true)
+        handleShowModal("editVisible", true)
+    }
+    const AddTemplate= ()=>{
+        handleShowModal("addVisible", true)
+    }
+    const delTemplate = (record)=>{
+        DeleteMessageTemplate({
+            id:record.Id
+        }).then(
+            res =>{
+                if(res.code === 0){
+                    message.success("模板删除成功!")
+                    setFlag(flag + 1)
+                }else{
+                    message.warn("模板删除失败!")
+                }
+            }
+        )
     }
     // 弹出模态框
     const handleShowModal = (key, value) => {
         setvisibleParams({ ...visibleParams, [key]: value });
     };
+    //编辑
     const editModal = () => {
-
+        handleShowModal("editVisible", false)
+    }
+    const onSubmit = (result) => {
+        console.log(result)
+        UpdateMessageTemplate({
+            Id:result.Id,
+            Type:result.type,
+            LikeName:result.name,
+            Name:result.third_name,
+            No:result.third_id,
+            ParsingRules:result.analysis_params,
+            ParsingDescription:result.desc,
+            TDescription:result.params
+        }).then(
+            res =>{
+                if(res.code === 0){
+                    message.success("模板保存成功！")
+                    handleShowModal("editVisible", false)
+                    setFlag(flag + 1)
+                }else{
+                    message.warn("模板保存失败！")
+                }
+            }
+        )
+    }
+    //新增
+    const addModal = () => {
+        handleShowModal("editVisible", false)
+    }
+    const onAddSubmit = (result) => {
+        console.log(result)
+        InsertMessageTemplate({
+            Type:result.type,
+            LikeName:result.name,
+            Name:result.third_name,
+            No:result.third_id,
+            ParsingRules:result.analysis_params,
+            ParsingDescription:result.desc,
+            TDescription:result.params
+        }).then(
+            res =>{
+                if(res.code === 0){
+                    message.success("模板添加成功！")
+                    handleShowModal("addVisible", false)
+                    setFlag(flag + 1)
+                }else{
+                    message.warn("模板添加失败！")
+                }
+            }
+        )
     }
 
     return (
@@ -282,12 +242,12 @@ const TemplateManage = () => {
             <div className={styles.operate_bar}>
                 <div className={styles.template_type}>
                     <div className={styles.title}>模板类型</div>
-                    <Select placeholder="请选择是否!" defaultValue="0">
-                        <Option value="0">全部</Option>
-                        <Option value="1">公众号</Option>
-                        <Option value="2">短信</Option>
-                        <Option value="3">APP</Option>
-                        <Option value="4">WEB</Option>
+                    <Select placeholder="请选择是否!" defaultValue="全部" onChange={handleSelectType}>
+                        <Option value="全部">全部</Option>
+                        <Option value="公众号">公众号</Option>
+                        <Option value="短信">短信</Option>
+                        <Option value="APP">APP</Option>
+                        <Option value="WEB">WEB</Option>
                     </Select>
                 </div>
                 <div className={styles.fast_search}>
@@ -301,19 +261,31 @@ const TemplateManage = () => {
                         style={{ width: "300px" }}
                     />
                 </div>
-                <Button type="primary">重置</Button>
+                <Button type="primary" onClick={handleReset}>重置</Button>
 
-                <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />}>新增</Button>
+                <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />} onClick={AddTemplate}>新增</Button>
 
             </div>
             <div className={styles.list_view}>
-                <Table columns={columns} dataSource={data} pagination={{ pageSize: '10' }} />
+                <Table
+                    columns={columns}
+                    dataSource={data}
+                    pagination={{ pageSize: '10' }}
+                    scroll={{ y: '500px' }}
+                />
             </div>
             <EditModal
                 visible={visibleParams.editVisible}
                 template={currentTemplate}
                 onCancel={() => handleShowModal('editVisible', false)}
                 confirmModal={editModal}
+                onSubmit={ onSubmit}
+            />
+            <AddModal
+                visible={visibleParams.addVisible}
+                onCancel={() => handleShowModal('addVisible', false)}
+                confirmModal={addModal}
+                onSubmit={ onAddSubmit}
             />
 
         </div>

src/pages/platformCenter/messageManage/templateManage/TemplateManage.less

@@ -39,8 +39,6 @@
         width: 100%;
         height: calc(100vh - 184px);
         background-color: white;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
+       overflow-y: scroll;
     }
 }
\ No newline at end of file

src/pages/platformCenter/messageManage/templateManage/components/AddModal.jsx

+import React, {useState,useEffect } from 'react'
+import SiteModal from '@/components/Modal/SiteModa';
+import { Form, Input, notification, Select } from 'antd'
+
+const { Item } = Form;
+
+const AddModal = props => {
+
+    
+    const [form] = Form.useForm();
+    const [loading, setLoading] = useState(false);
+    const onSubmit = () => { 
+        let result = form.getFieldValue()
+        props.onSubmit&props.onSubmit({...result})
+    }
+
+    // useEffect(()=>{
+        
+    // },[props.template])
+    return (
+        <SiteModal
+            {...props}
+            title="模板添加"
+            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            style={{ top: 200, borderRadius: '20px' }}
+            width="800px"
+            destroyOnClose
+            cancelText="取消"
+            okText="确认"
+            onOk={() => onSubmit()}
+            confirmLoading={loading}
+        >
+            <Form form={form} labelCol={{ span: 4 }}>
+                <Item
+                    label="模板名称"
+                    name="name"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入模板名称',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入模板名称" />
+                </Item>
+                <Item
+                    label="模板类型"
+                    name="type"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请选择模板类型',
+                        },
+                    ]}
+                >
+                    <Select defaultValue={"公众号"}>
+                        <Option value="公众号">公众号</Option>
+                        <Option value="短信">短信</Option>
+                    </Select>
+                </Item>
+                <Item
+                    label="第三方模板名称"
+                    name="third_name"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入第三方模板名称',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入模板名称" />
+                </Item>
+                <Item
+                    label="第三方模板编号"
+                    name="third_id"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入第三方模板编号',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入模板名称" />
+                </Item>
+                <Item
+                    label="模板参数"
+                    name="params"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入模板参数',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入模板参数" />
+                </Item>
+                <Item
+                    label="参数说明"
+                    name="desc"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入参数说明',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入参数说明" />
+                </Item>
+                <Item
+                    label="参数解析"
+                    name="analysis_params"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入参数解析',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入参数解析" />
+                </Item>
+
+            </Form>
+        </SiteModal>
+    )
+}
+export default AddModal;
\ No newline at end of file

src/pages/platformCenter/messageManage/templateManage/components/EditModal.jsx

@@ -9,11 +9,26 @@ const EditModal = props => {
     
     const [form] = Form.useForm();
     const [loading, setLoading] = useState(false);
-    const onSubmit = () => { }
+    const onSubmit = () => { 
+        let result = form.getFieldValue()
+        props.onSubmit&props.onSubmit({Id:props.template.Id,...result})
+    }
+
+    useEffect(()=>{
+        form.setFieldsValue({
+            name:props.template.name,
+            type:props.template.type,
+            third_name:props.template.third_name,
+            third_id:props.template.third_id,
+            params:props.template.template_params,
+            desc:props.template.desc,
+            analysis_params:props.template.analysis_params,
+        })
+    },[props.template])
     return (
         <SiteModal
             {...props}
-            title="编辑站点"
+            title="模板编辑"
             bodyStyle={{ width: '100%', minHeight: '100px' }}
             style={{ top: 200, borderRadius: '20px' }}
             width="800px"
@@ -47,8 +62,8 @@ const EditModal = props => {
                     ]}
                 >
                     <Select >
-                        <Option value="1">公众号</Option>
-                        <Option value="2">短信</Option>
+                        <Option value="公众号">公众号</Option>
+                        <Option value="短信">短信</Option>
                     </Select>
                 </Item>
                 <Item

src/services/platform/messagemanage.jsx

+import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
+export const GetMessageTemplate = param =>
+    get(`${PUBLISH_SERVICE}/MessageTemplate/GetMessageTemplate`, param);
+export const InsertMessageTemplate = param =>
+    post(`${PUBLISH_SERVICE}/MessageTemplate/InsertMessageTemplate`, param);
+export const UpdateMessageTemplate = param =>
+    post(`${PUBLISH_SERVICE}/MessageTemplate/UpdateMessageTemplate`, param);
+export const DeleteMessageTemplate = param =>
+    get(`${PUBLISH_SERVICE}/MessageTemplate/DeleteMessageTemplate`, param);
+export const GetThirdpartyTemplates = param =>
+    get(`${PUBLISH_SERVICE}/MessageTemplate/GetThirdpartyTemplates`, param);
\ No newline at end of file