FluentUI/example/T_TreeView.qml

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0

FluContentPage {

    title:"TreeView"
    leftPadding:10
    rightPadding:10
    bottomPadding:20

    function randomName() {
        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
        return names[Math.floor(Math.random() * names.length)]
    }

    function randomCompany() {
        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
        return companies[Math.floor(Math.random() * companies.length)]
    }

    function randomDepartment() {
        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
        return departments[Math.floor(Math.random() * departments.length)]
    }

    function createEmployee() {
        var name = randomName()
        return tree_view.createItem(name, false)
    }

    function createSubtree(numEmployees) {
        var employees = []
        for (var i = 0; i < numEmployees; i++) {
            employees.push(createEmployee())
        }
        return tree_view.createItem(randomDepartment(), true, employees)
    }

    function createOrg(numLevels, numSubtrees, numEmployees) {
        if (numLevels === 0) {
            return []
        }
        var subtrees = []
        for (var i = 0; i < numSubtrees; i++) {
            subtrees.push(createSubtree(numEmployees))
        }
        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
    }


    FluTreeView{
        id:tree_view
        width:240
        anchors{
            top:parent.top
            left:parent.left
            bottom:parent.bottom
        }
        onItemClicked:
            (model)=>{
                showSuccess(model.text)
            }

        Component.onCompleted: {
            var org = createOrg(3, 3, 3)
            updateData(org)

        }

    }


    ColumnLayout{
        anchors{
            left: tree_view.right
            right: parent.right
            top: parent.top
        }

        FluText{
            text:{
                if(tree_view.selectionMode === FluTreeView.None){
                    return "selectionMode->FluTreeView.None"
                }
                if(tree_view.selectionMode === FluTreeView.Single){
                    return "selectionMode->FluTreeView.Single"
                }
                if(tree_view.selectionMode === FluTreeView.Multiple){
                    return "selectionMode->FluTreeView.Multiple"
                }
            }
        }

        FluButton{
            text:"None"
            onClicked: {
                tree_view.selectionMode = FluTreeView.None
            }
        }

        FluButton{
            text:"Single"
            onClicked: {
                tree_view.selectionMode = FluTreeView.Single
            }
        }

        FluButton{
            text:"Multiple"
            onClicked: {
                tree_view.selectionMode = FluTreeView.Multiple
            }
        }

        FluFilledButton{
            text:"获取选中的数据"
            onClicked: {
                if(tree_view.selectionMode === FluTreeView.None){
                    showError("当前非选择模式,没有选中的数据")
                }
                if(tree_view.selectionMode === FluTreeView.Single){
                    if(!tree_view.signleData()){
                        showError("没有选中数据")
                        return
                    }
                    showSuccess(tree_view.signleData().text)
                }
                if(tree_view.selectionMode === FluTreeView.Multiple){
                    if(tree_view.multipData().length===0){
                        showError("没有选中数据")
                        return
                    }
                    var info = []
                    tree_view.multipData().map((value)=>info.push(value.text))
                    showSuccess(info.join(","))
                }
            }
        }

    }
}