Organization.tsx 2.34 KB
import React from 'react';
import {
    TreeSelect,
} from 'antd';
import type {
    TreeSelectProps,
} from 'antd/lib/tree-select';
import {
    requestCode,
} from '@/services/server';

export interface SetSelectProps extends TreeSelectProps<any> {
    value?: any;
    onChange?: (val: string | undefined, options: Record<string, any>) => void;
}
/**
 * @name 选择部门组件
 */
export default class Index extends React.Component<SetSelectProps>{

    state = {
        treeData: [],
    }

    componentDidMount() {
        this.optionSelect();
    }


    optionSelect() {
        requestCode('xn.master.organizationTree.find',{}).then((data: any) => {
            const { result } = data;
            function filterArray(arr: any) {
                return arr.map((item: any) => {
                    const { id, name, subList } = item;
                    return {
                        ...item,
                        key: id,
                        title: name,
                        children: filterArray(subList),
                    }
                })
            }

            if (result) {
                this.setState({
                    treeData: filterArray(result),
                })
            }
        })
    }

    render() {
        const { treeData } = this.state;
        const { value, style, multiple, placeholder, onChange } = this.props;
        return (
            <TreeSelect
                showSearch
                allowClear
                value={value}
                multiple={multiple}
                placeholder={placeholder || '请选择部门'}
                treeNodeFilterProp="title"
                style={style}
                onChange={(val) => {
                    let option = {};
                    function listof(arr: any) {
                        arr.forEach((item: any) => {
                            const { id, children } = item;
                            if (id === val) {
                                option = item;
                                return;
                            }
                            if (children) listof(children);
                        })
                    }
                    listof(treeData);
                    if(onChange) onChange(val, option);
                }}
                treeData={treeData}
            >
            </TreeSelect>
        )
    }
}