@egova/components/src/components/tree-select/index.ts

components

/**
 * tree-selector 下拉树
 * 传入的参数有：
 * @value 当前选择的树节点id，可使用v-model双向绑定
 * @data 下拉树所需的数据
 * {
 *  title!: String,
 *  id!: String,
 *  children?: []
 * }
 * @placeholder 提示信息
 *
 * TODO: 后续支持多选操作
 */
import { component, Component, config } from "@egova/flagwind-web";
import "./index.scss";

@component({
    template: require("./index.html"),
    components: {}
})
export default class TreeSelect extends Component {
    protected visible: boolean = false;

    @config({ type: Boolean, default: false })
    public disabled!: boolean;
    
    @config({ default: () => [] })
    public data!: Array<any>;

    @config({ type: String, default: "" })
    public value!: string;

    @config({ type: String, default: () => "请选择" })
    public placeholder!: string;

    public get current() {
        let res = "";
        if (
            !this.data ||
            Object.prototype.toString.call(this.data) !== "[object Array]" ||
            !this.value
        ) {
            return res;
        }
        // 根据id查找id对应的name
        let id = this.value;
        for (let i of this.data) {
            if (i.id === id) {
                res = i.title;
                break;
            }
            if (i.children && i.children.length) {
                res = this.getTitleById(i.children, id);
                if (res) break;
            }
        }
        return res;
    }

    public set current(current: any) {
        this.$emit("input", current.id);
    }

    public getTitleById(arr: Array<any>, id: string): string {
        let res = "";
        for (let i of arr) {
            if (i.id === id) {
                res = i.title;
                break;
            }
            if (i.children && i.children.length) {
                res = this.getTitleById(i.children, id);
                if (res) break;
            }
        }
        return res;
    }

    public onSelect(arr: Array<any>, node: any) {
        this.visible = false;
        this.current = node;
        this.$emit("on-select", node);
    }
}