429 lines
15 KiB
QML
429 lines
15 KiB
QML
|
// =============== 文件表格面板 ===============
|
|||
|
|
|
|||
|
|
import QtQuick 2.15
|
|||
|
|
import QtQuick.Controls 2.15
|
|||
|
|
import Qt.labs.qmlmodels 1.0 // 表格
|
|||
|
|
import QtGraphicalEffects 1.15 // 子元素圆角
|
|||
|
|
import QtQuick.Dialogs 1.3 // 文件对话框
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: fTableRoot
|
|||
|
|
|
|||
|
|
// ========================= 【定义】 =========================
|
|||
|
|
|
|||
|
|
// 表头。定义每一列。
|
|||
|
|
property var headers: [
|
|||
|
|
// 第一列也作为总key（tk），不允许重复。
|
|||
|
|
{key: "path", title: "文件", },
|
|||
|
|
{key: "time", title: "耗时", },
|
|||
|
|
{key: "state", title: "状态", },
|
|||
|
|
// 可选项：
|
|||
|
|
// btn: true 启用按钮
|
|||
|
|
// onClicked: 单击函数
|
|||
|
|
// left: true 左对齐
|
|||
|
|
// display: 显示函数，输入value，返回显示文本
|
|||
|
|
]
|
|||
|
|
property string openBtnText: "选择文件"
|
|||
|
|
property string clearBtnText: "清空"
|
|||
|
|
property string defaultTips: "拖入或选择文件"
|
|||
|
|
property string fileDialogTitle: "请选择文件"
|
|||
|
|
property var fileDialogNameFilters: ["文件 (*.jpg *.jpe *.jpeg *.jfif *.png *.webp *.bmp *.tif *.tiff)"]
|
|||
|
|
property int spacing: size_.smallLine // 表项水平间隔
|
|||
|
|
property int minWidth0: size_.smallLine * 5 // 第0列最小宽度
|
|||
|
|
property bool isLock: false // 是否锁定UI操作
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ========================= 【调用接口】 =========================
|
|||
|
|
|
|||
|
|
// 增：添加一项。 row：字典，key在headers中，如 { "path" "time" "state" }
|
|||
|
|
// ik：可以是表格行index（int），也可以是总key（string）
|
|||
|
|
function add(row, ik=-1) {
|
|||
|
|
const key = row[headerKey]
|
|||
|
|
if(key in dataDict) {
|
|||
|
|
console.warn(`add: ${key} 已在dataDict中！`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if(ik === -1 || ik === rowCount) {
|
|||
|
|
dataDict[key] = rowCount
|
|||
|
|
dataModel.append(row)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
const i = ik2i(ik)
|
|||
|
|
if(i < 0) {
|
|||
|
|
console.warn(`add: ik ${ik} ${i} < 0 ！`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
dataDict[key] = i
|
|||
|
|
dataModel.insert(i, row)
|
|||
|
|
}
|
|||
|
|
updateWidth()
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 删：删除一项
|
|||
|
|
function del(ik) {
|
|||
|
|
const i = ik2i(ik)
|
|||
|
|
if(i < 0) {
|
|||
|
|
console.warn(`del: ik ${ik} ${i} < 0 ！`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
const key = dataModel.get(i)[headerKey]
|
|||
|
|
delete dataDict[key]
|
|||
|
|
dataModel.remove(i)
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 删：清空
|
|||
|
|
function clear() {
|
|||
|
|
dataModel.clear()
|
|||
|
|
dataDict = {}
|
|||
|
|
}
|
|||
|
|
// 改：属性字典
|
|||
|
|
function set(ik, columnDict) {
|
|||
|
|
const i = ik2i(ik)
|
|||
|
|
if(i < 0) {
|
|||
|
|
console.warn(`set: ik ${ik} ${i} < 0 ！`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
dataModel.set(i, columnDict)
|
|||
|
|
updateWidth()
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 改：单个属性
|
|||
|
|
function setProperty(ik, columnKey, value) {
|
|||
|
|
const i = ik2i(ik)
|
|||
|
|
if(i < 0) {
|
|||
|
|
console.warn(`setProperty: ik ${ik} ${i} < 0 ！`)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
dataModel.setProperty(i, columnKey, value)
|
|||
|
|
updateWidth()
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 查：ik转index。返回-1表示失败。
|
|||
|
|
function ik2i(ik) {
|
|||
|
|
if (typeof ik === "number") {
|
|||
|
|
if(ik >= 0 && ik < rowCount)
|
|||
|
|
return ik
|
|||
|
|
} else if (typeof ik === "string") {
|
|||
|
|
if(ik in dataDict)
|
|||
|
|
return dataDict[ik]
|
|||
|
|
}
|
|||
|
|
return -1
|
|||
|
|
}
|
|||
|
|
// 查：获取单个行的字典
|
|||
|
|
function get(ik) {
|
|||
|
|
const i = ik2i(ik)
|
|||
|
|
if(i < 0) {
|
|||
|
|
console.warn(`get: ik ${ik} ${i} < 0 ！`)
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
return dataModel.get(i)
|
|||
|
|
}
|
|||
|
|
// 查：获取key列的所有数据，返回每项为value
|
|||
|
|
function getColumnsValue(key) {
|
|||
|
|
let list = []
|
|||
|
|
for(let y = 0; y < rowCount; y++) {
|
|||
|
|
list.push( dataModel.get(y)[key] )
|
|||
|
|
}
|
|||
|
|
return list
|
|||
|
|
}
|
|||
|
|
// 查：获取多个列的数据，返回每项为字典
|
|||
|
|
function getColumnsValues(keys=[]) {
|
|||
|
|
let list = []
|
|||
|
|
if(keys.length > 0) {
|
|||
|
|
for(let y = 0; y < rowCount; y++) {
|
|||
|
|
const data = dataModel.get(y)
|
|||
|
|
const d = {}
|
|||
|
|
for(let i in keys)
|
|||
|
|
d[keys[i]] = data[keys[i]]
|
|||
|
|
list.push(d)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
for(let y = 0; y < rowCount; y++)
|
|||
|
|
list.push(dataModel.get(y))
|
|||
|
|
}
|
|||
|
|
return list
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 定义信号
|
|||
|
|
signal addPaths(var paths) // 添加文件的信号
|
|||
|
|
signal click(var info) // 点击条目的信号
|
|||
|
|
|
|||
|
|
Component.onCompleted: {
|
|||
|
|
dataDict = {}
|
|||
|
|
columnCount = headers.length
|
|||
|
|
for(let i=0; i<columnCount; i++){
|
|||
|
|
headerModel.append({
|
|||
|
|
"key": headers[i].key,
|
|||
|
|
"title": headers[i].title,
|
|||
|
|
"width": 1,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
headerKey = headers[0].key
|
|||
|
|
updateWidth(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========================= 【逻辑】 =========================
|
|||
|
|
|
|||
|
|
property int columnCount: 0 // 列数量， onCompleted 中初始化
|
|||
|
|
property int rowCount: dataModel.count // 行数量
|
|||
|
|
property string headerKey: "" // 自动
|
|||
|
|
// 表头， key title width
|
|||
|
|
ListModel { id: headerModel }
|
|||
|
|
// 数据， 项为headers的key
|
|||
|
|
ListModel { id: dataModel }
|
|||
|
|
property var dataDict: {} // 指向 dataModel 的 index
|
|||
|
|
onRowCountChanged: {
|
|||
|
|
headerModel.setProperty(0, "title", headers[0].title + ` (${rowCount})`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 宽度更新
|
|||
|
|
Timer {
|
|||
|
|
id: updateWidthTimer
|
|||
|
|
interval: 100
|
|||
|
|
repeat: false
|
|||
|
|
onTriggered: {
|
|||
|
|
updateWidth(true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 更新全部宽度
|
|||
|
|
function updateWidth(timer=false) {
|
|||
|
|
if(!timer) { // 启动计时器，减少调用频率
|
|||
|
|
updateWidthTimer.restart()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let ws = Array(columnCount).fill(1)
|
|||
|
|
// 表头
|
|||
|
|
for(let i = 1; i < columnCount; i++) {
|
|||
|
|
let maxWidth = headerRepeater.itemAt(i).maxWidth + fTableRoot.spacing*2
|
|||
|
|
if(maxWidth > ws[i]) ws[i] = maxWidth
|
|||
|
|
}
|
|||
|
|
// 表体
|
|||
|
|
for(let y in tableView.items) {
|
|||
|
|
const repeater = tableView.items[y].repeater
|
|||
|
|
for(let x = 1; x < columnCount; x++) {
|
|||
|
|
let maxWidth = repeater.itemAt(x).maxWidth + fTableRoot.spacing*2
|
|||
|
|
if(maxWidth > ws[x]) ws[x] = maxWidth
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 赋值 / 计算第0列宽度
|
|||
|
|
let w0 = tableArea.width
|
|||
|
|
for(let i = 1; i < columnCount; i++) {
|
|||
|
|
headerModel.setProperty(i, "width", ws[i])
|
|||
|
|
w0 -= ws[i]
|
|||
|
|
}
|
|||
|
|
// 更新第0列宽度
|
|||
|
|
updateWidth0(w0)
|
|||
|
|
}
|
|||
|
|
// 更新第0列宽度
|
|||
|
|
function updateWidth0(w0 = -1) {
|
|||
|
|
if(headerModel.count <= 0) return
|
|||
|
|
if(w0 < 0) {
|
|||
|
|
w0 = tableArea.width
|
|||
|
|
for(let i = 1; i < columnCount; i++)
|
|||
|
|
w0 -= headerModel.get(i).width
|
|||
|
|
}
|
|||
|
|
w0 += columnCount-10 // 避让右侧滚动条空间
|
|||
|
|
if(w0 < minWidth0) w0 = minWidth0
|
|||
|
|
headerModel.setProperty(0, "width", w0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ========================= 【布局】 =========================
|
|||
|
|
|
|||
|
|
// 表格区域
|
|||
|
|
Rectangle {
|
|||
|
|
id: tableArea
|
|||
|
|
anchors.fill: parent
|
|||
|
|
color: theme.bgColor
|
|||
|
|
|
|||
|
|
Item {
|
|||
|
|
id: tableContainer
|
|||
|
|
anchors.fill: parent
|
|||
|
|
|
|||
|
|
// 上方操控版
|
|||
|
|
Item {
|
|||
|
|
id: tableTopPanel
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
height: size_.line * 2
|
|||
|
|
|
|||
|
|
// 左打开图片按钮
|
|||
|
|
IconTextButton {
|
|||
|
|
id: openBtn
|
|||
|
|
visible: parent.width > openBtn.width + clearBtn.width // 容器宽度过小时隐藏
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
anchors.margins: size_.smallSpacing * 0.5
|
|||
|
|
icon_: "folder"
|
|||
|
|
text_: openBtnText
|
|||
|
|
|
|||
|
|
onClicked: {
|
|||
|
|
if(isLock) return
|
|||
|
|
fileDialog.open()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右清空按钮
|
|||
|
|
IconTextButton {
|
|||
|
|
id: clearBtn
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
anchors.margins: size_.smallSpacing * 0.5
|
|||
|
|
icon_: "clear"
|
|||
|
|
text_: clearBtnText
|
|||
|
|
|
|||
|
|
onClicked: {
|
|||
|
|
if(isLock) return
|
|||
|
|
fTableRoot.clear()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提示
|
|||
|
|
DefaultTips {
|
|||
|
|
visibleFlag: fTableRoot.rowCount
|
|||
|
|
anchors.top: tableTopPanel.bottom
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
tips: defaultTips
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表头
|
|||
|
|
Item {
|
|||
|
|
id: tableHeaderContainer
|
|||
|
|
visible: fTableRoot.rowCount > 0
|
|||
|
|
anchors.top: tableTopPanel.bottom
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
height: size_.line * 1.5
|
|||
|
|
onWidthChanged: updateWidth0()
|
|||
|
|
|
|||
|
|
Row {
|
|||
|
|
anchors.fill: parent
|
|||
|
|
spacing: -1
|
|||
|
|
Repeater {
|
|||
|
|
model: headerModel
|
|||
|
|
id: headerRepeater
|
|||
|
|
Rectangle {
|
|||
|
|
width: model.width
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
color: theme.bgColor
|
|||
|
|
border.width: 1
|
|||
|
|
border.color: theme.coverColor2
|
|||
|
|
property alias maxWidth: hText.width
|
|||
|
|
Text_ {
|
|||
|
|
id: hText
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|||
|
|
verticalAlignment: Text.AlignVCenter // 垂直居中
|
|||
|
|
font.pixelSize: size_.smallText
|
|||
|
|
text: model.title
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 表体
|
|||
|
|
TableView {
|
|||
|
|
id: tableView
|
|||
|
|
anchors.top: tableHeaderContainer.bottom
|
|||
|
|
anchors.left: parent.left
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
flickableDirection: Flickable.VerticalFlick // 只允许垂直滚动
|
|||
|
|
boundsBehavior: Flickable.StopAtBounds // 禁止flick过冲。不影响滚轮滚动的过冲
|
|||
|
|
model: dataModel
|
|||
|
|
clip: true
|
|||
|
|
property var items: tableView.children[0].children
|
|||
|
|
rowSpacing: -1
|
|||
|
|
delegate: Item {
|
|||
|
|
Component.onCompleted: updateWidth()
|
|||
|
|
TableView.onReused: updateWidth()
|
|||
|
|
implicitHeight: size_.smallLine * 1.5
|
|||
|
|
implicitWidth: 1
|
|||
|
|
property int rowIndex: index
|
|||
|
|
property var rowModel: model
|
|||
|
|
property alias repeater: repeater
|
|||
|
|
Row {
|
|||
|
|
anchors.fill: parent
|
|||
|
|
spacing: -1
|
|||
|
|
Repeater {
|
|||
|
|
id: repeater
|
|||
|
|
model: headerModel
|
|||
|
|
Rectangle {
|
|||
|
|
width: model.width
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
color: theme.bgColor
|
|||
|
|
border.width: 1
|
|||
|
|
border.color: theme.coverColor2
|
|||
|
|
property alias maxWidth: hText.width
|
|||
|
|
property int columnIndex: index
|
|||
|
|
property string columnKey: model.key
|
|||
|
|
property var header: headers[columnIndex]
|
|||
|
|
clip: true
|
|||
|
|
Button_ {
|
|||
|
|
visible: header.btn?true:false
|
|||
|
|
anchors.fill: parent
|
|||
|
|
radius: 0
|
|||
|
|
onClicked: {
|
|||
|
|
if(header.onClicked) {
|
|||
|
|
header.onClicked(rowIndex)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
Text_ {
|
|||
|
|
id: hText
|
|||
|
|
property bool isLeft: headers[columnIndex].left?true:false
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.bottom: parent.bottom
|
|||
|
|
anchors.left: isLeft? parent.left : undefined
|
|||
|
|
anchors.leftMargin: fTableRoot.spacing * 0.5
|
|||
|
|
anchors.horizontalCenter: isLeft? undefined : parent.horizontalCenter
|
|||
|
|
verticalAlignment: Text.AlignVCenter // 垂直居中
|
|||
|
|
font.pixelSize: size_.smallText
|
|||
|
|
color: (columnKey != "state"|| typeof rowModel.state != "string" || rowModel.state.length == 0) ? theme.subTextColor :
|
|||
|
|
(rowModel.state.startsWith("×") ? theme.noColor : (rowModel.state.startsWith("√") ? theme.yesColor : theme.subTextColor))
|
|||
|
|
text: header.display ? header.display(rowModel[columnKey]) : rowModel[columnKey]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 滚动条
|
|||
|
|
ScrollBar.vertical: ScrollBar { }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 内圆角裁切
|
|||
|
|
layer.enabled: true
|
|||
|
|
layer.effect: OpacityMask {
|
|||
|
|
maskSource: Rectangle {
|
|||
|
|
width: tableContainer.width
|
|||
|
|
height: tableContainer.height
|
|||
|
|
radius: size_.btnRadius
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 文件选择对话框
|
|||
|
|
// QT-5.15.2 会报错：“Model size of -225 is less than 0”，不影响使用。
|
|||
|
|
// QT-5.15.5 修复了这个Bug，但是PySide2尚未更新到这个版本号。只能先忍忍了
|
|||
|
|
// https://bugreports.qt.io/browse/QTBUG-92444
|
|||
|
|
FileDialog_ {
|
|||
|
|
id: fileDialog
|
|||
|
|
title: fileDialogTitle
|
|||
|
|
nameFilters: fileDialogNameFilters
|
|||
|
|
folder: shortcuts.pictures
|
|||
|
|
selectMultiple: true // 多选
|
|||
|
|
onAccepted: {
|
|||
|
|
addPaths(fileDialog.fileUrls_)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|