---
title: "7.2 组织架构图业务组件"
docId: "380804806039568384"
source: "https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/repository/91f5067f-775e-48f4-93a2-ce84ca0b9c2e/doc/380804806039568384"
---
![image.png](../../../assets/1173153089961672716.png)

```typescript
class Demo extends React.Component<any> {
    d3Utils: any;
    
    const getData = () => {
        const datas: any[] = [];
        let lv1: any = {id: '1', content: '1', type: 'subcompany', leaf: false, children: [], operation: []};
        datas.push(lv1);
        for(let i = 1; i<= 10; i++) {
            let lv2: any = {
                id: `1-${i}`,
                content: `1-${i}`,
                parentId: '1',//父节点id
                type: 'department',//数据类型
                leaf: true,//是否叶子节点
                children: [],//子节点，给空数组
                dataStatus: 'create',//自定义数据状态，对应LegendItem.id
                operation: [//节点操作按钮
                    {id: 'add', content: '新建'},{id: 'edit', content: '编辑'},{id: 'delete', content: '删除'},{id: 'move', content: '移动'}
                ],
            };
            datas.push(lv2);
        }
        return datas;
    }
    
    const orgTopologyInitCallback = (d3Utils: D3Utils) => {
        this.d3Utils = d3Utils;
    }
    
    const getSub = await (data: any, callback?: Function) => {
        const {parentId} = data;//父节点id
        //TODO 请求数据
        const response = await request({url:'', method:'get', params:{}});
        runInAction(() => {
            if(response.status) {
                const {data = []} = response;
                callback?.(data);
            }else{
                onErrorHandle(response.msg);
            }
        })
    }
    
    //导出
    const exportData = (type: string) {
        switch (type) {
            case 'png':
                this.d3Utils?.exportImg();
                break;
            case 'pdf':
                this.d3Utils?.exportImg(ExportType.PDF);
                break;
            case 'xMind':
                //导出数据的查询参数
                const params: any = {};
                this.d3Utils?.exportXMind(params);
                break;
        }
    }

    const getNodeExtend = (): NodeExtendItem[] => {
        return [
            {id: `1`, color: '#fff', bgColor: '#68a5ff'}
        ]
    }
    
    render() {
        return (
            <div style={{width:'100%', height:'100%'}}>
                <CorsComponent 
                	app='@weapp/hrm'
                	compName='OrgTopologyCom'
                	type={'custom'}
                	data={this.getData()}
                	initCallback={this.orgTopologyInitCallback}
                	customLegend={[
                         {id: 'create', color: '#68a5ff', content: '新建', contentColor: '#68a5ff'},
                         {id: 'update', color: '#faad14',content: '修改', contentColor: '#faad14'},
                         {id: 'delete', color: '#ff4d4f',content: '删除', contentColor: '#ff4d4f'},
                     ]}
                     customStatusKey={'dataStatus'}
                     nodeExtend={this.getNodeExtend()}
                />
            </div>
        )
    }
}

```

组件参数说明：

```typescript
export interface LegendItem {
    id: string;
    content: string;
    contentColor: string;
    footColor: string;
}

export interface NodeExtendItem {
    id: string;//节点id
    color?: string;//文字颜色，默认#ffffff
    bgColor?: string;//背景色，默认#68a5ff
}

type TopologyType = 'org' | 'employee' | 'custom';

export interface OrgTopologyComProps {
    className?: string;
    initCallback?: (d3Util: D3Utils) => void;
    /**
     * 组件版本
     */
    version?: string;
    /**
     * 拓扑图类型 org/employee/custom
     */
    type?: TopologyType;
    /**
     * 是否简单模式,hide ${orgTopologyClsPrefix}-header
     */
    simple?: boolean;
    /**
     * 默认显示方式，默认Display.HORIZONTAL
     */
    defaultDisplayType: Display;
    /**
     * 显示方式变更事件
     */
    onDisplayChange?: (value: Display) => void
    /**
     * 数据源
     */
    data?: any[];
    /**
     * 异步树获取下级节点数据接口
     */
    getSub?: (params: any, callback?: Function) => void;
    /**
     * 自定义获取组织信息
     */
    getOrgInfo?: (params: any, callback?: Function) => void;
    /**
     * 部门人员数量点击事件
     */
    getOrgMember?: (type: OpType | any, params: any, callback?: Function) => void;
    /**
     * 自定义点击事件
     * @param item 操作按钮
     * @param params 数据源
     * @param entity d3实体
     */
    customEvent?: (item: any, params: any, entity: any) => void;
    /**
     * 标题
     */
    title?: string;
    /**
     * 自定义操作按钮
     */
    buttons?: ReactNode;
    /**
     * 图例
     */
    customLegend?: LegendItem[];
    /**
     * 自定义节点状态的数据key
     */
    customStatusKey?: string;
    /**
     * 是否支持分部
     */
    supportSubcompany?: boolean;
    /**
     * 自定义条件
     */
    conditionCom?: React.ReactNode;
    /**
     * 自定义展开图标
     */
    expandIcon?: any;
    /**
     * 自定义更多图标
     */
    moreIcon?: any;
    /**
     * 是否显示导出按钮
     */
    showExport?: boolean;
    /**
     * 自定义导出xmind参数
     */
    customExportXMindPrams?: any;
    /**
     * 自定义节点扩展
     */
    
?: NodeExtendItem[];
}

export enum Display {
    /**
     * 横向
     */
    HORIZONTAL = 'horizontal',
    /**
     * 纵向
     */
    VIRTICAL = 'virtical',
    /**
     * 混合(未实现)
     */
    MIX = 'mix',
}

export enum ExportType {
    PNG = 'png',
    PDF = 'pdf',
    XMIND = 'xmind'
}

```

参数说明：

| **参数名** | **描述** | **类型** | **是否必填** | **默认值** |
| --- | --- | --- | --- | --- |
| className | 组件样式名 | string | false |  |
| initCallback | 初始化回调 | (d3Util: D3Utils) => void; | false |  |
| version | 组件版本 | string | false | v1 |
| type | 图表类型 | TopologyType | false |  |
| simple | 简单模式，即不需要工具栏 | boolean | false | false |
| defaultDisplayType | 默认布局方式 | Display | false | Display.HORIZONTAL |
| onDisplayChange | 显示方式变化事件 | （value: Display) => void | false |  |
| data | 数据源（图例中标注3的部分） | any[] | true |  |
| getSub | 异步获取下级数据节点 | (params: any, callback?: Function) => void; | false |  |
| getOrgInfo | 自定义获取组织信息 | (params: any, callback?: Function) => void; | false |  |
| getOrgMember | 部门人员数量点击事件 | (type: OpType | any, params: any, callback?: Function) => void; | false |
| customEvent | 自定义点击事件 | (item: any, params: any, entity: any) => void; | false |  |
| customLegend | 图例（图例中标注2的部分） | LegendItem[] | false |  |
| customStatusKey | 自定义节点状态的数据key | string | false |  |
| supportSubcompany | 是否支持分部数据（type为org时传递） | boolean | false |  |
| conditionCom | 自定义条件组件（图例中标注1的部分） | boolean | false |  |
| nodeExtend | 节点扩展信息 | NodeExtendItem[] | false |  |
