组织管理前端脚手架搭建

2022-05-05 15:57:07 +08:00 · 2022-05-05 15:57:07 +08:00 · a645a95956
commit a645a95956
39 changed files with 5944 additions and 0 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,102 @@
+{
+  "parser": "babel-eslint",
+  "extends": "react-app",
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true,
+    "es6": true
+  },
+  "rules": {
+    "react/jsx-no-bind": [1, {
+      "ignoreRefs": false,
+      "allowArrowFunctions": false,
+      "allowBind": false
+    }],
+    "no-shadow": 0,
+    "no-bitwise": 0,
+    "no-continue": 0,
+    "no-case-declarations": 0,
+    "prefer-rest-params": 0,
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/media-has-caption": 0,
+    "jsx-a11y/iframe-has-title": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "react/jsx-pascal-case": 0,
+    "react/no-children-prop": 0,
+    "linebreak-style": 0,
+    "class-methods-use-this": 0,
+    "func-names": 0,
+    "react/sort-comp": 0,
+    "react/prop-types": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "no-param-reassign": 0,
+    "no-return-assign": 0,
+    "max-len": 0,
+    "react/no-multi-comp": 0,
+    "array-callback-return": 0,
+    "import/no-unresolved": 0,
+    "jsx-a11y/img-has-alt": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "react/jsx-boolean-value": 0,
+    "react/no-danger": 0,
+    "react/no-string-refs": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", ".md"] }],
+    "react/no-array-index-key": 0,
+    "react/no-find-dom-node": 0,
+    "react/require-extension": 0,
+    "jsx-a11y/anchor-has-content": 0,
+    "jsx-a11y/href-no-hash": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "prefer-destructuring": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "react/jsx-no-comment-textnodes": 0,
+    "object-curly-newline": 0,
+    "import/first": 0,
+    "no-underscore-dangle": 0,
+    "eqeqeq": 0,
+    "react/prefer-stateless-function": 0,
+    "no-useless-constructor": 0,
+    "react/react-in-jsx-scope": 0,
+    "no-mixed-spaces-and-tabs": 0,
+    "no-tabs": 0,
+    "react/jsx-indent": 0,
+    "indent": 0,
+    "no-alert": 0,
+    "camelcase": 0,
+    "no-undef": 0,
+    "no-empty": 0,
+    "no-plusplus": 0,
+    "one-var": 0,
+    "prefer-const": 0,
+    "consistent-return": 0,
+    "no-restricted-syntax": 0,
+    "guard-for-in": 0,
+    "no-unused-expressions": 0,
+    "no-mixed-operators": 0,
+    "no-console": 0,
+    "default-case": 0,
+    "import/no-named-as-default-member": 1,
+    "import/no-named-as-default": 1,
+    "no-nested-ternary": 1,
+    "no-script-url": 1,
+    "import/prefer-default-export": 1,
+    "radix": 1,
+    "no-array-constructor": 1,
+    "jsx-a11y/alt-text": 1,
+    "brace-style": 1,
+    "no-useless-escape": 1,
+    "routerShape": 1
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/README.en.md
+++ b/README.en.md
@ -0,0 +1,36 @@
+# trunk
+
+#### Description
+泛微前端脚手架--组织架构图
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
--- a/README.md
+++ b/README.md
@ -0,0 +1,37 @@
+# trunk
+
+#### 介绍
+泛微前端脚手架--组织架构图
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
+    "orgchart": "^3.1.1",
+    "rc-org-chart": "^1.0.6",
+    "react-org-tree": "^1.0.0",
+    "react-orgchart": "^1.0.5",
+    "yargs": "^15.0.2"
+  }
+}
--- a/pc4mobx/organization/apis/index.js
+++ b/pc4mobx/organization/apis/index.js
@ -0,0 +1,12 @@
+import { WeaTools } from 'ecCom';
+
+
+//组织架构图(简单)
+export const getSimpleOrganizationDatas = params => {
+  return WeaTools.callApi('/api/hrm/module/organization/simple/datas', 'GET', params);
+};
+
+//组织架构图(标准)
+export const getStandardOrganizationDatas = params => {
+  return WeaTools.callApi('/api/hrm/module/organization/standard/datas', 'GET', params);
+};
--- a/pc4mobx/organization/components/tree/affix.js
+++ b/pc4mobx/organization/components/tree/affix.js
@ -0,0 +1,32 @@
+
+import React from 'react'
+import '../../style/index.less'
+
+export default class AffixComs extends React.Component {
+
+
+    render(){
+        const {scale} = this.props.orgStore;
+        return(
+            <div className="quickOperate">
+              <img src={require('../../images/vertical.png')} onClick={(e) => {
+                this.props.orgStore.horizontal = false
+              }} />
+              <img src={require('../../images/level.png')} onClick={(e) => {
+                this.props.orgStore.horizontal = true
+              }} />
+              <icon className="icon-coms-Enlarge" onClick={(e) => {
+                if(scale <= 2) {
+                  this.props.orgStore.scale += 0.1
+                }
+              }}/>
+              <icon className="icon-coms-Narrow" 
+              onClick={(e) => {
+                if(scale >= 0.5){
+                  this.props.orgStore.scale -= 0.1
+                }
+              }}/>
+            </div>
+        )
+    }
+}
--- a/pc4mobx/organization/components/tree/baseForm.js
+++ b/pc4mobx/organization/components/tree/baseForm.js
@ -0,0 +1,150 @@
+import React from 'react'
+import { Checkbox, Button, Row, Col } from "antd"
+import { WeaInput, WeaDatePicker, WeaSelect, WeaCheckbox } from "ecCom"
+const CheckboxGroup = Checkbox.Group;
+import moment from "moment";
+
+import domtoimage from 'dom-to-image';
+import { saveAs } from 'file-saver';
+
+
+export default class BaseForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dateValue: moment().format('YYYY-MM-DD HH:mm:ss'),
+            latitudeValue: "0",
+            nodeValue: "1",
+            hierarchyValue: "5",
+            checked: "1"
+
+        }
+    }
+
+
+    //导出架构图
+    exportImage = () => {
+        const node = document.getElementById("node");
+        domtoimage.toBlob(node).then((blob) => {
+            // 调用file-save方法 直接保存图片
+            saveAs(blob, '组织架构.png')
+        })
+    }
+
+    //查询
+    selectProps = () => {
+        const params = this.state;
+        this.props.getSearch(params);
+    }
+
+
+
+    render() {
+        const dimension = [
+            {
+                "key": "0",
+                "selected": false,
+                "showname": "行政组织",
+            }, {
+                "key": "1",
+                "selected": false,
+                "showname": "虚拟组织",
+            }];
+
+        const node = [
+            {
+                "key": "1",
+                "selected": false,
+                "showname": "集团",
+            }, {
+                "key": "2",
+                "selected": false,
+                "showname": "部门",
+            }]
+
+        const hierarchy = [
+            {
+                "key": "1",
+                "selected": false,
+                "showname": "一级",
+            }, {
+                "key": "2",
+                "selected": false,
+                "showname": "二级",
+            }, {
+                "key": "3",
+                "selected": false,
+                "showname": "三级",
+            }, {
+                "key": "4",
+                "selected": false,
+                "showname": "四级",
+            },{
+                "key": "5",
+                "selected": false,
+                "showname": "五级",
+            }]
+
+        const { dateValue, latitudeValue, nodeValue, hierarchyValue, checked } = this.state;
+
+        return (
+            <div style={{ "width": "1100px" }}>
+                <div style={{ padding: "15px", display: "inline-block" }}>
+                    数据日期 : &nbsp; &nbsp;
+                    <WeaDatePicker
+                        locale={{ firstDayOfWeek: 1 }}
+                        showTime={{ format: "HH:mm:ss" }}
+                        format="yyyy-MM-dd HH:mm:ss"
+                        value={dateValue}
+                        onChange={value => this.setState({ dateValue: value })}
+                        needSecond={true}
+                    />
+                </div>
+                <div style={{ padding: "15px", display: "inline-block" }}>
+                    维度 : &nbsp; &nbsp;
+                    <WeaSelect
+                        style={{ width: 86 }}
+                        options={dimension}
+                        value={latitudeValue}
+                        viewAttr={3}
+                        onChange={v => {
+                            this.setState({ latitudeValue: v })
+                        }}
+                    />
+                </div>
+                <div style={{ padding: "15px", display: "inline-block" }}>
+                    根节点 : &nbsp;&nbsp;
+                    <WeaSelect
+                        options={node}
+                        style={{ width: 60 }}
+                        value={nodeValue}
+                        viewAttr={3}
+                        onChange={v => {
+                            this.setState({ nodeValue: v })
+                        }}
+                    />
+                </div>
+                <div style={{ padding: "20px", display: "inline-block" }}>
+                    显示层级 : &nbsp;&nbsp;
+                    <WeaSelect
+                        options={hierarchy}
+                        value={hierarchyValue}
+                        style={{ width: 60 }}
+                        viewAttr={3}
+                        onChange={v => {
+                            this.setState({ hierarchyValue: v })
+                        }}
+                    />
+                </div>
+                <div style={{ padding: "15px", display: "inline-block" }}>
+                    <WeaCheckbox id="test" content="显示虚拟组织" value={checked}
+                        onChange={value => {
+                            this.setState({ checked: value });
+                        }} />
+                </div>
+                <Button type='primary' onClick={() => this.selectProps()}>查询</Button>
+                <Button style={{ "marginLeft": "15px" }} type='primary' onClick={() => this.exportImage()}>导出</Button>
+            </div>
+        )
+    }
+}
--- a/pc4mobx/organization/components/tree/index.js
+++ b/pc4mobx/organization/components/tree/index.js
@ -0,0 +1,91 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+import OrgTree from '../../public/tree/index.js';
+import BaseForm from './baseForm.js';
+import Slider from './slider.js';
+import AffixComs from './affix.js';
+
+import domtoimage from 'dom-to-image';
+import '../../style/index.less';
+
+
+
+
+import { Button, Image } from 'antd';
+import { WeaLogView } from 'comsMobx';
+import { WeaTop, WeaRightMenu, WeaLocaleProvider, WeaNewScroll } from 'ecCom';
+import { renderNoright, renderLoading, getSearchs,renderNoData,isEmpty } from '../../util'; // 从util文件引入公共的方法
+const getLabel = WeaLocaleProvider.getLabel;
+const WeaLogViewComp = WeaLogView.Component;
+
+
+
+@inject('simpleOrgStore')
+@observer
+export default class simpleOrg extends React.Component {
+
+  componentWillMount() { // 初始化渲染页面
+    debugger
+    const { simpleOrgStore: { doInit } } = this.props;
+    doInit();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { simpleOrgStore: { doInit } } = this.props;
+    if (this.props.horizontal !== nextProps.horizontal) { // 手动刷新、切换菜单 重新初始化
+      doInit();
+    }
+  }
+
+  getSearch = (params) => {
+    const { simpleOrgStore } = this.props;
+    simpleOrgStore.getSimpleOrg(params);
+  }
+
+  render() {
+    const { simpleOrgStore } = this.props;
+    const { loading, hasRight, form, condition, data, horizontal, collapsable, expandAll, labelClassName, treeType,scale } = simpleOrgStore; // 从后台取数据 和 方法
+    //alert(JSON.stringify(data))
+
+    if (!hasRight && !loading) { // 无权限处理
+      return renderNoright();
+    }
+
+    if(isEmpty(data)) { //无数据处理
+      return renderNoData();
+    }
+
+
+
+    return (
+      <div className='simple-container'>
+        {loading ? renderLoading() :
+          <div>
+            {/* {getSearchs(form, toJS(condition), 1)} 初始化表单*/}
+            <BaseForm getSearch={this.getSearch} />
+            <div className="m-t-lg text-center" id="node" style={{
+                    transform: `scale(${scale}) translate(${0}px, ${0}px)`,
+                    transformOrigin: "center top"
+                }}>
+              <OrgTree
+                data={toJS(data)}
+                horizontal={horizontal}
+                collapsable={collapsable}
+                labelClassName={labelClassName}
+                expandAll={expandAll}
+                treeType={treeType}
+                onClick={(e, data) => {
+                  //todo
+                }}
+              >
+              </OrgTree>
+            </div>
+           <AffixComs orgStore={simpleOrgStore}/>
+            {/* <Slider /> */}
+          </div>
+        }
+      </div>
+    )
+  }
+}
--- a/pc4mobx/organization/components/tree/side.js
+++ b/pc4mobx/organization/components/tree/side.js
@ -0,0 +1,44 @@
+import React from 'react';
+import { WeaSlideModal } from 'ecCom';
+import { Button } from 'antd';
+
+
+export default class SidePage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      data:{}
+    }
+  }
+
+  componentDidMount() {
+    this.props.onRef(this)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.data !== this.props.data) {
+    }
+  }
+
+  openSide = (data) => {
+    this.setState({ visible: true,
+    data:data})
+  }
+
+  render() {
+    const { visible,data } = this.state;
+    return (
+      <WeaSlideModal visible={visible}
+        top={20}
+        width={30}
+        height={70}
+        direction={'right'}
+        measure={'%'}
+        title={'详细信息'}
+        content={(<div>{JSON.stringify(data)}</div>)}
+        onClose={() => this.setState({ visible: false })}
+        onAnimationEnd={() => console.log('onAnimationEnd')} />
+    )
+  }
+}
--- a/pc4mobx/organization/components/tree/slider.js
+++ b/pc4mobx/organization/components/tree/slider.js
@ -0,0 +1,18 @@
+import React from 'react'
+import { Slider } from "antd"
+
+export default class SliderCom extends React.Component {
+
+    render() {
+        const style = {
+            display: 'inline-block',
+            width: 300,
+        }
+
+        return (
+            <div style={style}>
+                <Slider defaultValue={30} />
+            </div>
+        )
+    }
+}
--- a/pc4mobx/organization/components/tree/standard_org.js
+++ b/pc4mobx/organization/components/tree/standard_org.js
@ -0,0 +1,100 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+
+import BaseForm from './baseForm.js';
+import Slider from './slider.js';
+import OrgTree from '../../public/tree/index.js';
+import SidePage from './side.js'
+import AffixComs from './affix.js';
+import '../../style/index.less';
+
+import { Button, Image } from 'antd';
+import { WeaLogView } from 'comsMobx';
+import { WeaTop, WeaRightMenu, WeaLocaleProvider, WeaNewScroll } from 'ecCom';
+import { renderNoright, renderLoading, getSearchs, renderNoData, isEmpty } from '../../util'; // 从util文件引入公共的方法
+const getLabel = WeaLocaleProvider.getLabel;
+const WeaLogViewComp = WeaLogView.Component;
+
+
+@inject('standardOrgStore')
+@observer
+export default class StandardOrg extends React.Component {
+
+  componentWillMount() { // 初始化渲染页面
+    const { standardOrgStore: { doInit } } = this.props;
+    doInit();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { standardOrgStore: { doInit } } = this.props;
+    if (this.props.horizontal !== nextProps.horizontal) { // 手动刷新、切换菜单 重新初始化
+      doInit();
+    }
+  }
+
+  /**
+   * 查询
+   */
+  getSearch = (params) => {
+    const { standardOrgStore } = this.props;
+    standardOrgStore.getStandardOrg(params);
+  }
+
+  //调用侧滑页面子组件
+  openSidePage = (params) => {
+    this.child.openSide(params);
+  }
+
+  onRef = (ref) => {
+    this.child = ref
+  }
+
+
+
+  render() {
+    const { standardOrgStore } = this.props;
+    const { loading, hasRight, form, condition, data, horizontal, collapsable, expandAll, labelClassName, treeType, scale } = standardOrgStore; // 从后台取数据 和 方法
+    //alert(JSON.stringify(data))
+
+    if (!hasRight && !loading) { // 无权限处理
+      return renderNoright();
+    }
+
+    if (isEmpty(data)) { //无数据处理
+      return renderNoData();
+    }
+
+    return (
+      <div className='standard-container'>
+        <SidePage  onRef={this.onRef} />
+        {loading ? renderLoading() :
+          <div>
+            {/* {getSearchs(form, toJS(condition), 1)} 初始化表单*/}
+            <BaseForm getSearch={this.getSearch} />
+            <div className="m-t-lg text-center" id="node" style={{
+              transform: `scale(${scale}) translate(${0}px, ${0}px)`,
+              transformOrigin: "center top"
+            }}>
+              <OrgTree
+                data={toJS(data)}
+                horizontal={horizontal}
+                collapsable={collapsable}
+                labelClassName={labelClassName}
+                expandAll={expandAll}
+                treeType={treeType}
+                openSidePage={this.openSidePage}
+                // onClick={(e, data) => {
+                //   //this.openSidePage(data, e)
+                // }}
+              >
+              </OrgTree>
+            </div>
+            <AffixComs orgStore={standardOrgStore} />
+            {/* <Slider /> */}
+          </div>
+        }
+      </div>
+    )
+  }
+}
--- a/pc4mobx/organization/debug.js
+++ b/pc4mobx/organization/debug.js
@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { createHashHistory } from 'History';
+
+import { Router, Route, useRouterHistory, IndexRedirect } from 'react-router';
+
+import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
+
+import { Provider } from 'mobx-react';
+import { WeaDebugRouteMenu } from 'ecCom';
+
+import Module from './index';
+
+WeaDebugRouteMenu.defaultProps.showRouteLev = 3;
+
+const routing = new RouterStore();
+
+const allStore = {
+  routing,
+  ...Module.store,
+};
+
+const browserHistory = useRouterHistory(createHashHistory)({
+  queryKey: '_key',
+  basename: '/',
+});
+
+const history = syncHistoryWithStore(browserHistory, allStore.routing);
+
+const Home = props => props.children;
+
+const Root = () => (
+  <Provider {...allStore}>
+    <Router history={history}>
+      <Route name='root' breadcrumbName='根路由' path='/' component={Home}>
+        <IndexRedirect to='main/ns_demo01/index' />
+        <Route name='main' breadcrumbName='入口' path='/main' component={Home}>
+          { Module.Route }
+        </Route>
+      </Route>
+    </Router>
+  </Provider>
+);
+
+ReactDOM.render(<Root />, document.getElementById('container'));
--- a/pc4mobx/organization/images/img_1.png
+++ b/pc4mobx/organization/images/img_1.png
--- a/pc4mobx/organization/images/level.png
+++ b/pc4mobx/organization/images/level.png
--- a/pc4mobx/organization/images/vertical.png
+++ b/pc4mobx/organization/images/vertical.png
--- a/pc4mobx/organization/index.js
+++ b/pc4mobx/organization/index.js
@ -0,0 +1,29 @@
+import React from 'react';
+import Route from 'react-router/lib/Route';
+import { WeaLocaleProvider } from 'ecCom'
+
+import SimpleOrg from './components/tree/index';
+import StandardOrg from './components/tree/standard_org'
+
+import stores from './stores';
+import './style/index';
+
+// 读取系统多语言配置
+let getLocaleLabel = WeaLocaleProvider.getLocaleLabel.bind(this, 'ns_demo01');
+
+// 不需要读取系统多语言
+getLocaleLabel = function(nextState, replace, callback) { callback();};
+
+const Home = props => props.children;
+
+const Routes = (
+  <Route key='organization' path='organization' onEnter={getLocaleLabel} component={Home}>
+    <Route key='index' path='index' component={SimpleOrg} />
+    <Route key='standard' path='standard' component={StandardOrg} />
+  </Route>
+);
+
+module.exports = {
+  Route: Routes,
+  store: stores,
+};
--- a/pc4mobx/organization/index.md
+++ b/pc4mobx/organization/index.md
@ -0,0 +1,26 @@
+---
+title: demo01 - 基础表单
+order: 0
+demos:
+  - path: /spa/nonstandard/demo01/index.html#/main/ns_demo01/index
+    title: 基础表单
+    order: 0
+---
+
+## 基础表单
+
+```
+1、使用情况：弹框新建编辑某个列表的数据、应用设置（基本列出了表单用到的所有字段类型）
+
+2、引用组件：
+  WeaRightMenu
+  WeaTop
+  WeaNewScroll
+  WeaSearchGroup
+  WeaFormItem
+  WeaSwitch
+
+3、说明：
+  [当前案例代码](https://gitee.com/weaver_cs/ecology-9-demo/tree/master/src4js/pc4ns/demo01)
+
+```
--- a/pc4mobx/organization/public/tree/index.js
+++ b/pc4mobx/organization/public/tree/index.js
@ -0,0 +1,3 @@
+import OrgTree from './org_tree.jsx';
+
+export default OrgTree
--- a/pc4mobx/organization/public/tree/node.less
+++ b/pc4mobx/organization/public/tree/node.less
@ -0,0 +1,129 @@
+.org-tree-node-label-inner {
+  .node-card {
+    width: 220px;
+    height: 140px;
+    cursor: pointer;
+    .top {
+      width: 100%;
+      height: 48px;
+      position: relative;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      #org-icon {
+        position: absolute;
+        top: 10px;
+        left: 18px;
+        font-size: 24px;
+        color: #ffffff;
+      }
+      p {
+        position: absolute;
+        left: 56px;
+        height: 48px;
+        color: #ffffff;
+        font-weight: bold;
+        margin: 0;
+        line-height: 48px;
+      }
+    }
+    .common-content {
+      position: relative;
+      .info {
+        img {
+          width: 30px;
+          height: 30px;
+          position: absolute;
+          top: 17px;
+          left: 24px;
+        }
+        div {
+          span {
+            position: absolute;
+            top: 16px;
+            left: 65px;
+            font-weight: bold;
+          }
+          div {
+            position: absolute;
+            top: 36px;
+            left: 64px;
+            color: grey;
+          }
+        }
+      }
+      .detail {
+        position: absolute;
+        top: 62px;
+        color: grey;
+        left: 25px;
+        span {
+          &:last-child {
+            margin-left: 40px;
+          }
+        }
+      }
+    }
+    .job-content {
+      position: relative;
+      .title {
+        position: absolute;
+        top: 8px;
+        left: 32px;
+        font-size: 15px;
+        font-weight: bold;
+      }
+      .detail {
+        position: absolute;
+        top: 38px;
+        color: grey;
+        left: 28px;
+        div {
+          span {
+            &:last-child {
+              margin-left: 40px;
+            }
+          }
+        }
+      }
+    }
+    .person-content {
+      position: relative;
+      .info {
+        img {
+          width: 30px;
+          height: 30px;
+          position: absolute;
+          top: 17px;
+          left: 24px;
+        }
+        div {
+          span {
+            position: absolute;
+            top: 18px;
+            left: 62px;
+            font-weight: bold;
+          }
+          div {
+            position: absolute;
+            top: 37px;
+            left: 66px;
+            color: grey;
+          }
+        }
+      }
+      .address {
+        position: absolute;
+        top: 60px;
+        left: 32px;
+        color: grey;
+      }
+    }
+  }
+}
+
+
+  /**simple_node*/
+  .simple-node-card {
+    padding: 10px 15px;
+  }
+  
--- a/pc4mobx/organization/public/tree/org_tree.js
+++ b/pc4mobx/organization/public/tree/org_tree.js
@ -0,0 +1,120 @@
+import React from 'react';
+
+// 判断是否叶子节点
+const isLeaf = (data, prop) => {
+    const node = prop.node;
+    return !(Array.isArray(data[node.children]) && data[node.children].length > 0);
+};
+
+// 创建 node 节点
+export const renderNode = (data, prop) => {
+    const node = prop.node;
+    const cls = ['org-tree-node'];
+    const childNodes = [];
+
+    if (isLeaf(data, prop)) {
+        cls.push('is-leaf');
+    } else if (prop.collapsable && !data[node.expand]) {
+        cls.push('collapsed');
+    }
+
+    childNodes.push(renderLabel(data, prop));
+
+    if (!prop.collapsable || data[node.expand]) {
+        childNodes.push(renderChildren(data.children, prop));
+    }
+
+    return React.createElement('div', {
+        key: data.id,
+        className: cls.join(' ')
+    }, childNodes);
+    // return React.createElement('div', {
+    //     key: data.id,
+    //     className: cls.join(' ')
+    // }, childNodes);
+};
+
+// 创建展开折叠按钮
+export const renderBtn = (data, prop) => {
+    const { onExpand } = prop;
+    const node = prop.node;
+
+    let cls = ['org-tree-node-btn'];
+
+    if (data[node.expand]) {
+        cls.push('expanded');
+    }
+
+    return React.createElement('span', {
+        key: data.id,
+        className: cls.join(' '),
+        onClick: (e) => {
+            e.stopPropagation();
+            typeof onExpand === 'function' && onExpand(e, data);
+        }
+    });
+};
+
+// 创建 label 节点
+export const renderLabel = (data, prop) => {
+    const node = prop.node;
+    const label = data[node.label];
+    const renderContent = prop.renderContent;
+    const onClick = prop.onClick;
+    const treeType = prop.treeType;
+    const openSidePage = prop.openSidePage;
+
+    const childNodes = [];
+    if (typeof renderContent === 'function') {
+        let vnode = renderContent(data,treeType,openSidePage);
+
+        vnode && childNodes.push(vnode);
+    } else {
+        childNodes.push(label);
+    }
+
+    if (prop.collapsable && !isLeaf(data, prop)) {
+        childNodes.push(renderBtn(data, prop));
+    }
+
+    const cls = ['org-tree-node-label-inner'];
+
+    let { labelWidth, labelClassName } = prop;
+
+    if (typeof labelWidth === 'number') {
+        labelWidth += 'px';
+    }
+
+    labelClassName && cls.push(labelClassName);
+
+    return React.createElement('div', {
+        key: `label_${data.id}`,
+        className: 'org-tree-node-label',
+        onClick: (e) => typeof onClick === 'function' && onClick(e, data)
+    }, [React.createElement('div', {
+        key: `label_inner_${data.id}`,
+        className: cls.join(' '),
+        style: { width: labelWidth }
+    }, childNodes)]);
+
+};
+
+// 创建 node 子节点
+export const renderChildren = (list, prop) => {
+    if (Array.isArray(list) && list.length) {
+        const children = list.map(item => {
+            return renderNode(item, prop);
+        });
+        return React.createElement('div', {
+            key: `children_${children[0].key}`,
+            className: 'org-tree-node-children'
+        }, children);
+    }
+    return '';
+};
+
+export const render = (props) => {
+    return renderNode(props.data, props);
+};
+
+export default render;
--- a/pc4mobx/organization/public/tree/org_tree.jsx
+++ b/pc4mobx/organization/public/tree/org_tree.jsx
@ -0,0 +1,133 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import TreeNode from './org_tree';
+
+import './org_tree.less';
+import StandardNode from './standard_node';
+import SimpleNode from './simple_node';
+
+//组件
+class OrgTree extends Component {
+    constructor(props) {
+        super(props);
+        this.handleExpand = this.handleExpand.bind(this);
+        this.collapse = this.collapse.bind(this);
+        this.toggleExpand = this.toggleExpand.bind(this);
+    }
+
+    componentDidMount() {
+        const { expandAll, data } = this.props;
+        if(expandAll) this.toggleExpand(data, true);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.data !== this.props.data) {
+             const { expandAll, data } = this.props;
+             if(expandAll) this.toggleExpand(data, true);
+          }
+        
+    }
+
+    componentWillUnmount() {
+    }
+
+    handleExpand(e, nodeData) {
+        if ('expand' in nodeData) {
+            nodeData.expand = !nodeData.expand;
+            if (!nodeData.expand && nodeData.children) {
+                this.collapse(nodeData.children);
+            }
+            this.forceUpdate();
+        }else {
+            nodeData.expand = true;
+            this.forceUpdate();
+        }
+    }
+
+    collapse(list) {
+        let _this = this;
+        list.forEach(function(child) {
+            if (child.expand) {
+                child.expand = false;
+            }
+            child.children && _this.collapse(child.children);
+        });
+    }
+
+    toggleExpand(data, val) {
+        let _this = this;
+        if (Array.isArray(data)) {
+            data.forEach(function(item) {
+                item.expand = val;
+                if (item.children) {
+                    _this.toggleExpand(item.children, val);
+                }
+            });
+        } else {
+            data.expand = val;
+            if (data.children) {
+                _this.toggleExpand(data.children, val);
+            }
+        }
+        this.forceUpdate();
+    }
+
+    render() {
+        const { horizontal, node, data, onClick } = this.props;
+        return <div className="org-tree-container">
+            <div className={classnames('org-tree', {
+                'horizontal': horizontal
+            })}>
+                <TreeNode 
+                    data={data}
+                    node={node}
+                    onExpand={(e, nodeData)=> this.handleExpand(e, nodeData)}
+                    onClick={(e, nodeData)=> onClick && onClick(e, nodeData)}
+                    {...this.props}
+                />
+            </div>
+        </div>;
+    }
+}
+
+OrgTree.propTypes = {
+    data: PropTypes.object,
+    node: PropTypes.object,
+    horizontal: PropTypes.bool,
+    collapsable: PropTypes.bool,
+    expandAll: PropTypes.bool,
+    renderContent: PropTypes.func,
+    labelWidth: PropTypes.number,
+    labelClassName: PropTypes.string,
+    onClick: PropTypes.func,
+    treeType:PropTypes.string,
+    openSidePage:PropTypes.func
+}
+
+OrgTree.defaultProps = {
+    node: {
+        label: 'label',
+        expand: 'expand',
+        children: 'children'
+    },
+    renderContent: function(data,treeType,openSidePage) {
+        if(treeType == 'simple') {
+            return React.createElement(SimpleNode, {
+                key: Date.now(),
+                data: data
+                // className: 'x'.join(' ')
+            }, []);    
+        }else{
+            return React.createElement(StandardNode, {
+                key: Date.now(),
+                data: data,
+                openSidePage: openSidePage
+                // className: 'x'.join(' ')
+            }, []);
+        }
+    }
+};
+
+export default OrgTree;
--- a/pc4mobx/organization/public/tree/org_tree.less
+++ b/pc4mobx/organization/public/tree/org_tree.less
@ -0,0 +1,260 @@
+.org-tree-container {
+  display: inline-block;
+  padding: 15px;
+  background-color: #fff;
+}
+
+.org-tree {
+  display: table;
+  text-align: center;
+
+  &:before, &:after {
+    content: '';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+.org-tree-node,
+.org-tree-node-children {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  &:before, &:after {
+    transition: all .35s;
+  }
+}
+.org-tree-node-label {
+  position: relative;
+  display: inline-block;
+
+  .org-tree-node-label-inner {
+    // padding: 10px 15px;
+    // text-align: center;
+    color: black;
+    border-radius: 15px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
+  }
+}
+.org-tree-node-btn {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  z-index: 10;
+  margin-left: -11px;
+  margin-top: 9px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
+  cursor: pointer;
+  transition: all .35s ease;
+
+  &:hover {
+    background-color: #e7e8e9;
+    transform: scale(1.15);
+  }
+
+  &:before, &:after {
+    content: '';
+    position: absolute;
+  }
+
+  &:before {
+    top: 50%;
+    left: 4px;
+    right: 4px;
+    height: 0;
+    border-top: 1px solid #ccc;
+  }
+
+  &:after {
+    top: 4px;
+    left: 50%;
+    bottom: 4px;
+    width: 0;
+    border-left: 1px solid #ccc;
+  }
+
+  &.expanded:after {
+    border: none;
+  }
+}
+.org-tree-node {
+  padding-top: 20px;
+  display: table-cell;
+  vertical-align: top;
+
+  &.is-leaf, &.collapsed {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 19px;
+  }
+
+  &:after {
+    left: 50%;
+    border-left: 1px solid #ddd;
+  }
+
+  &:not(:first-child):before,
+  &:not(:last-child):after {
+    border-top: 1px solid #ddd;
+  }
+
+}
+.collapsable .org-tree-node.collapsed {
+  padding-bottom: 30px;
+
+  .org-tree-node-label:after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 50%;
+    height: 20px;
+    border-right: 1px solid #ddd;
+  }
+}
+.org-tree > .org-tree-node {
+  padding-top: 0;
+
+  &:after {
+    border-left: 0;
+  }
+}
+.org-tree-node-children {
+  padding-top: 20px;
+  display: table;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 0;
+    height: 20px;
+    border-left: 1px solid #ddd;
+  }
+
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.horizontal {
+  .org-tree-node {
+    display: table-cell;
+    float: none;
+    padding-top: 0;
+    padding-left: 20px;
+
+    &.is-leaf, &.collapsed {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    &:before, &:after {
+      width: 19px;
+      height: 50%;
+    }
+
+    &:after {
+      top: 50%;
+      left: 0;
+      border-left: 0;
+    }
+
+    &:only-child:before {
+      top: 1px;
+      border-bottom: 1px solid #ddd;
+    }
+
+    &:not(:first-child):before,
+    &:not(:last-child):after {
+      border-top: 0;
+      border-left: 1px solid #ddd;
+    }
+
+    &:not(:only-child):after {
+      border-top: 1px solid #ddd;
+    }
+
+    .org-tree-node-inner {
+      display: table;
+    }
+
+  }
+
+  .org-tree-node-label {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  &.collapsable .org-tree-node.collapsed {
+    padding-right: 30px;
+
+    .org-tree-node-label:after {
+      top: 0;
+      left: 100%;
+      width: 20px;
+      height: 50%;
+      border-right: 0;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+
+  .org-tree-node-btn {
+    top: 50%;
+    left: 100%;
+    margin-top: -11px;
+    margin-left: 9px;
+  }
+
+  & > .org-tree-node:only-child:before {
+    border-bottom: 0;
+  }
+
+  .org-tree-node-children {
+    display: table-cell;
+    padding-top: 0;
+    padding-left: 20px;
+
+    &:before {
+      top: 50%;
+      left: 0;
+      width: 20px;
+      height: 0;
+      border-left: 0;
+      border-top: 1px solid #ddd;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    & > .org-tree-node {
+      display: block;
+    }
+  }
+}
+
+.text-center {
+  text-align: center;
+}
--- a/pc4mobx/organization/public/tree/simple_node.jsx
+++ b/pc4mobx/organization/public/tree/simple_node.jsx
@ -0,0 +1,19 @@
+import { Component } from "react";
+
+import './node.less'
+
+
+class SimpleNode extends Component {
+
+    render() {
+        const {label} = this.props.data;
+        return (
+            <div className="simple-node-card">
+                {label}
+            </div>
+        )
+    }
+    
+}
+
+export default SimpleNode;
--- a/pc4mobx/organization/public/tree/standard_common.jsx
+++ b/pc4mobx/organization/public/tree/standard_common.jsx
@ -0,0 +1,26 @@
+import { Component } from "react";
+
+import './node.less'
+
+
+export default class StandardCommon extends Component {
+
+    render() {
+        const {empName,job,label,onDuty,prepared} = this.props.data;
+        return (
+               <div className="common-content">
+                   <div className="info">
+                    <img src={require('../../images/img_1.png')} />
+                    <div><span>{empName}</span><div>{label}/{job}</div></div>
+                  </div>
+                  <div className="detail">
+                      <span>编制： {prepared}</span>
+                      <span>在岗： {onDuty}</span>
+                  </div>
+
+               </div>
+        )
+    }
+    
+}
+
--- a/pc4mobx/organization/public/tree/standard_job.jsx
+++ b/pc4mobx/organization/public/tree/standard_job.jsx
@ -0,0 +1,26 @@
+import { Component } from "react";
+
+import './node.less'
+
+export default class StandardJob extends Component {
+    render() {
+        const { prepared,onDuty,part,send } = this.props.data;
+        return (
+            <div className="job-content">
+                <a className="title">岗位职责</a>
+                <div className="detail">
+                    <div>
+                        <span>编制： {prepared}</span>
+                        <span>在岗： {onDuty}</span>
+                    </div>
+                    <div>
+                        <span>兼职： {part}</span>
+                        <span>派遣： {send}</span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+}
+
--- a/pc4mobx/organization/public/tree/standard_node.jsx
+++ b/pc4mobx/organization/public/tree/standard_node.jsx
@ -0,0 +1,36 @@
+import { Component } from "react";
+
+import './node.less'
+import StandardCommon from './standard_common';
+import StandardJob from './standard_job';
+import StandardPerson from './standard_person';
+
+import SliderPage from '../../components/tree/side.js'
+
+
+export default class StandardNode extends Component {
+   
+
+
+    render() {
+
+        const {data} = this.props;
+        const { empname, job, label, onduty, prepared, nodeType, icon } = data;
+        let colorValue = nodeType == 0 ? "deepskyblue" : ((nodeType == 1 || nodeType == 2) ? "green" : "blue")
+        let style = {
+            backgroundColor: colorValue
+        }
+
+        return (
+                <div className="node-card" onClick={this.props.openSidePage.bind(this,data)}>
+                    <div className="top" style={style}>
+                        <i className={icon} id="org-icon" />
+                        <p >{label}</p>
+                    </div>
+                    {(nodeType == 0 || nodeType == 1 || nodeType == 2) ? <StandardCommon data={this.props.data} /> :
+                        (nodeType == 3 ? <StandardJob data={this.props.data} /> : <StandardPerson data={this.props.data} />)}
+                </div>
+        )
+    }
+
+}
--- a/pc4mobx/organization/public/tree/standard_person.jsx
+++ b/pc4mobx/organization/public/tree/standard_person.jsx
@ -0,0 +1,25 @@
+import { Component } from "react";
+
+import './node.less'
+
+
+export default class StandardPerson extends Component {
+
+    render() {
+        const {tel,job,address} = this.props.data;
+        return (
+               <div className="person-content">
+                   <div className="info">
+                    <img src={require('../../images/img_1.png')} />
+                    <div><span>{tel}</span><div>{job}</div></div>
+                  </div>
+                  <div className="address">
+                        {address}
+                  </div>
+
+               </div>
+        )
+    }
+    
+}
+
--- a/pc4mobx/organization/single.js
+++ b/pc4mobx/organization/single.js
@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { createHashHistory } from 'History';
+
+import { Router, Route, useRouterHistory, IndexRedirect } from 'react-router';
+
+import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
+
+import { Provider } from 'mobx-react';
+
+import Module from 'weaOrganization';
+
+const routing = new RouterStore();
+
+const allStore = {
+  routing,
+  ...Module.store,
+};
+
+const browserHistory = useRouterHistory(createHashHistory)({
+  queryKey: '_key',
+  basename: '/',
+});
+
+const history = syncHistoryWithStore(browserHistory, allStore.routing);
+
+const Home = props => props.children;
+
+const Root = () => (
+  <Provider {...allStore}>
+    <Router history={history}>
+      <Route name='root' breadcrumbName='根路由' path='/' component={Home}>
+        <IndexRedirect to='main/ns_demo01/index' />
+        <Route name='main' breadcrumbName='入口' path='/main' component={Home}>
+          { Module.Route }
+        </Route>
+      </Route>
+    </Router>
+  </Provider>
+);
+
+ReactDOM.render(<Root />, document.getElementById('container'));
--- a/pc4mobx/organization/stores/index.js
+++ b/pc4mobx/organization/stores/index.js
@ -0,0 +1,8 @@
+
+import { SimpleOrgStore } from './tree/simple_org';
+import {StandardOrgStore} from './tree/standard_org'
+
+module.exports = {
+  simpleOrgStore: new SimpleOrgStore(),
+  standardOrgStore: new StandardOrgStore()
+};
--- a/pc4mobx/organization/stores/tree/simple_org.js
+++ b/pc4mobx/organization/stores/tree/simple_org.js
@ -0,0 +1,148 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaLogView } from 'comsMobx';
+import { WeaLocaleProvider } from 'ecCom';
+
+import * as API from '../../apis'; // 引入API接口文件
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+export class SimpleOrgStore {
+  @observable form = new WeaForm(); // new 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable loading = true; // 页面初始化的loading状态：数据加载成功前后前使用
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable data = {}; //组织架构数据
+  @observable horizontal = false; // true：横向  false：纵向
+  @observable collapsable = true; // true：可折叠 false：不可折叠 
+  @observable expandAll = true; // true: 全部展开 false：全部折叠 
+  @observable labelClassName = 'bg-white';
+  @observable treeType = 'simple';
+  @observable scale = 1;
+
+  @action // 初始化操作： 一般用来初始化获取后台数据
+  doInit = () => {
+    this.getBaseForm();
+    this.getSimpleOrg();
+  }
+
+  @action // 获得组织架构数据
+  getSimpleOrg = (params) => {
+    API.getSimpleOrganizationDatas(params).then(action(result => {
+      this.loading = false;
+      // this.hasRight = result.hasRight;
+      // if (result.hasRight) {
+      //   this.data = result.data;
+      // }
+      this.data = result.data;
+    }));
+    setTimeout(function(){
+      this.loading = false;
+    },2000)
+  }
+
+
+  @action
+  getBaseForm = () => {
+    this.condition = [{
+      "colSpan": 2,
+      "conditionType": "DATEPICKER",  
+      'rules': 'required|string',
+      'hide': false, // 隐藏
+      "domkey": [
+        "datasDate"
+        ],
+      "fieldcol": 12,
+      "label": "数据日期",
+      "labelcol": 6,
+      "value": "2022-01-21",
+      "viewAttr": 2
+    },{
+      "colSpan": 2,
+      "conditionType": "SELECT",  
+      'rules': 'required|string',
+      'hide': false,
+      "domkey": [
+        "dimension"
+        ],
+      "fieldcol": 12,
+      "label": "维度",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "行政维度",
+        },{
+          "key": "2",
+          "selected": false,
+          "showname": "公司维度",
+      }],
+      "labelcol": 6,
+      "value": "行政维度",
+      "viewAttr": 2
+    },{
+      "colSpan": 2,
+      "conditionType": "SELECT",  
+      'rules': 'required|string',
+      'hide': false, 
+      "domkey": [
+        "node"
+        ],
+      "fieldcol": 12,
+      "label": "根节点",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "集团",
+        },{
+          "key": "2",
+          "selected": false,
+          "showname": "部门",
+      }],
+      "labelcol": 6,
+      "value": "集团",
+      "viewAttr": 2
+    },{
+      "colSpan": 2,
+      "conditionType": "SELECT",  
+      'rules': 'required|string', 
+      'hide': false, 
+      "domkey": [
+        "hierarchy"
+        ],
+      "fieldcol": 12,
+      "label": "显示层级",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "一级",
+        },{
+          "key": "2",
+          "selected": false,
+          "showname": "二级",
+      }],
+      "labelcol": 6,
+      "value": "一级",
+      "viewAttr": 2
+    },{
+      "colSpan": 2,
+      "conditionType": "CHECKBOX",  
+      'rules': 'required|string', 
+      'hide': false, 
+      "domkey": [
+        "visiable"
+        ],
+      "fieldcol": 12,
+      "label": "显示虚拟组织",
+      "labelcol": 6,
+      "value": "true",
+      "viewAttr": 2
+    }]
+
+  this.form.initFormFields(this.condition);
+
+  }
+
+}
--- a/pc4mobx/organization/stores/tree/standard_org.js
+++ b/pc4mobx/organization/stores/tree/standard_org.js
@ -0,0 +1,156 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaLogView } from 'comsMobx';
+import { WeaLocaleProvider } from 'ecCom';
+import moment from "moment";
+
+
+import * as API from '../../apis'; // 引入API接口文件
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+export class StandardOrgStore {
+  @observable form = new WeaForm(); // new 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable loading = true; // 页面初始化的loading状态：数据加载成功前后前使用
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable data = {}; //组织架构数据
+  @observable horizontal = false; // true：横向  false：纵向
+  @observable collapsable = true; // true：可折叠 false：不可折叠 
+  @observable expandAll = true; // true: 全部展开 false：全部折叠 
+  @observable labelClassName = 'bg-white';
+  @observable treeType = 'standard';
+  @observable visible = true; //侧边栏显示
+  @observable scale = 1; //缩放比例
+
+
+  @action // 初始化操作： 一般用来初始化获取后台数据
+  doInit = () => {
+    this.getBaseForm();
+    this.getStandardOrg();
+  }
+
+  @action // 获得组织架构数据
+  getStandardOrg = (params) => {
+    API.getStandardOrganizationDatas(params).then(action(result => {
+      this.loading = false;
+      // this.hasRight = result.hasRight;
+      // if (result.hasRight) {
+      //   this.data = result.data;
+      // }
+      if (result.api_status) {
+        this.data = result.data;
+      }
+    }));
+    setTimeout(function () {
+      this.loading = false
+    }, 2000)
+
+  }
+
+
+
+  @action
+  getBaseForm = () => {
+    this.condition = [{
+      "colSpan": 2,
+      "conditionType": "DATEPICKER",
+      'rules': 'required|string',
+      'hide': false, // 隐藏
+      "domkey": [
+        "datasDate"
+      ],
+      "fieldcol": 12,
+      "label": "数据日期",
+      "labelcol": 6,
+      "value": "2022-01-21",
+      "viewAttr": 2
+    }, {
+      "colSpan": 2,
+      "conditionType": "SELECT",
+      'rules': 'required|string',
+      'hide': false,
+      "domkey": [
+        "dimension"
+      ],
+      "fieldcol": 12,
+      "label": "维度",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "行政维度",
+        }, {
+          "key": "2",
+          "selected": false,
+          "showname": "公司维度",
+        }],
+      "labelcol": 6,
+      "value": "行政维度",
+      "viewAttr": 2
+    }, {
+      "colSpan": 2,
+      "conditionType": "SELECT",
+      'rules': 'required|string',
+      'hide': false,
+      "domkey": [
+        "node"
+      ],
+      "fieldcol": 12,
+      "label": "根节点",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "集团",
+        }, {
+          "key": "2",
+          "selected": false,
+          "showname": "部门",
+        }],
+      "labelcol": 6,
+      "value": "集团",
+      "viewAttr": 2
+    }, {
+      "colSpan": 2,
+      "conditionType": "SELECT",
+      'rules': 'required|string',
+      'hide': false,
+      "domkey": [
+        "hierarchy"
+      ],
+      "fieldcol": 12,
+      "label": "显示层级",
+      "options": [
+        {
+          "key": "1",
+          "selected": false,
+          "showname": "一级",
+        }, {
+          "key": "2",
+          "selected": false,
+          "showname": "二级",
+        }],
+      "labelcol": 6,
+      "value": "一级",
+      "viewAttr": 2
+    }, {
+      "colSpan": 2,
+      "conditionType": "CHECKBOX",
+      'rules': 'required|string',
+      'hide': false,
+      "domkey": [
+        "visiable"
+      ],
+      "fieldcol": 12,
+      "label": "显示虚拟组织",
+      "labelcol": 6,
+      "value": "true",
+      "viewAttr": 2
+    }]
+
+    this.form.initFormFields(this.condition);
+
+  }
+
+}
--- a/pc4mobx/organization/style/index.js
+++ b/pc4mobx/organization/style/index.js
@ -0,0 +1,2 @@
+const req = require.context('./', false, /\.\/\w+\.(less|css)/);
+req.keys().forEach(mod => req(mod));
--- a/pc4mobx/organization/style/index.less
+++ b/pc4mobx/organization/style/index.less
@ -0,0 +1,67 @@
+/* 公共样式 */
+
+// loading 效果
+.wea-demo-loading {
+  height: 100%;
+  text-align: center;
+  >div {
+    position: absolute;
+    top: 50%;
+  }
+}
+
+html,body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial;
+  color: #333333;
+}
+
+#container, body, html {
+  height: 100%;
+  overflow: scroll !important
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  background-color: transparent;
+}
+
+
+//组织架构图
+#node {
+  width: 95%;
+  height: 100%;
+}
+
+.quickOperate{
+  position: fixed;
+  width: 45px;
+  height: 250px;
+  right: 28px;
+  top: 20px;
+  // border: 1px solid #8b4513;
+
+  img{
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+  }
+
+  icon {
+    cursor: pointer;
+    font-size: 30px;
+    display: block;
+    margin-top: 10px;
+  }
+}
+
+
+
+
--- a/pc4mobx/organization/util/index.js
+++ b/pc4mobx/organization/util/index.js
@ -0,0 +1,75 @@
+import { Spin } from 'antd';
+import { WeaSwitch } from 'comsMobx';
+import { WeaLocaleProvider, WeaAlertPage, WeaSearchGroup, WeaFormItem } from 'ecCom';
+const getLabel = WeaLocaleProvider.getLabel;
+import '../style/index.less'
+
+// 渲染form表单: 一般对form的渲染都统一使用该方法
+export const getSearchs = (form, condition, col, isCenter) => {
+  const { isFormInit } = form;
+  const formParams = form.getFormParams();
+  let group = [];
+  isFormInit && condition && condition.map(c =>{
+    let items = [];
+    c.items.map(fields => {
+      items.push({
+        com:(
+          <WeaFormItem
+            label={`${fields.label}`} // label 标签的文本
+            labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
+            wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
+            error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
+            tipPosition="bottom" // 错误提示的显示位置: top/bottom
+          >
+            <WeaSwitch
+              fieldConfig={fields}
+              form={form}
+              formParams={formParams}
+            />
+          </WeaFormItem>),
+        colSpan:1,
+      })
+    });
+    group.push(
+      <WeaSearchGroup
+        col={col || 1} // 高级搜索列布局列数
+        needTigger={true} // 是否开启收缩
+        title={c.title || ''} // 高级搜索标题
+        showGroup={c.defaultshow} // 是否开启面板
+        items={items} // 条目数组数据
+        center={isCenter || false} // 内容是否居中：一般弹框需要
+      />)
+  });
+  return group;
+}
+
+// 页面加载中效果处理
+export const renderLoading = (loading) => (
+  <div className="wea-demo-loading">
+    <Spin spinning={loading} />
+  </div>
+)
+  
+// 无权限处理
+export const renderNoright = () => (
+  <WeaAlertPage>
+    <div>
+      {getLabel(2012,'对不起，您暂时没有权限！')}
+    </div>
+  </WeaAlertPage>
+)
+
+// 暂无数据处理
+export const renderNoData = () => (
+  <WeaAlertPage>
+    <div>
+      暂无数据
+    </div>
+  </WeaAlertPage>
+)
+
+//对象非空判断
+export const isEmpty = (obj) =>{
+  for(var n in obj){return false}
+  return true;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "../spa",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "../src4js",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "experimentalDecorators": true,
+  },
+  "exclude": [
+    "**/node_modules/*",
+    "config",
+    "config_weaver",
+    "public",
+    "scripts",
+    "webpack-config.js",
+    "webpack",
+    "jest"
+  ]
+}
--- a/tslint.json
+++ b/tslint.json
@ -0,0 +1,9 @@
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "linterOptions": {
+    "exclude": [
+      "config/**/*.js",
+      "node_modules/**/*.ts"
+    ]
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,219 @@
+const config = require('./weaconfig/weaconfig');
+const path_e9 = require('./weaconfig/weapath4e9').default;
+const path_e9_coms = require('./weaconfig/weapath4e9-coms').default;
+const path_e9_eng = require('./weaconfig/weapath4e9-eng').default;
+const argv = require('yargs').argv;
+
+const getPath = ({ name, srcPath, runPath }, paths) => {
+  if (!paths[name]) {
+    console.error(`\n======
+      请检查 src4js/webpack.config.js 的配置, 找不到 name 为 ${
+      name} 的 APP ！！！！！\n======\n\n`);
+    return;
+  }
+  const app = paths[name];
+  const { entry, output, styleUrl } = app;
+  return Object.assign(app, {
+    entry: `${srcPath}${entry}`,
+    output: `${runPath}${output}`,
+  }, styleUrl ? { styleUrl: `${runPath}${styleUrl}` } : {});
+};
+
+// 运行模式：release打包模式，debug调试模式
+//let mode = 'release';
+ mode = 'debug';
+
+// 编译模式：production发布版、development开发版
+let node_env = 'production';
+// node_env = 'development';
+
+// 是否是自定义路径模式，自定义模式可以自己写完整地址
+const custom = true;
+
+if (custom) {
+  // 自定义路径
+      const customAppName = 'more';
+  module.exports = config.create(({
+ //前台调试主入口
+    "index":{
+        entry: "./pc/main/index.js",
+        output: "D:/weaver/ecology/spa/main/index.js",
+        styleUrl: "D:/weaver/ecology/spa/main/index.css"
+    },
+    //前台调试主入口
+    "portal":{
+        entry: "./pc/portal/index.js",
+        output: "E:/workspace/ecology/spa/portal/index.js",
+        styleUrl: "E:/workspace/ecology/spa/portal/index.css",
+        outputlib: {
+            library: "weaPortal",
+            libraryTarget: "umd"
+        }
+    },
+    //前台调试主入口
+    "portalengine":{
+        entry: "./pc4backstage/portal4engine/index.js",
+        output: "E:/workspace/ecology/spa/portal/static4engine/engine.js",
+        styleUrl: "E:/workspace/ecology/spa/portal/static4engine/engine.css",
+        outputlib: {
+            library: "weaPortalEngine",
+            libraryTarget: "umd"
+        }
+    },  
+    //前台调试主入口
+    "theme":{
+        entry: "./pc4mobx/portal4theme/index.js",
+        output: "E:/workspace/ecology/wui/theme/ecology9/js/index-mobx.js",
+        styleUrl: "E:/workspace/ecology/wui/theme/ecology9/css/index-mobx.css",
+        outputlib: {
+            library: "weaPortalTheme",
+            libraryTarget: "umd"
+        }
+    },
+    //前台调试主入口
+      "more":{
+          entry: "./pc/portal/elementmore/single.js",
+          output: "E:/workspace/ecology/spa/portal/index_more.js",
+          styleUrl: "E:/workspace/ecology/spa/portal/index_more.css",
+      },
+    //前台调试主入口
+      "single":{
+          entry: "./pc/portal/single.js",
+          output: "E:/workspace/ecology/spa/portal/index-indie.js",
+          styleUrl: "E:/workspace/ecology/spa/portal/index-indie.css",
+      },
+    //E9 主题
+    "E9_theme_mobx": {
+        entry: "./pc4mobx/portal4theme/index.js",
+        output: "E:/workspace/ecology/wui/theme/ecology9/js/index-mobx.js",
+        styleUrl: "E:/workspace/ecology/wui/theme/ecology9/css/index-mobx.css",
+        outputlib: {
+            library: "weaPortalTheme",
+            libraryTarget: "umd"
+        }
+    },
+    //正式系统打包文件
+    "portal_fs":{
+        entry: "./pc/portal_fs_2/index.js",
+        output: "E:/workspace/ecology/spa/portal_fs/index.js",
+        styleUrl: "E:/workspace/ecology/spa/portal_fs/index.css",
+        outputlib: {
+            library: "weaPortal",
+            libraryTarget: "umd"
+        }
+    },
+    //前台调试主入口
+    "mobx_index":{
+        entry: "./pc4mobx/amain/index.js",
+        output: "E:/workspace/ecology/spa/main/index-mobx.js",
+    },
+    //引擎主入口
+    "engine_index":{
+        entry: "./pc4backstage/amain/index.js",
+        output: "E:/workspace/ecology/spa/main/engine.js",
+    },
+    //SAP集成
+    "sapIntegration":{
+        entry: "./pc4backstage/sapIntegration/index.js",
+        output: "E:/workspace/ecology/spa/sapIntegration/index.js",
+        styleUrl: "E:/workspace/ecology/spa/sapIntegration/index.css",
+        outputlib: {
+            library: "weaSapIntegration",
+            libraryTarget: "umd"
+        }
+    },
+    //SAP集成
+    "sapBrowseConfiguration":{
+        entry: "./pc4backstage/sapIntegration/public/index.js",
+        output: "E:/workspace/ecology/spa/sapIntegration/index_sapBrowse.js",
+        styleUrl: "E:/workspace/ecology/spa/sapIntegration/index_sapBrowse.css",
+        outputlib: {
+            library: "weaSapIntegrationPublic",
+            libraryTarget: "umd"
+        }
+    },
+  })[customAppName], mode, node_env);
+} else {
+  // 已内置配置
+  const pathConfig = {
+    name: 'document_redux', // 查阅底部注释列表
+    srcPath: '../', // 本地源码路径，src4js 上一层, 或本地 svn 绝对路径 'D:/ecology'
+    runPath: 'D:/ecology/ecology9/ecology', // 打包后路径，spa wui 等上一层, 或本地绝对路径 'D:/ecology'
+    mode,
+  };
+  argv.pubModule && (pathConfig.name = argv.pubModule);
+  module.exports = config.create(getPath(
+    pathConfig,
+    Object.assign(path_e9, path_e9_coms, path_e9_eng)
+  ), mode, node_env);
+}
+
+// ************ APP NAME ************
+
+/* 公共组件
+  antd - antd
+  ecCom - E9 基础组件库
+  coms_demo - 组件库 API 文档 demo 页
+  coms_mobx - mobx 公共组件
+  coms_redux - 前台 redux 公共组件 （即将废弃）
+  coms_global - 流程单页公共文件整合包
+  weaCom - 云商店应用组件库
+*/
+
+/* 前台 A -> Z
+  main - 主入口
+  theme - 主题
+  portal - 门户
+  album_redux - 相册 redux （迁移后废弃）
+  blog - 微博
+  blog_single - 微博单页入口
+  cowork - 协作
+  cowork_single - 协作单页入口
+  cpt - 资产
+  cpt_single - 资产单页入口
+  crm - 客户
+  crm_single - 客户单页入口
+  document - 文档
+  document_single - 文档单页入口
+  document_redux - 文档 redux（迁移后废弃）
+  document_redux_single - 文档 redux 单页入口（迁移后废弃）
+  email - 邮件
+  email_single - 邮件单页入口
+  esearch - 微搜
+  esearch_single - 微搜单页入口
+  fna - 财务
+  fnaSpecial - 财务流程
+  hrm - 人力
+  hrm_single - 人力单页入口
+  inte - 集成
+  inte_single - 集成单页入口
+  meeting - 会议
+  meeting_single - 会议单页入口
+  odoc - 公文
+  odoc_single - 公文单页入口
+  prj - 项目
+  prj_single - 项目单页入口
+  smallApp - 小模块
+  smallApp_single - 小模块单页入口
+  workplan - 日程
+  workplan_single - 日程单页入口
+  workflow - 流程
+  workflow_single - 流程单页入口
+  workflow_redux - 流程 redux（迁移后废弃）
+  workflow_redux_single - 流程 redux 单页入口（迁移后废弃）
+*/
+
+/* 后台
+  bs_main - 主入口
+  bs_theme - 门户主题
+  bs_portal - 门户
+  bs_cpt - 资产
+  bs_crm - 客户
+  bs_hrm - 人力
+  bs_hrm_single - 人力单页入口
+  bs_mobilemode - 移动建模
+  bs_workflow - 流程
+  bs_workflow_single - 流程单页入口
+  bs_smallApp - 小应用
+  bs_smallApp_single -  小应用单页入口
+*/