performance-test/src/views/etl/compile copy.vue

<template>
  <div class="global-variable">
    <div class="parcel">
      <div class="controlling">
        <div class="hade">
          <p>
            执行器组名称：<el-input v-model="zxqName" size="small"></el-input>
          </p>
          <el-button size="small" type="text" @click="addGroup"
            >添加执行器</el-button
          >
        </div>

        <div
          class="group"
          v-for="(group, groupIndex) in groups"
          :key="groupIndex"
          @click="changeCurrentGroup(groupIndex)"
        >
          <p class="SP1">
            <span>
              执行器{{ groupIndex + 1 }}
              <el-input
                style="margin: 0 10px"
                size="small"
                v-model="group.inputValue"
              ></el-input>
              <el-button size="small" type="text" @click="dialogVisible = true">
                上传附件
              </el-button>
            </span>
          </p>

          <div
            v-for="(table, tableIndex) in group.tables"
            :key="tableIndex"
            class="table-container"
          >
            <div>
              <el-button
                size="small"
                type="text"
                @click="ondel(groupIndex, tableIndex)"
              >
                删除
              </el-button>
            </div>
            <el-table
              :data="table.data"
              border
              style="width: 100%"
              tooltip-effect="dark"
              ref="multipleTable"
              @selection-change="
                handleSelectionChange($event, groupIndex, tableIndex)
              "
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                v-for="(key, colIndex) in table.columnKeys"
                :key="colIndex"
                :label="'Item ' + (parseInt(key) + 1)"
                :prop="key.toString()"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="database">
        <el-tabs type="border-card">
          <!-- 动态生成标签页 -->
          <el-tab-pane
            v-for="(group, groupIndex) in groups"
            :key="groupIndex"
            :label="'执行器组 ' + (groupIndex + 1)"
          >
            <div class="pair">
              <p v-for="(item, index) in modelList" :key="index">
                <span>{{ item.name }}</span>
                <el-select
                  size="small"
                  v-model="item.val"
                  multiple
                  collapse-tags
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in selectoptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </p>
            </div>

            <div class="combination">
              <p>添加数据字段</p>
              <div class="search">
                <el-input size="small" v-model="field"></el-input>
                <el-button size="small" type="text" @click="newVisible = true"
                  >自定义</el-button
                >
              </div>
              
              <el-checkbox-group v-model="checkList" @change="duoxuan" class="repetition">
                <el-checkbox
                  v-for="(item, index) in checkOptions"
                  :key="index"
                  :label="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
   
          </el-tab-pane>
        </el-tabs>
        <el-button class="fixed-button" type="primary" > 保存 </el-button>
      </div>

      <!-- 弹窗 -->
      <el-dialog
        title="上传"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="上传附件：">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button @click="onUpload" size="small">上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="是否有列名：">
            <el-radio-group v-model="form.resource">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="列名所在行：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="范围最小值：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="范围最大值：">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog
        title="新增"
        :visible.sync="newVisible"
        width="15%"
        :before-close="handleClose"
      >
        <div>
          <i class="el-icon-plus" @click="addInput"></i>
          <i
            class="el-icon-minus"
            @click="removeInput(index)"
            v-if="inputList.length > 1"
          ></i>
        </div>
        <div
          v-for="(item, index) in inputList"
          :key="index"
          class="input-group"
        >
          <el-input
            size="small"
            v-model="item.value"
            placeholder="请输入"
            style="margin-bottom: 10px"
          ></el-input>

          <!-- 加号按钮 -->
        </div>
        <div style="display: flex; justify-content: center">
          <el-button size="small" type="primary" @click="confirm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      newVisible: false,
      zxqName: "",
      tableData: [
        { 0: "2023-12-01", 1: "2023-12-02", 2: "2023-12-03", 3: "2023-12-04" },
        { 0: "2023-12-01", 1: "2023-12-02", 2: "2023-12-03", 3: "2023-12-04" },
        { 0: "2023-12-01", 1: "2023-12-02", 2: "2023-12-03", 3: "2023-12-04" },
      ],
      columnKeys: [],
      form: {},
      fileList: [],
      tables: [],
      groups: [
        {
          inputValue: "", // 输入框默认值
          tables: [
            {
              columnKeys: ["0", "1", "2", "3"], // 默认的列
              data: [
                {
                  0: "2023-12-01",
                  1: "2023-12-02",
                  2: "2023-12-03",
                  3: "2023-12-04",
                },
                {
                  0: "2023-12-05",
                  1: "2023-12-06",
                  2: "2023-12-07",
                  3: "2023-12-08",
                },
                {
                  0: "2023-12-09",
                  1: "2023-12-10",
                  2: "2023-12-11",
                  3: "2023-12-12",
                },
              ],
            },
          ],
        },
      ],
      currentGroupIndex: 0, // 当前操作的执行器索引
      selectoptions: [],
      selectvalue: [],
      field: "",
      checkList: [],
      multipleSelection: [],
      checkOptions: [], // 循环的选项
      modelList: [
        { name: "模板1", val: [] },
        { name: "模板2", val: [] },

      ],
      inputList: [
        { value: "" }, // 默认有一个输入框
      ],
    };
  },
  watch: {
    // 监听 checkList 数组的变化，并更新 selectOptions
    // checkList(newValue) {
    //   this.selectOptions = [...newValue]; // 将选中的复选框值复制到 selectOptions
    // },
  },
  mounted() {
    if (this.tableData.length > 0) {
      this.columnKeys = Object.keys(this.tableData[0]); // 动态提取列名
    }
  },
  methods: {
    // 获取默认表格模板
    getDefaultTable() {
      return {
        columnKeys: ["0", "1", "2", "3"],
        data: [
          {
            0: "2023-12-01",
            1: "2023-12-02",
            2: "2023-12-03",
            3: "2023-12-04",
          },
          {
            0: "2023-12-05",
            1: "2023-12-06",
            2: "2023-12-07",
            3: "2023-12-08",
          },
          {
            0: "2023-12-09",
            1: "2023-12-10",
            2: "2023-12-11",
            3: "2023-12-12",
          },
        ],
      };
    },

    // 上传操作
    onUpload() {
      this.dialogVisible = true;
    },

    // 仅在当前 group 下新增表格
    onSubmit() {
      const newTable = {
        columnKeys: ["0", "1", "2", "3"], // 默认列
        data: [
          {
            0: "2023-12-01",
            1: "2023-12-02",
            2: "2023-12-03",
            3: "2023-12-04",
          },
          {
            0: "2023-12-01",
            1: "2023-12-02",
            2: "2023-12-03",
            3: "2023-12-04",
          },
          {
            0: "2023-12-01",
            1: "2023-12-02",
            2: "2023-12-03",
            3: "2023-12-04",
          },
        ],
      };

      // 只在当前 group 的 tables 数组中新增表格
      this.groups[this.currentGroupIndex].tables.push(newTable);

      console.log("新增后的 groups 数据：", this.groups);
      this.dialogVisible = false;
    },

    // 切换当前 group
    changeCurrentGroup(groupIndex) {
      this.currentGroupIndex = groupIndex;
    },

    // 删除表格
    ondel(groupIndex, tableIndex) {
      this.groups[groupIndex].tables.splice(tableIndex, 1);
    },

    // 新增执行器组
    addGroup() {
      this.groups.push({
        inputValue: "",
        tables: [this.getDefaultTable()],
      });
    },

    handleSelectionChange(val, groupIndex, tableIndex) {
      const currentTable = this.groups[groupIndex].tables[tableIndex]; // 获取当前表格
      // 提取每行所有字段的值（不管字段名是什么）
      currentTable.selectedValues = val.flatMap((item) => Object.values(item)); // 获取每一行的所有值

      // 计算新增和移除的选项
      const added = currentTable.selectedValues.filter(
        (item) =>
          !this.checkOptions.includes(item) &&
          !this.inputList.some((input) => input.value === item) // 排除掉 confirm 添加的值
      );

      const removed = this.checkOptions.filter(
        (item) =>
          !currentTable.selectedValues.includes(item) &&
          !this.inputList.some((input) => input.value === item) // 排除掉 confirm 添加的值
      );

      // 更新 checkOptions
      if (added.length) {
        this.checkOptions.push(...added);
      }
      if (removed.length) {
        this.checkOptions = this.checkOptions.filter(
          (item) => !removed.includes(item)
        );
      }

      // 重新计算 checkOptions，包含所有选中行的所有字段值
      this.checkOptions = this.groups
        .flatMap((group) => group.tables) // 遍历所有组的所有表格
        .flatMap((table) => table.selectedValues || []); // 合并所有表格的选中行的字段值
    },
    duoxuan(val) {
      console.log(val);

      this.selectoptions = val;
    },

    addInput() {
      this.$set(this.inputList, this.inputList.length, { value: "" });
    },
    // 删除指定的输入框
    removeInput(index) {
      if (this.inputList.length > 1) {
        this.inputList.splice(index, 1); // 从 inputList 中删除指定的输入框
      }
    },
    confirm() {
      this.newVisible = false;
      this.inputList.forEach((item) => {
        if (item.value) {
          // 如果有值才添加
          this.checkOptions.push(item.value);
        }
      });
      console.log(this.selectoptions);
    },

    handleClose(done) {
      done();
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handlePreview(file) {
      console.log(file);
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>


<style lang="scss" scoped>
.parcel {
  display: flex;
  justify-content: space-between;
  .controlling {
    .hade {
      display: flex;
      justify-content: space-between;
    }
    .SP1 {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    width: 75.5%;
    height: 760px;
    overflow: hidden;
    overflow-y: auto;
   
    // border: 1px solid #aaaaaa;
    padding: 10px;
  }
  .database {

    width: 24%;

    // border: 1px solid #aaaaaa;
  }
}

.el-input {
  width: 200px;
}

.pair {
  height: 350px;
  overflow: hidden;
  overflow: auto;
  p {
    margin-bottom: 10px;
    display: flex;
    span {
      display: inline-block;
      width: 150px;
    }
    .el-select {
      width: 180px;
    }
  }
}
.pair::-webkit-scrollbar {
  display: none;
}
.repetition {
  height: 240px;
  overflow: hidden;
  overflow: auto;
}
.repetition::-webkit-scrollbar {
  display: none;
}
.fixed-button {

  width: 100%;
}

.el-checkbox {
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>