武易高速，增删改查(qml)

我的增删改查功能分布是左边一个rectangle，放置增删改的功能，右边一个rectangle，放置查的功能

增删改查需要前端和后端同时进行，前端负责客户端，后端负责把后台的数据传递给前端

1.增加

探测装置的属性有①桩号②地点③编号④类别⑤运行状态⑥安装时间

            // 添加设备表单
            Rectangle {
                width: parent.width
                height: 50
                color: "lightgray"

                TextField {
                    id: stationInput
                    x:0
                    width: parent.width / 6 - 10
                    placeholderText: "桩号"
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: locationInput
                    x:(parent.width / 6 - 10)*1
                    width: parent.width / 6 - 10
                    placeholderText: "地点"
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: numberInput
                    x:(parent.width / 6 - 10)*2
                    width: parent.width / 6 - 10
                    placeholderText: "编号"
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: categoryInput
                    x:(parent.width / 6 - 10)*3
                    width: parent.width / 6 - 10
                    placeholderText: "类别"
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: statusInput
                    x:(parent.width / 6 - 10)*4
                    width: parent.width / 6 - 10
                    placeholderText: "运行状态"
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: installationDateInput
                    x:(parent.width / 6 - 10)*5
                    width: parent.width / 6 - 10
                    placeholderText: "安装时间"
                    height: 30
                    font.pixelSize: 20
                }

                Button {
                    text: "添加设备"
                    font.pixelSize: 18
                    x:800
                    width: 85
                    height:40
                    anchors.right: parent.right
                    anchors.rightMargin: 10//stationInput,locationInput,numberInput,categoryInput,statusInput,installationDateInput
                    onClicked: {
                        if (stationInput.text !== "" && locationInput.text !== ""&& numberInput.text !== ""&& categoryInput.text !== ""&& statusInput.text !== ""&& installationDateInput.text !== "") {
                            deviceModel.append({station: stationInput.text, location: locationInput.text, number: numberInput.text, category: categoryInput.text, status: statusInput.text, installationDate: installationDateInput.text});
                            deviceManager.addDevice(stationInput.text, locationInput.text, numberInput.text, categoryInput.text, statusInput.text, installationDateInput.text);
                            stationInput.text = "";
                            locationInput.text = "";
                            numberInput.text = "";
                            categoryInput.text = "";
                            statusInput.text = "";
                            installationDateInput.text = "";
                        }
                    }
                }
            }

2.修改

            // 修改设备表单
            Rectangle {
                width: parent.width
                height: 50
                color: "lightgray"
                anchors.top: parent.top
                anchors.topMargin: 60

                TextField {
                    id: editStationInput
                    x:0
                    width: parent.width / 6 - 10
                    placeholderText: "桩号"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: editLocationInput
                    x:(parent.width / 6 - 10)*1
                    width: parent.width / 6 - 10
                    placeholderText: "地点"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: editNumberInput
                    x:(parent.width / 6 - 10)*2
                    width: parent.width / 6 - 10
                    placeholderText: "编号"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: editCategoryInput
                    x:(parent.width / 6 - 10)*3
                    width: parent.width / 6 - 10
                    placeholderText: "类别"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: editStatusInput
                    x:(parent.width / 6 - 10)*4
                    width: parent.width / 6 - 10
                    placeholderText: "运行状态"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: editInstallationDateInput
                    x:(parent.width / 6 - 10)*5
                    width: parent.width / 6 - 10
                    placeholderText: "安装时间"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                Button {
                    text: "修改设备"
                    font.pixelSize: 18
                    width: 85
                    height:40
                    anchors.right: parent.right
                    anchors.rightMargin: 10//stationInput,locationInput,numberInput,categoryInput,statusInput,installationDateInput
                    onClicked: {//editStationInput,editLocationInput,editNumberInput,editCategoryInput,editStatusInput,editInstallationDateInput
                        if (selectedIndex >= 0 && selectedIndex < deviceModel.count) {
                            deviceModel.set(selectedIndex, {"station": editStationInput.text, "location": editLocationInput.text, "number": editNumberInput.text, "category": editCategoryInput.text, "status": editStatusInput.text, "installationDate": editInstallationDateInput.text});
                            deviceManager.updateDevice(selectedIndex, editStationInput.text, editLocationInput.text, editNumberInput.text, editCategoryInput.text, editStatusInput.text, editInstallationDateInput.text);
                            editStationInput.text = "";
                            editLocationInput.text = "";
                            editNumberInput.text = "";
                            editCategoryInput.text = "";
                            editStatusInput.text = "";
                            editInstallationDateInput.text = "";
                            selectedIndex = -1;  // 取消选中
                        }
                    }
                }
            }

3.删除

            // 删除设备表单
            Rectangle {
                width: parent.width
                height: 50
                color: "lightgray"
                anchors.top: parent.top
                anchors.topMargin: 120

                TextField {
                    id: removeStationInput
                    x:0
                    width: parent.width / 6 - 10
                    placeholderText: "桩号"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: removeLocationInput
                    x:(parent.width / 6 - 10)*1
                    width: parent.width / 6 - 10
                    placeholderText: "地点"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: removeNumberInput
                    x:(parent.width / 6 - 10)*2
                    width: parent.width / 6 - 10
                    placeholderText: "编号"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: removeCategoryInput
                    x:(parent.width / 6 - 10)*3
                    width: parent.width / 6 - 10
                    placeholderText: "类别"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: removeStatusInput
                    x:(parent.width / 6 - 10)*4
                    width: parent.width / 6 - 10
                    placeholderText: "运行状态"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                TextField {
                    id: removeInstallationDateInput
                    x:(parent.width / 6 - 10)*5
                    width: parent.width / 6 - 10
                    placeholderText: "安装时间"
                    text: selectedIndex >= 0 ? deviceModel.get(selectedIndex).title : ""
                    height: 30
                    font.pixelSize: 20
                }

                Button {
                    text: "删除设备"
                    font.pixelSize: 18
                    width: 85
                    height:40
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    onClicked: {
                        if (selectedIndex >= 0 && selectedIndex < deviceModel.count) {
                            deviceManager.removeDevice(selectedIndex); // 调用 removeDevice 方法删除选中的设备
                            deviceModel.remove(selectedIndex); // 从模型中删除该设备
                            removeStationInput.text = "";
                            removeLocationInput.text = "";
                            removeNumberInput.text = "";
                            removeCategoryInput.text = "";
                            removeStatusInput.text = "";
                            removeInstallationDateInput.text = "";
                            selectedIndex = -1; // 取消选中
                        }
                    }
                }
            }

4.左侧面板的数据展示

            // 展示设备列表
            ListView {
                anchors.top: parent.top
                anchors.topMargin: 180
                anchors.fill: parent

                model: deviceModel

                // 添加表头
                header: Row {
                    width: parent.width
                    height: 40
                    spacing: 0

                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "桩号"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }

                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "地点"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "编号"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "类别"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "运行状态"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "安装时间"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                }

                delegate: Rectangle {
                    width: parent.width
                    height: 60

                    Row {
                        anchors.fill: parent
                        spacing: 10

                        Rectangle {//station,location,number,category,status,installationDate
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.station//有
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }

                        Rectangle {
                            x: (parent.width / 6)*1
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.location
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }

                        Rectangle {
                            x: (parent.width / 6)*2
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.number
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*3
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.category//有
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*4
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.status
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*5
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.installationDate
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }

                        MouseArea {
                            anchors.fill: parent//editStationInput,editLocationInput,editNumberInput,editCategoryInput,editStatusInput,editInstallationDateInput
                            onClicked: {//station,location,number,category,status,installationDate
                                selectedIndex = index;
                                editStationInput.text = model.station;
                                editLocationInput.text = model.location;
                                editNumberInput.text = model.number;
                                editCategoryInput.text = model.category;
                                editStatusInput.text = model.status;
                                editInstallationDateInput.text = model.installationDate;
                                removeStationInput.text = model.station;
                                removeLocationInput.text = model.location;
                                removeNumberInput.text = model.number;
                                removeCategoryInput.text = model.category;
                                removeStatusInput.text = model.status;
                                removeInstallationDateInput.text = model.installationDate;
                            }
                        }
                    }
                }
            }

5.查找

        // 右侧搜索面板
        Rectangle {
            width: 900
            height: parent.height

            Image {

                source: "images/wallpaper5.jpg"
                anchors.fill: parent
            }

            // 搜索框和按钮
            Rectangle {
                width: parent.width
                height: 50
                color: "lightgray"

                TextField {
                    id: searchInput
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    width: parent.width
                    height: parent.height
                    placeholderText: "搜索设备编号"
                    font.pixelSize: 20
                }

                Button {
                    text: "搜索"
                    font.pixelSize: 18
                    width: 85
                    height:40
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    onClicked: {
                        var searchTerm = searchInput.text.trim().toLowerCase();
                        searchResultsModel.clear();
                        for (var i = 0; i < deviceModel.count; ++i) {
                            var device = deviceModel.get(i);
                            if (device.number.toLowerCase().indexOf(searchTerm) !== -1) {
                                searchResultsModel.append(device);
                            }
                        }
                    }
                }
            }

            // 展示搜索结果的设备列表
            ListView {
                anchors.top: parent.top
                anchors.topMargin: 60
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                model: searchResultsModel

                // 添加表头
                header: Row {
                    width: parent.width
                    height: 40
                    spacing: 0

                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "桩号"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }

                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "地点"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "编号"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "类别"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "运行状态"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }
                    Rectangle {
                        width: parent.width / 6
                        height: parent.height
                        border.color: "black"
                        Text {
                            text: "安装时间"
                            anchors.centerIn: parent
                            font.pixelSize: 20
                        }
                    }

                }

                delegate: Rectangle {
                    width: parent.width
                    height: 60
                    //color: index % 2 === 0 ? "lightgray" : "white"

                    Row {
                        anchors.fill: parent
                        spacing: 0

                        Rectangle {//station,location,number,category,status,installationDate
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.station//有
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }

                        Rectangle {
                            x: (parent.width / 6)*1
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.location
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }

                        Rectangle {
                            x: (parent.width / 6)*2
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.number
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*3
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.category//有
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*4
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.status
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                        Rectangle {
                            x: (parent.width / 6)*5
                            width: parent.width / 6
                            height: parent.height / 1.5
                            border.color: "gray"
                            Text {
                                text: model.installationDate
                                anchors.centerIn: parent
                                font.pixelSize: 20
                            }
                        }
                    }
                }
            }
        }

6.后端，这是探测器的类

class DeviceManager : public QObject
{
    Q_OBJECT
public:
    explicit DeviceManager(QObject *parent = nullptr) : QObject(parent) {
        m_devices = loadDevices();
    }

    Q_INVOKABLE void addDevice(const QString &station, const QString &location, const QString &number, const QString &category, const QString &status, const QString &installationDate) {
        QVariantMap device;
        device["station"] = station;
        device["location"] = location;
        device["number"] = number;
        device["category"] = category;
        device["status"] = status;
        device["installationDate"] = installationDate;
        m_devices.append(device);
        saveDevices(m_devices);
    }

    Q_INVOKABLE void removeDevice(int index) {
        if (index >= 0 && index < m_devices.size()) {
            m_devices.removeAt(index); // 从列表中删除指定索引的设备
            saveDevices(m_devices); // 保存修改后的设备列表到文件中
        } else {
            qDebug() << "Invalid index for removeDevice:" << index;
        }
    }

    Q_INVOKABLE void updateDevice(int index, const QString &station, const QString &location, const QString &number, const QString &category, const QString &status, const QString &installationDate) {
        if (index >= 0 && index < m_devices.size()) {
            QVariantMap device = m_devices[index].toMap(); // 拷贝设备信息
            device["station"] = station; // 修改拷贝中的信息
            device["location"] = location;
            device["number"] = number;
            device["category"] = category;
            device["status"] = status;
            device["installationDate"] = installationDate;
            m_devices[index] = device; // 将修改后的拷贝赋值回原设备列表中的对应项
            saveDevices(m_devices);
        } else {
            qDebug() << "Invalid index for updateDevice:" << index;
        }
    }

    Q_INVOKABLE QVariantList getDevices() {
        return m_devices;
    }

private:
    QVariantList m_devices;

    void saveDevices(const QVariantList& devices) {
        QFile file("devices.txt");
        if (file.open(QIODevice::WriteOnly | QIODevice::Text)) {
            QTextStream out(&file);
            for (const QVariant &device : devices) {
                QVariantMap deviceMap = device.toMap();
                out << deviceMap["station"].toString() << ","
                    << deviceMap["location"].toString() << ","
                    << deviceMap["number"].toString() << ","
                    << deviceMap["category"].toString() << ","
                    << deviceMap["status"].toString() << ","
                    << deviceMap["installationDate"].toString() << "\n";
            }
            file.close();
        } else {
            qDebug() << "Failed to open file for writing";
        }
    }

    QVariantList loadDevices() {
        QVariantList devices;
        QFile file("devices.txt");
        if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
            QTextStream in(&file);
            while (!in.atEnd()) {
                QString line = in.readLine();
                QStringList fields = line.split(",");
                if (fields.size() == 6) {
                    QVariantMap device;
                    device["station"] = fields.at(0);
                    device["location"] = fields.at(1);
                    device["number"] = fields.at(2);
                    device["category"] = fields.at(3);
                    device["status"] = fields.at(4);
                    device["installationDate"] = fields.at(5);
                    devices.append(device);
                }
            }
            file.close();
        } else {
            qDebug() << "Failed to open file for reading";
        }
        return devices;
    }
};