FluentUI/Gallery/res/qml/component/LeftMainMenu.qml

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Gallery

Item {
    id: control
    property int depthPadding: 15
    property var current
    property var initData: []

    signal clickItem(var data)

    Component{
        id: comp_row_key
        Item{
            id: item_layout
            height: 500
            property var __display: display
            property bool chekced:  {
                if(!control.current){
                    return false
                }
                return __display === control.current
            }
            ListTile{
                anchors.fill: parent
                text: rowModel.key //String(__display)
                leftPadding: 6 + rowModel.depth * control.depthPadding
                highlighted: item_layout.chekced
                spacing: 0
                leading: Row{
                    spacing: 0
                    IconButton{
                        opacity: rowModel.hasChildren
                        enabled: opacity
                        icon.name: FluentIcons.graph_ChevronDown
                        width: 20
                        height: 20
                        icon.width: 12
                        icon.height: 12
                        padding: 0
                        anchors{
                            verticalCenter: parent.verticalCenter
                        }
                        contentItem.rotation: rowModel.expanded ? 0 : -90
                        onClicked: {
                            item_layout.toggle()
                        }
                    }
                    Item{
                        width: 4
                        height: parent.height
                    }
                    Image{
                        width: 15
                        height: 15
                        source: rowModel.icon ? rowModel.icon : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png" // rowModel.hasChildren ? "qrc:/qt/qml/Gallery/res/image/ic_folder.png" : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png"
                        anchors{
                            verticalCenter: parent.verticalCenter
                        }
                    }
                    Item{
                        width: 10
                        height: parent.height
                    }
                }
                onDoubleClicked: {
                    console.log(rowModel["icon"])
                    if(rowModel.hasChildren){
                        item_layout.toggle()
                    }
                }
                onClicked: {
                    control.current = __display
                    control.clickItem(rowModel.cdata)
                }
                Rectangle{
                    height: 18
                    radius: 1.5
                    width: 3
                    visible: item_layout.chekced
                    color: Theme.accentColor.defaultBrushFor()
                    anchors{
                        verticalCenter: parent.verticalCenter
                        left: parent.left
                    }
                }
            }

            clip: true
            function toggle(){
                if(rowModel.expanded){
                    dataModel.collapse(rowModel.index)
                }else{
                    dataModel.expand(rowModel.index)
                }
            }
        }
    }
    TreeDataGridModel{
        id: dataModel
    }

    ColumnLayout{
        anchors.fill: parent
        TreeDataGrid{
            Layout.fillHeight: true
            Layout.fillWidth: true
            id: dataGrid
            // anchors{
            //     top: parent.top
            //     bottom: parent.bottom
            //     left: parent.left
            //     bottomMargin: 10
            // }
            verticalHeaderVisible: false
            horizonalHeaderVisible: false
            width: 240
            sourceModel: dataModel
            columnSourceModel: ListModel{
                ListElement{
                    title: qsTr("Key")
                    dataIndex: "id"
                    width: 240
                    frozen: false
                    rowDelegate: function(){return comp_row_key}
                }
            }
            cellBackground: Item{}
            cellForeground: Item{}
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            color: "transparent"
            IconButton{
                anchors.verticalCenter: parent.verticalCenter
                anchors.fill: parent
                text: "添加目录"
                icon.name: FluentIcons.graph_Add
                icon.width: 18
                icon.height: 18
                spacing: 5
                onClicked: {
                    console.log(dataGrid)
                    folderNew.launch({ title: "" })
                }
            }
        }
    }

    // 新建目录弹框
    WindowResultLauncher{
        id: folderNew
        path: "/newFolder"
        onResult: (data)=>{
            var data = {id: control.generateUUID(), title: data.title, height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
            control.setMenuData(data)
        }
    }
    ////////////

    Component.onCompleted: {
        var data = {id: "1", title: "充电站规划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
        control.setMenuData(data)
        var data = {id: "12", title: "运输计划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
        control.setMenuData(data)
    }

    function setMenuData(data) {
        var tmp = initData.find((v) => v.id == data.id)
        if (!tmp) {
            tmp = { id: data.id, key: data.title ? data.title : "未命名", height: 35, icon: data.icon, cdata: data }
            initData.push(tmp)
        } else {
            tmp.key = data.title
            tmp.cdata = data
        }

        dataModel.sourceData = initData
    }

    function generateUUID() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = (d + Math.random()*16)%16 | 0;
          d = Math.floor(d/16);
          return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
}