fix: '树选择组件重构'

src/pages/productCenter/mobileConfig/index.jsx

@@ -82,6 +82,12 @@ const MobileConfigPage = props => {
         Modal.confirm({
           title: '确认删除应用?',
           icon: <ExclamationCircleOutlined />,
+          content: (
+            <span>
+              删除应用 <span style={{ fontWeight: 800, color: '#1890ff' }}>{key}</span>{' '}
+              后，将一并删除所属角色与菜单，确认删除?
+            </span>
+          ),
           okText: '确认',
           cancelText: '取消',
           onOk: closeModal => {

src/pages/productCenter/webConfig/components/HomeConfigModal.jsx

@@ -3,7 +3,7 @@ import { Modal, Form, Select, Input, Checkbox, message } from 'antd';
 import lodash from 'lodash';
 import styles from './HomeConfigModal.less';
 import { GetRoleGroups } from '@/services/webConfig/api';
-import TreeSelect from '../menuconfig/TreeSelect';
+import TreeSelect from '../menuconfig/NewTreeSelect';
 const { Option } = Select;
 const HomeConfigModal = props => {
   const {
@@ -13,7 +13,9 @@ const HomeConfigModal = props => {
     visible,
     onFinish,
     currentPageConfig,
+    userMode,
     client,
+    curWeb,
   } = props;
   const [form] = Form.useForm();
 
@@ -261,7 +263,7 @@ const HomeConfigModal = props => {
           </Form.Item> */}
           <Form.Item label="主页Url" name="homePage">
             {/* <Input placeholder="请输入主页路径" autoComplete="off" /> */}
-            <TreeSelect menuChange={val => {}} />
+            <TreeSelect menuChange={val => {}} userMode={userMode} curWeb={curWeb} />
           </Form.Item>
         </Form>
         <div className={styles.roleCheck}>{checkRender(checkList)}</div>

src/pages/productCenter/webConfig/components/HomePageConfigs.jsx

@@ -7,7 +7,7 @@ import HomeConfigModal from './HomeConfigModal';
 import styles from './HomePageConfigs.less';
 
 const HomePageConfigs = (props, ref) => {
-  const { productList, client, roleHomePages, allProductList } = props;
+  const { productList, client, roleHomePages, allProductList, curWeb, userMode } = props;
   const [orderTable, setOrderTable] = useState([]);
   const [visible, setVisible] = useState(false);
   const [modalType, setModalType] = useState();
@@ -161,6 +161,8 @@ const HomePageConfigs = (props, ref) => {
         modalType={modalType}
         productList={productList}
         allProductList={allProductList}
+        userMode={userMode}
+        curWeb={curWeb}
         client={client}
         currentPageConfig={currentPageConfig}
         onFinish={val => onsubmit(val)}

src/pages/productCenter/webConfig/components/siteConfigDrawer.js

@@ -59,7 +59,9 @@ export default props => {
     submitting,
     productList,
     allProductList,
+    userMode,
     webs,
+    curWeb,
   } = props;
   const [form] = Form.useForm();
   const [loginPages, setLoginPages] = useState([]);
@@ -504,6 +506,8 @@ export default props => {
         </Form.Item>
         <HomePageConfigs
           ref={homepageConfigRef}
+          userMode={userMode}
+          curWeb={curWeb}
           roleHomePages={homePageConfig}
           productList={productList}
           allProductList={allProductList}

src/pages/productCenter/webConfig/index.jsx

@@ -195,7 +195,7 @@ const WebConfigPage = props => {
             <span>
               删除网站{' '}
               <span style={{ fontWeight: 800, color: '#1890ff' }}>{webToOperate.text}</span>{' '}
-              后将无法恢复, 确认删除?
+              后，将一并删除所属角色与菜单，确认删除?
             </span>
           ),
           okText: '确认',
@@ -471,9 +471,11 @@ const WebConfigPage = props => {
           </div>
           <SiteConfig
             webs={webs}
+            curWeb={curWeb}
             productList={productList}
             allProductList={allProductList}
             isEdit={isEdit}
+            userMode={userMode}
             visible={configVisible}
             onClose={onDrawerClose}
             config={toEdit}

src/pages/productCenter/webConfig/menuconfig/NewTreeSelect.jsx

+/* eslint-disable no-restricted-syntax */
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { GetWebMenuInfo, getWebModuleTree } from '@/services/webConfig/api';
+import { message, Input, Tree, Empty, Tooltip, notification } from 'antd';
+import lodash from 'lodash';
+import {
+  FolderFilled,
+  FileOutlined,
+  InfoCircleOutlined,
+  HomeOutlined,
+  DesktopOutlined,
+} from '@ant-design/icons';
+import styles from './TreeSelect.less';
+const TreeSelect = (props, ref) => {
+  const { value, onChange, menuChange, code, initCurrentMenu, userMode, curWeb } = props;
+  const [menuWebList, setMenuWebList] = useState({});
+  const [webList, setWebList] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const { TreeNode } = TreeSelect;
+  useEffect(() => {
+    getMenu();
+  }, []);
+
+  const getMenu = () => {
+    getWebModuleTree('super')
+      .then(res => {
+        const { data } = res;
+        if (res.code === 0) {
+          let list = [];
+          let arr = data.filter(item => item.id === 'Web4SingleStation');
+          let datalist = arr[0].children;
+          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}`;
+            a.item = 'father';
+            list.push(a);
+          });
+          let str = list.find(i => i.text === curWeb.text);
+          setMenuWebList(str);
+          setWebList(str.children);
+          let aa = getKey(str.children);
+          setExpandedKeys(aa[0]);
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.msg,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+
+  const filterList = val => {
+    if (!val) {
+      val = '';
+    }
+    if (val !== '') {
+      let newTree = menuWebList.children.map(item => mapTree1(item, val));
+      let filter = filterTree(newTree);
+      let newData = filterTreeParent(filter);
+      let arr = [];
+      newData.map(i => {
+        if (i.children.length !== 0 || i.show !== '') {
+          arr.push(i);
+        }
+      });
+      setWebList(arr);
+      let aa = getKey(arr);
+      setExpandedKeys(aa[0]);
+    } else {
+      setWebList(menuWebList.children);
+      let aa = getKey(menuWebList.children);
+      setExpandedKeys(aa[0]);
+    }
+  };
+
+  const getKey = (users, allKeys = []) => {
+    users.forEach(v => {
+      let name = v.menuID || v.key;
+      name && allKeys.push(name);
+      if (Array.isArray(v.children)) {
+        v.children.forEach(s => {
+          let str = s.menuID || s.key;
+          allKeys.push(str);
+        });
+      }
+      if (Array.isArray(v.children)) {
+        return getKey(v.children, allKeys);
+      }
+    });
+
+    return [allKeys];
+  };
+
+  const mapTree1 = (val, word) => {
+    const obj = { ...val };
+    const hasChild = obj.children.length > 0;
+    let status = '';
+    if (!condition(obj, word) && word !== '' && obj.children.length === 0) {
+      status = false;
+    }
+    if (condition(obj, word) && word !== '' && obj.children.length === 0) {
+      status = true;
+    }
+    return {
+      title: obj.text || obj.title,
+      key: obj.menuID || obj.key,
+      icon: obj.menuType === 'Web4MenuGroup' ? <FolderFilled /> : <FileOutlined />,
+      menuType: obj.menuType,
+      disabled: hasChild || obj.pageUrl === null,
+      pageUrl: obj.pageUrl,
+      product: obj.product,
+      show: status,
+      children: hasChild ? obj.children.map(i => mapTree1(i, word)) : [],
+    };
+  };
+
+  const filterTree = data => {
+    let result = [];
+    for (let item of data) {
+      if (item.show !== false) {
+        let node = { ...item };
+        if (item.children) {
+          node.children = filterTree(item.children);
+        }
+        result.push(node);
+      }
+    }
+    return result;
+  };
+
+  const filterTreeParent = data => {
+    let result = [];
+    for (let item of data) {
+      if (item.show !== '' || item.children.length > 0) {
+        let node = { ...item };
+        if (item.children) {
+          node.children = filterTreeParent(item.children);
+        }
+        result.push(node);
+      }
+    }
+    return result;
+  };
+
+  // 过滤条件
+  const condition = (node, val) => {
+    let name = node.title || node.text;
+    return name?.includes(val) || node.pageUrl?.includes(val);
+  };
+
+  const changeValue = e => {
+    // 过滤数组
+    onChange(e.target.value);
+    filterList(e.target.value);
+    setVisible(true);
+  };
+
+  const onSelect = (selectedKeysValue, info) => {
+    onChange(info.node.pageUrl);
+    setVisible(false);
+  };
+
+  const onExpand = expandedKeysValue => {
+    setExpandedKeys(expandedKeysValue);
+  };
+
+  return (
+    <div className={styles.treeSelect}>
+      <Input
+        allowClear
+        placeholder="请选填写菜单功能路径"
+        value={value}
+        onFocus={() => filterList(value)}
+        onClick={() => setVisible(!visible)}
+        onChange={changeValue}
+        onBlur={() => setVisible(false)}
+      />
+      <div
+        className={styles.dropBox}
+        onMouseDown={event => {
+          event.preventDefault();
+        }}
+        style={{ display: visible ? 'block' : 'none' }}
+      >
+        <Tree
+          onExpand={onExpand}
+          selectedKeys={null}
+          showIcon
+          expandedKeys={expandedKeys}
+          autoExpandParent
+          onSelect={onSelect}
+          treeData={webList.map(val => mapTree1(val))}
+          style={{ width: '100%' }}
+        />
+        {Object.keys(webList).length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
+      </div>
+    </div>
+  );
+};
+
+export default forwardRef(TreeSelect);