项目级wbs库页面，选择进入表单调整，下拉框无法被选择

src/views/manager/projectinfo/components/HtmlSelect.vue

@@ -0,0 +1,41 @@
+<template>
+    <div ref="selectRef">
+        <el-select :popper-append-to-body="false" multiple v-bind="$attrs" v-on="$listeners" v-model="currentVal">
+            <slot />
+        </el-select>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HtmlSelect',
+    inheritAttrs: false,
+    props: {
+        value: [String, Number, Array],
+        keyname: String,
+        trindex: String,
+        tdindex: String,
+        placeholder: String,
+        multiple: Boolean,    
+    },
+    computed: {
+        currentVal: {
+            get() { return this.value; },
+            set(val) { this.$emit('input', val); }
+        }
+    },
+    mounted() {
+        // 捕获阶段监听，比 el-select 内部更早
+        this.$refs.selectRef.addEventListener('click', this.onClick, true);
+    },
+    beforeDestroy() {
+        this.$refs.selectRef.removeEventListener('click', this.onClick, true);
+    },
+    methods: {
+        onClick(e) {
+            // 抛给父级
+            this.$emit('inputLeftClick', { e, params: { name: this.placeholder, keyName: this.keyname, trIndex: this.trindex, tdIndex: this.tdindex } });
+        }
+    }
+}
+</script>

src/views/manager/projectinfo/tree.vue

@@ -3953,8 +3953,13 @@ export default {
       const { data: res } = await getExcelHtml({ pkeyId });
       console.log(res);
       if (res.code === 200) {
-        localStorage.setItem("excelHtml", res.data);
-        this.adjustmentExcel = res.data;
+        const html = res.data
+          .replaceAll('<el-select', '<html-select @inputLeftClick="inputLeftClick"')
+          .replaceAll('<el-date-picker', '<el-date-picker :append-to-body="false"')
+          .replaceAll('<el-cascader', '<el-cascader :append-to-body="false"')
+          .replaceAll('<el-time-select', '<el-time-select :append-to-body="false"');
+        localStorage.setItem("excelHtml", html);
+        this.adjustmentExcel = html;
         this.excelHtml = true;
       }
     },

src/views/manager/projectinfo/treeTemplate/dynamicExcel.vue

@@ -49,8 +49,9 @@ import electronicSignature from './template/electronicSignature.vue'
 import setFormula from './template/setFormula.vue'
 import editDefault from './template/editDefault.vue'
 import promptSettings from './template/promptSettings.vue'
+import HtmlSelect from '../components/HtmlSelect.vue'
 import Vue from 'vue'
-import {getExcelHtml} from '@/api/exctab/excelmodel'
+// import {getExcelHtml} from '@/api/exctab/excelmodel'
 import {getSignDetail} from "@/api/manager/AdjustForm";
 
 export default {
@@ -100,7 +101,6 @@ export default {
   mounted() {
     this.cop()
     this.type = this.option.column[0];
-    console.log(111);
   },
 
 
@@ -116,18 +116,19 @@ export default {
       this.type = column;
       this.isSignatureEdit = false
     },
-    async getExcelHtml(pkeyId) {
-      const {data: res} = await getExcelHtml({pkeyId})
-      console.log(res);
-      if (res.code === 200) {
-        localStorage.setItem('excelHtml', res.data)
-        this.copss();
-      }
-    },
+    // 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'),
+        components:{ HtmlSelect },
         data() {
           return {
             formData: {},
@@ -171,26 +172,20 @@ export default {
           },
           keyupShiftRight() {
           },
-          inputLeftClick() {
+          inputLeftClick({e, params}) {
+            _that.parentClick(e, params)
           },
         }
       })
       var component = new MyComponent().$mount()
       document.getElementById('parent').appendChild(component.$el);
-      // document.querySelectorAll('input').forEach(input => {
-      //   input.readOnly = true;
-      // })
     },
 
-    hideAllElementPickers() {
-      // 所有弹层根节点都会带 *-popper 或 *-picker 类名
-      const pickerRoots = document.querySelectorAll('.el-date-picker,.el-select-dropdown,.el-date-range-picker,.el-time-panel,.el-picker-panel')
-      pickerRoots.forEach(node => (node.style.display = 'none'))
-    },
     async copss() {
       let _that = this
       var MyComponent = await Vue.extend({
         template: localStorage.getItem('excelHtml'),
+        components:{ HtmlSelect },
         data() {
           return {
             formData: {},
@@ -234,7 +229,8 @@ export default {
           },
           keyupShiftRight() {
           },
-          inputLeftClick() {
+          inputLeftClick({e, params}) {
+            _that.parentClick(e, params)
           },
         }
       })
@@ -251,7 +247,7 @@ export default {
     },
 
     getInformation(name, tr, td) {//鼠标点击事件
-      console.log(name, tr, td);
+      console.log('getInformation', name, tr, td);
       if (!this.isTimeElement) {
         let tdEle = null;
         //获取TD元素
@@ -277,9 +273,11 @@ export default {
       this.isSignatureEdit = data
     },
     //excel父节点点击检测
-    async parentClick(e) {
-      this.hideAllElementPickers();
+    async parentClick(e, params = null) {
       console.log('parentClick', e.target);
+      if(params){
+        this.getInformation(params.name, params.trIndex, params.tdIndex)
+      }
       if (!this.isTimeElement) {
         let target = e.target;
         const {metaKey, ctrlKey} = e
@@ -317,12 +315,11 @@ export default {
         let keyname = ''
         try {
           keyname = target.getAttribute('keyname') || target1.getAttribute('keyname')
-          // eslint-disable-next-line no-empty
         } catch {
         }
-        console.log('keyname1111111111111', keyname)
-        this.htmlData.keyname = keyname
-        if (target.getAttribute('trindex') !== null && target.getAttribute('tdindex') || target1.getAttribute('trindex') !== null && target1.getAttribute('tdindex')) {
+        console.log('keyname1111111111111', keyname, params, target)
+        this.htmlData.keyname = params? params.keyName : keyname
+        if (target && target.getAttribute('trindex') && target.getAttribute('tdindex') || target1 && target1.getAttribute('trindex') && target1.getAttribute('tdindex') || params && params.trIndex && params.tdIndex) {
           let tdEle = this.getParentTD(target);
           if (tdEle) {
             //橙色背景
@@ -371,7 +368,7 @@ export default {
     },
     getParentTD(ele) {
       let targetParent = ele.parentNode;
-      while (targetParent.nodeName !== "TD") {
+      while (targetParent && targetParent.nodeName !== "TD") {
         if (targetParent.id == 'parent') {
           return null;
         }
@@ -543,6 +540,11 @@ export default {
     border-style: solid;
   }
 }
+#parent {
+  ::v-deep .el-popper {
+    display: none !important;
+  }
+}
 </style>
 
 

src/views/manager/projectinfo/treeTemplate/template/setInputTPT.vue

@@ -467,7 +467,13 @@ export default {
         this.htmlData.tr = ''
         this.htmlData.td = ''
         this.setInputTable = []
-        localStorage.setItem('excelHtml', res.data)
+        const html = res.data
+          .replaceAll('<el-select', '<html-select @inputLeftClick="inputLeftClick"')
+          .replaceAll('<el-date-picker', '<el-date-picker :append-to-body="false"')
+          .replaceAll('<el-cascader', '<el-cascader :append-to-body="false"')
+          .replaceAll('<el-time-select', '<el-time-select :append-to-body="false"');
+        localStorage.setItem("excelHtml", html);
+        // localStorage.setItem('excelHtml', res.data)
         this.$emit('cop')
       }
     },