saber/src/views/codeRule/checkEleHtml.vue

<template>
  <div class="excelHtnl">

    <div
      class="excelBox hc-excel-table-form"
      style="margin-top:40px;height: 100%;"
      @click="parentClick($event)"
    >
      <div style="width:100%;height: 100%;overflow: scroll;" class='parent' id='parent'></div>
      
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import {getExcelHtml} from '@/api/exctab/excelmodel'


export default {
  props: ['pkeyId'],
  data() {
    return {
      selectedElements: [] ,// 存储已选中的元素
      exHtml:''
    }
  },
  watch: {
    pkeyId: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if(newVal) {
          this.exHtml = ''
          this.getExcelHtml(newVal)// 重新初始化数据
        
        }else {
          this.exHtml = ''
           this.clearForm()
        }
      }
    }
  },
  mounted() {

  
  },


  methods: {

    async getExcelHtml(pkeyId) {
      const {data: res} = await getExcelHtml({pkeyId})
      if (res.code === 200) {
        this.exHtml = res.data
        this.cop();
      }
    },
      // 新增清空表单方法
  clearForm() {
    const parentElement = document.getElementById('parent')
    console.log(parentElement, 'parentElement');
    
    if(parentElement) {
      // 清空父元素内容
      parentElement.innerHTML = ''
    }
    // 清空已选中元素
    this.clearAllSelected()
  },
    async cop() {
      let _that = this
      var MyComponent = await Vue.extend({
        template: this.exHtml ,
        data() {
          return {
            formData: {},
            getTokenHeader: {},
            dap_site_data: {}
          }
        },
        methods: {
          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
          },
          getInformation(name, tr, td) {//鼠标右键事件
            
          },
          formUploadSuccess() {
          },
          formUploadExceed() {
          },
          formUploadLoading() {
          },
          delTableFormFile() {
          },
          formUploadError() {
          },
          uploadprogress() {
          },
          formRemoteMethod() {
          },
          getRegularExpression() {
          },
          checkboxGroupChange() {
          },
          formRemoteChange() {
          },
          dateKeydown() {
          },
          keyupShiftUp() {
          },
          keyupShiftDown() {
          },
          keyupShiftLeft() {
          },
          keyupShiftRight() {
          },
          inputLeftClick() {
          },
        }
      })
      var component = new MyComponent().$mount()
      document.getElementById('parent').appendChild(component.$el);
    },



 
    //excel父节点点击检测
      async parentClick(e) {
      let target = e.target;
        const elementId = target.id;
        const keyName = target.placeholder;
        // 判断元素是否已选中
        const index = this.selectedElements.findIndex(item => item.elementId === elementId);
        if (index === -1) {
          // 添加选中效果
          target.style.backgroundColor = '#ffa500'; // 橙色背景
          this.selectedElements.push({elementId, keyName}); // 存储选中元素的id和keyName
        } else {  
          // 取消选中效果
          target.style.backgroundColor = ''; // 恢复默认背景
          this.selectedElements.splice(index, 1);
        }
        
        // 触发选中元素变化事件
        this.$emit('element-selected', this.selectedElements);

      
    },
        // 清除所有选中状态的方法
    clearAllSelected() {
      this.selectedElements.forEach(item => {
        const element = document.getElementById(item.elementId);
        if (element) {
          element.style.backgroundColor = '';
        }
      });
      this.selectedElements = [];
    },

    getParentTD(ele) {
      let targetParent = ele.parentNode;
      while (targetParent.nodeName !== "TD") {
        if (targetParent.id == 'parent') {
          return null;
        }
        targetParent = targetParent.parentNode;
      }
      return targetParent;
    },




  },

}
</script>

<style lang="scss" scoped>
.excelHtnl {
  margin: 0 0 0 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 100px 20px;
  height: 100%;
}

// 设置图片样式
.hc-upload-table-form {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hc-upload-table-form .el-upload {
  position: relative;
  flex: 1;
  height: 100%;
  color: #ccc;
}
.hc-upload-table-form .el-upload .hc-table-form-icon {
  font-size: 24px;
  font-weight: 100;
}
.hc-upload-table-form .el-upload .hc-table-form-img {
  width: 100%;
  height: 100%;
}

.excelBox {
  ::v-deep .oldlace-bg {
    background-color: oldlace;
  }
  ::v-deep .select-td {
    border-width: 4px;
    border-color: #E6A23C;
    border-style: solid;
  }
}
</style>