performance-test/src/views/performance/components/custonAsCom/dataTable.vue

<!--
 * @Author: your name
 * @Date: 2024-10-28 16:46:38
 * @LastEditTime: 2024-12-26 09:13:11
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dataTable.vue
-->
<template>
  <div class="global-variable" v-loading="loading">
    <el-tabs
      v-if="tabData.length > 0"
      v-model="activeName"
      @tab-click="handleClick"
      closable
      @tab-remove="removeTab"
      class="tabsBox"
    >
      <template v-for="(tabItem, ind) in tabData">
        <el-tab-pane
          :label="tabItem.filename"
          :name="String(tabItem.fileId)"
          :key="tabItem.fileData + ind + 'tabPane'"
        >
          <el-row
            type="flex"
            class="row-bg"
            justify="end"
            :key="tabItem.filename + ind + 'row'"
          >
            <el-button type="primary" @click="handleEditTable(tabItem.fileId)">
              编辑
            </el-button>
          </el-row>
          <template v-if="tabItem.fileData && tabItem.fileData.length > 0">
            <el-table
              :data="tabItem.fileData"
              border
              height="600"
              style="width: 100%"
              :key="ind + tabItem.fileData"
            >
              <el-table-column
                :width="
                  Object.keys(tabItem.fileData[0]).length > 6 ? 200 : null
                "
                v-for="(tableTitle, index) in Object.keys(tabItem.fileData[0])"
                :key="index + 'title'"
                :prop="tableTitle"
                :label="tableTitle"
              >
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <el-empty :image-size="200" description="数据正在计算"></el-empty>
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>
<script>
import {
  getDataFromIndexedDB,
  checkObjectStoreExists,
} from "@/utils/indexedDb";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "",
      tabData: [],
      tableData: [],
      loading: true,
    };
  },
  // computed: {
  //   ...mapState("dragChart", {
  //     triggerGetData: "triggerGetData",
  //   }),
  // },
  // watch: {
  //   triggerGetData: function (newVal) {
  //     if (newVal) {
  //       console.log(newVal, "newVal dataTable");
  //       this.setTriggerGetData(false);
  //       this.getIndexDbData();
  //       // 重置 triggerGetData 状态为 false
  //     }
  //   },
  // },
  mounted() {
    //判断indexedDb中是否存在这个数据表
    checkObjectStoreExists("FileDataDB", "files")
      .then((exists) => {
        if (exists) {
          console.log("对象存储 'files' 存在！");
          this.getIndexDbData();
        } else {
          this.loading = false;
          console.log("对象存储 'files' 不存在！");
        }
      })
      .catch((error) => {
        console.error("检查对象存储时出错:", error);
      });
  },
  methods: {
    ...mapMutations("dragChart", [
      "setTriggerGetData",
      "setUpdateTriggerGetData",
    ]),
    async getIndexDbData() {
      this.loading = true;
      const jsonData = await getDataFromIndexedDB();
      this.tabData = jsonData;
      this.activeName = jsonData && jsonData[0] && String(jsonData[0].fileId);
      this.loading = false;
    },

    // 删除 tab 方法
    removeTab(targetName) {
      // 1. 在 tabData 中删除对应的 tab
      const index = this.tabData.findIndex((tab) => tab.fileId === targetName);
      console.log(this.tabData, targetName, "targetName");
      if (index !== -1) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 删除 tabData 中的对应项
            const data = this.tabData;
            const removedTab = data.splice(index, 1)[0]; // 获取被删除的 tab 数据
            // 2. 更新 IndexedDB
            this.updateDataInIndexedDB(removedTab);

            // 3. 触发需要更新的状态
            this.setTriggerGetData(true);
            this.setUpdateTriggerGetData(true);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },

    async updateDataInIndexedDB(removedTab) {
      try {
        const db = await this.openIndexedDB(); // 打开 IndexedDB

        // 创建事务，指定操作对象存储空间
        const transaction = db.transaction(["files"], "readwrite");
        const store = transaction.objectStore("files");
        // 使用 getAll 获取所有数据
        const getRequest = store.getAll();
        getRequest.onsuccess = () => {
          const data = getRequest.result;
          console.log(data, "所有数据");

          // 假设文件数据在 data[0].data 中
          let updatedData = data[0]?.data || [];

          // 从数据中移除被删除的 tab 数据
          updatedData = updatedData.filter(
            (item) => item.fileId !== removedTab.fileId
          );

          // 更新存储的数据（这里假设数据存储在 id 为 "fileDataArray" 的键下）
          const putRequest = store.put({
            id: "fileDataArray", // 使用 "fileDataArray" 作为 id
            data: updatedData,
          });

          putRequest.onsuccess = () => {
            console.log("Updated data successfully in IndexedDB");
          };

          putRequest.onerror = (event) => {
            console.error(
              "Error updating data in IndexedDB:",
              event.target.error
            );
          };
        };

        getRequest.onerror = (event) => {
          console.error(
            "Error retrieving data from IndexedDB:",
            event.target.error
          );
        };
      } catch (error) {
        console.error("Failed to update data in IndexedDB:", error);
      }
    },

    // 打开 IndexedDB 数据库
    openIndexedDB() {
      return new Promise((resolve, reject) => {
        const request = indexedDB.open("FileDataDB");
        request.onsuccess = (event) => {
          resolve(event.target.result);
        };
        request.onerror = (event) => {
          reject(event.target.error);
        };
      });
    },
    handleClick(tab, event) {},
    handleEditTable(id) {
      this.$router.push({
        path: "/home/performance/luckySheet",
        query: { id },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.global-variable {
  .tabsBox {
    margin: 0 15px;
    ::v-deep .el-tabs__item {
      padding: 0 20px !important;
    }
    .row-bg {
      margin-bottom: 10px;
    }
  }
}
</style>