weaver_trunk_cli/pc4mobx/prj/components/single/mindmap/MindMapPage.js

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import MindMap from '../../common/mindMap/MindMap';
import TaskInfoDialog from '../../dialog/taskDialog'
import { message, Modal } from "antd"
import * as Task_Apis from "../../../apis/task"
import {  WeaLocaleProvider } from 'ecCom';
import TaskCard from '../../mindmap/TaskCard';
import ProjectCard from '../../project/ProjectCard'
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;

@inject("mindMapStore")
@observer
class MindMapPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectObj : {},
            showRight : false,
            renderType : ""
        }
  
    }

    componentDidMount() {
        const { mindMapStore, prjid} = this.props;
        mindMapStore.initPath({prjid:prjid});
    }

    componentWillReceiveProps(nextProps){
       let oldquery = this.props.prjid;
       let newquery = nextProps.prjid;
       const { mindMapStore, prjid} = nextProps;
        
		if(oldquery !== newquery) {
            mindMapStore.initPath(prjid);
        }
    }

    render() {

        const { mindMapStore, prjid } = this.props;
        const { taskInfoStore, _key, showRight, showSlideModal, setRenderType } = mindMapStore;
        const _this = this;
        return (
            <div style={{height:"100%",width:"100%"}}>
                {mindMapStore.nodeTreeData && <MindMap ecId={`${this && this.props && this.props.ecId || ''}_MindMap@0b47fg`}
                    data={toJS(mindMapStore.nodeTreeData.versionNode)}
                    onClick={(obj)=>{
                        this.setState({
                            selectObj : obj,
                            showRight : false,
                            renderType : ""
                        })
                        showSlideModal(false);
                        setRenderType("");
                    }}
                    showRight={showRight}
                    renderRight={this.getRenderRight()}
                    renderRightTitle={getLabel(16290,"项目信息")}
                    layout={'0'}
                    style={{ height: 'calc(100% - 32px)', top: 50 }}
                    scale={mindMapStore.scale}
                    zoom={_this.zoom}
                    // ref={ref => prjCardStore.d3Tree  = ref}
                    topButtons={[]}
                    rightMenus={this.getRightMenus()}
                    showMenu={false}
                    store={mindMapStore}
                    pathType={1}
                    closeRight={(bool)=>{showSlideModal(bool)}}
                    // onDelete={(readonly || !nodeForm.parentid) || this.deleteNode}
                    // onAddChild={readonly || this.addChildren}
                    // onDeleteChild={(readonly) || (hasChildren && this.deleteChildren)}
                    // onSynchro={readonly || this.synchronize}
                    showname={(d)=>{return `${d.name}`}}
                    desc="description"
                ></MindMap>}
                 <TaskInfoDialog ecId={`${this && this.props && this.props.ecId || ''}_TaskInfoDialog@80jm7v`} contentStore={taskInfoStore} prjid={prjid} callBack={() => { mindMapStore.initPath({prjid:prjid});}} />
                 {/* <iframe src={"/spa/prj/index.html#/main/prj/projectCard?prjid=1"} style={{height:"100%",width:"100%"}}></iframe> */}
            </div>
        )

    }

    closeRight = (bool) => {
        this.setState({
            showRight : bool
        })
    }

    getRenderRight = () => {
        const { mindMapStore, prjid } = this.props;
        const {prjTaskCardStore, renderType} = mindMapStore;
        if(renderType == "prjEdit"  &&  this.state.selectObj.type == "prj"){
            return  <ProjectCard ecId={`${this && this.props && this.props.ecId || ''}_ProjectCard@7hexm1`} parentStore={mindMapStore} prjid={this.state.selectObj.id.replace("prj_","")} />;
        }
        if(renderType == "taskEdit" &&  this.state.selectObj.type == "task"){
            return  this.state.selectObj.id.replace("task_","") && <TaskCard ecId={`${this && this.props && this.props.ecId || ''}_TaskCard@qzmq0f`} callBack={() => { mindMapStore.initPath({prjid:prjid});}} contentStore={mindMapStore} taskCardStore={prjTaskCardStore} taskid={this.state.selectObj.id.replace("task_","").replace("prj_","")} />;

            // return "/spa/prj/index.html#/main/prj/taskCard?taskid="+this.state.selectObj.id.replace("task_","");
        }
    }

    getRightMenus = () => {
        let selectObj = this.state.selectObj;
        let rightMenus = [];
        if(selectObj.type == "prj"){
            rightMenus.push({
                action : (e)=>this.editProject(e),
                name : getLabel(33564, "查看"),
                icon : "icon-coms-search",
            });
            // if(selectObj.editOk){
            //     rightMenus.push({
            //         action : (e)=>this.editProject(e),
            //         name : "编辑",
            //         icon : "icon-coms-edit",
            //     });
            // }
            if(selectObj.editTaskOk){
                rightMenus.push({
                    action : (e)=>this.addTask(e),
                    name : getLabel('15266', '新建任务'),
                    icon : "icon-coms-New-Flow",
                });
            }
       
        }else if(selectObj.type == "task"){
            rightMenus.push({
                action : (e)=>this.editTask(e),
                name : getLabel(33564, "查看"),
                icon : "icon-coms-search",
            });
            if(selectObj.canEditAndDel){
                // rightMenus.push({
                //     action : (e)=>this.editTask(e),
                //     name : "编辑",
                //     icon : "icon-coms-edit",
                // });
                rightMenus.push({
                    action : (e)=>this.delTask(e),
                    name : getLabel(131966,"删除"),
                    icon : "icon-coms-delete",
                });
            }
            if(selectObj.canAddChild){
                rightMenus.push({
                    action : (e)=>this.addChildTask(e),
                    name : getLabel('382600','新建下级任务') ,
                    icon : "icon-coms-New-Flow",
                });
            }
        }
        return rightMenus;
    }

    editProject = (e) => {
        e.stopPropagation && e.stopPropagation();
        // this.setState({
        //     renderType : "prjEdit",
        //     // showRight : true,
        // });
        const { showSlideModal, setRenderType } = this.props.mindMapStore;
        showSlideModal(true);
        setRenderType("prjEdit");
    }

    editTask = (e) => {
        e.stopPropagation && e.stopPropagation();
        // this.setState({
        //     renderType : "taskEdit",
        //     // showRight : true,
        // });
        const { showSlideModal, setRenderType } = this.props.mindMapStore;
        showSlideModal(true);
        setRenderType("taskEdit");
    }

    delTask  = (e) => {
        e.stopPropagation && e.stopPropagation();
        const _this = this;
        const { mindMapStore, prjid} = this.props;
        Modal.confirm({
            title: getLabel(15172, "系统提示"),
            content: getLabel(83925, "该任务及其子任务都会被删除，您确认要删除吗？"),
            onOk() {
                Task_Apis.delTask({ method: "del" , taskid:  _this.state.selectObj.id.replace("task_","")}).then(data => {
                    if (data.success) {
                        mindMapStore.initPath({prjid});
                        message.success(getLabel(83472, "删除成功！"));
                    } else {
                        message.error(getLabel(383746, "请求失败") + "：" + data.msgcode);
                    }
                })
            },
            onCancel() { },
        })
    }

    addTask = (e) => {
        e.stopPropagation && e.stopPropagation();
        const { mindMapStore, prjid } = this.props;
        const { taskInfoStore } = mindMapStore;
        taskInfoStore.handleDialog(true, "add", '', { prjid: prjid, parentid: "" });
    }

    addChildTask = (e) => {
        e.stopPropagation && e.stopPropagation();
        const { mindMapStore, prjid } = this.props;
        const { taskInfoStore } = mindMapStore;
        taskInfoStore.handleDialog(true, "add", '', { prjid: prjid, parentid: this.state.selectObj.id.replace("task_","") });
    }

    zoom = (scale) => {
        const { mindMapStore, params } = this.props;
        mindMapStore.changeScale(parseInt(scale * 10));
    }

}

export default MindMapPage;