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

<!--
 * @Author: your name
 * @Date: 2024-10-28 16:46:38
 * @LastEditTime: 2024-11-14 15:55:59
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dataTable.vue
-->
<template>
  <div class="dataTableContent" v-loading="loading">
    <el-tabs
      v-if="tabData.length > 0"
      v-model="activeName"
      @tab-click="handleClick"
      class="tabsBox"
    >
      <template v-for="(tabItem, ind) in tabData">
        <el-tab-pane
          :label="tabItem.filename"
          :name="String(tabItem.filename + 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"]),
    async getIndexDbData() {
      // this.loading = true;
      console.log("触发了这个事件");
      const jsonData = await getDataFromIndexedDB();
      this.tabData = jsonData;
      console.log(jsonData, "jsonData dataTable");
      this.activeName =
        jsonData &&
        jsonData[0] &&
        String(jsonData[0].filename + jsonData[0].fileId);
      this.loading = false;
    },
    handleClick(tab, event) {},
    handleEditTable(id) {
      this.$router.push({
        path: "/home/performance/luckySheet",
        query: { id },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.dataTableContent {
  .tabsBox {
    margin: 0 15px;
    ::v-deep .el-tabs__item {
      padding: 0 20px !important;
    }
    .row-bg {
      margin-bottom: 10px;
    }
  }
}
</style>