aldehyde 0.2.73 → 0.2.75

package/src/aldehyde/tmpl/hc-data-source.tsx

@@ -8,7 +8,7 @@ import {
     Level2Menu,
     LtmplConfig,
     LtmplConfigRes,
-    SelectConfig
+    SelectConfig, TtmplConfig
 } from "./interface";
 import HcserviceV3 from './hcservice-v3';
 import ControlTypeSupportor from './control-type-supportor'
@@ -25,6 +25,7 @@ const selectConfigMap: Map<string, SelectConfig> = new Map<string, SelectConfig>
 const ltmplConfigMap: Map<string, LtmplConfigRes> = new Map<string, LtmplConfigRes>();
 const l2LtmplConfigMap: Map<string, LtmplConfigRes> = new Map<string, LtmplConfigRes>();
 const dtmplConfigMap: Map<string, DtmplConfig> = new Map<string, DtmplConfig>();
+const ttmplConfigMap: Map<string, TtmplConfig> = new Map<string, TtmplConfig>();
 const viewDtmplConfigMap: Map<string, DtmplConfig> = new Map<string, DtmplConfig>();
 const addDtmplConfigMap: Map<string, DtmplConfig> = new Map<string, DtmplConfig>();
 const objctCacheMap: Map<string, DtmplData> = new Map<string, DtmplData>();
@@ -195,6 +196,15 @@ HCDataSource.requestDtmplConfig = async function (serverKey:string,sourceId: str
     return dtmplConfigMap.get(sourceId);
 };
 
+HCDataSource.requestTtmplConfig = async function (serverKey:string,sourceId: string) {
+    if (!ttmplConfigMap.has(sourceId)) {
+      let res= await HcserviceV3.requestTtmplConfig(serverKey,sourceId);
+        ttmplConfigMap.set(sourceId, res);
+        ttmplConfigMap.set(res.id, res);
+    }
+    return ttmplConfigMap.get(sourceId);
+};
+
 HCDataSource.requestViewDtmplConfig = async function (serverKey:string,sourceId: string) {
     if (!viewDtmplConfigMap.has(sourceId)) {
         viewDtmplConfigMap.set(sourceId, await HcserviceV3.requestViewDtmplConfig(serverKey,sourceId));

package/src/aldehyde/tmpl/hcservice-v3.tsx

@@ -48,6 +48,18 @@ export default class HcserviceV3 {
         return res.dtmplConfig;
     }
 
+    static async requestTtmplConfig(serverKey:string,sourceId: string) {
+
+        let url = `/v3/ttmpl/config`
+        let res = await Super.super({
+            url,
+            serverKey,
+            method: "GET",
+            query: {sourceId}
+        });
+        return res.ttmplConfig;
+    }
+
     static async requestViewDtmplConfig(serverKey:string,sourceId: string) {
 
         let url = `/v3/view-dtmpl/config`
@@ -122,6 +134,11 @@ export default class HcserviceV3 {
         return await this.requestCommonLtmplQueryTop(serverKey,sourceId, condition, url);
     }
 
+    static async requestTtmplRootData(serverKey:string,sourceId:string, condition) {
+        let url = `/v3/ttmpl/root-data`
+        return await this.requestCommonLtmplQueryTop(serverKey,sourceId, condition, url);
+    }
+
     static async requestMstrucLtmplQueryTop(serverKey:string,sourceId:string, condition) {
         //console.log('condition:',condition);
         let url = `/v3/mstruc/ltmpl/top-data`
@@ -139,13 +156,18 @@ export default class HcserviceV3 {
 
     static async requestCommonLtmplQueryTop(serverKey:string,sourceId:string, condition, url) {
 
-        let res = await Super.super({
-            url: url,
-            serverKey,
-            method: 'GET',
-            query: {...condition, sourceId}
-        });
-        return res;
+        if(!sourceId){
+            message.error("SourceId is undefined!");
+        }else{
+            let res = await Super.super({
+                url: url,
+                serverKey,
+                method: 'GET',
+                query: {...condition, sourceId}
+            });
+            return res;
+        }
+
     }
 
     static async requestSelectedData(serverKey:string,sourceId:string, codes) {

package/src/aldehyde/tmpl/interface.tsx

@@ -84,7 +84,7 @@ export interface Level2Menu extends MenuBase {
     displayTotal?: boolean;
     count?:number;
     defaultCriteriaValue?:object,
-    pageType:'列表'|'详情'|'编辑'|'添加'|'编辑或添加'
+    pageType:'列表'|'详情'|'编辑'|'添加'|'编辑或添加'|'树'
 }
 
 export interface Level1Menu extends MenuBase {
@@ -188,6 +188,12 @@ export interface SelectConfig extends TmplBase {
     orderColumn:ColumnConfig;
 }
 
+export interface TtmplConfigRes {
+    sourceId: string;
+    ltmplConfig?: LtmplConfig;
+    parentLtmplConfig?: LtmplConfig;
+}
+
 export interface RActionConfig extends OrderableTmplBase {
 
 }
@@ -200,6 +206,15 @@ export interface LtmplConfigRes {
     ltmplConfig?: LtmplConfig;
 }
 
+export interface TtmplConfig extends TmplBase {
+    type:"2M"|'1M'|'2MR',
+    leafTitle:string,
+    branchTitle:string,
+    rootGtmplId:string,
+    branchRatmplId:string,
+    leafRatmplId:string,
+}
+
 // export interface StatViewConfig extends SelectConfig {
 //
 //     // reStat query analysis

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

@@ -0,0 +1,149 @@
+import React from 'react'
+import {Card, Layout, Typography} from 'antd';
+import TmplTree from "./tmpl-tree";
+import TreeUtils, {TtmplNodeConfig} from "./tree-utils";
+import {TtmplConfig} from "../tmpl/interface";
+import {DtmplEditCard, DtmplViewCard} from "../index";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+
+const {Content, Sider} = Layout;
+const {Text, Title} = Typography
+
+interface ActTreeProps {
+    ttmplConfig: TtmplConfig,
+}
+
+interface ActTreeState {
+    ttmplNodeConfig?: TtmplNodeConfig,
+    showEdit?: boolean,
+    showView?:boolean,
+    recordCode?: string,
+    mainCode?: string,
+    sourceId?: string,
+    cardtitle?:string,
+}
+
+export default class ActTree extends React.PureComponent<ActTreeProps, ActTreeState> {
+
+    static defaultProps = {}
+    state = {
+        ttmplNodeConfig: undefined,
+        recordCode: undefined,
+        showEdit: false,
+        showView:false,
+        mainCode: undefined,
+        sourceId: undefined,
+        cardtitle:undefined,
+    }
+
+    refTmplTree: any = React.createRef();
+
+    async componentDidMount() {
+
+        await this.loadData();
+    }
+
+    loadData=async ()=>{
+        const {ttmplConfig} = this.props;
+        let ttmplNodeConfig = await TreeUtils.initTtmplNodeConfig(ttmplConfig);
+        this.setState({
+            ttmplNodeConfig,
+            showEdit:false,
+            showView:false,
+        })
+    }
+
+    async componentDidUpdate(prevProps) {
+        let {ttmplConfig: prettmplConfig} = prevProps;
+        let {ttmplConfig} = this.props;
+
+        if (ttmplConfig && prettmplConfig && ttmplConfig.id==prettmplConfig.id) {
+            return;
+        }
+        await this.loadData();
+    }
+
+    onEditRoot = (title:string,code?: string) => {
+        const {ttmplConfig} = this.props;
+        this.showCard(title,ttmplConfig.rootGtmplId,null,code,true,false);
+    };
+    showCard=(cardtitle,sourceId,mainCode,recordCode,showEdit,showView)=>{
+        this.setState({
+            mainCode,
+            cardtitle,
+            recordCode,
+            showEdit,
+            showView,
+            sourceId,
+        })
+    }
+    onViewRoot = (title:string,code?: string) => {
+        const {ttmplConfig} = this.props;
+        this.showCard(title,ttmplConfig.rootGtmplId,null,code,false,true);
+    };
+
+    onEditSub = (title:string,sourceId:string,mainCode:string,recordCode?: string) => {
+        this.showCard(title,sourceId,mainCode,recordCode,true,false);
+    };
+
+    onViewSub = (title:string,sourceId:string,mainCode:string,recordCode?: string) => {
+
+        this.showCard(title,sourceId,mainCode,recordCode,false,true);
+    };
+
+    onDelete=(sourceId:string,recordCode?: string) => {
+        HcserviceV3.deleteByCode(null,sourceId, [recordCode]);
+    };
+    onAddSub=(title:string,sourceId:string,mainCode: string) => {
+        
+        this.showCard(title,sourceId,mainCode,null,true,false);
+    };
+
+    render() {
+        const {} = this.props;
+
+        const {ttmplNodeConfig,showView, showEdit, recordCode, mainCode, sourceId,cardtitle} = this.state;
+        if (!ttmplNodeConfig) {
+            return <Card loading={true}></Card>
+        }
+        return (<Layout hasSider style={{backgroundColor: '#fff'}}>
+            <Sider width={360} theme={'light'}
+                   style={{
+                       height: '90vh',
+                       position: 'fixed',
+                       left: 0,
+                       top: 66,
+                       bottom: 0,
+                       marginLeft: 210
+                   }}
+            ><TmplTree doEditRoot={this.onEditRoot}
+                          doEditSub={this.onEditSub}
+                          doDelete={this.onDelete}
+                          doViewRoot={this.onViewRoot}
+                          doViewSub={this.onViewSub}
+                          doAddSub={this.onAddSub}
+                          ttmplNodeConfig={ttmplNodeConfig}
+                          ref={this.refTmplTree}
+                ></TmplTree>
+            </Sider>
+            <Layout style={{marginLeft: 382, backgroundColor: '#fff'}}>
+                <Content style={{overflow: 'initial'}}>
+                    {showEdit ? <DtmplEditCard title={<>{recordCode ? <>编辑 {cardtitle?cardtitle:""}</> : <>添加 {cardtitle?cardtitle:""}</>} </>}
+                                               mainCode={mainCode}
+                                               sourceId={sourceId}
+                                               code={recordCode}
+                                               onOk={(recordCode) => {
+                                                   let a=this.refTmplTree?.current?.reloadData(mainCode);
+                                                   this.setState({recordCode})
+                                               }}
+                    /> : null}
+                    {showView ? <DtmplViewCard
+                                               mainCode={mainCode}
+                                               sourceId={sourceId}
+                                               code={recordCode}
+                    /> : null}
+                </Content>
+            </Layout>
+        </Layout>)
+    }
+}

package/src/aldehyde/tree/index.css

@@ -0,0 +1,21 @@
+.tree-container {
+    box-shadow:1px 0 0px 1px rgba(0,0,0,0.3) ;
+}
+
+.tree-node{
+    box-shadow:0.4px 0px 0px 0.4px rgba(0,0,0,0.2) ;
+    margin-bottom: 2px;
+}
+
+
+
+.tree-card-title-body {
+     padding:2px;
+     min-width: 280px;
+ }
+.ant-tree-node-selected{
+    background-color: white !important;
+}
+.ant-avatar-string{
+    transform: scale(0.8) translateX(-50%) !important;
+}

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

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