fix: 消息平台修改

package.json

@@ -90,6 +90,8 @@
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.10.5",
         "@esri/calcite-colors": "6.0.3",
+        "@wangeditor/editor": "^5.1.23",
+        "@wangeditor/editor-for-react": "^1.0.6",
         "@wisdom-cesium/cesium": "^1.0.78",
         "@wisdom-cesium/krpano": "^1.0.29-17",
         "@wisdom-map/amap": "1.1.0-beta.45",

src/pages/platformCenter/messageManage/indexNew.jsx

@@ -2,8 +2,12 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Tabs, Table, Form, Input, Button, Tooltip, Tag, Space, Popconfirm, message } from 'antd';
 import { FundViewOutlined, EditTwoTone, DeleteOutlined } from '@ant-design/icons';
-import { GetMessageConfigs, DelMessageConfigs } from '@/services/messagemanage/messagemanage';
-import PageContainer from '@/components/BasePageContainer';
+import SchemeTest from './schemeDetails/schemeTest';
+import {
+  GetMessageConfigs,
+  DelMessageConfigs,
+  GetThirdpartyTemplates,
+} from '@/services/messagemanage/messagemanage';
 import styles from './index.less';
 
 const { TabPane } = Tabs;
@@ -13,9 +17,19 @@ const HostManager = () => {
   const history = useHistory();
   const [dataList, setDataList] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [schemeMsg, setSchemeMsg] = useState({});
   const searchValue = useRef();
+  const [msgTemplate, setMsgTemplate] = useState();
   const [form] = Form.useForm();
   useEffect(() => {
+    GetThirdpartyTemplates().then(res => {
+      if (res.code === 0) {
+        setMsgTemplate(res.data);
+      } else {
+        message.error(res.msg);
+      }
+    });
     getData();
   }, []);
   const getData = query => {
@@ -38,11 +52,14 @@ const HostManager = () => {
   const changeDesc = value => {
     history.push({
       pathname: `/platform/SchemeDetailNew`,
-      state: { schemeMsg: value },
+      state: { schemeMsg: value, msgTemplate },
     });
   };
   // 消息发送测试
-  const TestDesc = () => {};
+  const TestDesc = val => {
+    setSchemeMsg(val);
+    setVisible(true);
+  };
   // 删除消息
   const DeleteProject = val => {
     DelMessageConfigs({ Id: val.Id }).then(res => {
@@ -108,7 +125,7 @@ const HostManager = () => {
       width: '100px',
 
       render: record => {
-        if (record.PlatformStatus === 1) {
+        if (record.SMSStatus === 1) {
           return <Tag color="success">开</Tag>;
         }
         return <Tag color="processing">关</Tag>;
@@ -121,7 +138,7 @@ const HostManager = () => {
       key: 'Wechat',
       width: '100px',
       render: record => {
-        if (record.PlatformStatus === 1) {
+        if (record.WechatStatus === 1) {
           return <Tag color="success">开</Tag>;
         }
         return <Tag color="processing">关</Tag>;
@@ -134,7 +151,7 @@ const HostManager = () => {
       key: 'WorkWechat',
       width: '110px',
       render: record => {
-        if (record.PlatformStatus === 1) {
+        if (record.WorkWechatStatus === 1) {
           return <Tag color="success">开</Tag>;
         }
         return <Tag color="processing">关</Tag>;
@@ -162,14 +179,14 @@ const HostManager = () => {
       ellipsis: true,
       render: (text, record) => (
         <Space>
-          {/* <Tooltip title="测试">
+          <Tooltip title="测试">
             <FundViewOutlined
               style={{ fontSize: '16px', color: '#1890FF' }}
               onClick={() => {
                 TestDesc(record);
               }}
             />
-          </Tooltip> */}
+          </Tooltip>
           <Tooltip title="编辑">
             <EditTwoTone
               style={{ fontSize: '16px', color: '#e86060' }}
@@ -211,7 +228,7 @@ const HostManager = () => {
               onClick={() => {
                 history.push({
                   pathname: `/platform/schemeDetailNew`,
-                  state: { schemeMsg: null },
+                  state: { schemeMsg: null, msgTemplate },
                 });
               }}
             >
@@ -231,6 +248,12 @@ const HostManager = () => {
           scroll={{ y: 'calc(100% - 55px)' }}
         />
       </div>
+      <SchemeTest
+        visible={visible}
+        schemeMsg={schemeMsg}
+        onCancel={() => setVisible(false)}
+        onOk={() => {}}
+      />
     </div>
   );
 };

src/pages/platformCenter/messageManage/schemeDetails/components/EnterpriseWeChatConfig.jsx

@@ -24,6 +24,7 @@ const EnterpriseWeChatConfig = props => {
     console.log(formValue, 'formValue');
     if (formValue) {
       form.setFieldsValue({ ...formValue, WorkWechatStatus: formValue.WorkWechatStatus === 1 });
+      setFlag(flag + 1);
     }
   };
   // 监听表单

src/pages/platformCenter/messageManage/schemeDetails/components/PlatformConfig.jsx

 /* eslint-disable global-require */
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 import React, { useState, useEffect, useRef } from 'react';
 import { Form, Input, Select, Space, TreeSelect, Empty, Switch, Button, message } from 'antd';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-react';
+import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
 import {
   DeleteOutlined,
   PictureOutlined,
@@ -42,6 +45,17 @@ const PlatformConfig = props => {
   const [iconMaskShow, setIconMaskShow] = useState(false);
   const [previewModal, setPreviewModal] = useState(false); // 图片选择
   const [imgDataList, setImgDataList] = useState([]);
+  const [editor, setEditor] = useState(null);
+  // 编辑器内容
+  const [html, setHtml] = useState();
+  const toolbarConfig = {};
+  const editorConfig = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+      uploadImage: {},
+      lineHeightList: ['1', '1.5', '2', '2.5'],
+    },
+  };
   const [form] = Form.useForm();
   useEffect(() => {
     getMessageIcon();
@@ -55,6 +69,7 @@ const PlatformConfig = props => {
         PlatformIcon: `${window.location.origin}/${formValue.PlatformIcon}`,
         PlatformStatus: formValue.PlatformStatus === 1,
       });
+      setHtml(formValue.PlatformContent);
       if (!formValue?.PlatformIcon) {
         form.setFieldsValue({ PlatformIcon: defaultWebIcon });
       }
@@ -72,25 +87,26 @@ const PlatformConfig = props => {
   };
   // 监听表单
   const changeValue = (changedFields, allFields) => {
-    // console.log(Object.keys(changedFields), allFields, 'changedFields');
-    if (Object.keys(changedFields)[0] === 'PlatformContent') {
-      let regex = /\{@(.+?)\}/g;
-      let originalList = allFields.lines || [];
-      let list = changedFields.PlatformContent.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] === 'PlatformContent') {
+    //   let regex = /\{@(.+?)\}/g;
+    //   let originalList = allFields.lines || [];
+    //   let list = changedFields.PlatformContent.getHtml()
+    //     .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: [] });
+    //   }
+    // }
   };
   const mapTree = org => {
     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
@@ -151,6 +167,29 @@ const PlatformConfig = props => {
       </TreeNode>
     );
   };
+  const editorChange = editor => {
+    console.log(editor.getHtml());
+    let regex = /\{@(.+?)\}/g;
+    let originalList = form.getFieldValue('lines') || [];
+    let list = editor
+      .getHtml()
+      .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: [] });
+    }
+    setHtml(editor.getHtml());
+  };
   const onFinish = () => {
     if (!id) {
       message.error('请保存基础信息');
@@ -160,12 +199,14 @@ const PlatformConfig = props => {
     console.log(value);
     let PlatformIcon =
       value.PlatformIcon === defaultWebIcon ? '' : new URL(value.PlatformIcon).pathname;
-
+    PlatformIcon = PlatformIcon.substring(1);
+    console.log(PlatformIcon, 'PlatformIcon');
     if (value)
       AddPlatformStatus({
         ...value,
         PlatformIcon,
         PlatformStatus: value.PlatformStatus ? 1 : 0,
+        PlatformContent: html,
         id,
       }).then(res => {
         if (res.code === 0) {
@@ -185,7 +226,7 @@ const PlatformConfig = props => {
         labelAlign="left"
       >
         <div style={{ display: 'flex' }}>
-          <Form.Item
+          {/* <Form.Item
             label="消息类型"
             name="PlatformType"
             labelCol={{ span: 4 }}
@@ -199,7 +240,7 @@ const PlatformConfig = props => {
                 </Option>
               ))}
             </Select>
-          </Form.Item>
+          </Form.Item> */}
           <Form.Item
             label="消息标题"
             name="PlatformTitle"
@@ -264,6 +305,13 @@ const PlatformConfig = props => {
             )}
           </TreeSelect>
         </Form.Item>
+        <Form.Item
+          label="视频地址"
+          name="PlatformVideoUrl"
+          style={{ display: 'block', width: '1200px' }}
+        >
+          <Input placeholder="请填写视频地址" />
+        </Form.Item>
         <Form.Item label="图标" style={{ display: 'block' }}>
           <div
             className={styles.formImg}
@@ -288,15 +336,30 @@ const PlatformConfig = props => {
         </Form.Item>
         <Form.Item
           label="内容"
-          name="PlatformContent"
-          style={{ display: 'block', width: '1200px', height: '200px', marginBottom: '45px' }}
+          style={{ display: 'block', width: '1200px', height: '350px', marginBottom: '45px' }}
         >
-          <ReactQuill
+          <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
+            <Toolbar
+              editor={editor}
+              defaultConfig={toolbarConfig}
+              mode="default"
+              style={{ borderBottom: '1px solid #ccc' }}
+            />
+            <Editor
+              defaultConfig={editorConfig}
+              value={html}
+              onCreated={setEditor}
+              onChange={editor => editorChange(editor)}
+              mode="default"
+              style={{ height: '250px', overflowY: 'hidden' }}
+            />
+          </div>
+          {/* <ReactQuill
             style={{ height: '150px' }}
             placeholder="请输入内容"
             modules={modules}
             theme="snow" // 主题
-          />
+          /> */}
         </Form.Item>
         <Form.List name="lines">
           {fields => (

src/pages/platformCenter/messageManage/schemeDetails/components/ShortMessageConfig.jsx

@@ -5,28 +5,23 @@ import { AddSMSStatus } from '@/services/messagemanage/messagemanage';
 const { Option } = Select;
 const { TextArea } = Input;
 
-const typeList = [
-  { name: '通用报警', value: 1 },
-  { name: '系统通知', value: 2 },
-  { name: '自定义', value: 3 },
-];
-
 const ShortMessageConfig = props => {
-  const { formValue, id } = 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, SMSStaus: formValue.SMSStaus === 1 });
+      form.setFieldsValue({ ...formValue, SMSStatus: formValue.SMSStatus === 1 });
     }
   };
   // 监听表单
   const changeValue = (changedFields, allFields) => {
-    // console.log(Object.keys(changedFields), allFields, 'changedFields');
+    console.log(Object.keys(changedFields), allFields, 'changedFields');
     if (Object.keys(changedFields)[0] === 'SMSContent') {
       let regex = /\{@(.+?)\}/g;
       let originalList = allFields.lines || [];
@@ -45,6 +40,19 @@ const ShortMessageConfig = props => {
         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) {
@@ -54,7 +62,7 @@ const ShortMessageConfig = props => {
     let value = form.getFieldsValue(true);
     AddSMSStatus({
       ...value,
-      SMSStaus: value.SMSStaus ? 1 : 0,
+      SMSStatus: value.SMSStatus ? 1 : 0,
       id,
     }).then(res => {
       if (res.code === 0) {
@@ -81,10 +89,10 @@ const ShortMessageConfig = props => {
             wrapperCol={{ span: 20 }}
             style={{ width: '400px', marginRight: '15px', display: 'block' }}
           >
-            <Select placeholder="请选择消息类型" allowClear>
-              {typeList.map(item => (
-                <Option value={item.value} key={item.value}>
-                  {item.name}
+            <Select placeholder="请选择消息类型">
+              {template.map(item => (
+                <Option value={item.id} key={item.id}>
+                  {item.Name}
                 </Option>
               ))}
             </Select>
@@ -100,7 +108,7 @@ const ShortMessageConfig = props => {
           </Form.Item>
           <Form.Item
             label="是否开启"
-            name="SMSStaus"
+            name="SMSStatus"
             valuePropName="checked"
             style={{ width: '400px', display: 'block' }}
             labelCol={{ span: 4 }}

src/pages/platformCenter/messageManage/schemeDetails/components/WeChatConfig.jsx

@@ -8,7 +8,7 @@ const { TreeNode } = TreeSelect;
 const typeList = [{ name: '报警通知', value: 1 }, { name: '运行简报', value: 2 }];
 
 const WeChatConfig = props => {
-  const { menuMoblieList, formValue, id } = props;
+  const { menuMoblieList, formValue, id, template } = props;
   const [form] = Form.useForm();
   useEffect(() => {
     getFormData();
@@ -17,7 +17,7 @@ const WeChatConfig = props => {
   const getFormData = () => {
     console.log(formValue, 'formValue');
     if (formValue) {
-      form.setFieldsValue({ ...formValue, WechatStaus: formValue.WechatStaus === 1 });
+      form.setFieldsValue({ ...formValue, WechatStatus: formValue.WechatStatus === 1 });
     }
   };
   // 监听表单
@@ -41,6 +41,19 @@ const WeChatConfig = props => {
         form.setFieldsValue({ lines: [] });
       }
     }
+    if (Object.keys(changedFields)[0] === 'WechatType') {
+      let content = template.find(item => item.id === changedFields.WechatType);
+      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({ WechatContent: content.Param, lines: list, WechatCode: content.Code });
+    }
   };
   const mapAppTree = org => {
     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
@@ -80,7 +93,7 @@ const WeChatConfig = props => {
     let value = form.getFieldsValue(true);
     AddWechatStatus({
       ...value,
-      WechatStaus: value.WechatStaus ? 1 : 0,
+      WechatStatus: value.WechatStatus ? 1 : 0,
       id,
     }).then(res => {
       if (res.code === 0) {
@@ -107,10 +120,10 @@ const WeChatConfig = props => {
             wrapperCol={{ span: 20 }}
             style={{ width: '400px', marginRight: '15px', display: 'block' }}
           >
-            <Select placeholder="请选择消息类型" allowClear>
-              {typeList.map(item => (
-                <Option value={item.value} key={item.value}>
-                  {item.name}
+            <Select placeholder="请选择消息类型">
+              {template.map(item => (
+                <Option value={item.id} key={item.id}>
+                  {item.Name}
                 </Option>
               ))}
             </Select>
@@ -126,7 +139,7 @@ const WeChatConfig = props => {
           </Form.Item>
           <Form.Item
             label="是否开启"
-            name="WechatStaus"
+            name="WechatStatus"
             valuePropName="checked"
             style={{ width: '400px', display: 'block' }}
             labelCol={{ span: 4 }}

src/pages/platformCenter/messageManage/schemeDetails/schemeDetails.jsx

 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Button, Form, Input, Switch, Tooltip, Divider, Collapse, PageHeader, message } from 'antd';
-import { FieldTimeOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Form,
+  Input,
+  Switch,
+  Tooltip,
+  Divider,
+  Collapse,
+  PageHeader,
+  message,
+  Tabs,
+} from 'antd';
+import { FieldTimeOutlined, UsergroupAddOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import { getWebModuleTree } from '@/services/webConfig/api';
 import { getMiniAppModuleTree } from '@/services/mobileConfig/api';
 import {
@@ -21,24 +32,35 @@ const { Panel } = Collapse;
 
 const SchemeDetails = props => {
   const history = useHistory();
-  const { schemeMsg } = props.location.state;
+  const { schemeMsg, msgTemplate } = props.location.state;
   const [baseForm] = Form.useForm();
   const [menuWebList, setMenuWebList] = useState([]); // web菜单列表
   const [menuMoblieList, setMenuMoblieList] = useState([]); // app菜单列表
   const [IISConfig, setIISConfig] = useState(null); // 定时计划配置
   const [showRoleModal, setShowRoleModal] = useState(false); // 推送组选择角色弹窗
-
+  const [msgTemplates, setMsgTemplates] = useState({});
   const [flag, setFlag] = useState(0);
   const schemeTypeList = useRef({});
   const schemeId = useRef();
   const timePlan = useRef();
   const roleSelect = useRef([]);
   useEffect(() => {
-    console.log(schemeMsg, 'schemeMsg');
+    console.log(schemeMsg, msgTemplate, 'schemeMsg');
+    getTemplate();
     getFormData();
     getWebTree();
     getAppTRee();
   }, []);
+  // 获取模板信息
+  const getTemplate = () => {
+    let list = new Map([]);
+    msgTemplate.forEach(item => {
+      let children = list.get(item.Type) || [];
+      list.set(item.Type, [...children, item]);
+    });
+    setMsgTemplates(Object.fromEntries(list.entries()));
+    console.log(Object.fromEntries(list.entries()));
+  };
   const getFormData = () => {
     if (!schemeMsg) {
       return;
@@ -164,6 +186,14 @@ const SchemeDetails = props => {
       });
     }
   };
+  const tabRender = name => {
+    return (
+      <>
+        {name}
+        {/* <CheckCircleOutlined /> */}
+      </>
+    );
+  };
   return (
     <div className={styles.detailContent}>
       <PageHeader
@@ -247,7 +277,42 @@ const SchemeDetails = props => {
         >
           方案管理
         </Divider>
-        <Collapse accordion defaultActiveKey={['1']}>
+        <Tabs>
+          <Tabs.TabPane tab={tabRender('平台消息配置')} key="1">
+            <div style={{ height: '100%', overflowY: 'scroll' }}>
+              <PlatformConfig
+                id={schemeMsg ? schemeMsg?.Id : schemeId.current}
+                menuWebList={menuWebList}
+                menuMoblieList={menuMoblieList}
+                formValue={schemeMsg?.Platform}
+              />
+            </div>
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="短信消息配置" key="2">
+            <ShortMessageConfig
+              template={msgTemplates['短信'] || []}
+              formValue={schemeMsg?.SMS}
+              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
+            />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="微信公众号配置" key="3">
+            <WeChatConfig
+              template={msgTemplates['公众号'] || []}
+              menuMoblieList={menuMoblieList}
+              formValue={schemeMsg?.Wechat}
+              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
+            />
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="企业微信配置" key="4">
+            <EnterpriseWeChatConfig
+              menuMoblieList={menuMoblieList}
+              formValue={schemeMsg?.WorkWechat}
+              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
+            />
+          </Tabs.TabPane>
+        </Tabs>
+
+        {/* <Collapse accordion defaultActiveKey={['1']}>
           <Panel header={headerRender('平台消息配置')} key="1">
             <PlatformConfig
               id={schemeMsg ? schemeMsg?.Id : schemeId.current}
@@ -276,7 +341,7 @@ const SchemeDetails = props => {
               id={schemeMsg ? schemeMsg?.Id : schemeId.current}
             />
           </Panel>
-        </Collapse>
+        </Collapse> */}
       </div>
       <RoleModal
         selectValue={roleSelect.current.join('|')}

src/pages/platformCenter/messageManage/schemeDetails/schemeDetails.less

@@ -25,5 +25,13 @@
     flex: 1;
     overflow-y: scroll;
     padding: 5px;
+
+    .ant-tabs {
+      height: calc(100% - 150px);
+
+      .ant-tabs-content-holder {
+        overflow-y: scroll;
+      }
+    }
   }
 }
\ No newline at end of file

src/pages/platformCenter/messageManage/schemeDetails/schemeTest.jsx

+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Tabs } from 'antd';
+const SchemeTest = props => {
+  const { visible, onCancel, onOk, schemeMsg } = props;
+  return (
+    <div>
+      <Modal visible={visible} onCancel={onCancel} onOk={onOk} title="消息测试">
+        <Tabs>
+          <Tabs.TabPane tab="平台消息配置" key="1">
+            <div style={{ height: '100%', overflowY: 'scroll' }}>
+              {/* <PlatformConfig
+                id={schemeMsg ? schemeMsg?.Id : ''}
+                menuWebList={menuWebList}
+                menuMoblieList={menuMoblieList}
+                formValue={schemeMsg?.Platform}
+              /> */}
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+      </Modal>
+    </div>
+  );
+};
+
+export default SchemeTest;