aldehyde 0.2.74 → 0.2.76

package/src/aldehyde/tree/tmpl-tree.tsx

@@ -1,480 +1,397 @@
-// import React from 'react'
-// import {Avatar, Button, Card, Col, Input, Popconfirm, Popover, Row, Space, Tooltip, Tree, Typography} from 'antd';
-// import {DtmplEditPage, HydrocarbonService} from "aldehyde";
-// import './index.css'
-// import {
-//     ReloadOutlined,
-//     BlockOutlined,
-//     DeleteOutlined,
-//     DeleteTwoTone,
-//     DeploymentUnitOutlined,
-//     DownOutlined,
-//     EditOutlined,
-//     FileSyncOutlined,
-//     PlusOutlined,HolderOutlined,CopyOutlined
-// } from '@ant-design/icons';
-// import {DataNode, TmplField} from "../tmpl-interface";
-// import TreeNode from "./tree-node";
-// import {TmplGroupDragTreeNode} from './../utils/dnd-service'
-// import TreeUtils from "./tree-utils";
-// import HydrogenConstant from "../hydrogen-constant";
-// import {TrtmplNodeConfig} from "../mstruc-interface";
-// import Hcservice from "../utils/hcservice";
-// import Scrollbars from 'react-custom-scrollbars';
-// import ModelStrucV3 from "../utils/model-struc-v3";
-//
-// const {Text, Title} = Typography
-//
-// interface ModuleGroupTreeProps {
-//     readOnly:boolean,
-//     titleClickedKey?: string,
-//     onEditPage?:(moduleCode:string,moduleName:string,moduleType:string,pageCode?:string)=>void,
-//     onPageChange?: () => void,
-//     draggable?: boolean,
-//     searchValue: string,
-//     onChangeSearchValue: (string) => void,
-//     onClickPageTmpl?: (title: string, code: string) => void,
-// }
-//
-// interface ModuleGroupTreeState {
-//     data?: DataNode[],
-//     expandedKeys: string[],
-//     loadedKeys: string[],
-//     loading: boolean,
-//     drawSourceId: string,
-//     showDraw: boolean,
-//     drawTitle: string,
-//     drawCode: string,
-//     drawMainCode: string,
-//     parentNodeData: DataNode,
-//     currentNodeData: DataNode,
-//     anyValue: boolean,
-//     currentModelKey: string | number,
-//     currentPageKey: string | number,
-// }
-//
-//
-// class TmplTree extends React.PureComponent<ModuleGroupTreeProps, ModuleGroupTreeState> {
-//
-//     state = {
-//         data: [],
-//         expandedKeys: [],
-//         loadedKeys: [],
-//         loading: false,
-//         drawSourceId: undefined,
-//         showDraw: false,
-//         drawTitle: undefined,
-//         currentEditKey: undefined,
-//         drawCode: undefined,
-//         drawMainCode: undefined,
-//         parentNodeData: undefined,
-//         currentNodeData:undefined,
-//         anyValue: false,
-//         currentModelKey: undefined,
-//         currentPageKey: undefined,
-//     }
-//
-//     static gtmplModuleCode = "7JXJelyRv2";
-//     static moduleModuleCode = "5uLpK3DwJi";
-//
-//     static defaultProps = {
-//         draggable: false,
-//         readOnly:false
-//     }
-//
-//
-//     doAdd = (parent: DataNode,moduleType:string) => {
-//         const {onEditPage}=this.props;
-//         onEditPage?onEditPage(parent.code,parent.name,moduleType,undefined):
-//         this.setState({
-//             showDraw: true,
-//             drawMainCode: parent.code,
-//             drawSourceId: this.getGtmplRatmplSourceId(moduleType),
-//             parentNodeData: parent,
-//             currentNodeData:undefined,
-//             drawCode: undefined,
-//             drawTitle: `添加-模块【${parent.name}】的页面`,
-//             currentModelKey: parent.key,
-//         })
-//     }
-//
-//     getGtmplRatmplSourceId=(moduleType:string)=>{
-//        return  moduleType=='SQL统计模型'?HydrogenConstant.moduleGstmplRatmpl.sourceId:moduleType=='SQL查询模型'?HydrogenConstant.moduleGqtmplRatmpl.sourceId: HydrogenConstant.moduleGtmplRatmpl.sourceId;
-//     }
-//
-//     doEdit = (current: DataNode, parent: DataNode,moduleType:string) => {
-//         const {onEditPage}=this.props;
-//         onEditPage?onEditPage(parent.code,parent.name,moduleType,current.code):
-//         this.setState({
-//             showDraw: true,
-//             drawSourceId:this.getGtmplRatmplSourceId(moduleType),
-//             drawMainCode: parent.code,
-//             drawCode: current.code,
-//             parentNodeData: parent,
-//             currentNodeData:current,
-//             drawTitle: `编辑-页面【${current.name}】`,
-//             currentPageKey: current.key,
-//         })
-//     }
-//
-//     doDelete = async (node: DataNode) => {
-//         let res = await HydrocarbonService.deleteByCode(null, HydrogenConstant.moduleGtmplRatmpl.sourceId, [node.code]);
-//         await this.onChange(node);
-//     }
-//
-//     drawSubmited = async () => {
-//         this.onChange();
-//         this.doClose();
-//     }
-//
-//     doClose = () => {
-//         this.setState({
-//             showDraw: false,
-//             drawSourceId: undefined,
-//             parentNodeData: undefined,
-//         })
-//     }
-//
-//
-//     node = {
-//         key: 'a0001',
-//         title: "版块",
-//         isLeaf: false,
-//         level: 0,
-//         ratmplSourceId: undefined,
-//         children: [],
-//         code: null
-//     };
-//     completeModuleAvatar = (res: object) => {
-//         let mtype = res['模型类型'];
-//         let astring = null;
-//         let modelType = undefined;
-//         let backgroundColor = null;
-//         switch (mtype) {
-//             case '普通模型':
-//                 modelType = '普通模型';
-//                 //astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: 'green'}}/>
-//                 //backgroundColor = '#fff';
-//                 // astring='o';
-//                 backgroundColor = '#85a5ff';
-//                 break;
-//             case 'SQL统计模型':
-//                 modelType = 'SQL统计模型';
-//                 // astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: '#2f54eb'}}/>
-//                 // backgroundColor = '#fff';
-//                 // astring='C';
-//                 backgroundColor = "#2f54eb";
-//                 break;
-//             case 'SQL查询模型':
-//                 modelType = 'SQL查询模型';
-//
-//                 //astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: '#2f54eb'}}/>
-//                 //backgroundColor = '#fff';
-//                 //astring='Q';
-//                 backgroundColor = "#2f54eb";
-//
-//                 break;
-//             case '文档模型':
-//                 modelType = '文档模型';
-//                 //astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: '#52c41a'}}/>
-//                 //backgroundColor = '#fff';
-//                 backgroundColor = "#52c41a";
-//                 //astring='D';
-//                 break;
-//             case '服务模型':
-//                 modelType = '服务模型';
-//                 // astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: '#722ed1'}}/>
-//                 //backgroundColor = '#fff';
-//                 //astring='S';
-//                 backgroundColor = "#722ed1";
-//                 break;
-//             default:
-//                 // astring='A';
-//                 astring = <DeploymentUnitOutlined style={{fontSize: '20px', color: 'red'}}/>
-//                 backgroundColor = '#fff';
-//                 backgroundColor = "red";
-//                 break;
-//         }
-//
-//         return <Tooltip placement={'topLeft'} title={modelType}>
-//             <Avatar shape="square" size={10} style={{
-//                 backgroundColor,
-//                 height: 22,
-//                 width: 6,
-//                 // paddingTop:6
-//             }}>{astring}</Avatar></Tooltip>
-//
-//
-//     }
-//
-//     completeGtmplAvatar(res: object) {
-//
-//         let content = null;
-//         let avatarBackgroundColor = null;
-//         let hasMenu = res['二级菜单'];
-//
-//         return <Popover content={content}> <Avatar shape="square" size={10} style={{
-//             backgroundColor: '#fff',
-//             height: 20,
-//             width: 20
-//         }}><BlockOutlined style={{fontSize: '20px', color: hasMenu ? "#389e0d" : '#ffc53d'}}/></Avatar></Popover>
-//
-//     }
-//
-//     async componentDidMount() {
-//         const {} = this.props
-//         this.setState({
-//             loading: true
-//         })
-//         //模块
-//         await this.refresh();
-//     }
-//
-//     toModuleNode = (e: object, loadedKeys: (string | number)[], gtmplRes: object[]) => {
-//         const {onClickPageTmpl,readOnly} = this.props
-//         let moduleCode = e['唯一编码'];
-//
-//         let module: DataNode = {
-//             key: moduleCode,
-//             code: moduleCode,
-//             name: e['名称'],
-//             config: null,
-//             level: 1,
-//             order: e['所属模块排序']
-//         }
-//         let moduleType=e['模型类型'];
-//         module.title =<>{readOnly?module.name:<Popover placement="topLeft"  zIndex={100} content={<><Space>
-//             <Button size={'small'} onClick={() => {
-//                 this.doSync(moduleCode);
-//             }}><FileSyncOutlined
-//                 style={{color: 'green'}}/>同步默认页面</Button>
-//             <Button onClick={() => {
-//                 this.doAdd(module,moduleType);
-//             }
-//             } size={'small'}><PlusOutlined/>创建页面</Button>
-//         </Space></>} arrow={false}>{module.name}
-//             {/*<HolderOutlined style={{color:'#bfbfbf'}} />*/}
-//         </Popover>}</>;
-//         module.children = [];
-//
-//         module.avatar = this.completeModuleAvatar(e);
-//         if (gtmplRes) {
-//             for (let res of gtmplRes) {
-//                 if (moduleCode != res['所属模块编码']) {
-//                     continue;
-//                 }
-//                 let gtmpl: DataNode = {
-//                     key: res['唯一编码'],
-//                     code: res['唯一编码'],
-//                     name: res['名称'],
-//                     config: null,
-//                     level: 2,
-//                     isLeaf: true
-//                 };
-//
-//                 let hasMenu = res['二级菜单'] ? true : false;
-//                 gtmpl.title = <>{readOnly?gtmpl.name:<Popover zIndex={100} content={<><Space>
-//                     {/*<Button onClick={() => {*/}
-//                     {/*    onClickPageTmpl(gtmpl.name, gtmpl.code);*/}
-//                     {/*    this.setState({*/}
-//                     {/*        currentPageKey: gtmpl.key*/}
-//                     {/*    })*/}
-//                     {/*}} size={'small'}>查看菜单项</Button>*/}
-//                     <Button onClick={() => {
-//                         this.doEdit(gtmpl, {...module},moduleType);
-//                         this.setState({
-//                             currentPageKey: gtmpl.key
-//                         })
-//                     }} size={'small'}><EditOutlined style={{color: 'blue'}}/>编辑</Button>
-//
-//                     <Popconfirm placement="topLeft" title={'确认复制吗？'}
-//                                 onConfirm={() => this.doCopy(gtmpl.code)}
-//                                 okText="确定" cancelText="取消">
-//                         <Button size={'small'}><CopyOutlined
-//                             style={{color: 'blue'}}/>复制</Button>
-//                     </Popconfirm>
-//                     < Popconfirm placement="topLeft" title={hasMenu ? `页面模板会连同二级菜单一起删除` : `删除页面模板【${e['名称']}】吗？`}
-//                                  onConfirm={() => {
-//                                      this.doDelete(gtmpl);
-//                                      this.setState({currentModelKey: moduleCode})
-//                                  }
-//                                  }
-//                                  okText="确定" cancelText="取消">
-//                         <Tooltip>
-//                             <Button size={'small'} danger={true}>{hasMenu ?
-//                                 <DeleteTwoTone twoToneColor={'#a8071a'}/> : <DeleteOutlined/>}</Button>
-//                         </Tooltip>
-//                     </Popconfirm>
-//                 </Space></>} arrow={false}>{gtmpl.name}
-//                     {/*<HolderOutlined style={{color:'#bfbfbf'}} />*/}
-//                 </Popover>}</>;
-//
-//                 gtmpl.avatar = this.completeGtmplAvatar(res);
-//                 gtmpl['hasMenu']=hasMenu;
-//                 module.children.push(gtmpl);
-//             }
-//
-//         }
-//         return module;
-//
-//     }
-//
-//     async refresh() {
-//         const {moduleTreeSttmpl} = this.props;
-//         this.setState({
-//             loading: true,
-//         })
-//         let loadedKeys = [];
-//         let res = await ModelStrucV3.get(TmplTree.moduleModuleCode, {depth: 1},);
-//         let gtmplRes = await ModelStrucV3.get(TmplTree.gtmplModuleCode, {depth: 1},);
-//
-//         let data: DataNode[] = [];
-//         if (res.entities) {
-//             for (let e of res.entities) {
-//                 data.push(this.toModuleNode(e, loadedKeys, gtmplRes ? gtmplRes.entities : []));
-//             }
-//         }
-//         //完善 avatar
-//         //this.completeAvatar(data);
-//         this.setState({
-//             data,
-//             loading: false,
-//             loadedKeys
-//         })
-//     }
-//
-//     async componentWillUnmount() {
-//
-//     }
-//
-//     onChange = async (node?:DataNode) => {
-//         const {expandedKeys,parentNodeData,currentNodeData} = this.state;
-//         const {onPageChange}=this.props;
-//         let nood=node?node:currentNodeData;
-//         if(nood && nood['hasMenu'] && onPageChange ){
-//             onPageChange();
-//         }
-//         await this.refresh();
-//         this.setState({expandedKeys: [parentNodeData.key, ...expandedKeys]})
-//     }
-//
-//     onExpand = (expandedKeys) => {
-//         this.setState({
-//             expandedKeys
-//         })
-//     }
-//
-//
-//     doSync = async (moduleCode: string) => {
-//         this.setState({
-//             loading: true,
-//         })
-//         await Hcservice.doSync(moduleCode);
-//         await this.refresh();
-//         this.setState({
-//             currentModelKey: moduleCode
-//         })
-//     }
-//
-//     doCopy = async (code: string) => {
-//         this.setState({
-//             loading: true,
-//         })
-//         await Hcservice.doCopy(HydrogenConstant.groupTmpl.sourceId, code);
-//         await this.refresh();
-//         this.setState({
-//             currentPageKey: code
-//         })
-//     }
-//
-//
-//     render() {
-//         const {draggable, searchValue, onChangeSearchValue,readOnly} = this.props;
-//         const {
-//             data, loadedKeys, loading, showDraw,
-//             drawSourceId,
-//             drawCode,
-//             drawMainCode, drawTitle, currentModelKey, currentPageKey
-//         } = this.state;
-//         let treeData = data;
-//         if (searchValue) {
-//             treeData = TreeUtils.filterTree(data, searchValue);
-//         }
-//         return <>
-//             <Row>
-//                 <Col span={24}>
-//                     <Card style={{marginBottom: 0, width: '100%'}} bordered={false}
-//                           bodyStyle={{padding: '4px 2px 4px 8px'}}>
-//                         <Row align="middle">
-//                             <Col span={6}>
-//                                 <Avatar shape="square" size={10}
-//                                         icon={<BlockOutlined style={{fontSize: '18px', color: '#389e0d'}}/>}
-//                                         style={{backgroundColor: '#fff', height: 24, width: 20, paddingLeft: '10'}}/>
-//                                 <span style={{fontSize: 18, fontWeight: 560}}>页面</span>
-//                             </Col>
-//                             <Col span={18}>
-//                                     <Input.Search value={searchValue} allowClear placeholder="输入名称查找" onChange={(e) => {
-//                                         onChangeSearchValue(e.target.value)
-//                                     }}  onSearch={(value) => {
-//                                         this.refresh()
-//                                     }} enterButton={<ReloadOutlined  />}/>
-//                             </Col>
-//                         </Row>
-//                     </Card>
-//                 </Col>
-//             </Row>
-//             <Row>
-//                 <Col span={24}>
-//                     {treeData && treeData.length>0 ?
-//                     <Card bodyStyle={{padding: '4px 4px 4px 16px', height: '80vh', minWidth: '320px'}}
-//                           loading={loading}>
-//                         <Scrollbars style={{height: '80vh'}} autoHide autoHideTimeout={1000}>
-//                             <Tree defaultExpandAll={true} switcherIcon={<DownOutlined/>}
-//                                   checkable={false}
-//                                   loadedKeys={loadedKeys}
-//                                   onExpand={this.onExpand}
-//                                   showLine={false}
-//                                   titleRender={(nodeData) => {
-//                                       return draggable ?
-//                                           <TmplGroupDragTreeNode currentActiveKey={[currentModelKey, currentPageKey]}
-//                                                                  syncButtonTip={'更新默认页面'}
-//                                                                  nodeData={nodeData}/> :
-//                                           <TreeNode currentActiveKey={[currentModelKey, currentPageKey]}
-//                                                     syncButtonTip={'更新默认页面'}
-//                                                     nodeData={nodeData}></TreeNode>
-//
-//                                   }}
-//                                   treeData={treeData}
-//                             />
-//                             {/*{readOnly?null:*/}
-//                             {/*<Card style={{marginTop:24}} bodyStyle={{padding: '12px 6px 6px 6px'}}>*/}
-//                             {/*    <Space direction="vertical">*/}
-//                             {/*        <Title level={5}>【页面定义】使用说明</Title>*/}
-//                             {/*        <span><Text*/}
-//                             {/*            type="danger">1.模型生成页面：</Text><Text>鼠标悬停在【模型节点】的【名称】上，点击气泡卡片的【同步默认页面】按钮。</Text></span>*/}
-//                             {/*        <span><Text*/}
-//                             {/*            type="danger">2.创建页面：</Text><Text>鼠标悬停在【模型节点】的【名称】上，点击气泡卡片的【+创建页面】按钮,填写并保存右边弹出的抽屉页面。</Text></span>*/}
-//                             {/*        <span><Text*/}
-//                             {/*            type="danger">3.复制页面：</Text><Text>鼠标悬停在【页面节点】的【名称】上，点击气泡卡片的【复制】按钮。</Text></span>*/}
-//                             {/*    </Space>*/}
-//                             {/*</Card>}*/}
-//                         </Scrollbars>
-//                     </Card>: <Card><Space><Text type={'danger'}>* 页面配置需基于模型。请先创建一个或多个模型。</Text>
-//                             <Button  href={'#/application-workbench/carbon-model-def'} type={'primary'}><DeploymentUnitOutlined />模 型</Button></Space>
-//                     </Card>}
-//                 </Col>
-//             </Row>
-//
-//             {drawSourceId ? <DtmplEditPage title={drawTitle} maxColsOnRow={1} pageType={"drawer"} placement={'right'}
-//                                            open={showDraw}
-//                                            onCancel={this.doClose}
-//                                            width={640} mainCode={drawMainCode}
-//                                            sourceId={drawSourceId}
-//                                            code={drawCode}
-//                                            onOk={this.drawSubmited}/> : null}
-//
-//         </>
-//     }
-// }
-//
-// export default TmplTree
+import React from 'react'
+import {Button, Card, Col, Input, Popconfirm, Popover, Row, Space, Tooltip, Tree, Typography} from 'antd';
+import {
+    AlignLeftOutlined,
+    DeleteOutlined,
+    EditOutlined,
+    PlusOutlined,
+    PlusSquareOutlined,
+    ReloadOutlined
+} from '@ant-design/icons';
+// import './index.css';
+import Scrollbars from 'react-custom-scrollbars';
+import {HydrocarbonService} from "../index";
+import TreeUtils, {TtmplNodeConfig} from "./tree-utils";
+import {TreeDataNode} from './tree-utils'
+
+const {Text, Title} = Typography
+
+interface TmplTreeProps {
+    ttmplNodeConfig: TtmplNodeConfig,
+    currentId?: string,
+    doEditSub?: (title:string,ratmplId: string, mainCode: string, code?: string) => void,
+    doViewSub?: (title:string,ratmplId: string, mainCode: string, code?: string) => void,
+    doEditRoot?: (title:string,code?: string) => void,
+    doViewRoot?: (title:string,code?: string) => void,
+    doDelete?: (ratmplId: string, code?: string) => void,
+    doAddSub?: (title:string,ratmplId: string, mainCode: string) => void,
+}
+
+interface TmplTreeState {
+    data?: TreeDataNode[],
+    expandedKeys?: string[],
+    loadedKeys?: string[],
+    loading?: boolean,
+    drawMainCode?: string,
+    parentNodeData?: TreeDataNode,
+    currentNodeData?: TreeDataNode,
+    rootAddable?: boolean,
+    searchValue?: string,
+}
+
+
+class TmplTree extends React.PureComponent<TmplTreeProps, TmplTreeState> {
+
+    state = {
+        data: [],
+        expandedKeys: [],
+        loadedKeys: [],
+        loading: false,
+        currentEditKey: undefined,
+        parentNodeData: undefined,
+        currentNodeData: undefined,
+        rootAddable: false,
+        searchValue: undefined,
+    }
+
+    static defaultProps = {
+        draggable: false,
+        readOnly: false
+    }
+
+    doDelete = async (node: TreeDataNode) => {
+        let {ttmplNodeConfig} = this.props;
+        let sourceId;
+        if (node.isLeaf) {
+            sourceId = ttmplNodeConfig.leafRatmplId;
+        } else {
+            sourceId = ttmplNodeConfig.branchRatmplId;
+        }
+        let res = await HydrocarbonService.deleteByCode(null, sourceId, [node.code]);
+        if(node.parent){
+            await this.reloadData(node.parent.code);
+        }
+
+    }
+
+    async componentDidMount() {
+        await this.refresh();
+    }
+
+    async componentDidUpdate(prevProps) {
+        debugger
+        let {ttmplNodeConfig: preTtmplNodeConfig} = prevProps;
+        let {ttmplNodeConfig} = this.props;
+        debugger
+        if (!ttmplNodeConfig || (preTtmplNodeConfig && ttmplNodeConfig.id == preTtmplNodeConfig.id)) {
+            return;
+        }
+        await this.refresh();
+    }
+
+    async refresh() {
+        debugger
+        const {ttmplNodeConfig} = this.props;
+        if (!ttmplNodeConfig) {
+            return;
+        }
+        this.setState({
+            loading: true,
+        })
+        //let loadedKeys = [];
+        let data = await this.loadRootNodeData();
+        this.setState({
+            searchValue: null,
+            data,
+            rootAddable: ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("dtmplAdd") > 0,
+            loading: false,
+        })
+    }
+
+    loadRootNodeData = async () => {
+        const {ttmplNodeConfig} = this.props;
+        let data = await TreeUtils.loadRootNodeData(ttmplNodeConfig);
+        return data;
+    }
+
+    async componentWillUnmount() {
+
+    }
+
+    onExpand = async (expandedKeys, current: { expanded: boolean, node: TreeDataNode }) => {
+        const {ttmplNodeConfig} = this.props;
+        const {data} = this.state;
+        if (current.expanded) {
+            await TreeUtils.pushSameCodeNodeData([current.node], ttmplNodeConfig);
+        }
+        this.setState({
+            data: [...data],
+            expandedKeys
+        })
+    }
+
+    onClickNode = (dataNode: TreeDataNode) => {
+        const {doEditRoot, doViewRoot, doViewSub, doEditSub, ttmplNodeConfig} = this.props;
+        if (dataNode.parent) {//说明是sub
+            if (dataNode.isLeaf) {
+                if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                    doEditSub(ttmplNodeConfig.leafTitle,ttmplNodeConfig.leafRatmplId, dataNode.parent.code, dataNode.code);
+                } else if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("detail") > 0) {
+                    doViewSub(ttmplNodeConfig.leafTitle,ttmplNodeConfig.leafRatmplId, dataNode.parent.code, dataNode.code);
+                }
+            } else {
+                if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                    doEditSub(ttmplNodeConfig.branchTitle,ttmplNodeConfig.branchRatmplId, dataNode.parent.code, dataNode.code);
+                } else if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("detail") > 0) {
+                    doViewSub(ttmplNodeConfig.branchTitle,ttmplNodeConfig.branchRatmplId, dataNode.parent.code, dataNode.code);
+                }
+            }
+        } else {//说明是root
+            //判断是否允许编辑
+            if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                doEditRoot(ttmplNodeConfig.branchTitle,dataNode.code);
+            } else if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("detail") > 0) {
+                doViewRoot(ttmplNodeConfig.branchTitle,dataNode.code);
+            }
+        }
+    }
+
+    stopPropagation = (e) => {
+        if (e.stopPropagation) { //如果提供了事件对象，则这是一个非IE浏览器
+            e.stopPropagation();
+        } else {//兼容IE的方式来取消事件冒泡
+            window.event.cancelBubble = true;
+        }
+    }
+
+    reloadData = async (branchCode: string) => {
+        const {ttmplNodeConfig} = this.props;
+        const {data, expandedKeys} = this.state;
+        let newData;
+        if (branchCode == null) {//加载根
+            newData = await this.loadRootNodeData();
+            this.mergeRootData(data, newData);
+            this.setState({
+                data: newData
+            })
+        } else {//重新加载 await
+            //先找到树节点
+            let rdatas = [];
+            this.searchNode(data, branchCode, rdatas);
+            await TreeUtils.pushSameCodeNodeData(rdatas, ttmplNodeConfig);
+            let newExpandeds = [];
+            for (let d of rdatas) {
+                newExpandeds.push(d.key)
+            }
+            this.setState({
+                expandedKeys: [...expandedKeys, ...newExpandeds],
+                data: [...data]
+            })
+        }
+    }
+
+    mergeRootData = (data, newData) => {
+        if (newData && data) {
+            for (let nd of newData) {
+                for (let d of data) {
+                    if (nd.code == d.code) {
+                        nd.children = d.children;
+                        break;
+                    }
+                }
+            }
+        }
+    };
+
+    searchNode = (data: TreeDataNode[], brachCode: string, result: TreeDataNode[]) => {
+        if (!data) {
+            return;
+        }
+        for (let d of data) {
+            if (d.code == brachCode) {
+                result.push(d);
+                break;
+            } else if (d.children.length > 0) {//继续寻找
+                this.searchNode(d.children, brachCode, result);
+            }
+        }
+    }
+
+    getDeleteButton = (sourceId, code) => {
+        const {doDelete} = this.props;
+        return <div onClick={(e) => {
+            this.stopPropagation(e)
+        }}>< Popconfirm placement="topLeft" title={`确定要删除吗？`}
+                        onConfirm={() => {
+                            doDelete(sourceId, code);
+                        }}
+                        okText="确定" cancelText="取消">
+            <Tooltip>
+                <Button size={'small'} danger={true}>
+                    <DeleteOutlined/></Button>
+            </Tooltip>
+        </Popconfirm></div>
+    }
+
+    getAddButton = (title: string, icon: any, ratmplId: string, mainCode: any) => {
+        const {doAddSub} = this.props;
+        return <Button onClick={(e) => {
+            this.stopPropagation(e)
+            doAddSub(title,ratmplId, mainCode);
+        }} size={'small'}>{icon}{title}</Button>
+    }
+
+    packageTitle = (dataNode) => {
+        const {doEditRoot, doViewRoot, doViewSub, doEditSub, ttmplNodeConfig} = this.props;
+        let buttons = [];
+        if (dataNode.parent) {//说明是sub
+            if (dataNode.isLeaf) {
+                if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                    buttons.push(<Button onClick={(e) => {
+                        this.stopPropagation(e)
+                        doEditSub(ttmplNodeConfig.leafTitle,ttmplNodeConfig.leafRatmplId, dataNode.parent.code, dataNode.code);
+                    }} size={'small'}><EditOutlined/>编辑</Button>);
+                }
+                if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("detail") > 0) {
+                    buttons.push(<Button onClick={(e) => {
+                        this.stopPropagation(e)
+                        doViewSub(ttmplNodeConfig.leafTitle,ttmplNodeConfig.leafRatmplId, dataNode.parent.code, dataNode.code);
+                    }} size={'small'}><AlignLeftOutlined/>查看</Button>);
+                }
+                if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("singleDelete") > 0) {
+                    buttons.push(this.getDeleteButton(ttmplNodeConfig.leafRatmplId, dataNode.code)
+                    );
+                }
+
+            } else if (ttmplNodeConfig.branchLTmplConfig) {
+                if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                    buttons.push(<Button onClick={(e) => {
+                        this.stopPropagation(e)
+                        doEditSub(ttmplNodeConfig.branchTitle,ttmplNodeConfig.branchRatmplId, dataNode.parent.code, dataNode.code);
+                    }} size={'small'}><EditOutlined/>编辑</Button>);
+                }
+                if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("detail") > 0) {
+                    buttons.push(<Button onClick={(e) => {
+                        this.stopPropagation(e)
+                        doViewSub(ttmplNodeConfig.branchTitle,ttmplNodeConfig.branchRatmplId, dataNode.parent.code, dataNode.code);
+                    }} size={'small'}><AlignLeftOutlined/>查看</Button>);
+
+                }
+
+                if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("dtmplAdd") > 0) {
+                    buttons.push(this.getAddButton(ttmplNodeConfig.branchTitle,
+                        <PlusSquareOutlined/>, ttmplNodeConfig.branchRatmplId, dataNode.code)
+                    );
+                }
+
+                if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplAdd") > 0) {
+                    buttons.push(this.getAddButton(ttmplNodeConfig.leafTitle,
+                        <PlusOutlined/>, ttmplNodeConfig.leafRatmplId, dataNode.code)
+                    );
+                }
+                if (ttmplNodeConfig.branchLTmplConfig.buttons.indexOf("singleDelete") > 0) {
+                    buttons.push(this.getDeleteButton(ttmplNodeConfig.branchRatmplId, dataNode.code));
+                }
+            }
+        } else {//说明是root
+            //判断是否允许编辑
+            if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("dtmplEdit") > 0) {
+                buttons.push(<Button onClick={(e) => {
+                    this.stopPropagation(e)
+                    doEditRoot(ttmplNodeConfig.branchTitle,dataNode.code);
+                }} size={'small'}><EditOutlined style={{color: 'blue'}}/>编辑</Button>);
+            }
+            if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("detail") > 0) {
+                buttons.push(<Button onClick={(e) => {
+                    this.stopPropagation(e)
+                    doViewRoot(ttmplNodeConfig.branchTitle,dataNode.code);
+                }} size={'small'}><AlignLeftOutlined/>查看</Button>);
+            }
+            if (ttmplNodeConfig.branchLTmplConfig) {
+                if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("dtmplAdd") > 0) {
+                    buttons.push(this.getAddButton(ttmplNodeConfig.branchTitle,
+                        <PlusSquareOutlined/>, ttmplNodeConfig.branchRatmplId, dataNode.code)
+                    );
+                }
+            }
+            if (ttmplNodeConfig.leafLTmplConfig.buttons.indexOf("dtmplAdd") > 0) {
+                buttons.push(this.getAddButton(ttmplNodeConfig.leafTitle,
+                    <PlusOutlined/>, ttmplNodeConfig.leafRatmplId, dataNode.code)
+                );
+            }
+
+            if (ttmplNodeConfig.rootLTmplConfig.buttons.indexOf("singleDelete") > 0) {
+                buttons.push(this.getDeleteButton(ttmplNodeConfig.branchRatmplId, dataNode.code));
+            }
+        }
+
+        if (buttons.length == 0) {
+            return dataNode.title;
+        } else {
+            return <Popover
+                zIndex={100} content={<><Space>{buttons}</Space></>} arrow={false}>
+                {dataNode.title}
+            </Popover>
+        }
+
+    }
+
+    render() {
+        const {doEditRoot,ttmplNodeConfig} = this.props;
+        const {
+            data, loading, expandedKeys, rootAddable, searchValue
+        } = this.state;
+        let treeData = data;
+        if (searchValue) {
+            treeData = TreeUtils.filterTree(data, searchValue);
+        }
+        return <>
+            <Row>
+                <Col span={24}>
+                    <Card style={{marginBottom: 0, width: '100%'}} bordered={false}
+                          bodyStyle={{padding: '4px 2px 4px 8px'}}>
+                        <Row align="middle">
+                            <Col span={8}>
+                                {rootAddable && doEditRoot ?
+                                    <Button type={'link'} onClick={() => doEditRoot(ttmplNodeConfig.branchTitle)}>添加</Button> : null}
+                            </Col>
+                            <Col span={16}>
+                                <Input.Search value={searchValue} allowClear placeholder="输入查找内容" onChange={(e) => {
+                                    this.setState({
+                                        searchValue: e.target.value
+                                    })
+                                }} onSearch={(value) => {
+                                    this.refresh()
+                                }} enterButton={<ReloadOutlined/>}/>
+                            </Col>
+                        </Row>
+                    </Card>
+                </Col>
+            </Row>
+            <Row>
+                <Col span={24}>
+                    <Card bodyStyle={{padding: '4px 4px 4px 16px', height: '80vh', minWidth: '320px'}}
+                          loading={loading}>
+                        {treeData.length == 0 ? '没有找到数据' :
+                            <Scrollbars style={{height: '80vh'}} autoHide autoHideTimeout={1000}>
+                                <Tree blockNode
+                                      checkable={false}
+                                      expandedKeys={expandedKeys}
+                                      onExpand={this.onExpand}
+                                      titleRender={(nodeData) => {
+                                          return <div
+                                              onClick={() => this.onClickNode(nodeData)}>{this.packageTitle(nodeData)}</div>
+                                      }}
+                                      treeData={treeData}
+                                />
+                            </Scrollbars>}
+                    </Card>
+                </Col>
+            </Row>
+        </>
+    }
+
+
+}
+
+export default TmplTree