371 lines
15 KiB
QML
371 lines
15 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import FluentUI.impl
|
|
import Gallery
|
|
import "../component/base"
|
|
|
|
import QtQuick.LocalStorage 2.0
|
|
import "../DB/database.js" as DB
|
|
|
|
Item {
|
|
id: control
|
|
property int depthPadding: 15
|
|
property var current
|
|
property var initData: []
|
|
|
|
signal clickItem(var data)
|
|
signal lockItem(var data)
|
|
signal showItem(var data)
|
|
|
|
FileTreeDataController{
|
|
id: controller
|
|
onLoadDataStart: {
|
|
panel_loading.visible = true
|
|
}
|
|
onLoadDataSuccess: {
|
|
// dataModel.sourceData = controller.data
|
|
panel_loading.visible = false
|
|
}
|
|
}
|
|
Component{
|
|
id: comp_row_key
|
|
Item{
|
|
id: item_layout
|
|
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{
|
|
top: parent.top
|
|
topMargin: 3
|
|
}
|
|
}
|
|
Item{
|
|
width: 10
|
|
height: parent.height
|
|
}
|
|
}
|
|
onDoubleClicked: {
|
|
console.log(rowModel["icon"])
|
|
console.log(rowModel["key"])
|
|
console.log(rowModel["height"])
|
|
if(rowModel.hasChildren){
|
|
item_layout.toggle()
|
|
}
|
|
}
|
|
onClicked: {
|
|
if (!rowModel["lock"]) {
|
|
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
|
|
}
|
|
}
|
|
|
|
IconButton{
|
|
id: btn_lock
|
|
icon.name: rowModel["lock"] ? FluentIcons.graph_Lock : FluentIcons.graph_Unlock //graph_Lock
|
|
icon.width: 15
|
|
icon.height: 15
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
right: parent.right
|
|
}
|
|
onClicked: {
|
|
rowModel["lock"] = !rowModel["lock"]
|
|
control.initData.forEach((v) => {
|
|
if (v.id == rowModel["id"]) {
|
|
v.lock = rowModel["lock"]
|
|
}
|
|
})
|
|
control.lockItem(rowModel)
|
|
}
|
|
}
|
|
|
|
IconButton{
|
|
icon.name: rowModel["show"] ? FluentIcons.graph_RevealPasswordMedium : FluentIcons.graph_HWPJoin // FluentIcons.
|
|
icon.width: 15
|
|
icon.height: 15
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
right: parent.right
|
|
rightMargin: 35
|
|
}
|
|
onClicked: {
|
|
rowModel["show"] = !rowModel["show"]
|
|
control.initData.forEach((v) => {
|
|
if (v.id == rowModel["id"]) {
|
|
v.show = rowModel["show"]
|
|
}
|
|
})
|
|
control.showItem(rowModel)
|
|
}
|
|
}
|
|
}
|
|
|
|
clip: true
|
|
function toggle(){
|
|
if(rowModel.expanded){
|
|
dataModel.collapse(rowModel.index)
|
|
}else{
|
|
dataModel.expand(rowModel.index)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
TreeDataGridModel{
|
|
id: dataModel
|
|
}
|
|
|
|
ColumnLayout{
|
|
anchors.fill: parent
|
|
spacing: 5
|
|
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 30
|
|
Layout.topMargin: 5
|
|
color: 'transparent'
|
|
TextBox{
|
|
id: tb_searcn
|
|
anchors.fill: parent
|
|
placeholderText: "请输入图层名称"
|
|
trailing: IconButton{
|
|
implicitWidth: 30
|
|
implicitHeight: 20
|
|
icon.name: FluentIcons.graph_Search
|
|
icon.width: 14
|
|
icon.height: 14
|
|
padding: 0
|
|
}
|
|
background: InputBackground {
|
|
implicitWidth: 200
|
|
implicitHeight: 32
|
|
radius: 5
|
|
activeColor: "#22C55E"
|
|
color: {
|
|
if(!tb_searcn.enabled){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorDisabled
|
|
}else if(tb_searcn.activeFocus){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorInputActive
|
|
}else if(tb_searcn.hovered){
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorSecondary
|
|
}else{
|
|
return tb_searcn.FluentUI.theme.res.controlFillColorDefault
|
|
}
|
|
}
|
|
target: tb_searcn
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 1
|
|
color: Qt.rgba(125/255,125/255,125/255, 0.2)
|
|
}
|
|
|
|
// TreeDataGrid{
|
|
// id: dataGrid
|
|
|
|
// Layout.fillWidth: true
|
|
// Layout.fillHeight: true
|
|
|
|
// columnWidthProvider: function(c) {
|
|
// return dataGrid.width
|
|
// }
|
|
|
|
// verticalHeaderVisible: false
|
|
// horizonalHeaderVisible: false
|
|
// sourceModel: dataModel
|
|
// columnSourceModel: ListModel{
|
|
// ListElement{
|
|
// title: qsTr("Key")
|
|
// dataIndex: "id"
|
|
// frozen: false
|
|
// rowDelegate: function(){return comp_row_key}
|
|
// }
|
|
// }
|
|
// cellBackground: Item{}
|
|
// cellForeground: Item{}
|
|
// }
|
|
|
|
MyTreeView {
|
|
id: tree
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
model: modelTree2
|
|
onSelectedItemChanged: console.log(item.text)
|
|
}
|
|
ListModel {
|
|
id: modelTree2
|
|
Component.onCompleted: {
|
|
DB.initDatabase()
|
|
var result = DB.readMenuTree("1")
|
|
modelTree2.append(result)
|
|
// modelTree2.append([
|
|
// {id: "1", title: "Node 1", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "2", title: "Node 2", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: [
|
|
// {id: "21", title: "Node 21", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items:[
|
|
// {id: "211", title: "Node 211", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_car.png", items: []},
|
|
// {id: "212", title: "Node 212", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_car.png", items: []}
|
|
// ]},
|
|
// {id: "22", title: "Node 22", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_line.png", items: []}
|
|
// ]
|
|
// },
|
|
// {id: "3", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "4", title: "多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "31", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "32", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "33", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "34", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "35", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "36", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "37", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "38", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "39", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "30", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "300", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// {id: "3000", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
|
|
// ]);
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 35
|
|
Layout.leftMargin: 0
|
|
Layout.rightMargin: 0
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
radius: 5
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
spacing: 5
|
|
IconButton{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.topMargin: 5
|
|
Layout.leftMargin: 5
|
|
Layout.bottomMargin: 5
|
|
icon.name: FluentIcons.graph_DictionaryAdd
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
backgroundColor: "#535353"
|
|
onClicked: {
|
|
console.log('')
|
|
}
|
|
}
|
|
IconButton{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.topMargin: 5
|
|
Layout.rightMargin: 5
|
|
Layout.bottomMargin: 5
|
|
icon.name: FluentIcons.graph_Delete
|
|
icon.width: 14
|
|
icon.height: 14
|
|
backgroundColor: "#535353"
|
|
spacing: 5
|
|
onClicked: {
|
|
console.log("")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
controller.loadData()
|
|
setMenuData({
|
|
id: "1",
|
|
title: "多边形1"
|
|
})
|
|
}
|
|
Pane{
|
|
id: panel_loading
|
|
anchors.fill: dataGrid
|
|
ProgressRing{
|
|
anchors.centerIn: parent
|
|
indeterminate: true
|
|
}
|
|
background: Rectangle{
|
|
color: Theme.res.solidBackgroundFillColorBase
|
|
}
|
|
}
|
|
|
|
|
|
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.image ? "qrc:/qt/qml/Gallery/res/image/icons/" + data.image : "", cdata: data, lock: false, show: true }
|
|
initData.push(tmp)
|
|
} else {
|
|
if (data.title) {
|
|
tmp.key = data.title
|
|
}
|
|
if (data.image) {
|
|
tmp.icon = "qrc:/qt/qml/Gallery/res/image/icons/" + data.image
|
|
}
|
|
|
|
tmp.cdata = data
|
|
}
|
|
|
|
console.log(JSON.stringify(initData))
|
|
|
|
dataModel.sourceData = initData
|
|
}
|
|
|
|
function delMenuData(data) {
|
|
initData = initData.filter((v) => v.id != data.id)
|
|
dataModel.sourceData = initData
|
|
}
|
|
}
|