fix: '消息中心'

src/pages/platformCenter/messageManage/schemeDetail/schemeDetail.jsx

@@ -13,6 +13,8 @@ import {
   Card,
   Row,
   Col,
+  TreeSelect,
+  Empty,
   Switch as Switchs,
 } from 'antd';
 import BaseForm from '@/components/BaseForm/index';
@@ -20,7 +22,14 @@ import { Switch } from 'react-router';
 import { iteratee } from 'lodash';
 import v from 'voca';
 
-import { UsergroupDeleteOutlined, IdcardOutlined } from '@ant-design/icons';
+import {
+  UsergroupDeleteOutlined,
+  IdcardOutlined,
+  DesktopOutlined,
+  FolderFilled,
+  FileOutlined,
+  MobileOutlined,
+} from '@ant-design/icons';
 import moment from 'moment';
 import { useHistory } from 'react-router-dom';
 import VisibleRoleModal from '../projectManage/components/RolseSelect/VisibleRoleModal';
@@ -34,6 +43,9 @@ import {
   // eslint-disable-next-line import/no-duplicates
 } from '@/services/messagemanage/messagemanage';
 
+import { getWebModuleTree, getWebMenuInfo } from '@/services/webConfig/api';
+import { getMenuInfo, getMiniAppModuleTree } from '@/services/mobileConfig/api';
+
 import styles from './schemeDetail.less';
 const { Item } = Form;
 const { TextArea } = Input;
@@ -79,8 +91,15 @@ const EditModal = props => {
       desc: '由运维人员向所有用户或特定用户发送的事务公告，如系统升级、维护。',
     },
   ]);
+  const [menuWebList, setMenuWebList] = useState([]);
+  const [menuMoblieList, setMenuMoblieList] = useState([]);
+  const { TreeNode } = TreeSelect;
+  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
+  const [treeSelectValueMoblie, setTreeSelectValueMoblie] = useState(undefined);
 
   useEffect(() => {
+    getTreeWeb();
+    getTreeMoblie();
     GetMessageTemplate().then(res => {
       if (res.code === 0) {
         let arr1 = [];
@@ -115,6 +134,8 @@ const EditModal = props => {
     });
   }, []);
   useEffect(() => {
+    getTreeWeb();
+    getTreeMoblie();
     console.log('template', template);
     console.log(template.WorkWeiXinTemplateId);
     let aa;
@@ -160,6 +181,86 @@ const EditModal = props => {
       setBtnType('定时推送');
     }
   }, [props]);
+
+  const getTreeWeb = () => {
+    getWebModuleTree('super')
+      .then(res => {
+        setLoading(false);
+        const { code, data } = res;
+        if (code === 0) {
+          let list = [];
+          let arr = data.filter(item => item.id === 'Web4SingleStation');
+          let datalist = arr[0].children;
+          console.log(datalist);
+          datalist.map((i, j) => {
+            let aa = [];
+            i.children.map(k => {
+              if (k.text === '菜单管理') {
+                aa = k.children;
+              }
+            });
+            let a = {};
+            a.value = `praent${j}`;
+            a.text = i.text;
+            a.children = aa;
+            a.menuID = `praent${j}`;
+            a.key = `praent${j}`;
+            list.push(a);
+          });
+          console.log(list);
+          setMenuWebList(list);
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+
+  const getTreeMoblie = () => {
+    getMiniAppModuleTree({
+      userMode: 'super',
+    })
+      .then(res => {
+        if (res.code === 0) {
+          let array = (res.data[0].children.length > 0 && [...res.data[0].children]) || [];
+          console.log(array);
+          let list = [];
+          array.map((i, j) => {
+            let aa = [];
+            i.children.map(k => {
+              if (k.text === '菜单管理') {
+                aa = k.children;
+              }
+            });
+            let a = {};
+            a.value = `praent${j}`;
+            a.text = i.text;
+            a.children = aa;
+            a.menuID = `praent${j}`;
+            a.key = `praent${j}`;
+            list.push(a);
+          });
+          console.log(list);
+          setMenuMoblieList(list);
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+
   const onNameChange = e => {
     setPlan(e.target.value);
   };
@@ -384,6 +485,108 @@ const EditModal = props => {
     }
   });
 
+  const treeSelectOnchange = e => {
+    form.setFieldsValue({ web_path: '' });
+    getWebMenuInfo({
+      menuID: e,
+      _dc: Date.now(),
+    })
+      .then(res => {
+        if (res.code === 0) {
+          form.setFieldsValue({ web_path: res.data.pageUrl });
+          console.log(res.data.pageUrl);
+          setTreeSelectValue(res.data.pageUrl);
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 10,
+            description: res.msg || '获取失败',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  };
+
+  const treeSelectOnchangeMoblie = e => {
+    form.setFieldsValue({ app_path: '' });
+    getMenuInfo({
+      menuID: e,
+    })
+      .then(res => {
+        if (res.code === 0) {
+          form.setFieldsValue({ app_path: res.data.pageUrl });
+          console.log(res.data.pageUrl);
+          setTreeSelectValue(res.data.pageUrl);
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 10,
+            description: res.msg || '获取失败',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  };
+
+  const mapTree = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    return haveChildren ? (
+      <TreeNode
+        value={org.menuID}
+        title={org.text}
+        icon={org.key ? <DesktopOutlined /> : <FolderFilled />}
+        disabled
+      >
+        {org.children.map(item => mapTree(item))}
+      </TreeNode>
+    ) : (
+      <TreeNode
+        value={org.menuID}
+        title={org.text}
+        icon={<FileOutlined style={{ color: '#1890ff' }} />}
+      />
+    );
+  };
+
+  const mapTreeMoblie = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    return haveChildren ? (
+      <TreeNode
+        value={org.menuID}
+        title={org.text}
+        icon={org.key ? <MobileOutlined /> : <FolderFilled />}
+        disabled
+      >
+        {org.children.map(item => mapTree(item))}
+      </TreeNode>
+    ) : (
+      <TreeNode
+        value={org.menuID}
+        title={org.text}
+        icon={<FileOutlined style={{ color: '#1890ff' }} />}
+      />
+    );
+  };
+
+  const filterTreeNode11 = (inputValue, treeNode) => treeNode.title.indexOf(inputValue) > -1;
+
+  const onSearchApp = e => {
+    console.log(e);
+    if (e) {
+      form.setFieldsValue({ app_path: e });
+    }
+  };
+
+  const onSearchWeb = e => {
+    console.log(e);
+    if (e) {
+      form.setFieldsValue({ web_path: e });
+    }
+  };
   return (
     <div className={styles.editModal_container}>
       <Form form={form} onFinish={onSubmit}>
@@ -509,12 +712,32 @@ const EditModal = props => {
                         </Select>
                       </Item>
                       <Item label="功能路径" name="app_path" labelCol={{ span: 6 }}>
-                        <TextArea
+                        {/* <TextArea
                           rows={1}
                           style={{ width: '97%' }}
                           disabled={!currentTrench.isAPPShow}
                           placeholder="请输入功能路径"
-                        />
+                        /> */}
+                        <TreeSelect
+                          showSearch
+                          treeNodeFilterProp="title"
+                          style={{ width: '97%' }}
+                          value={treeSelectValueMoblie}
+                          disabled={!currentTrench.isAPPShow}
+                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                          placeholder="请选择功能路径"
+                          allowClear
+                          treeDefaultExpandAll
+                          treeIcon
+                          onSearch={onSearchApp}
+                          onChange={treeSelectOnchangeMoblie}
+                        >
+                          {menuMoblieList ? (
+                            menuMoblieList.map(i => mapTreeMoblie(i))
+                          ) : (
+                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                          )}
+                        </TreeSelect>
                       </Item>
                     </div>
                   </div>
@@ -579,12 +802,33 @@ const EditModal = props => {
                         </Select>
                       </Item>
                       <Item label="功能路径" name="web_path" labelCol={{ span: 6 }}>
-                        <TextArea
+                        {/* <TextArea
                           rows={1}
                           style={{ width: '97%' }}
                           disabled={!currentTrench.isWEBShow}
                           placeholder="请输入功能路径"
-                        />
+                        /> */}
+                        <TreeSelect
+                          showSearch
+                          treeNodeFilterProp="title"
+                          // filterTreeNode={filterTreeNode11}
+                          style={{ width: '97%' }}
+                          value={treeSelectValue}
+                          disabled={!currentTrench.isWEBShow}
+                          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                          placeholder="请选择功能路径"
+                          allowClear
+                          treeDefaultExpandAll
+                          treeIcon
+                          onChange={treeSelectOnchange}
+                          onSearch={onSearchWeb}
+                        >
+                          {menuWebList ? (
+                            menuWebList.map(i => mapTree(i))
+                          ) : (
+                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                          )}
+                        </TreeSelect>
                       </Item>
                     </div>
                   </div>