256 lines
12 KiB
JavaScript
256 lines
12 KiB
JavaScript
import { Button, Radio, Slider, message, Modal } from 'antd';
|
|
import * as React from 'react';
|
|
import { WeaLocaleProvider, WeaInputSearch, WeaBrowser } from 'ecCom';
|
|
import D3Tree from './RectTree';
|
|
import { toJS } from 'mobx';
|
|
import { inject, observer } from 'mobx-react';
|
|
import './index.less';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
@observer
|
|
export default class MindMap extends React.Component {
|
|
searchedNode = []
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
layout : '0',
|
|
scale : 10
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
const { store } = this.props;
|
|
const { nodeForm, topButtons, hasChildren,path,canEdit } = this.props;
|
|
const dataParams = path?{pathid:path.id,nodeid:nodeForm.id}:{};
|
|
return (
|
|
<div className="wea-edc-path-designer">
|
|
<div className="tree-layout-toggle d3-tree-toggle">
|
|
{topButtons.length > 0 && <Button.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@j3i2ly`}>
|
|
{
|
|
topButtons
|
|
}
|
|
</Button.Group>}
|
|
<Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@u16jis`} value={this.state.layout} onChange={this.changeLayout}>
|
|
<Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@c6o7ni`} value="0">{getLabel(22986, '左')}</Radio.Button>
|
|
<Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@w1ejve`} value="2">{getLabel(22988, '右')}</Radio.Button>
|
|
<Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@2wzfrk`} value="1">{getLabel(31276, '上')}</Radio.Button>
|
|
<Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@kxn5bw`} value="3">{getLabel(23010, '下')}</Radio.Button>
|
|
</Radio.Group>
|
|
<div className="edc-zoom-line">
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@q2h78q`}
|
|
onClick={this.zoomOut}
|
|
>
|
|
<i className="anticon">
|
|
<svg viewBox="64 64 896 896" class="" data-icon="zoom-out" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg></i>
|
|
</Button>
|
|
<Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@reu4gh`}
|
|
value={this.state.scale}
|
|
marks={{ 1: '10%', 20: '200%', [this.state.scale]: `${this.state.scale * 10}%` }}
|
|
min={1} max={20}
|
|
tipFormatter={value => `${value * 10}%`}
|
|
onChange={this.changeScale}
|
|
>
|
|
</Slider>
|
|
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1rejrr`}
|
|
onClick={this.zoomIn}
|
|
>
|
|
<i className="anticon">
|
|
<svg viewBox="64 64 896 896" class="" data-icon="zoom-in" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"></path></svg>
|
|
</i>
|
|
</Button>
|
|
</div>
|
|
<Button.Group ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@0qilil`}>
|
|
<WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@5ddxps`}
|
|
placeholder={getLabel('502644', '搜索节点')}
|
|
onSearch={this.searchNode}
|
|
onChange={this.changeSearchValue}
|
|
/>
|
|
</Button.Group>
|
|
</div >
|
|
{
|
|
this.props.pathType === 1 &&
|
|
<D3Tree ecId={`${this && this.props && this.props.ecId || ''}_D3Tree@jgt9oh`}
|
|
data={toJS(this.props.data)}
|
|
onClick={this.props.onClick}
|
|
showRight={this.props.showRight}
|
|
showDialog={this.props.showDialog}
|
|
renderRight={this.props.renderRight}
|
|
renderRightTitle={this.props.renderRightTitle}
|
|
layout={this.state.layout}
|
|
style={{ height: 'calc(100% - 32px)', top: 50 }}
|
|
scale={this.state.scale}
|
|
zoom={this.zoom}
|
|
ref={ref => store.d3Tree = ref}
|
|
showMenu={true}
|
|
menus={this.props.rightMenus}
|
|
closeRight={(bool)=>{this.props.closeRight(bool)}}
|
|
closeDialog={(bool)=>{this.props.closeDialog(bool)}}
|
|
// onDelete={(readonly || !nodeForm.parentid) || this.deleteNode}
|
|
// onAddChild={readonly || this.addChildren}
|
|
// onDeleteChild={(readonly) || (hasChildren && this.deleteChildren)}
|
|
// onSynchro={readonly || this.synchronize}
|
|
showname={this.getShowname}
|
|
desc="hrmNames"
|
|
desc2="description"
|
|
desc3="overstr"
|
|
></D3Tree>
|
|
}
|
|
|
|
</div >
|
|
)
|
|
}
|
|
|
|
|
|
getShowname = (d) => {
|
|
return `${d.name}`;
|
|
}
|
|
changeSearchValue = () => {
|
|
this.searchedNode = [];
|
|
}
|
|
searchNode = (value) => {
|
|
const { store, params } = this.props;
|
|
if (!value) {
|
|
this.searchedNode = [];
|
|
return;
|
|
}
|
|
if (store.d3Tree ) {
|
|
if (this.searchedNode.length === 0) {
|
|
this.timer = 0;
|
|
this.searchedNode = store.d3Tree .searchNode(value.toLowerCase());
|
|
}
|
|
const length = this.searchedNode.length;
|
|
if (length > 0) {
|
|
store.d3Tree .centerNode(this.searchedNode[this.timer % length]);
|
|
this.timer++;
|
|
}
|
|
}
|
|
}
|
|
zoom = (scale) => {
|
|
// this.props.changeScale(parseInt(scale * 10));
|
|
this.setState({
|
|
scale : parseInt(scale * 10)
|
|
});
|
|
}
|
|
zoomIn = () => {
|
|
// this.props.changeScale(Math.min(this.props.scale + 1, 30));
|
|
this.setState({
|
|
scale : Math.min(this.state.scale + 1, 30)
|
|
});
|
|
}
|
|
zoomOut = () => {
|
|
// this.props.changeScale(Math.max(this.props.scale - 1, 1));
|
|
this.setState({
|
|
scale : Math.max(this.state.scale - 1, 1)
|
|
});
|
|
}
|
|
changeScale = (scale) => {
|
|
this.setState({
|
|
scale : scale
|
|
});
|
|
}
|
|
importPath = () => {
|
|
this.props.openPathTemplateDialog();
|
|
}
|
|
setCombine = () => {
|
|
const { edcPathDesignerStore: store, params } = this.props;
|
|
this.props.combineSetDialogStore.open({ appid: params.appid });
|
|
}
|
|
changeLayout = (e) => {
|
|
// const { edcPathDesignerStore: store } = this.props;
|
|
this.searchedNode = [];
|
|
// this.props.changeLayout(e.target.value);
|
|
this.setState({
|
|
layout : e.target.value
|
|
});
|
|
}
|
|
|
|
saveNode = () => {
|
|
this.props.saveNode();
|
|
}
|
|
saveAsTemplate = () => {
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
if (this.props.d3Tree) {
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
const svg = this.props.d3Tree .baseSvg;
|
|
const g = this.props.d3Tree .svgGroup;
|
|
const serializer = new XMLSerializer();
|
|
let source = serializer.serializeToString(svg.node());
|
|
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
|
|
const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
|
|
const canvas = document.createElement("canvas");
|
|
const { width, height } = svg.node().getBoundingClientRect();
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const context = canvas.getContext("2d");
|
|
const image = new Image;
|
|
image.src = url;
|
|
image.onload = () => {
|
|
context.drawImage(image, 50, 25);
|
|
const img = canvas.toDataURL("image/png");
|
|
this.props.saveAsTemplate(img);
|
|
}
|
|
}
|
|
}
|
|
addChildren = () => {
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
const { nodeForm } = store;
|
|
this.props.setChildOpreator([]);
|
|
this.props.allChildOpreator(nodeForm.id).then((childOpreator) => {
|
|
this.props.setChildOpreator(childOpreator);
|
|
if (this.browser) {
|
|
this.browser.openModal();
|
|
const selectPerson = (ids, names, objs) => {
|
|
if (objs.length > 99) {
|
|
message.warn(getLabel('502645', '下级节点不能超过99个'));
|
|
this.browser.openModal();
|
|
return;
|
|
}
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
const oldids = childOpreator.map(d => d.id);
|
|
const newids = objs.filter(d => oldids.indexOf(d.id) === -1).map(d => d.id);
|
|
if (newids.length === 0) {
|
|
message.warn(getLabel('502646', '请选择需要添加的人员'));
|
|
return;
|
|
}
|
|
this.props.addNodes(nodeForm.id, newids.join(','));
|
|
}
|
|
this.selectPerson = selectPerson;
|
|
}
|
|
});
|
|
}
|
|
addNodes = (ids, names, objs) => {
|
|
this.selectPerson(ids, names, objs);
|
|
}
|
|
|
|
deleteNode = () => {
|
|
Modal.confirm({
|
|
title: getLabel('505951','删除节点') ,
|
|
content: getLabel('505952','确认要删除选中的节点？') ,
|
|
onOk: () => {
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
const { nodeForm } = store;
|
|
this.props.deleteNode(nodeForm.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
deleteChildren = () => {
|
|
Modal.confirm({
|
|
title: getLabel('505953','删除节点') ,
|
|
content: getLabel('505954','确认要删除所有下级节点？') ,
|
|
onOk: () => {
|
|
const { edcPathDesignerStore: store } = this.props;
|
|
const { nodeForm } = store;
|
|
this.props.deleteChildren(nodeForm.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
synchronize = () => {
|
|
if (this.nodeBrowser) {
|
|
this.nodeBrowser.openModal();
|
|
}
|
|
}
|
|
|
|
} |