fix: 重构消息平台首页

src/pages/platformCenter/messageManage/index.less

@@ -6,11 +6,18 @@
   background-color: #fff;
 
   .header {
+    font-size: 18px;
+    font-weight: 700;
     margin-bottom: 15px;
   }
 
   .content {
     height: calc(100% - 35px);
+    overflow-y: scroll;
+    display: flex;
+    flex-wrap: wrap;
+    
+    align-items: flex-start;
 
     :global {
       .ant-table-wrapper {
@@ -30,5 +37,60 @@
         }
       }
     }
+
+    .cardBox {
+      border: 1px solid #ccc;
+      padding: 10px;
+      border-radius: 10px;
+      height: 200px;
+      width: 382px;
+
+      margin: 10px 20px 10px 0;
+
+      .header {
+        border-bottom: 1px solid #ccc;
+        padding: 3px;
+      }
+
+      .cardContent {
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 10px;
+        display: flex;
+        flex-wrap: wrap;
+        .stadusBox {
+          display: flex;
+          height: 30px;
+          align-items: center;
+          width: 150px;
+          margin-bottom: 10px;
+          .value {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .footer {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        margin-top: 10px;
+
+        .operateBox {
+          display: flex;
+          width: 200px;
+          height: 30px;
+          align-items: center;
+          justify-content: center;
+          border-left: 1px solid #ccc;
+        }
+
+        .operateBox:nth-of-type(1) {
+          border: none;
+        }
+      }
+    }
   }
 }
\ No newline at end of file

src/pages/platformCenter/messageManage/indexNew.jsx

 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 {
+  FundViewOutlined,
+  EditTwoTone,
+  DeleteOutlined,
+  CheckOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
 import SchemeTest from './schemeDetails/schemeTest';
+import PushTest from './schemeDetails/components/PushTest/PushTest';
 import {
   GetMessageConfigs,
   DelMessageConfigs,
@@ -17,10 +24,11 @@ const HostManager = () => {
   const history = useHistory();
   const [dataList, setDataList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState({ configPage: false, personPage: false });
   const [schemeMsg, setSchemeMsg] = useState({});
   const searchValue = useRef();
   const [msgTemplate, setMsgTemplate] = useState();
+  const [testPersons, setTestPersons] = useState();
   const [form] = Form.useForm();
   useEffect(() => {
     GetThirdpartyTemplates().then(res => {
@@ -58,7 +66,7 @@ const HostManager = () => {
   // 消息发送测试
   const TestDesc = val => {
     setSchemeMsg(val);
-    setVisible(true);
+    setVisible({ ...visible, personPage: true });
   };
   // 删除消息
   const DeleteProject = val => {
@@ -71,6 +79,11 @@ const HostManager = () => {
       }
     });
   };
+  const savePersonTest = value => {
+    console.log(value, 'aaaaa');
+    setTestPersons(value);
+    setVisible({ personPage: false, configPage: true });
+  };
   const columns = [
     {
       title: '序号',
@@ -238,7 +251,7 @@ const HostManager = () => {
         </Form>
       </div>
       <div className={styles.content}>
-        <Table
+        {/* <Table
           loading={loading}
           bordered
           columns={columns}
@@ -246,14 +259,101 @@ const HostManager = () => {
           pagination={false}
           rowKey="Id"
           scroll={{ y: 'calc(100% - 55px)' }}
-        />
+        /> */}
+        {dataList.map(item => (
+          <div className={styles.cardBox}>
+            <div className={styles.header}>{item.SchemeName}</div>
+            <div className={styles.cardContent}>
+              <div className={styles.stadusBox}>
+                <div className={styles.label}>消息平台</div>
+                <div className={styles.value}>
+                  {item.Platform.PlatformStatus ? (
+                    <CheckOutlined style={{ color: '#1890FF' }} />
+                  ) : (
+                    <CloseOutlined style={{ color: '#e86060' }} />
+                  )}
+                </div>
+              </div>
+              <div className={styles.stadusBox}>
+                <div className={styles.label}>短信推送</div>
+                <div className={styles.value}>
+                  {item.SMS.SMSStatus ? (
+                    <CheckOutlined style={{ color: '#1890FF' }} />
+                  ) : (
+                    <CloseOutlined style={{ color: '#e86060' }} />
+                  )}
+                </div>
+              </div>
+              <div className={styles.stadusBox}>
+                <div className={styles.label}>公众号推送</div>
+                <div className={styles.value}>
+                  {item.Wechat.WechatStatus ? (
+                    <CheckOutlined style={{ color: '#1890FF' }} />
+                  ) : (
+                    <CloseOutlined style={{ color: '#e86060' }} />
+                  )}
+                </div>
+              </div>
+              <div className={styles.stadusBox}>
+                <div className={styles.label}>企业微信推送</div>
+                <div className={styles.value}>
+                  {item.WorkWechat.WorkWechatStatus ? (
+                    <CheckOutlined style={{ color: '#1890FF' }} />
+                  ) : (
+                    <CloseOutlined style={{ color: '#e86060' }} />
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className={styles.footer}>
+              <div className={styles.operateBox}>
+                <Tooltip title="测试">
+                  <FundViewOutlined
+                    style={{ fontSize: '16px', color: '#1890FF' }}
+                    onClick={() => {
+                      TestDesc(item);
+                    }}
+                  />
+                </Tooltip>
+              </div>
+              <div className={styles.operateBox}>
+                <Tooltip title="编辑">
+                  <EditTwoTone
+                    style={{ fontSize: '16px', color: '#1890FF' }}
+                    onClick={() => {
+                      changeDesc(item);
+                    }}
+                  />
+                </Tooltip>
+              </div>
+              <div className={styles.operateBox}>
+                <Popconfirm
+                  title="是否删除方案？"
+                  okText="确认"
+                  cancelText="取消"
+                  onConfirm={() => {
+                    DeleteProject(item);
+                  }}
+                >
+                  <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+                </Popconfirm>
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
       <SchemeTest
-        visible={visible}
+        visible={visible.configPage}
         schemeMsg={schemeMsg}
-        onCancel={() => setVisible(false)}
+        testPersons={testPersons}
+        onCancel={() => setVisible({ ...visible, configPage: false })}
         onOk={() => {}}
       />
+      <PushTest
+        onOk={savePersonTest}
+        visible={visible.personPage}
+        onCancel={() => setVisible({ ...visible, personPage: false })}
+      />
     </div>
   );
 };

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

+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Divider, TreeSelect, Empty, Switch, Button, message } from 'antd';
+
+const EnterpriseWeChatTest = (props, ref) => {
+  const { menuWebList, menuMoblieList, formValue } = props;
+  const [form] = Form.useForm();
+  const [parmarForm] = Form.useForm();
+  useEffect(() => {
+    if (!formValue) {
+      return;
+    }
+  }, [formValue]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => {
+    let obj = form.getFieldsValue(true);
+    let workWechat = {};
+    let allFields = parmarForm.getFieldsValue(true);
+    Object.keys(allFields).map(item => {
+      workWechat[formValue.lines.find(ele => ele.Description == item).Name] = allFields[item];
+    });
+    obj = { ...obj, workWechat };
+    return obj;
+  };
+
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+        }}
+      >
+        基础配置
+      </Divider>
+      <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        <Form.Item label="跳转路径" name="WorkWechatUrl">
+          <Input placeholder="请填写跳转路径" />
+        </Form.Item>
+      </Form>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+          display: formValue.lines?.length > 0 ? 'flex' : 'none',
+        }}
+      >
+        参数配置
+      </Divider>
+      <Form form={parmarForm} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        {formValue.lines?.map(item => (
+          <Form.Item label={item.Description} name={item.Description} key={item.Name}>
+            <Input placeholder={`请填写${item.Description}`} />
+          </Form.Item>
+        ))}
+      </Form>
+    </div>
+  );
+};
+
+export default forwardRef(EnterpriseWeChatTest);

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

@@ -168,7 +168,6 @@ const PlatformConfig = props => {
     );
   };
   const editorChange = editor => {
-    console.log(editor.getHtml());
     let regex = /\{@(.+?)\}/g;
     let originalList = form.getFieldValue('lines') || [];
     let list = editor

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

+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Divider, TreeSelect, Empty, Switch, Button, message } from 'antd';
+
+const PlatformTest = (props, ref) => {
+  const { menuWebList, menuMoblieList, formValue } = props;
+  const [form] = Form.useForm();
+  const [parmarForm] = Form.useForm();
+  useEffect(() => {
+    if (!formValue) {
+      return;
+    }
+  }, [formValue]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => {
+    let obj = form.getFieldsValue(true);
+    let platform = {};
+    let allFields = parmarForm.getFieldsValue(true);
+    Object.keys(allFields).map(item => {
+      platform[formValue.lines.find(ele => ele.Description == item).Name] = allFields[item];
+    });
+    obj = { ...obj, platform };
+    return obj;
+  };
+
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+        }}
+      >
+        基础配置
+      </Divider>
+      <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        <Form.Item label="网页跳转路径" name="PlatformWebUrl">
+          <Input placeholder="请填写网页跳转路径" />
+        </Form.Item>
+        <Form.Item label="APP跳转路径" name="PlatformAppUrl">
+          <Input placeholder="请填写APP跳转路径" />
+        </Form.Item>
+        <Form.Item label="视频地址" name="PlatformVideoUrl">
+          <Input placeholder="请填写视频地址" />
+        </Form.Item>
+      </Form>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+          display: formValue.lines?.length > 0 ? 'flex' : 'none',
+        }}
+      >
+        参数配置
+      </Divider>
+      <Form form={parmarForm} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        {formValue.lines?.map(item => (
+          <Form.Item label={item.Description} name={item.Description} key={item.Name}>
+            <Input placeholder={`请填写${item.Description}`} />
+          </Form.Item>
+        ))}
+      </Form>
+    </div>
+  );
+};
+
+export default forwardRef(PlatformTest);

src/pages/platformCenter/messageManage/schemeDetails/components/PushTest/CardCheck.jsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox } from 'antd';
+import styles from './PushTest.less';
+const CheckboxGroup = Checkbox.Group;
+
+const CardCheck = props => {
+  // 自定义获取改变后的值hooks
+  const usePrevious = value => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+  const { cardMsg, callback, checkList } = props;
+  const [checkedList, setCheckedList] = useState([]); // 选中列表
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [plainOptions, setPlainOptions] = useState([]);
+  const prevAmount = usePrevious({ checkedList });
+
+  useEffect(() => {
+    const msg = JSON.parse(JSON.stringify(cardMsg));
+    setPlainOptions(msg.plainOptions);
+    setCheckedList(msg.checkedList);
+    setIndeterminate(msg.indeterminate);
+    setCheckAll(msg.checkAll);
+  }, [cardMsg]);
+  // 获取勾选新增得数据
+  const addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
+  // 获取勾选删除得数据
+  const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
+  // 单选监听
+  const onChange = list => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (checkedList.length > list.length) {
+      // 取消勾选
+      arr = delData(checkedList, list);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    } else {
+      // 勾选元素
+      arr = addData(checkedList, list);
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    }
+    callback(newCheckList);
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+  };
+  // 全选监听
+  const onCheckAllChange = e => {
+    let newCheckList = [...checkList];
+    let arr;
+    if (e.target.checked) {
+      // 全选
+      arr = addData(checkedList, plainOptions.map(item => item.value));
+      arr.forEach(item => {
+        let checkName = plainOptions.find(ele => ele.value === item);
+        newCheckList.push(checkName);
+      });
+    } else {
+      arr = delData(checkedList, []);
+      arr.forEach(item => {
+        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
+      });
+    }
+    callback(newCheckList);
+    setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+  };
+  return (
+    <div className={styles.checkContent}>
+      <div className={styles.topCheckbox}>
+        <Checkbox
+          indeterminate={indeterminate}
+          onChange={e => onCheckAllChange(e)}
+          checked={checkAll}
+        >
+          {cardMsg.groupName}
+        </Checkbox>
+      </div>
+      <div className={styles.bottomCheckbox}>
+        <CheckboxGroup
+          value={checkedList}
+          onChange={list => onChange(list)}
+          style={{ display: 'flex', flexWrap: 'wrap' }}
+        >
+          {plainOptions.map(item => (
+            <Checkbox key={item.value} value={item.value}>
+              {item.label}
+            </Checkbox>
+          ))}
+        </CheckboxGroup>
+      </div>
+    </div>
+  );
+};
+
+export default CardCheck;

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

+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
+import { GetGroupUserTree, TestPush } from '@/services/messagemanage/messagemanage';
+import styles from './PushTest.less';
+import DragTable from '@/components/DragTable/DragTable';
+import CardCheck from './CardCheck';
+
+const PushTest = props => {
+  const { confirmModal, onCancel, visible, onOk } = props;
+  const [allList, setAllist] = useState([]); // 用于展示得数据
+  const [checkList, setCheckList] = useState([]); // 选中得数据集合
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchName, setSearchName] = useState();
+
+  useEffect(() => {
+    if (visible) {
+      setCurrentPage(1);
+      getData(searchName, 1, pageSize);
+    } else {
+      setCheckList([]);
+      setAllist([]);
+      setSearchName('');
+    }
+  }, [visible]);
+  // 选中后得回调函数
+  const checkCallBack = useCallback(newCheckList => {
+    if (newCheckList) {
+      setCheckList(newCheckList);
+    }
+  });
+  // 监听分页
+  const paginationChange = (page, pageSizes) => {
+    setCurrentPage(page);
+    setPageSize(pageSizes);
+    getData(searchName, page, pageSizes);
+  };
+  // 提交勾选的测试人员
+  const onFinish = () => {
+    console.log(checkList.map(item => item.value));
+    onOk(checkList.map(item => item.value));
+  };
+  // 搜索
+  const onSearch = () => {
+    setCurrentPage(1);
+    getData(searchName, 1, pageSize);
+  };
+  // 重置
+  const onReset = () => {
+    setCurrentPage(1);
+    getData('', 1, pageSize);
+    setSearchName('');
+  };
+  // 搜索框监听
+  const searchChange = e => {
+    setSearchName(e.target.value);
+  };
+  // 获取数据
+  const getData = (username, page, pageSizes) => {
+    setLoading(true);
+    GetGroupUserTree({
+      key: username,
+      pageSize: pageSizes,
+      PageIndex: page,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          setTotal(res.data.count);
+          // 数据处理成checkbox组件需要得形式
+          let list = res.data.data.map(item => {
+            let indeterminate = false;
+            let checkedList = [];
+            let checkAll = false;
+            let options = item.users.map(val => {
+              checkList.forEach(ele => {
+                if (val.userId === ele.value) {
+                  checkedList.push(ele.value);
+                }
+              });
+              return {
+                label: val.userName,
+                value: val.userId,
+              };
+            });
+            if (checkedList.length === options.length && checkedList.length > 0) {
+              checkAll = true;
+            }
+            if (checkedList.length < options.length && checkedList.length > 0) {
+              indeterminate = true;
+            }
+            return {
+              groupName: item.groupName,
+              groupId: item.groupId,
+              indeterminate,
+              checkAll,
+              checkedList,
+              plainOptions: options,
+            };
+          });
+          setAllist(list);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+        message.error('网络异常，请稍后再试');
+      });
+  };
+  // 拖拽后的回调函数
+  const dragCallBack = val => {
+    if (val) {
+      setCheckList(val);
+    }
+  };
+  const columns = [
+    {
+      title: '已选推送人',
+      dataIndex: 'label',
+      key: 'label',
+      width: 300,
+    },
+  ];
+  return (
+    <>
+      <Modal
+        title="选择推送人"
+        visible={visible}
+        onOk={onFinish}
+        width="900px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+      >
+        <div className={styles.pushTestContent}>
+          <div className={styles.leftContent}>
+            {/* 头部搜索框 */}
+            <div className={styles.searchHeader}>
+              <Input.Search
+                value={searchName}
+                placeholder="请输入部门或用户"
+                onChange={searchChange}
+                onSearch={onSearch}
+                enterButton
+                style={{ width: '300px', marginRight: '15px' }}
+              />
+              <Button type="primary" htmlType="submit" onClick={onReset}>
+                重置
+              </Button>
+            </div>
+            {/* 复选框模块 */}
+
+            <div className={styles.checkContainer}>
+              <Spin spinning={loading}>
+                {allList.map((item, index) => (
+                  <div className={styles.checkBoxContent} key={item.groupId}>
+                    <CardCheck
+                      cardMsg={item}
+                      cardIndex={index}
+                      callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
+                      checkList={checkList}
+                    />
+                  </div>
+                ))}
+              </Spin>
+            </div>
+          </div>
+          <div className={styles.tableRight}>
+            <Table
+              bordered
+              style={{ width: '350px', overflowX: 'hidden' }}
+              rowKey={record => record.value}
+              columns={columns}
+              dataSource={checkList}
+              pagination={false}
+              size="small"
+              dragCallBack={dragCallBack}
+              scroll={{ y: 530 }}
+              ItemTypes="pushTest"
+            />
+          </div>
+        </div>
+        <div>
+          {/* 分页 */}
+          <Pagination
+            total={total}
+            showTotal={(totals, range) => `共 ${totals} 条`}
+            defaultPageSize={pageSize}
+            defaultCurrent={1}
+            current={currentPage}
+            onChange={paginationChange}
+            style={{ width: '100%' }}
+            size="small"
+            showQuickJumper
+            showSizeChanger
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default PushTest;

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

+.pushTestContent {
+  display: flex;
+  .searchHeader {
+    display: flex;
+  }
+  .checkContainer {
+    height: 500px;
+    width: 500px;
+    overflow-y: scroll;
+    // margin: 20px 0;
+    padding-top: 20px;
+    padding-right: 5px;
+    .checkContent {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      border: 1px solid #c2cdfd;
+      border-radius: 5px;
+      // margin-top: 20px;
+      margin-bottom: 20px;
+      min-height: 50px;
+      padding: 0 10px 10px 20px;
+      .ant-checkbox-wrapper {
+        background-color: #fff;
+      }
+      .topCheckbox {
+        height: 20px;
+        margin: -10px 0 0 0px;
+        line-height: 20px;
+      }
+      .topCheckbox > label :hover {
+        font-weight: 600;
+      }
+      .bottomCheckbox {
+        margin-top: 10px;
+        .ant-checkbox-wrapper {
+          min-width: 150px;
+          margin-left: 0;
+        }
+        // .ant-checkbox-group-item {
+        //   min-width: 150px !important;
+        // }
+        // .ant-checkbox-wrapper {
+        //   min-width: 150px !important;
+        // }
+      }
+      .checkdiv {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+  .tableRight {
+    margin-left: 10px;
+  }
+}

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

+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Divider, TreeSelect, Empty, Switch, Button, message } from 'antd';
+
+const ShortMessageTest = (props, ref) => {
+  const { formValue } = props;
+  const [form] = Form.useForm();
+  const [parmarForm] = Form.useForm();
+  useEffect(() => {
+    if (!formValue) {
+      return;
+    }
+  }, [formValue]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => {
+    // let obj = form.getFieldsValue(true);
+    let obj = {};
+    let sms = {};
+    let allFields = parmarForm.getFieldsValue(true);
+    Object.keys(allFields).map(item => {
+      sms[formValue.lines.find(ele => ele.Description == item).Name] = allFields[item];
+    });
+    obj = { ...obj, sms };
+    return obj;
+  };
+
+  return (
+    <div>
+      {/* <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        <Form.Item label="网页跳转路径" name="PlatformWebUrl">
+          <Input placeholder="请填写网页跳转路径" />
+        </Form.Item>
+        <Form.Item label="APP跳转路径" name="PlatformAppUrl">
+          <Input placeholder="请填写APP跳转路径" />
+        </Form.Item>
+        <Form.Item label="视频地址" name="  ">
+          <Input placeholder="请填写视频地址" />
+        </Form.Item>
+      </Form> */}
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+        }}
+      >
+        参数配置
+      </Divider>
+      <Form form={parmarForm} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        {formValue.lines?.map(item => (
+          <Form.Item label={item.Description} name={item.Description} key={item.Name}>
+            <Input placeholder={`请填写${item.Description}`} />
+          </Form.Item>
+        ))}
+      </Form>
+    </div>
+  );
+};
+
+export default forwardRef(ShortMessageTest);

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

+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Divider, TreeSelect, Empty, Switch, Button, message } from 'antd';
+
+const WeChatTest = (props, ref) => {
+  const { menuWebList, menuMoblieList, formValue } = props;
+  const [form] = Form.useForm();
+  const [parmarForm] = Form.useForm();
+  useEffect(() => {
+    if (!formValue) {
+      return;
+    }
+  }, [formValue]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => {
+    let obj = form.getFieldsValue(true);
+    let wechat = {};
+    let allFields = parmarForm.getFieldsValue(true);
+    Object.keys(allFields).map(item => {
+      wechat[formValue.lines.find(ele => ele.Description == item).Name] = allFields[item];
+    });
+    obj = { ...obj, wechat };
+    return obj;
+  };
+
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+        }}
+      >
+        基础配置
+      </Divider>
+      <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        <Form.Item label="跳转路径" name="WechatUrl">
+          <Input placeholder="请填写跳转路径" />
+        </Form.Item>
+      </Form>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+          marginTop: '0px',
+          display: formValue.lines?.length > 0 ? 'flex' : 'none',
+        }}
+      >
+        参数配置
+      </Divider>
+      <Form form={parmarForm} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} labelAlign="left">
+        {formValue.lines?.map(item => (
+          <Form.Item label={item.Description} name={item.Description} key={item.Name}>
+            <Input placeholder={`请填写${item.Description}`} />
+          </Form.Item>
+        ))}
+      </Form>
+    </div>
+  );
+};
+
+export default forwardRef(WeChatTest);

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

@@ -311,37 +311,6 @@ const SchemeDetails = props => {
             />
           </Tabs.TabPane>
         </Tabs>
-
-        {/* <Collapse accordion defaultActiveKey={['1']}>
-          <Panel header={headerRender('平台消息配置')} key="1">
-            <PlatformConfig
-              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
-              menuWebList={menuWebList}
-              menuMoblieList={menuMoblieList}
-              formValue={schemeMsg?.Platform}
-            />
-          </Panel>
-          <Panel header={headerRender('短信消息配置')} key="2">
-            <ShortMessageConfig
-              formValue={schemeMsg?.SMS}
-              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
-            />
-          </Panel>
-          <Panel header={headerRender('微信公众号配置')} key="3">
-            <WeChatConfig
-              menuMoblieList={menuMoblieList}
-              formValue={schemeMsg?.Wechat}
-              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
-            />
-          </Panel>
-          <Panel header={headerRender('企业微信配置')} key="4">
-            <EnterpriseWeChatConfig
-              menuMoblieList={menuMoblieList}
-              formValue={schemeMsg?.WorkWechat}
-              id={schemeMsg ? schemeMsg?.Id : schemeId.current}
-            />
-          </Panel>
-        </Collapse> */}
       </div>
       <RoleModal
         selectValue={roleSelect.current.join('|')}

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

 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, Tabs } from 'antd';
+import { Modal, Tabs, message } from 'antd';
+import PlatformTest from './components/PlatformTest';
+import ShortMessageTest from './components/ShortMessageTest';
+import WeChatTest from './components/WeChatTest';
+import EnterpriseWeChatTest from './components/EnterpriseWeChatTest';
+
+import { getWebModuleTree } from '@/services/webConfig/api';
+import { getMiniAppModuleTree } from '@/services/mobileConfig/api';
+import { PushTest } from '@/services/messagemanage/messagemanage';
+import styles from './schemeTest.less';
 const SchemeTest = props => {
-  const { visible, onCancel, onOk, schemeMsg } = props;
+  const { visible, onCancel, onOk, schemeMsg, testPersons } = props;
+  const [menuWebList, setMenuWebList] = useState([]); // web菜单列表
+  const [menuMoblieList, setMenuMoblieList] = useState([]); // app菜单列表
+  const PlatformTestRef = useRef();
+  const ShortMessageTestRef = useRef();
+  const WeChatTestRef = useRef();
+  const EnterpriseWeChatTestRef = useRef();
+  useEffect(() => {
+    if (visible) {
+      console.log(schemeMsg);
+      // getAppTRee();
+      // getWebTree();
+    }
+  }, [visible]);
+
+  // 获取apptree数据
+  const getAppTRee = () => {
+    getMiniAppModuleTree({
+      userMode: 'super',
+    })
+      .then(res => {
+        if (res.code === 0) {
+          let list = res.data.find(item => item.id === 'MiniAppSite');
+          let applist = list.children.map(item => ({
+            ...item,
+            children: item.children[1].children,
+          }));
+          setMenuMoblieList(applist);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(err => {
+        message.error('网络异常请稍后再试');
+      });
+  };
+  const getWebTree = () => {
+    getWebModuleTree('super')
+      .then(res => {
+        const { code, data } = res;
+        if (code === 0) {
+          let list = data.find(item => item.id === 'Web4SingleStation');
+          let weblist = list.children.map(item => ({
+            ...item,
+            children: item.children[1].children,
+          }));
+          setMenuWebList(weblist);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(err => {
+        message.error('网络异常请稍后再试');
+      });
+  };
+  const onFinish = () => {
+    console.log(testPersons.join(','), 'testPersons');
+    let obj = {
+      id: schemeMsg.Id,
+      tousers: testPersons.join(','),
+      ...PlatformTestRef?.current?.getParmar(),
+      ...ShortMessageTestRef?.current?.getParmar(),
+      ...WeChatTestRef?.current?.getParmar(),
+      ...EnterpriseWeChatTestRef?.current?.getParmar(),
+    };
+    console.log(obj);
+
+    PushTest(obj).then(res => {
+      if (res.code === 0) {
+        message.success('发送成功');
+        onCancel();
+      } else {
+        message.error(res.msg);
+      }
+    });
+  };
   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
+        visible={visible}
+        onCancel={onCancel}
+        onOk={onFinish}
+        title="消息测试"
+        width={900}
+        maskClosable={false}
+        destroyOnClose
+      >
+        <div className={styles.schemeTestContent}>
+          <Tabs>
+            {schemeMsg?.Platform?.PlatformStatus ? (
+              <Tabs.TabPane tab="平台消息" key="1">
+                <div style={{ height: '100%', overflowY: 'scroll', paddingRight: '5px' }}>
+                  <PlatformTest
+                    ref={PlatformTestRef}
+                    id={schemeMsg ? schemeMsg?.Id : ''}
+                    menuWebList={menuWebList}
+                    menuMoblieList={menuMoblieList}
+                    formValue={schemeMsg?.Platform}
+                  />
+                </div>
+              </Tabs.TabPane>
+            ) : null}
+            {schemeMsg?.SMS?.SMSStatus ? (
+              <Tabs.TabPane tab="短信消息" key="2">
+                <div style={{ height: '100%', overflowY: 'scroll' }}>
+                  <ShortMessageTest ref={ShortMessageTestRef} formValue={schemeMsg?.SMS} />
+                </div>
+              </Tabs.TabPane>
+            ) : null}
+
+            {schemeMsg?.Wechat?.WechatStatus ? (
+              <Tabs.TabPane tab="微信公众号" key="3">
+                <div
+                  style={{
+                    height: '100%',
+                    overflowY: 'scroll',
+                  }}
+                >
+                  <WeChatTest
+                    ref={WeChatTestRef}
+                    id={schemeMsg ? schemeMsg?.Id : ''}
+                    menuWebList={menuWebList}
+                    menuMoblieList={menuMoblieList}
+                    formValue={schemeMsg?.Wechat}
+                  />
+                </div>
+              </Tabs.TabPane>
+            ) : null}
+            {schemeMsg?.WorkWechat?.WorkWechatStatus ? (
+              <Tabs.TabPane tab="企业微信" key="4">
+                <div style={{ height: '100%', overflowY: 'scroll' }}>
+                  <EnterpriseWeChatTest
+                    ref={EnterpriseWeChatTestRef}
+                    id={schemeMsg ? schemeMsg?.Id : ''}
+                    menuWebList={menuWebList}
+                    menuMoblieList={menuMoblieList}
+                    formValue={schemeMsg?.WorkWechat}
+                  />
+                </div>
+              </Tabs.TabPane>
+            ) : null}
+          </Tabs>
+        </div>
       </Modal>
     </div>
   );

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

+.schemeTestContent {
+  height: 550px;
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-content-holder {
+      height: 100%;
+      .ant-tabs-content {
+        height: 100%;
+      }
+    }
+  }
+}
\ No newline at end of file

src/services/messagemanage/messagemanage.js

@@ -2,7 +2,7 @@
  * @Author: dengchao 754083046@qq.com
  * @Date: 2022-11-28 19:05:07
  * @LastEditors: dengchao 754083046@qq.com
- * @LastEditTime: 2022-12-27 11:18:37
+ * @LastEditTime: 2023-01-11 16:05:10
  * @FilePath: \maintenance\src\services\messagemanage\messagemanage.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -71,3 +71,5 @@ export const AddWorkWechatStatus = param =>
 // 删除
 export const DelMessageConfigs = param =>
   get(`${PUBLISH_SERVICE}/MessageConfig/DelMessage_Configs`, param);
+// 消息测试
+export const PushTest = param => post(`${PUBLISH_SERVICE}/MessageConfig/PushTest`, param);