liang.cheng
/
trunk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/cl' (#38) from feature/cl into dev 

Reviewed-on: http://221.226.25.34:3000/liang.cheng/trunk/pulls/38
This commit is contained in:
liang.cheng 2023-07-12 10:48:36 +08:00
parent 00398d6930 b15144beef
commit e37bc680bd
24 changed files with 21 additions and 1530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pc4mobx/organization/components/resource/FormItem.js
View File

@ -121,7 +121,9 @@ export default class FormItem extends React.Component {
{item.map((subItem) => { {item.map((subItem) => {
return ( return (
<div> <div>
<span>{subItem.fieldId}</span> {subItem.fieldId.length > 4 ? <Tooltip placement="topLeft" title={subItem.fieldId}>
<span>{subItem.fieldId}</span>
</Tooltip> : <span>{subItem.fieldId}</span>}
{subItem.fieldValue.length > 10 ? <Tooltip placement="topLeft" title={subItem.fieldValue}> {subItem.fieldValue.length > 10 ? <Tooltip placement="topLeft" title={subItem.fieldValue}>
<span>{subItem.fieldValue}</span> <span>{subItem.fieldValue}</span>
</Tooltip> : <span>{subItem.fieldValue}</span>} </Tooltip> : <span>{subItem.fieldValue}</span>}

32
pc4mobx/organization/components/tree/affix.js
View File

@ -1,32 +0,0 @@
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>
)
}
}

150
pc4mobx/organization/components/tree/baseForm.js
View File

@ -1,150 +0,0 @@
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>
)
}
}

89
pc4mobx/organization/components/tree/index.js
View File

@ -1,89 +0,0 @@
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() { // 初始化渲染页面
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; // 从后台取数据 和 方法
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>
)
}
}

44
pc4mobx/organization/components/tree/side.js
View File

@ -1,44 +0,0 @@
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')} />
)
}
}

18
pc4mobx/organization/components/tree/slider.js
View File

@ -1,18 +0,0 @@
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>
)
}
}

100
pc4mobx/organization/components/tree/standard_org.js
View File

@ -1,100 +0,0 @@
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>
)
}
}

4
pc4mobx/organization/index.js
View File

@ -3,8 +3,6 @@ import Route from "react-router/lib/Route";
import { message } from "antd"; import { message } from "antd";
import { WeaLocaleProvider } from "ecCom"; import { WeaLocaleProvider } from "ecCom";
import Home from "./components/Home"; import Home from "./components/Home";
import SimpleOrg from "./components/tree/index";
import StandardOrg from "./components/tree/standard_org";
import RankScheme from "./components/postionrank/RankScheme"; import RankScheme from "./components/postionrank/RankScheme";
import JobLevel from "./components/postionrank/JobLevel"; import JobLevel from "./components/postionrank/JobLevel";
import JobGrade from "./components/postionrank/JobGrade"; import JobGrade from "./components/postionrank/JobGrade";
@ -58,8 +56,6 @@ const Routes = (
path="organization" path="organization"
onEnter={getLocaleLabel} onEnter={getLocaleLabel}
component={Home}> component={Home}>
<Route key="index" path="index" component={SimpleOrg} />
<Route key="standard" path="standard" component={StandardOrg} />
<Route key="rankscheme" path="rankscheme" component={RankScheme} /> <Route key="rankscheme" path="rankscheme" component={RankScheme} />
<Route key="joblevel" path="joblevel" component={JobLevel} /> <Route key="joblevel" path="joblevel" component={JobLevel} />
<Route key="jobgrade" path="jobgrade" component={JobGrade} /> <Route key="jobgrade" path="jobgrade" component={JobGrade} />

3
pc4mobx/organization/public/tree/index.js
View File

@ -1,3 +0,0 @@
import OrgTree from './org_tree.jsx';
export default OrgTree

129
pc4mobx/organization/public/tree/node.less
View File

@ -1,129 +0,0 @@
.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;
}

120
pc4mobx/organization/public/tree/org_tree.js
View File

@ -1,120 +0,0 @@
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;

133
pc4mobx/organization/public/tree/org_tree.jsx
View File

@ -1,133 +0,0 @@
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;

260
pc4mobx/organization/public/tree/org_tree.less
View File

@ -1,260 +0,0 @@
.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;
}

19
pc4mobx/organization/public/tree/simple_node.jsx
View File

@ -1,19 +0,0 @@
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;

26
pc4mobx/organization/public/tree/standard_common.jsx
View File

@ -1,26 +0,0 @@
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>
)
}
}

26
pc4mobx/organization/public/tree/standard_job.jsx
View File

@ -1,26 +0,0 @@
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>
)
}
}

36
pc4mobx/organization/public/tree/standard_node.jsx
View File

@ -1,36 +0,0 @@
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>
)
}
}

25
pc4mobx/organization/public/tree/standard_person.jsx
View File

@ -1,25 +0,0 @@
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>
)
}
}

4
pc4mobx/organization/stores/index.js
View File

@ -1,5 +1,3 @@
import { SimpleOrgStore } from "./tree/simple_org";
import { StandardOrgStore } from "./tree/standard_org";
import { RankSchemeStore } from "./rankscheme"; import { RankSchemeStore } from "./rankscheme";
import { JobLevelStore } from "./joblevel"; import { JobLevelStore } from "./joblevel";
import { JobGradeStore } from "./jobgrade"; import { JobGradeStore } from "./jobgrade";
@ -32,8 +30,6 @@ import {PersonnelResumeStore} from './personnelResume'
module.exports = { module.exports = {
simpleOrgStore: new SimpleOrgStore(),
standardOrgStore: new StandardOrgStore(),
rankScheme: new RankSchemeStore(), rankScheme: new RankSchemeStore(),
jobLevel: new JobLevelStore(), jobLevel: new JobLevelStore(),
jobGrade: new JobGradeStore(), jobGrade: new JobGradeStore(),

148
pc4mobx/organization/stores/tree/simple_org.js
View File

@ -1,148 +0,0 @@
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);
}
}

156
pc4mobx/organization/stores/tree/standard_org.js
View File

@ -1,156 +0,0 @@
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);
}
}

17
pc4mobx/organization/style/card.less
View File

@ -134,17 +134,24 @@
div{ div{
width: 33.3%; width: 33.3%;
height: 40px; height: 40px;
overflow: hidden; display: flex;
text-overflow: ellipsis;
white-space: nowrap;
span:first-child{ span:first-child{
color: #999999; color: #999999;
width: 80px; height: inherit;
display: inline-block; flex: 1;
text-align: right; text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
span:last-child{ span:last-child{
margin-left: 20px; margin-left: 20px;
height: 40px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 4;
} }
} }
} }

7
pc4mobx/organization/style/index.less
View File

@ -22,19 +22,24 @@ body {
color: #333333; color: #333333;
} }
#container, #container,
body, body,
html { html {
height: 100%; height: 100%;
overflow: scroll !important overflow: scroll !important;
scrollbar-width: none; //火狐滚动条处理
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
height: 0px; height: 0px;
background-color: transparent; background-color: transparent;
display: none;
} }
//列表滚动条 //列表滚动条
.wea-new-table { .wea-new-table {
::-webkit-scrollbar { ::-webkit-scrollbar {

1
tsconfig.json
View File

@ -15,7 +15,6 @@
"noImplicitThis": true, "noImplicitThis": true,
"noImplicitAny": true, "noImplicitAny": true,
"strictNullChecks": true, "strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"experimentalDecorators": true, "experimentalDecorators": true,
}, },