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

<template>
  <div class="global-variable">
    <el-row type="flex" class="row-bg" justify="end">
      <el-button type="primary" @click="handleDrawer">新建关联</el-button>
    </el-row>
    <el-table
      height="600"
      :data="relatedFieldsData || []"
      border
      style="width: 100%"
    >
      <el-table-column prop="tableFileName1" label="关联表1"> </el-table-column>
      <el-table-column prop="tableFileName2" label="关联表2"> </el-table-column>
      <el-table-column prop="tableFileName1" label="表1关联字段" align="center">
        <template slot-scope="scope">
          <div v-for="(item, ind) in scope.row.relatedFields?.formSelection1">
            <span style="display: inline-block">{{ item.label }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="" align="center">
        <template slot-scope="scope">
          <i
            style="font-size: 24px; color: #ffc107"
            class="el-icon-connection"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="tableFileName2" label="表2关联字段" align="center">
        <template slot-scope="scope">
          <div v-for="(item, ind) in scope.row.relatedFields?.formSelection2">
            <span>{{ item.label }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="新建关联"
      :visible.sync="drawer"
      direction="rtl"
      width="50%"
      :before-close="handleClose"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="
              formSelection1.push({ label: '', fileData: [], id: '' });
              formSelection2.push({ label: '', fileData: [], id: '' });
            "
            >添加关联字段</el-button
          >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="关联表名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="flexs">
          <div class="flexsCenter">
            <div style="color: #928c8c; margin: 0 0 10px 0">关联表1</div>
            <el-select
              v-model="dataChart1"
              placeholder="请选择"
              @change="handleSelectData1"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <template v-for="(item, ind) in formSelection1">
              <el-select
                style="margin: 5px 0"
                :key="ind + 'select'"
                v-model="formSelection1[ind].id"
                placeholder="请先进行数据配置"
              >
                <el-option
                  v-for="item in tableDataChart1"
                  :label="item.label"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div class="flexsCenter">
            <div style="color: #928c8c; margin: 0 0 10px 0">关联表2</div>
            <el-select
              v-model="dataChart2"
              placeholder="请选择"
              @change="handleSelectData2"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <template v-for="(item, ind) in formSelection2">
              <el-select
                style="margin: 5px 0"
                :key="ind + 'select'"
                v-model="formSelection2[ind].id"
                placeholder="请先进行数据配置"
              >
                <el-option
                  v-for="item in tableDataChart2"
                  :label="item.label"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </template>
          </div>
        </div>
      </el-card>
      <el-row type="flex" class="row-bg" justify="center">
        <el-button
          type="primary"
          @click="submitAssociated('ruleForm')"
          style="width: 200px"
          >确定关联</el-button
        >
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
import {
  getDataFromIndexedDB,
  checkObjectStoreExists,
  storeSetData,
  initDatabase,
} from "@/utils/indexedDb";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入表名称", trigger: "blur" }],
      },
      drawer: false,
      options: [],
      dataChart1: [],
      dataChart2: [],
      tableFileName1: "",
      tableFileName2: "",
      formSelection1: [{ label: "", fileData: [], id: "" }],
      formSelection2: [{ label: "", fileData: [], id: "" }],
      tableDataChart1: [],
      tableDataChart2: [],
    };
  },
  computed: {
    ...mapState("dragChart", {
      relatedFieldsData: "relatedFieldsData",
    }),
  },
  methods: {
    ...mapMutations("dragChart", [
      "setRelatedFieldsData",
      "setTriggerGetData",
      "setUpdateTriggerGetData",
    ]),
    async saveDatas(data) {
      await initDatabase()
        .then((database) => {
          // 调用 storeSetData 方法
          let fileData = {
            filename: this.ruleForm.name + "关联表",
            fileData: data,
            fileOldName: this.ruleForm.name + "关联表",
            fileId:
              new Date().getTime() + "_" + Math.floor(Math.random() * 1000),
          };
          storeSetData(database, "files", "fileDataArray", fileData, () => {
            this.setRelatedFieldsData({
              tableFileName1: this.tableFileName1,
              tableFileName2: this.tableFileName2,
              relatedFields: {
                formSelection1: this.formSelection1,
                formSelection2: this.formSelection2,
              },
            });
            this.setTriggerGetData(true);
            this.setUpdateTriggerGetData(true);
            this.ruleForm.name = "";
            this.formSelection1 = [{ label: "", fileData: [], id: "" }];
            this.formSelection2 = [{ label: "", fileData: [], id: "" }];
            this.drawer = false;
            this.$message({
              type: "success",
              message: `关联完成，关联表可在数据表格中查看。`,
            });
          });
        })
        .catch((error) => {
          console.error("数据库初始化失败，无法继续存储数据。", error);
        });
    },
    filterDataRecursively(filterNodeData, ind) {
      if (ind >= this.formSelection2.length) {
        // 终止条件：当 ind 超过 formSelection2 长度时，返回当前的 filterNodeData
        return filterNodeData;
      }
      const data = [];
      filterNodeData.forEach((fileData1) => {
        const result = this.formSelection2[ind].fileData.find((fileData2) => {
          return (
            fileData1[this.formSelection1[ind].label] !== undefined &&
            fileData2[this.formSelection2[ind].label] !== undefined &&
            fileData1[this.formSelection1[ind].label] + "" ===
              fileData2[this.formSelection2[ind].label] + ""
          );
        });
        if (result) {
          data.push({
            ...fileData1,
            ...result,
          });
        }
      });

      // 递归调用并返回筛选结果
      return this.filterDataRecursively(data, ind + 1);
    },
    submitAssociated(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 初始化表格数据
          this.tableDataChart1.forEach((item) => {
            this.formSelection1.forEach((val) => {
              if (val.id === item.id) {
                val.fileData = item.fileData;
                val.label = item.label;
              }
            });
          });
          this.tableDataChart2.forEach((item) => {
            this.formSelection2.forEach((val) => {
              if (val.id === item.id) {
                val.fileData = item.fileData;
                val.label = item.label;
              }
            });
          });
          if (
            this.formSelection1[0].fileData.length <= 0 ||
            this.formSelection2[0].fileData.length <= 0
          ) {
            this.$message({
              type: "warning",
              message: `至少需要关联1组字段。`,
            });
            return;
          }
          // 初步过滤数据
          let filterNodeData = [];
          this.formSelection1.forEach((fileAttribut1, ind) => {
            fileAttribut1.fileData.forEach((fileData1) => {
              if (ind === 0) {
                const result = this.formSelection2[ind].fileData.find(
                  (fileData2) => {
                    return (
                      fileData1[fileAttribut1.label] !== undefined &&
                      fileData2[this.formSelection2[ind].label] !== undefined &&
                      fileData1[fileAttribut1.label] + "" ===
                        fileData2[this.formSelection2[ind].label] + ""
                    );
                  }
                );
                if (result) {
                  filterNodeData.push({
                    ...fileData1,
                    ...result,
                  });
                }
              }
            });
          });
          // 递归筛选
          filterNodeData = this.filterDataRecursively(filterNodeData, 1);
          this.saveDatas(filterNodeData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // console.log(filterNodeData, "filterNodeData");
    },
    //select 选择
    handleSelectData1() {
      const obj = this.options.find((item) => item.id === this.dataChart1);
      this.tableFileName1 = obj.fileOldName;
      this.tableDataChart1 = obj.children;
      this.formSelection1 = [{ label: "", fileData: [], id: "" }];
    },
    handleSelectData2() {
      const obj = this.options.find((item) => item.id === this.dataChart2);
      this.tableFileName2 = obj.fileOldName;
      this.tableDataChart2 = obj.children;
      this.formSelection2 = [{ label: "", fileData: [], id: "" }];
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async getIndexDbData() {
      const jsonData = await getDataFromIndexedDB();
      this.options = jsonData.map((item) => {
        return {
          label: item.filename,
          fileOldName: item.fileOldName,
          id: item.fileId,
          children: [...Object.keys(item.fileData[0])].map((val) => ({
            label: val,
            id: item.fileId + val,
            fileData: item.fileData,
          })),
        };
      });
    },
    handleDrawer() {
      this.drawer = true;
      //判断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);
        });
    },
  },
};
</script>
<style scoped lang="scss">
// ::v-deep .global-variable {
//   height: 100% !important;
//   overflow: scroll !important;
// }
.row-bg {
  margin: 10px 0;
}
.box-card {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
}
::v-deep .el-drawer {
  width: 50% !important;
}
.flexs {
  display: flex;
  justify-content: space-between;
  .flexsCenter {
    display: flex;
    flex-direction: column;
    ::v-deep .el-input--suffix .el-input__inner {
      width: 250px;
    }
  }
}
</style>