saber/src/views/manager/wbsinfo/checkDetailEle.vue

<template>

<el-dialog
    title="选择元素表"
      :visible.sync="dialogVisible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="flex mg-b-10">
        <el-input
          v-model="formulaInput"
          placeholder="请输入名称"
          size="samll" clearable 
        ></el-input>
        <el-button type="primary" class="mg-l-10" @click="searchFormulaName">搜索</el-button>
      </div>
        <el-table
        :data="editEleListFilter"
        border
        style="width: 100%"
        height="400px"
      >
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link v-if="!scope.row.select" @click="selectElement(scope.row,scope.$index)"
              type="primary"
              >选择</el-link
            >
            <el-link
           @click="canlSelect(scope.row,scope.$index)"
              v-else
              type="danger"
              >取消选择</el-link
            >
          
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </span>
    </el-dialog>
</template>
<script>
import {getTableElments} from "@/api/manager/wbstree";
import { log } from "@antv/g2plot/lib/utils";
export default {
  data() {
    return {
      dialogVisible: false,
      formulaInput:'',
      editEleListFilter:[],
      editEleListAll:[],
      selectedDataValue:[]
 

     
    };
  },
  methods: {
    show(id,selectedData) {
      this.dialogVisible = true;
      this.selectedDataValue = selectedData;
        console.log(this.selectedDataValue,'this.selectedDataValue');
        
      getTableElments(id).then((res) => {
        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
        this.updateSelectStatus();
      })
      
    },
    updateSelectStatus() {
      const selectedIds = new Set(this.selectedDataValue.map(item => item.id));
      this.editEleListFilter.forEach(item => {
        if (selectedIds.has(item.id)) {
          // item.select = true;
          this.$set(item, 'select', true)
        }
      });
    },
         //搜索 筛选
    searchFormulaName(){
      this.editEleListFilter = this.editEleListAll.filter((ele)=>{
        return ele.eName.indexOf(this.formulaInput) > -1;
      })
    },

    selectElement(row,index){
        // row.select =true
        this.$set(row, "select", true)
        console.log(row,'row');
        
    },
    canlSelect(row,index){
      this.$set(row, "select", false)
   
    },
/**
 * 确认用户选择的操作，并将选中的数据传递给父组件
 */
confirmSelection() {
     // 过滤出 select 为 true 的数据
     const selectedData = this.editEleListFilter.filter(item => item.select === true);
     const combinedData = [...this.selectedDataValue, ...selectedData];
    // 使用 Map 来过滤掉重复的 id
    const uniqueData = Array.from(new Map(combinedData.map(item => [item.id, item])).values());
    // 触发事件将选中的数据传递给父组件
    this.$emit('confirm-selection', uniqueData);
    this.dialogVisible = false;
 
  }
}
}
</script>