528 lines
23 KiB
QML
528 lines
23 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import FluentUI.impl
|
|
import Qt.labs.qmlmodels
|
|
import Qt5Compat.GraphicalEffects
|
|
|
|
Rectangle{
|
|
id: control
|
|
property var show_type: "card"
|
|
property var p_data
|
|
|
|
property var p_cellW: 310
|
|
property var p_cellH: 210
|
|
|
|
signal clickNewItem()
|
|
|
|
signal clickItem(var item)
|
|
|
|
color: "transparent"
|
|
Layout.fillWidth: true
|
|
|
|
Menu {
|
|
id:menu_group
|
|
width: 140
|
|
BaseMenuItem{
|
|
m_icon: "qrc:/qt/qml/Gallery/res/image/icons/edit.png"
|
|
m_text: "重命名"
|
|
m_key: ""
|
|
show_key: false
|
|
onClickItem: {
|
|
|
|
}
|
|
}
|
|
BaseMenuItem{
|
|
m_icon: "qrc:/qt/qml/Gallery/res/image/icons/delete.png"
|
|
m_text: "删除"
|
|
m_key: ""
|
|
show_key: false
|
|
onClickItem: {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
Component{
|
|
id: com_project
|
|
Rectangle{
|
|
id: rect_con
|
|
width: control.p_cellW - 10
|
|
height: control.p_cellH - 10
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
radius: 5
|
|
Rectangle{
|
|
visible: model.uuid != "0"
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 5
|
|
anchors.rightMargin: 5
|
|
anchors.topMargin: 5
|
|
anchors.bottomMargin: 5
|
|
color: "transparent"
|
|
layer.enabled: true
|
|
layer.effect: OpacityMask{
|
|
maskSource: Rectangle{
|
|
width: control.p_cellW - 10
|
|
height: control.p_cellH - 70
|
|
radius: 5
|
|
}
|
|
}
|
|
|
|
Image{
|
|
id: image
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.right: parent.right
|
|
height: control.p_cellH - 70
|
|
source: model.img
|
|
}
|
|
|
|
Rectangle{
|
|
width: parent.width
|
|
height: 40
|
|
color: "transparent"
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
RowLayout{
|
|
anchors.fill: parent
|
|
anchors.topMargin: 1
|
|
Item{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
RowLayout{
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 5
|
|
Image{
|
|
source: "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"
|
|
}
|
|
Label{
|
|
text: model.title
|
|
font.pointSize: 10
|
|
font.bold: true
|
|
Layout.maximumWidth: rect_con.width - 135
|
|
elide: Text.ElideRight
|
|
}
|
|
Rectangle{
|
|
color: "#159A59"
|
|
width: 51
|
|
height: 20
|
|
radius: 10
|
|
Label{
|
|
anchors.centerIn: parent
|
|
text: "已启用"
|
|
font.pointSize: 9
|
|
}
|
|
}
|
|
}
|
|
Label{
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: 1
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 5
|
|
text: "更新于 2月24日 20:34"
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
|
font.pointSize: 9
|
|
}
|
|
}
|
|
Item{
|
|
Layout.preferredWidth: 30
|
|
Layout.fillHeight: true
|
|
Layout.rightMargin: 5
|
|
RoundImageView{
|
|
width: 32
|
|
height: 32
|
|
radius: 32/2
|
|
borderWidth: 2
|
|
sourceSize: Qt.size(32*2,32*2)
|
|
source: "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg"
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
visible: model.uuid == "0"
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 5
|
|
anchors.rightMargin: 5
|
|
anchors.topMargin: 5
|
|
anchors.bottomMargin: 5
|
|
|
|
color: "#303030"
|
|
radius: 3
|
|
Image{
|
|
source: "qrc:/qt/qml/Gallery/res/image/img/add.png"
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: parent.color = Qt.rgba(255/255,255/255,255/255, 0.15)
|
|
onExited: parent.color = Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
onClicked: {
|
|
if (model.uuid == "0") {
|
|
control.clickNewItem()
|
|
} else {
|
|
control.clickItem(model)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ColumnLayout{
|
|
anchors.fill: parent
|
|
|
|
Item{
|
|
visible: control.show_type == "card"
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
ScrollView{
|
|
anchors.fill: parent
|
|
|
|
ColumnLayout{
|
|
|
|
RowLayout{
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 30
|
|
Label{
|
|
text: "分组名称"
|
|
font.pointSize: 11
|
|
color: "#20C05D"
|
|
Layout.leftMargin: 5
|
|
}
|
|
IconButton{
|
|
icon.name: FluentIcons.graph_More
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
Layout.leftMargin: 5
|
|
onClicked: {
|
|
menu_group.popup(this)
|
|
menu_group.x = -50
|
|
menu_group.y = 20
|
|
}
|
|
}
|
|
}
|
|
|
|
GridView{
|
|
id: gv
|
|
Layout.preferredWidth: control.width
|
|
Layout.preferredHeight: gv.contentHeight
|
|
cellWidth: control.p_cellW
|
|
cellHeight: control.p_cellH
|
|
model: p_data
|
|
delegate: com_project
|
|
clip: true
|
|
interactive: false
|
|
boundsBehavior: Flickable.StopAtBounds
|
|
}
|
|
|
|
RowLayout{
|
|
visible: control.show_type == "card"
|
|
Layout.preferredHeight: 30
|
|
Label{
|
|
text: "分组名称"
|
|
font.pointSize: 11
|
|
color: "#20C05D"
|
|
Layout.leftMargin: 5
|
|
}
|
|
IconButton{
|
|
icon.name: FluentIcons.graph_More
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
Layout.leftMargin: 5
|
|
onClicked: {
|
|
menu_group.popup(this)
|
|
menu_group.x = -50
|
|
menu_group.y = 20
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// 表格模式
|
|
Rectangle{
|
|
visible: control.show_type == "list"
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.leftMargin: 5
|
|
id: com_project_list
|
|
color: 'transparent'
|
|
|
|
Row{
|
|
id: tb_header
|
|
anchors.fill: parent
|
|
anchors.topMargin: 10
|
|
spacing: 0
|
|
|
|
Repeater{
|
|
model: ["文件名","项目状态","更新时间","创建时间", "创建人"]
|
|
|
|
Rectangle{
|
|
width: {
|
|
var w = 0
|
|
switch(index){
|
|
case 0: w = parent.width - 700;break;
|
|
case 1: w = 150;break;
|
|
case 2: w = 200;break;
|
|
case 3: w = 200;break;
|
|
case 4: w = 150;break;
|
|
}
|
|
console.log(w)
|
|
return w
|
|
}
|
|
height: 30
|
|
color: "transparent"
|
|
Text {
|
|
text: modelData
|
|
anchors.centerIn: this
|
|
font.pointSize: 10
|
|
color: "#9E9E9E"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ScrollView{
|
|
anchors.fill: parent
|
|
anchors.topMargin: 40
|
|
|
|
ColumnLayout{
|
|
id: col_container
|
|
width: tb_header.width
|
|
|
|
// 表格头部
|
|
RowLayout{
|
|
Layout.topMargin: 0
|
|
|
|
Label{
|
|
text: "分组名称"
|
|
font.pointSize: 11
|
|
color: "#20C05D"
|
|
}
|
|
IconButton{
|
|
icon.name: FluentIcons.graph_More
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
Layout.leftMargin: 5
|
|
onClicked: {
|
|
menu_group.popup(this)
|
|
menu_group.x = -50
|
|
menu_group.y = 20
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
TableView {
|
|
id: tv_data
|
|
columnSpacing: 0
|
|
rowSpacing: 10
|
|
clip: true
|
|
Layout.topMargin: 0
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: tv_data.rows * 40
|
|
interactive: false
|
|
|
|
model: TableModel {
|
|
TableModelColumn { display: "title" }
|
|
TableModelColumn { display: "status" }
|
|
TableModelColumn { display: "utime" }
|
|
TableModelColumn { display: "ctime" }
|
|
TableModelColumn { display: "user" }
|
|
|
|
rows: [
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
{ "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"} },
|
|
]
|
|
}
|
|
|
|
delegate: DelegateChooser{
|
|
|
|
DelegateChoice{
|
|
column: 0
|
|
delegate: Rectangle{
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
implicitWidth: tb_header.width - 700
|
|
implicitHeight: 40
|
|
|
|
Image{
|
|
source: display.icon
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.leftMargin: 10
|
|
anchors.topMargin: 13
|
|
}
|
|
|
|
Text {
|
|
text: display.title
|
|
font.pointSize: 12
|
|
color: "#ffffff"
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.leftMargin: 35
|
|
anchors.topMargin: 9
|
|
|
|
width: parent.width - 50
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onEntered: {
|
|
console.log(index)
|
|
}
|
|
onExited: {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
DelegateChoice{
|
|
column: 1
|
|
delegate: Rectangle{
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
implicitWidth: 150
|
|
implicitHeight: 40
|
|
|
|
Rectangle {
|
|
radius: 20
|
|
width: 70
|
|
height: 30
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 5
|
|
color: "#159A59"
|
|
Label{
|
|
text: display
|
|
anchors.centerIn: parent
|
|
font.pointSize: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
DelegateChoice{
|
|
column: 2
|
|
delegate: Rectangle{
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
implicitWidth: 200
|
|
implicitHeight: 40
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.leftMargin: 0
|
|
anchors.topMargin: 11
|
|
text: display
|
|
font.pointSize: 10
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
|
}
|
|
}
|
|
}
|
|
DelegateChoice{
|
|
column: 3
|
|
delegate: Rectangle{
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
implicitWidth: 200
|
|
implicitHeight: 40
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.leftMargin: 0
|
|
anchors.topMargin: 11
|
|
text: display
|
|
font.pointSize: 10
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
|
}
|
|
}
|
|
}
|
|
DelegateChoice{
|
|
column: 4
|
|
delegate: Rectangle{
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.05)
|
|
implicitWidth: 150
|
|
implicitHeight: 40
|
|
|
|
RoundImageView{
|
|
width: 32
|
|
height: 32
|
|
radius: 32/2
|
|
borderWidth: 2
|
|
sourceSize: Qt.size(32*2,32*2)
|
|
source: display.avatar
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.leftMargin: 40
|
|
anchors.topMargin: 11
|
|
text: display.name
|
|
font.pointSize: 10
|
|
color: Qt.rgba(255/255,255/255,255/255, 0.6)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
RowLayout{
|
|
Layout.topMargin: 20
|
|
|
|
Label{
|
|
text: "分组名称"
|
|
font.pointSize: 11
|
|
color: "#20C05D"
|
|
}
|
|
IconButton{
|
|
icon.name: FluentIcons.graph_More
|
|
icon.width: 14
|
|
icon.height: 14
|
|
spacing: 5
|
|
Layout.leftMargin: 5
|
|
onClicked: {
|
|
menu_group.popup(this)
|
|
menu_group.x = -50
|
|
menu_group.y = 20
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|