组织管理前端脚手架搭建
This commit is contained in:
commit
a645a95956
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules
|
||||||
|
|
@ -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/)
|
||||||
|
|
@ -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/)
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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" }}>
|
||||||
|
数据日期 :
|
||||||
|
<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" }}>
|
||||||
|
维度 :
|
||||||
|
<WeaSelect
|
||||||
|
style={{ width: 86 }}
|
||||||
|
options={dimension}
|
||||||
|
value={latitudeValue}
|
||||||
|
viewAttr={3}
|
||||||
|
onChange={v => {
|
||||||
|
this.setState({ latitudeValue: v })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "15px", display: "inline-block" }}>
|
||||||
|
根节点 :
|
||||||
|
<WeaSelect
|
||||||
|
options={node}
|
||||||
|
style={{ width: 60 }}
|
||||||
|
value={nodeValue}
|
||||||
|
viewAttr={3}
|
||||||
|
onChange={v => {
|
||||||
|
this.setState({ nodeValue: v })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "20px", display: "inline-block" }}>
|
||||||
|
显示层级 :
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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')} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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'));
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 428 B |
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
@ -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)
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import OrgTree from './org_tree.jsx';
|
||||||
|
|
||||||
|
export default OrgTree
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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'));
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
import { SimpleOrgStore } from './tree/simple_org';
|
||||||
|
import {StandardOrgStore} from './tree/standard_org'
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
simpleOrgStore: new SimpleOrgStore(),
|
||||||
|
standardOrgStore: new StandardOrgStore()
|
||||||
|
};
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
const req = require.context('./', false, /\.\/\w+\.(less|css)/);
|
||||||
|
req.keys().forEach(mod => req(mod));
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
|
||||||
|
"linterOptions": {
|
||||||
|
"exclude": [
|
||||||
|
"config/**/*.js",
|
||||||
|
"node_modules/**/*.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 - 小应用单页入口
|
||||||
|
*/
|
||||||
Loading…
Reference in New Issue