index.js 1.61 KB
Newer Older
张烨's avatar
张烨 committed
1
import React, { useEffect, useState } from 'react';
2 3
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
张烨's avatar
张烨 committed
4
import menuTreeMock from '@/services/mocks/web4site';
5
import styles from './index.less';
张烨's avatar
张烨 committed
6
import SiteConfig from './components/siteConfigDrawer';
7 8
const { TabPane } = Tabs;

张烨's avatar
张烨 committed
9 10 11 12 13 14 15
const getMenuTree = () =>
  new Promise((r, j) => {
    setTimeout(() => {
      r(menuTreeMock);
    }, 1000);
  });

16 17
const WebConfigPage = props => {
  const [configVisible, setConfigVisible] = useState(false);
张烨's avatar
张烨 committed
18 19 20
  const [loading, setLoading] = useState(false);
  const [menuTree, setMeneTree] = useState({ children: [] });
  const [configObj, setConfigObj] = useState({});
21
  const renderPage = () => {};
张烨's avatar
张烨 committed
22 23 24 25 26 27 28 29

  useEffect(() => {
    getMenuTree().then(res => {
      setMeneTree(res);
      setLoading(false);
    });
  }, []);

30
  const renderTabPane = tabPaneItem => (
张烨's avatar
张烨 committed
31
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text} />
32 33 34 35
  );

  const onEdit = (targetKey, action) => {
    // console.log(targetKey, action); // action: add|remove
张烨's avatar
张烨 committed
36 37 38 39 40 41 42 43
    switch (action) {
      case 'add':
        setConfigVisible(true);
        break;
      case 'remove':
        break;
      default:
    }
44
  };
张烨's avatar
张烨 committed
45 46 47

  const onDrawerClose = form => {};

48
  return (
张烨's avatar
张烨 committed
49
    <PageContainer loading={loading}>
50 51 52 53
      <div className={styles.webConfigContainer}>
        <Tabs type="editable-card" onEdit={onEdit}>
          {menuTree.children.map(renderTabPane)}
        </Tabs>
张烨's avatar
张烨 committed
54 55 56 57 58
        <SiteConfig
          visible={configVisible}
          onClose={onDrawerClose}
          config={configObj}
        />
59 60 61 62 63 64
      </div>
    </PageContainer>
  );
};

export default WebConfigPage;