input-search-table组件

.gitignore

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+/pages
+.umi
+.umi-production

.prettierignore

+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production

.prettierrc

+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.js

+export default {
+  plugins: [
+    [
+      'umi-plugin-block-dev',
+      {
+        layout: 'ant-design-pro',
+      },
+    ],
+    [
+      'umi-plugin-react',
+      {
+        antd: true,
+        dva: true,
+        locale: true,
+      },
+    ],
+  ],
+};

LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2019-present wangkai ()
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

+# @umi-blocks/tree-table
+
+左侧为树结构，右侧为树节点对应table，默认显示为所以table数据，左右联动。
+
+## Usage
+
+```sh
+umi block add https://gitlab.rd.virsical.cn/wangkai/tree-table.git --path=/[The directory you placed]
+```
+
+## SNAPSHOT
+
+![avatar](/snapshot.png)
+
+## LICENSE
+
+MIT

package.json

+{
+  "name": "@umi-block/tree-form",
+  "version": "0.0.1",
+  "description": "left tree.right form.",
+  "main": "src/index.js",
+  "authors": {
+    "name": "wangkai",
+    "email": ""
+  },
+  "repository": "umijs/umi-blocks/tree-form",
+  "scripts": {
+    "dev": "umi dev"
+  },
+  "dependencies": {
+    "antd": "^3.24.0",
+    "dva": "^2.4.1",
+    "moment-timezone": "^0.5.27",
+    "react": ">=16.0.0",
+    "umi-plugin-react": "^1.12.6",
+    "umi-request": "^1.2.8"
+  },
+  "devDependencies": {
+    "@ant-design/pro-layout": "^4.5.16",
+    "umi": "^2.9.0",
+    "umi-plugin-block-dev": "^2.0.0"
+  },
+  "license": "MIT"
+}

src/.umi/LocaleWrapper.jsx

+import React from 'react';
+import {
+  _setIntlObject,
+  addLocaleData,
+  IntlProvider,
+  intlShape,
+  LangContext,
+  _setLocaleContext
+} from 'umi-plugin-locale';
+
+const InjectedWrapper = (() => {
+  let sfc = (props, context) => {
+    _setIntlObject(context.intl);
+    return props.children;
+  };
+  sfc.contextTypes = {
+    intl: intlShape,
+  };
+  return sfc;
+})();
+
+import 'moment/locale/zh-cn';
+import 'moment/locale/zh-tw';
+
+const baseNavigator = true;
+const baseSeparator = '-';
+const useLocalStorage = true;
+
+import { LocaleProvider, version } from 'antd';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+let defaultAntd = require('antd/lib/locale-provider/zh_CN');
+defaultAntd = defaultAntd.default || defaultAntd;
+
+const localeInfo = {
+  'en-US': {
+    messages: {
+      ...((locale) => locale.__esModule ? locale.default : locale)(require('E:/work/input-search-table/src/locales/en-US.js')),
+    },
+    locale: 'en-US',
+    antd: require('antd/lib/locale-provider/en_US'),
+    data: require('react-intl/locale-data/en'),
+    momentLocale: '',
+  },
+  'zh-CN': {
+    messages: {
+      ...((locale) => locale.__esModule ? locale.default : locale)(require('E:/work/input-search-table/src/locales/zh-CN.js')),
+    },
+    locale: 'zh-CN',
+    antd: require('antd/lib/locale-provider/zh_CN'),
+    data: require('react-intl/locale-data/zh'),
+    momentLocale: 'zh-cn',
+  },
+  'zh-TW': {
+    messages: {
+      ...((locale) => locale.__esModule ? locale.default : locale)(require('E:/work/input-search-table/src/locales/zh-TW.js')),
+    },
+    locale: 'zh-TW',
+    antd: require('antd/lib/locale-provider/zh_TW'),
+    data: require('react-intl/locale-data/zh'),
+    momentLocale: 'zh-tw',
+  },
+};
+
+class LocaleWrapper extends React.Component{
+  state = {
+    locale: 'zh-CN',
+  };
+  getAppLocale(){
+    let appLocale = {
+      locale: 'zh-CN',
+      messages: {},
+      data: require('react-intl/locale-data/zh'),
+      momentLocale: 'zh-cn',
+    };
+
+    const runtimeLocale = require('umi/_runtimePlugin').mergeConfig('locale') || {};
+    const runtimeLocaleDefault =  typeof runtimeLocale.default === 'function' ? runtimeLocale.default() : runtimeLocale.default;
+    if (
+      useLocalStorage
+      && typeof localStorage !== 'undefined'
+      && localStorage.getItem('umi_locale')
+      && localeInfo[localStorage.getItem('umi_locale')]
+    ) {
+      appLocale = localeInfo[localStorage.getItem('umi_locale')];
+    } else if (
+      typeof navigator !== 'undefined'
+      && localeInfo[navigator.language]
+      && baseNavigator
+    ) {
+      appLocale = localeInfo[navigator.language];
+    } else if(localeInfo[runtimeLocaleDefault]){
+      appLocale = localeInfo[runtimeLocaleDefault];
+    } else {
+      appLocale = localeInfo['zh-CN'] || appLocale;
+    }
+    window.g_lang = appLocale.locale;
+    window.g_langSeparator = baseSeparator || '-';
+    appLocale.data && addLocaleData(appLocale.data);
+
+    // support dynamic add messages for umi ui
+    // { 'zh-CN': { key: value }, 'en-US': { key: value } }
+    const runtimeLocaleMessagesType = typeof runtimeLocale.messages;
+    if (runtimeLocaleMessagesType === 'object' || runtimeLocaleMessagesType === 'function') {
+      const runtimeMessage = runtimeLocaleMessagesType === 'object'
+        ? runtimeLocale.messages[appLocale.locale]
+        : runtimeLocale.messages()[appLocale.locale];
+      Object.assign(appLocale.messages, runtimeMessage || {});
+    }
+
+    return appLocale;
+  }
+  reloadAppLocale = () => {
+    const appLocale = this.getAppLocale();
+    this.setState({
+      locale: appLocale.locale,
+    });
+  };
+
+  render(){
+    const appLocale = this.getAppLocale();
+    // react-intl must use `-` separator
+    const reactIntlLocale = appLocale.locale.split(baseSeparator).join('-');
+    const LangContextValue = {
+      locale: reactIntlLocale,
+      reloadAppLocale: this.reloadAppLocale,
+    };
+    let ret = this.props.children;
+    ret = (<IntlProvider locale={reactIntlLocale} messages={appLocale.messages}>
+      <InjectedWrapper>
+        <LangContext.Provider value={LangContextValue}>
+          <LangContext.Consumer>{(value) => {
+            _setLocaleContext(value);
+            return this.props.children
+            }}</LangContext.Consumer>
+        </LangContext.Provider>
+      </InjectedWrapper>
+    </IntlProvider>)
+     // avoid antd ConfigProvider not found
+     let AntdProvider = LocaleProvider;
+     const [major, minor] = `${version || ''}`.split('.');
+     // antd 3.21.0 use ConfigProvider not LocaleProvider
+     const isConfigProvider = Number(major) > 3 || (Number(major) >= 3 && Number(minor) >= 21);
+     if (isConfigProvider) {
+       try {
+         AntdProvider = require('antd/lib/config-provider').default;
+       } catch (e) {}
+     }
+
+     return (<AntdProvider locale={appLocale.antd ? (appLocale.antd.default || appLocale.antd) : defaultAntd}>
+      {ret}
+    </AntdProvider>);
+    return ret;
+  }
+}
+export default LocaleWrapper;

src/.umi/dva.js

+import dva from 'dva';
+import { Component } from 'react';
+import createLoading from 'dva-loading';
+import history from '@tmp/history';
+
+let app = null;
+
+export function _onCreate() {
+  const plugins = require('umi/_runtimePlugin');
+  const runtimeDva = plugins.mergeConfig('dva');
+  app = dva({
+    history,
+    
+    ...(runtimeDva.config || {}),
+    ...(window.g_useSSR ? { initialState: window.g_initialData } : {}),
+  });
+  
+  app.use(createLoading());
+  (runtimeDva.plugins || []).forEach(plugin => {
+    app.use(plugin);
+  });
+  
+  app.model({ namespace: 'model', ...(require('E:/work/input-search-table/src/model.js').default) });
+  return app;
+}
+
+export function getApp() {
+  return app;
+}
+
+export class _DvaContainer extends Component {
+  render() {
+    const app = getApp();
+    app.router(() => this.props.children);
+    return app.start()();
+  }
+}

src/.umi/history.js

+// create history
+const history = require('umi/lib/createHistory').default({
+  basename: window.routerBase,
+});
+window.g_history = history;
+export default history;

src/.umi/polyfills.js

+import 'core-js';
+import 'regenerator-runtime/runtime';
+

src/.umi/router.js

+import React from 'react';
+import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
+import dynamic from 'umi/dynamic';
+import renderRoutes from 'umi/lib/renderRoutes';
+import history from '@tmp/history';
+import RendererWrapper0 from 'E:/work/input-search-table/src/.umi/LocaleWrapper.jsx';
+
+const Router = require('dva/router').routerRedux.ConnectedRouter;
+
+const routes = [
+  {
+    path: '/',
+    component: require('../../node_modules/umi-plugin-block-dev/layouts/ant-design-pro')
+      .default,
+    routes: [
+      {
+        path: '/',
+        component: require('..').default,
+        exact: false,
+      },
+      {
+        component: () =>
+          React.createElement(
+            require('E:/work/input-search-table/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
+              .default,
+            { pagesPath: 'src', hasRoutesInConfig: true },
+          ),
+      },
+    ],
+  },
+  {
+    component: () =>
+      React.createElement(
+        require('E:/work/input-search-table/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
+          .default,
+        { pagesPath: 'src', hasRoutesInConfig: true },
+      ),
+  },
+];
+window.g_routes = routes;
+const plugins = require('umi/_runtimePlugin');
+plugins.applyForEach('patchRoutes', { initialValue: routes });
+
+export { routes };
+
+export default class RouterWrapper extends React.Component {
+  unListen() {}
+
+  constructor(props) {
+    super(props);
+
+    // route change handler
+    function routeChangeHandler(location, action) {
+      plugins.applyForEach('onRouteChange', {
+        initialValue: {
+          routes,
+          location,
+          action,
+        },
+      });
+    }
+    this.unListen = history.listen(routeChangeHandler);
+    routeChangeHandler(history.location);
+  }
+
+  componentWillUnmount() {
+    this.unListen();
+  }
+
+  render() {
+    const props = this.props || {};
+    return (
+      <RendererWrapper0>
+        <Router history={history}>{renderRoutes(routes, props)}</Router>
+      </RendererWrapper0>
+    );
+  }
+}

src/.umi/umi.js

+import './polyfills';
+import history from './history';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import findRoute, {
+  getUrlQuery,
+} from 'E:/work/input-search-table/node_modules/umi-build-dev/lib/findRoute.js';
+
+// runtime plugins
+const plugins = require('umi/_runtimePlugin');
+window.g_plugins = plugins;
+plugins.init({
+  validKeys: [
+    'patchRoutes',
+    'render',
+    'rootContainer',
+    'modifyRouteProps',
+    'onRouteChange',
+    'modifyInitialProps',
+    'initialProps',
+    'dva',
+    'locale',
+  ],
+});
+plugins.use(require('../../node_modules/umi-plugin-dva/lib/runtime'));
+
+const app = require('@tmp/dva')._onCreate();
+window.g_app = app;
+
+// render
+let clientRender = async () => {
+  window.g_isBrowser = true;
+  let props = {};
+  // Both support SSR and CSR
+  if (window.g_useSSR) {
+    // 如果开启服务端渲染则客户端组件初始化 props 使用服务端注入的数据
+    props = window.g_initialData;
+  } else {
+    const pathname = location.pathname;
+    const activeRoute = findRoute(require('@tmp/router').routes, pathname);
+    // 在客户端渲染前，执行 getInitialProps 方法
+    // 拿到初始数据
+    if (
+      activeRoute &&
+      activeRoute.component &&
+      activeRoute.component.getInitialProps
+    ) {
+      const initialProps = plugins.apply('modifyInitialProps', {
+        initialValue: {},
+      });
+      props = activeRoute.component.getInitialProps
+        ? await activeRoute.component.getInitialProps({
+            route: activeRoute,
+            isServer: false,
+            location,
+            ...initialProps,
+          })
+        : {};
+    }
+  }
+  const rootContainer = plugins.apply('rootContainer', {
+    initialValue: React.createElement(require('./router').default, props),
+  });
+  ReactDOM[window.g_useSSR ? 'hydrate' : 'render'](
+    rootContainer,
+    document.getElementById('root'),
+  );
+};
+const render = plugins.compose(
+  'render',
+  { initialValue: clientRender },
+);
+
+const moduleBeforeRendererPromises = [];
+// client render
+if (__IS_BROWSER) {
+  Promise.all(moduleBeforeRendererPromises)
+    .then(() => {
+      render();
+    })
+    .catch(err => {
+      window.console && window.console.error(err);
+    });
+}
+
+// export server render
+let serverRender, ReactDOMServer;
+if (!__IS_BROWSER) {
+  serverRender = async (ctx = {}) => {
+    // ctx.req.url may be `/bar?locale=en-US`
+    const [pathname] = (ctx.req.url || '').split('?');
+    const history = require('@tmp/history').default;
+    history.push(ctx.req.url);
+    let props = {};
+    const activeRoute =
+      findRoute(require('./router').routes, pathname) || false;
+    if (
+      activeRoute &&
+      activeRoute.component &&
+      activeRoute.component.getInitialProps
+    ) {
+      const initialProps = plugins.apply('modifyInitialProps', {
+        initialValue: {},
+      });
+      // patch query object
+      const location = history.location
+        ? { ...history.location, query: getUrlQuery(history.location.search) }
+        : {};
+      props = await activeRoute.component.getInitialProps({
+        route: activeRoute,
+        isServer: true,
+        location,
+        // only exist in server
+        req: ctx.req || {},
+        res: ctx.res || {},
+        ...initialProps,
+      });
+      props = plugins.apply('initialProps', {
+        initialValue: props,
+      });
+    } else {
+      // message activeRoute or getInitialProps not found
+      console.log(
+        !activeRoute
+          ? `${pathname} activeRoute not found`
+          : `${pathname} activeRoute's getInitialProps function not found`,
+      );
+    }
+    const rootContainer = plugins.apply('rootContainer', {
+      initialValue: React.createElement(require('./router').default, props),
+    });
+    const htmlTemplateMap = {};
+    return {
+      htmlElement:
+        activeRoute && activeRoute.path
+          ? htmlTemplateMap[activeRoute.path]
+          : '',
+      rootContainer,
+      matchPath: activeRoute && activeRoute.path,
+      g_initialData: props,
+    };
+  };
+  // using project react-dom version
+  // https://github.com/facebook/react/issues/13991
+  ReactDOMServer = require('react-dom/server');
+}
+
+export { ReactDOMServer };
+export default (__IS_BROWSER ? null : serverRender);
+
+(() => {
+  try {
+    const ua = window.navigator.userAgent;
+    const isIE = ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
+    if (isIE) return;
+
+    // Umi UI Bubble
+    require('../../node_modules/umi-plugin-ui/lib/bubble').default({
+      port: 3002,
+      path: 'E:/work/input-search-table',
+      currentProject: '',
+      isBigfish: undefined,
+    });
+  } catch (e) {
+    console.warn('Umi UI render error:', e);
+  }
+})();
+
+(() => {
+  // Runtime block add component
+  window.GUmiUIFlag = require('../../node_modules/umi-build-dev/lib/plugins/commands/block/sdk/flagBabelPlugin/GUmiUIFlag.js').default;
+
+  // Enable/Disable block add edit mode
+  const el = document.createElement('style');
+  el.innerHTML = '.g_umiuiBlockAddEditMode { display: none; } ';
+  const hoverEl = document.createElement('style');
+  hoverEl.innerHTML =
+    '.g_umiuiBlockAddEditMode:hover {background: rgba(24, 144, 255, 0.25) !important;}';
+  document.querySelector('head').appendChild(hoverEl);
+  document.querySelector('head').appendChild(el);
+
+  window.addEventListener(
+    'message',
+    event => {
+      try {
+        const { action, data } = JSON.parse(event.data);
+        switch (action) {
+          case 'umi.ui.enableBlockEditMode':
+            el.innerHTML = '';
+            break;
+          case 'umi.ui.disableBlockEditMode':
+            el.innerHTML = '.g_umiuiBlockAddEditMode { display: none; }';
+            break;
+          case 'umi.ui.checkValidEditSection':
+            const haveValid = !!document.querySelectorAll(
+              'div.g_umiuiBlockAddEditMode',
+            ).length;
+            const frame = document.getElementById('umi-ui-bubble');
+            if (frame && frame.contentWindow) {
+              frame.contentWindow.postMessage(
+                JSON.stringify({
+                  action: 'umi.ui.checkValidEditSection.success',
+                  payload: {
+                    haveValid,
+                  },
+                }),
+                '*',
+              );
+            }
+          default:
+            break;
+        }
+      } catch (e) {}
+    },
+    false,
+  );
+
+  // TODO: remove this before publish
+  window.g_enableUmiUIBlockAddEditMode = function() {
+    el.innerHTML = '';
+  };
+  window.g_disableUmiUIBlockAddEditMode = function() {
+    el.innerHTML = '.g_umiuiBlockAddEditMode { display: none; }';
+  };
+})();
+
+// hot module replacement
+if (__IS_BROWSER && module.hot) {
+  module.hot.accept('./router', () => {
+    clientRender();
+  });
+}

src/_mock.js

+export default {
+  // 树
+  'GET /api/BLOCK_NAME_CAMEL_CASE/fetchTreeData': {
+    code: 0,
+    msg: 'success',
+    data: [
+      {
+        id: 1,
+        parentId: 0,
+        children: [
+          {
+            id: 3,
+            parentId: 1,
+            children: [
+              {
+                id: 4,
+                parentId: 3,
+                children: [
+                  {
+                    id: 5,
+                    parentId: 4,
+                    children: [],
+                    name: '院校农信',
+                  },
+                ],
+                name: '高新农信',
+              },
+            ],
+            name: '潍坊农信',
+          },
+        ],
+        name: '山东农信',
+      },
+    ],
+  },
+  // 表格数据
+  'GET /api/BLOCK_NAME_CAMEL_CASE/fetchAllTableData': (req, res) => {
+    if (req.query.current == 0) {
+      res.send({
+        code: 0,
+        msg: null,
+        data: {
+          records: [
+            {
+              userId: 60,
+              username: 'ddd',
+              delFlag: "0",
+              phone: '13700000001',
+              deptName: '威发威发威威发威发威威发',
+              realName: 'ddd',
+              realNameEn: 'ddd',
+            },
+            {
+              userId: 59,
+              username: 'ccc',
+              delFlag: "1",
+              phone: '13700000000',
+              deptName: '产品技术组',
+              realName: 'ccc',
+              realNameEn: 'ccc',
+            },
+            {
+              userId: 58,
+              username: 'huoliang3',
+              delFlag: "9",
+              phone: '17629018932',
+              deptName: '威发威发威威发威发威威发',
+              realName: '谦腾',
+              realNameEn: 'huoliang3',
+            },
+            {
+              userId: 57,
+              username: 'wangziru',
+              phone: '15591871688',
+              deptName: '人事行政部',
+              realName: 'aaa',
+              realNameEn: '',
+            },
+            {
+              userId: 56,
+              username: 'zhangyongxin1',
+              phone: '15591870689',
+              delFlag: "0",
+              deptName: '人事行政部',
+              realName: '啊啊啊',
+              realNameEn: '',
+            },
+            {
+              userId: 53,
+              username: 'zhangyongxin2',
+              phone: '13333333332',
+              delFlag: "0",
+              deptName: '产品技术组',
+              realName: '张永欣',
+            },
+            {
+              userId: 52,
+              username: 'wangcong',
+              phone: '18513029927',
+              deptName: '产品技术组',
+              realName: '王聪',
+              delFlag: "0",
+            },
+            {
+              userId: 51,
+              username: 'wangziru',
+              phone: '13891457852',
+              deptName: '协作应用研发部',
+              realName: '王自如',
+              realNameEn: '',
+              delFlag: "9",
+            },
+            {
+              userId: 50,
+              username: 'dengqi',
+              phone: '15353959184',
+              deptName: '协作应用研发部',
+              realName: 'dengqi',
+              realNameEn: 'dengqi',
+              delFlag: "9",
+            },
+            {
+              userId: 49,
+              username: 'wangsongsong',
+              delFlag: '0',
+              lockFlag: '0',
+              phone: '13999999999',
+              deptName: '威发威发威威发威发威威发',
+              realName: '王松松',
+              realNameEn: '王松松',
+              delFlag: "9",
+            },
+          ],
+          total: 13,
+          size: 10,
+          current: 0,
+          searchCount: true,
+          pages: 2,
+        },
+      });
+    } else if (req.query.current == 1) {
+      res.send({
+        code: 0,
+        msg: null,
+        data: {
+          records: [
+            {
+              userId: 47,
+              username: 'az',
+              phone: '13022222222',
+              deptName: '新城',
+              realName: 'az1',
+              realNameEn: 'az12',
+              delFlag: "1",
+            },
+            {
+              userId: 46,
+              username: 'guojh',
+              phone: '17629018989',
+              deptName: '前端开发组',
+              realName: 'guojh',
+              realNameEn: 'guojh',
+              delFlag: "1",
+            },
+            {
+              userId: 44,
+              username: 'guojh',
+              phone: '17629018979',
+              deptName: '北京北京北京',
+              realName: 'guojh',
+              realNameEn: 'guojh@wafertest.com',
+              delFlag: "0",
+            },
+          ],
+          total: 13,
+          size: 10,
+          current: 1,
+          searchCount: true,
+          pages: 3,
+        },
+      });
+    }
+  },
+  // 保存
+  'POST /api/BLOCK_NAME_CAMEL_CASE/saveNodeData': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
+  // 更新
+  'POST /api/BLOCK_NAME_CAMEL_CASE/updateNodeData': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
+  'POST /api/BLOCK_NAME_CAMEL_CASE/deleteNode': {
+    code: 0,
+    msg: 'success',
+    data: null,
+  },
+};

src/components/HeaderDropdown/index.js

+import React, { PureComponent } from 'react';
+import { Dropdown } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export default class HeaderDropdown extends PureComponent {
+  render() {
+    const { overlayClassName, ...props } = this.props;
+    return (
+      <Dropdown overlayClassName={classNames(styles.container, overlayClassName)} {...props} />
+    );
+  }
+}

src/components/HeaderDropdown/index.less

+@import '~antd/lib/style/themes/default.less';
+
+.container > *:global(:not(.ant-dropdown-menu)) {
+  background-color: #fff;
+  box-shadow: @shadow-1-down;
+  border-radius: 4px;
+}
+
+@media screen and (max-width: @screen-xs) {
+  .container {
+    width: 100% !important;
+  }
+  .container > * {
+    border-radius: 0 !important;
+  }
+}

src/components/SaveOrUpdate/index.js

+import React, { PureComponent } from 'react';
+import { Form, Input, Select, Button } from 'antd';
+import moment from 'moment-timezone';
+import { formatMessage } from 'umi-plugin-react/locale';
+import { MIN_MENU_TITLE_LENGTH, MAX_MENU_TITLE_LENGTH } from '../../utils/contant';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 7 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+    md: { span: 10 },
+  },
+};
+
+const submitFormLayout = {
+  wrapperCol: {
+    xs: { span: 24, offset: 0 },
+    sm: { span: 10, offset: 7 },
+  },
+};
+
+const initTimeZone = () => {
+  const timeZones = moment.tz.names();
+  const offsetTmz = [];
+  timeZones.forEach((element, i) => {
+    offsetTmz.push({
+      key: `GMT${moment.tz(timeZones[i]).format('Z')}`,
+      title: `(GMT${moment.tz(timeZones[i]).format('Z')}) ${element}`,
+    });
+  });
+  return offsetTmz;
+};
+
+const timeZone = initTimeZone();
+
+@Form.create()
+class SaveOrUpdate extends PureComponent {
+  okHandle = e => {
+    e.preventDefault();
+    const { form, disableForm, parentId, details } = this.props;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const { dispatch } = this.props;
+      let type;
+      let data;
+      if (details) {
+        data = { ...details, ...fieldsValue };
+        type = 'BLOCK_NAME_CAMEL_CASE/updateNode';
+      } else {
+        data = { ...fieldsValue, parentId };
+        type = 'BLOCK_NAME_CAMEL_CASE/saveNode';
+      }
+      dispatch({
+        type,
+        payload: {
+          data,
+          success: () => {
+            form.resetFields();
+            disableForm();
+          },
+        },
+      });
+    });
+  };
+
+  cancelHandle = () => {
+    const { form, disableForm } = this.props;
+    form.resetFields();
+    disableForm();
+  };
+
+  onIconChange = v => {
+    const { form } = this.props;
+    form.setFieldsValue({ icon: v });
+  };
+
+  initialParentValue = (node, edit) => {
+    if (node) {
+      return node.parentId;
+    }
+    if (edit) {
+      return -1;
+    }
+    return '';
+  };
+
+  render() {
+    const { form, details, edit, holidayList } = this.props;
+    return (
+      <Form onSubmit={this.okHandle}>
+        <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name' })}
+        >
+          {form.getFieldDecorator('name', {
+            initialValue: (details && details.name) || '',
+            rules: [
+              {
+                message: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name.placeholder' }),
+                required: true,
+                min: MIN_MENU_TITLE_LENGTH,
+                max: MAX_MENU_TITLE_LENGTH,
+              },
+            ],
+          })(
+            <Input
+              maxLength={MAX_MENU_TITLE_LENGTH + 1}
+              disabled={!edit}
+              placeholder={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.zh.name.placeholder' })}
+            />,
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name' })}
+        >
+          {form.getFieldDecorator('nameEn', {
+            initialValue: (details && details.nameEn) || '',
+            rules: [
+              {
+                message: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name.placeholder' }),
+                min: MIN_MENU_TITLE_LENGTH,
+                max: MAX_MENU_TITLE_LENGTH,
+              },
+            ],
+          })(
+            <Input
+              maxLength={MAX_MENU_TITLE_LENGTH + 1}
+              disabled={!edit}
+              placeholder={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.en.name.placeholder' })}
+            />,
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.time.zone' })}
+        >
+          {form.getFieldDecorator('timeZone', {
+            initialValue: (details && details.timeZone) || '(GMT+08:00) Asia/Shanghai',
+          })(
+            <Select
+              disabled={!edit}
+              onChange={this.onIconChange}
+              placeholder={formatMessage({
+                id: 'BLOCK_NAME_CAMEL_CASE.form.time.zone.placeholder',
+              })}
+              optionLabelProp="title"
+            >
+              {timeZone &&
+                timeZone.map(v => (
+                  <Option key={v.title} title={v.title} value={v.title}>
+                    {v.title}
+                  </Option>
+                ))}
+            </Select>,
+          )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.longitude.and.latitude' })}
+        >
+          {form.getFieldDecorator('location', {
+            initialValue: (details && details.location) || null,
+          })(
+            <Input
+              disabled={!edit}
+              placeholder={formatMessage({
+                id: 'BLOCK_NAME_CAMEL_CASE.form.longitude.and.latitude.placeholder',
+              })}
+            />,
+          )}
+        </FormItem>
+        {/* <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.holidays.name' })}
+        >
+          {form.getFieldDecorator('holidayCode', {
+            initialValue: (details && details.holidayCode) || undefined,
+          })(
+            <Select
+              disabled={!edit}
+              placeholder={formatMessage({
+                id: 'BLOCK_NAME_CAMEL_CASE.form.holidays.name.placeholder',
+              })}
+              style={{ width: '100%' }}
+            >
+              {holidayList &&
+                holidayList.map(v => (
+                  <Option key={v.id} value={v.id.toString()}>
+                    {v.name}
+                  </Option>
+                ))}
+            </Select>,
+          )}
+        </FormItem> */}
+        <FormItem
+          {...formItemLayout}
+          label={formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.form.desc' })}
+        >
+          {form.getFieldDecorator('remark', {
+            initialValue: (details && details.remark) || null,
+          })(<Input disabled={!edit} />)}
+        </FormItem>
+        {edit && (
+          <FormItem {...submitFormLayout}>
+            <Button htmlType="button" onClick={this.cancelHandle}>
+              {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.cancel.button' })}
+            </Button>
+            {!details && (
+              <Button htmlType="submit" style={{ marginLeft: 16 }} type="primary">
+                {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.save.button' })}
+              </Button>
+            )}
+            {details && (
+              <Button htmlType="submit" style={{ marginLeft: 16 }} type="primary">
+                {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.update.button' })}
+              </Button>
+            )}
+          </FormItem>
+        )}
+      </Form>
+    );
+  }
+}
+
+SaveOrUpdate.propTypes = {};
+
+export default SaveOrUpdate;

src/index.js

+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Divider,
+  Table,
+  Modal,
+  Badge,
+} from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+import styles from './style.less';
+
+const FormItem = Form.Item;
+const { Search } = Input;
+const { confirm } = Modal;
+
+@connect(({ BLOCK_NAME_CAMEL_CASE, rule, menu, loading }) => ({
+  rule,
+  BLOCK_NAME_CAMEL_CASE,
+  menu,
+  loading: loading.models.BLOCK_NAME_CAMEL_CASE,
+}))
+@Form.create()
+class Index extends PureComponent {
+  /**
+   * convert state from number to i18n string.
+   * @param val
+   * @returns {*}
+   */
+  static stateToLabel(val) {
+    let color;
+    let state;
+    switch (Number(val)) {
+      case 0:
+        color = 'success';
+        state = formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.state.normal' });
+        break;
+      case 1:
+        color = 'error';
+        state = formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.state.del' });
+        break;
+      case 9:
+        color = 'error';
+        state = formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.state.failure' });
+        break;
+      default:
+        color = 'warning';
+        state = formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.state.unknown' });
+        break;
+    }
+    return <Badge status={color} text={state} />;
+  }
+
+  state = {
+    modalVisible: false,
+    selectedKeys: null,
+    user: null,
+  };
+
+  columns = [
+    {
+      title: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.user.realName' }),
+      dataIndex: 'realName',
+      kye: 'realName',
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.department' }),
+      dataIndex: 'deptName',
+      kye: 'deptName',
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.state' }),
+      dataIndex: 'delFlag',
+      key: 'delFlag',
+
+      render: val => <span>{Index.stateToLabel(val)}</span>,
+    },
+    {
+      title: formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.operation' }),
+      // fixed: 'right',
+      render: (text, record) => {
+        console.log(record);
+        return (
+          <Fragment>
+            <a onClick={() => console.log('you click edit')}>
+              {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.operation.edit' })}
+            </a>
+            <Divider type="vertical" />
+            <a onClick={() => console.log('you click delete')}>
+              {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.operation.del' })}
+            </a>
+          </Fragment>
+        );
+      },
+    },
+  ];
+
+  componentWillMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/initPage',
+    });
+  }
+
+  handleStandardTableChange = pagination => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'BLOCK_NAME_CAMEL_CASE/getTableData',
+      payload: {
+        current: pagination.current - 1,
+      },
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+    const {
+      dispatch,
+      form,
+      BLOCK_NAME_CAMEL_CASE: { nodeId },
+    } = this.props;
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/save',
+        payload: {
+          keyword: fieldsValue.keyword,
+        },
+      });
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/getTableData',
+        payload: {
+          keyword: fieldsValue.keyword,
+          nodeId,
+        },
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    console.log('you click add');
+  };
+
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24} />
+          <Col md={8} sm={24} className={styles.rightAlign}>
+            <FormItem>
+              {getFieldDecorator('keyword')(
+                <Search
+                  style={{ width: 400}}
+                  placeholder={formatMessage({
+                    id: 'BLOCK_NAME_CAMEL_CASE.search.name.placeholder.1',
+                  })}
+                  enterButton= {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.button.search' })}
+                  size="large"
+                  onSearch={value => console.log(value)}
+                />
+              )}
+            </FormItem>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const {
+      BLOCK_NAME_CAMEL_CASE: { tableData },
+      loading,
+    } = this.props;
+
+    return (
+      <Card bordered={false}>
+            <div className={styles.tableList}>
+              <div className={styles.tableListForm}>{this.renderForm()}</div>
+              <div className={styles.tableListOperator}>
+                <Button type="primary" size="large" onClick={() => this.handleModalVisible(true)}>
+                  {formatMessage({ id: 'BLOCK_NAME_CAMEL_CASE.button.add' })}
+                </Button>
+              </div>
+              <Table
+                className={styles.tableClass}
+                rowKey={record => record.userId}
+                loading={loading}
+                dataSource={tableData.records || []}
+                columns={this.columns}
+                onChange={this.handleStandardTableChange}
+                pagination={{
+                  current: tableData.current ? tableData.current + 1 : 1,
+                  pageSize: tableData.size,
+                  total: tableData.total,
+                }}
+                scroll={{ x: 1100 }}
+              />
+            </div>
+      </Card>
+    );
+  }
+}
+
+export default Index;