添加元素修改

src/views/codeRule/LinkEle.vue

@@ -163,7 +163,10 @@
         </div>
 
         <div class="condition-header1-html-box">
-
+          <check-ele-html 
+           :key="pkeyId"
+            :pkeyId="pkeyId"
+          ></check-ele-html>
         </div>
         <div slot="footer" class="dialog-footer">
            
@@ -179,8 +182,12 @@
 <script>
 import { getDictionary } from "@/api/system/dict";
 import { selectByNodeTable   as findNodeTableByCondition1 } from "@/api/manager/wbstree";
+import checkEleHtml from "./checkEleHtml.vue";
 export default {
   name: 'ConditionsSet',
+  components: {
+    checkEleHtml
+  },
   data() {
     return {
       visible: true,
@@ -207,6 +214,7 @@ export default {
         { date: '2016-05-03', name: '赵六', address: '深圳市南山区科技园北路 200 号' }
       ],
       tableTypelist: [],
+      pkeyId: '', // 主键ID
     
    
 
@@ -296,11 +304,15 @@ export default {
     handleRowSelect(row) {
       // 设置选中状态
      // 先取消其他行的选中状态
+     this.pkeyId = ''; // 清空主键ID
       this.tableData.forEach(item => {
         if(item !== row) {
           this.$set(item, 'isSelected', false)
         }
       })
+      this.pkeyId = row.pkeyId; // 更新主键ID
+console.log(this.pkeyId,'this.pkeyId');
+
       // 设置当前行选中状态
       this.$set(row, 'isSelected', true)
 
@@ -490,7 +502,7 @@ export default {
   margin-bottom: 10px;
 }
 .condition-header1-html-box{
-  height: 600px;
+  // height: 600px;
   border: 1px solid red;
 }
 </style>
@@ -507,48 +519,7 @@ export default {
       .dialog-footer{
         text-align: center;
       }
-        .el-dialog {
-    display: flex;
-    flex-direction: column;
-    margin: 0 !important;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 90vh; // 设置最大高度
-    
-    // 设置弹窗主体内容滚动
-    .el-dialog__body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-      
-      // 美化滚动条样式
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-      
-      &::-webkit-scrollbar-thumb {
-        background: #c1c1c1;
-        border-radius: 3px;
-      }
       
-      &::-webkit-scrollbar-track {
-        background: #f1f1f1;
-      }
-    }
-
-    // 保持头部和底部固定
-    .el-dialog__header,
-    .el-dialog__footer {
-      flex-shrink: 0;
-    }
-  }
-}
-// 添加内容容器的样式
-.dialog-content {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
 }
+
 </style>

src/views/codeRule/checkEleHtml.vue

@@ -0,0 +1,425 @@
+<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 {
+
+      htmlData: {
+        name: '',
+        tr: '',
+        td: ''
+      },
+      type: {},
+  
+      checkList: [],
+      checkNameList: [],
+      isSignatureEdit: false,
+      isTimeElement: false,
+      timesTimeElement: {}
+    }
+  },
+  mounted() {
+    this.cop()
+    this.type = this.option.column[0];
+    console.log(111);
+  },
+
+
+  methods: {
+
+    async getExcelHtml(pkeyId) {
+      const {data: res} = await getExcelHtml({pkeyId})
+      console.log(res);
+      if (res.code === 200) {
+        localStorage.setItem('excelHtml', res.data)
+        this.copss();
+      }
+    },
+    async cop() {
+      let _that = this
+      var MyComponent = await Vue.extend({
+        template: localStorage.getItem('excelHtml'),
+        data() {
+          return {
+            formData: {},
+            getTokenHeader: {},
+            dap_site_data: {}
+          }
+        },
+        methods: {
+          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
+          },
+          getInformation(name, tr, td) {//鼠标右键事件
+            _that.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);
+    },
+    async copss() {
+      let _that = this
+      var MyComponent = await Vue.extend({
+        template: localStorage.getItem('excelHtml'),
+        data() {
+          return {
+            formData: {},
+            getTokenHeader: {},
+            dap_site_data: {}
+          }
+        },
+        methods: {
+          contextmenuClick(tr, td, x1, x2, y1, y2, event) {
+          },
+          getInformation(name, tr, td) {//鼠标右键事件
+            _that.getInformation(name, tr, td)
+          },
+          formUploadSuccess() {
+          },
+          formUploadExceed() {
+          },
+          formUploadLoading() {
+          },
+          delTableFormFile() {
+          },
+          formUploadError() {
+          },
+          uploadprogress() {
+          },
+          getRegularExpression() {
+          },
+          formRemoteMethod() {
+          },
+          checkboxGroupChange() {
+          },
+          formRemoteChange() {
+          },
+          dateKeydown() {
+          },
+          keyupShiftUp() {
+          },
+          keyupShiftDown() {
+          },
+          keyupShiftLeft() {
+          },
+          keyupShiftRight() {
+          },
+          inputLeftClick() {
+          },
+        }
+      })
+      var component = new MyComponent().$mount()
+      let na = document.getElementById('parent')
+      na.innerHTML = `<div
+        class='parent'
+        id='parent'
+      ></div>`
+      document.getElementById('parent').appendChild(component.$el);
+    },
+    domss() {
+      this.copss()
+
+    },
+
+    getInformation(name, tr, td) {//鼠标点击事件
+      if (!this.isTimeElement) {
+        let tdEle = null;
+        //获取TD元素
+        if (event.target.nodeName === "TD") {
+          tdEle = event.target
+        } else {
+          tdEle = this.getParentTD(event.target);
+        }
+        let moreObj = {};
+        if (tdEle) {
+          moreObj = this.getWidget(tdEle);
+        }
+        this.htmlData = Object.assign({
+          name,
+          tr,
+          td
+        }, moreObj)
+      } else {
+        this.$set(this.timesTimeElement, 'colName', name)
+      }
+    },
+    signatureEdit(data) {
+      this.isSignatureEdit = data
+    },
+    //excel父节点点击检测
+    async parentClick(e) {
+      if (!this.isTimeElement) {
+        let target = e.target;
+        const {metaKey, ctrlKey} = e
+        let bgs = document.querySelectorAll("#parent .oldlace-bg")
+        //console.log(bgs)
+        for (let i = 0; i < bgs.length; i++) {
+          bgs[i].classList.remove("oldlace-bg");
+        }
+        //console.log(target.getAttribute('trindex'))
+        let tdEle = this.getParentTD(target);
+      
+    
+   
+        let target1
+        if (tdEle) {
+          let mydiv = tdEle.getElementsByTagName('div')
+          target1 = mydiv[0]
+        } else {
+          tdEle = target
+          let mydiv = tdEle.getElementsByTagName('div')
+          target = mydiv[0]
+        }
+        let keyname = ''
+        try {
+          keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
+          // eslint-disable-next-line no-empty
+        } catch {
+        }
+      
+        this.htmlData.keyname = keyname
+        if (target.getAttribute('trindex') !== null && target.getAttribute('tdindex') || target1.getAttribute('trindex') !== null && target1.getAttribute('tdindex')) {
+          let tdEle = this.getParentTD(target);
+          if (tdEle) {
+            //橙色背景
+            target.classList.add("oldlace-bg");
+            if (metaKey || ctrlKey) {
+              target.classList.add("select-td");
+              this.checkNameList.push(this.htmlData)
+              this.checkList.push({
+                tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
+                td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
+              })
+            } else {
+              target.classList.remove("select-td");
+              this.checkList.forEach((ele, index) => {
+                if (ele.tr === target.getAttribute('trindex') || ele.tr === target1.getAttribute('trindex')) {
+                  this.checkList.splice(index, 1)
+                }
+              })
+              this.checkNameList.forEach((ele, index) => {
+                if (this.htmlData.tr === ele.tr) {
+                  this.checkNameList.splice(index, 1)
+                }
+              })
+            }
+          }
+        }
+      } else {
+        let target = e.target;
+        let tdEle = this.getParentTD(target);
+        let target1
+        if (tdEle) {
+          let mydiv = tdEle.getElementsByTagName('div')
+          target1 = mydiv[0]
+        } else {
+          tdEle = target
+          let mydiv = tdEle.getElementsByTagName('div')
+          target = mydiv[0]
+        }
+        let keyname = ''
+        try {
+          keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
+        } catch {}
+        this.$set(this.timesTimeElement, 'keyname', keyname)
+        console.log(this.timesTimeElement)
+      }
+    },
+    getParentTD(ele) {
+      let targetParent = ele.parentNode;
+      while (targetParent.nodeName !== "TD") {
+        if (targetParent.id == 'parent') {
+          return null;
+        }
+        targetParent = targetParent.parentNode;
+      }
+      return targetParent;
+    },
+
+
+    //获取控件信息
+    getWidget(tdEle) {
+      let selectElement = tdEle.querySelectorAll('.el-select');
+      let isMultiple = false
+      if (selectElement.length) {
+
+        // 遍历每个元素，检查是否包含 is-multiple 类名
+        selectElement.forEach(element => {
+          if (element.classList.contains('is-multiple')) {
+            isMultiple = true;
+          }
+        });
+        if (isMultiple) {
+          let options = selectElement[0].__vue__.options;
+          let selectDatas = [];
+          for (let i = 0; i < options.length; i++) {
+            selectDatas.push({
+              dictValue: options[i].label
+            });
+          }
+          return {
+            type: 'selectBox',
+            selectDatas
+          }
+        }
+      }
+      let checkLabels = tdEle.querySelectorAll('.el-checkbox-group span.el-checkbox__label');
+      //console.log(checkLabels)
+      if (checkLabels.length > 0) {
+        let checkLabelDatas = [];
+        for (let i = 0; i < checkLabels.length; i++) {
+          //console.dir(checkLabels[i])
+          checkLabelDatas.push({
+            dictValue: checkLabels[i].innerText
+          });
+        }
+        return {
+          type: 'checkbox',
+          checkLabelDatas
+        }
+      }
+
+      let radioLabels = tdEle.querySelectorAll('.el-radio .el-radio__label');
+      if (radioLabels.length > 0) {
+        let radioDatas = [];
+        for (let i = 0; i < radioLabels.length; i++) {
+          radioDatas.push({
+            dictValue: radioLabels[i].innerText
+          });
+        }
+        return {
+          type: 'radio',
+          radioDatas
+        }
+      }
+
+      let elSelect = tdEle.querySelectorAll('.el-select');
+      //console.dir(elSelect[0])
+      if (elSelect.length) {
+        let options = elSelect[0].__vue__.options;
+        let selectDatas = [];
+        for (let i = 0; i < options.length; i++) {
+          selectDatas.push({
+            dictValue: options[i].label
+          });
+        }
+        return {
+          type: 'select',
+          selectDatas
+        }
+
+      }
+
+
+      return {};
+    },
+    //是否为时间元素选择模式
+
+  },
+  components: {
+
+  
+
+ 
+   
+  }
+}
+</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>
+
+
+