项目级编辑元素-日期类选框错误提示回显和选中问题

src/views/manager/projectinfo/editElement/editElement.vue

@@ -12,7 +12,6 @@
           <div class='parent hc-excel-table-form' style="position: relative;height: 100%;width: 100%;overflow: auto;"
             id='parent' @click="parentClick($event)">
           </div>
-
         </el-col>
         <el-col :span="8">
           <div style="text-align: right;">
@@ -250,7 +249,6 @@ export default {
   mounted() {
     this.cop()
     this.heights = this.$refs.heights.clientHeight
-    console.log(222);
   },
   created() {
     this.getElementInfoByTabId()
@@ -314,7 +312,7 @@ export default {
       }, 500)
     },
     RightClick2(tr, td, x1, x2, y1, y2) {
-      //console.log(event.target.getAttribute("keyname"))
+      console.log("888555", event.target.getAttribute("keyname"))
       let targetkeyname = event.target.getAttribute("keyname");
       //console.log(event.target)
       let ekey = null;
@@ -342,7 +340,7 @@ export default {
       }, 3000)
 
       let curTdEle = this.getTd(event.target);
-      // console.log(curTdEle, 'curTdEle');
+      console.log(curTdEle, 'curTdEle');
       if (this.isMultiple) {
         //是否已经存在了
         for (let i = 0; i < this.eleData.length; i++) {
@@ -381,8 +379,8 @@ export default {
         }
       })
     },
-    LeftClick(tr, td, x1, x2, y1, y2) {
-      console.log('点击左');
+    LeftClick(event, key) {
+      console.log('点击左11111', event.target, key);
     },
 
     getTd(ele) {
@@ -454,7 +452,7 @@ export default {
           getInformation(a, b, c) {
             _that.getInformation2(a, b, c)
           },
-          getRegularExpression() { },
+          getRegularExpression() {},
           dateKeydown() { },
           formUploadSuccess() { },
           formUploadExceed() { },
@@ -472,8 +470,8 @@ export default {
           },
           keyupShiftRight() {
           },
-          inputLeftClick() {
-
+          inputLeftClick(event, key) {
+            _that.LeftClick(event, key)
           },
           KeyDown(e) {
             if (e.ctrlKey || e.metaKey) {
@@ -513,7 +511,7 @@ export default {
           getInformation(a, b, c) {
             _that.getInformation2(a, b, c)
           },
-          getRegularExpression() { },
+          getRegularExpression() {},
           dateKeydown() { },
           formUploadSuccess() { },
           formUploadExceed() { },
@@ -530,12 +528,10 @@ export default {
 
           },
           keyupShiftRight() { },
-          inputLeftClick() {
-
+          inputLeftClick(event, key) {
+            _that.LeftClick(event, key)
           },
         },
-
-
       })
       var component = new MyComponent().$mount()
       let na = document.getElementById('parent')
@@ -794,12 +790,19 @@ export default {
       return tempArr;
     },
 
+    // 隐藏日期弹框
+    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'))
+    },
     //excel父节点点击检测
     parentClick(e) {
+      this.hideAllElementPickers()
+      const target = e.target;     
 
       let isNameEmpty = false;
       const { metaKey, ctrlKey } = e
-      let target = e.target;
 
       let bgs = document.querySelectorAll("#parent .oldlace-bg")
 
@@ -812,17 +815,27 @@ export default {
       if (tdEle) {
         let mydiv = tdEle.getElementsByTagName('div')
         target1 = mydiv[0]
-        if (target1.classList.contains('warnstyle')) {
-
-          isNameEmpty = true
-
 
-        } else {
-          isNameEmpty = false
-        }
+        const hasWarnStyle = el =>
+          el.classList.contains('warnstyle') ||
+          el.classList.contains('el-date-editor') &&
+          el.querySelector('.warnstyle-date');
+        
+        isNameEmpty = hasWarnStyle(target1) ? true : false;
+
+        // if (target1.classList.contains('warnstyle')) {
+        //   isNameEmpty = true
+        // } else if (target1.classList.contains('el-date-editor')) {
+        //   const div = target1.getElementsByClassName("warnstyle-date")
+        //   if (div.length) {
+        //     isNameEmpty = true
+        //   }
+        // } else {
+        //   isNameEmpty = false
+        // }
       } else {
         tdEle = target
-        let mydiv = tdEle.getElementsByTagName('div')
+        const mydiv = tdEle.getElementsByTagName('div')
         target = mydiv[0]
         isNameEmpty = false
       }
@@ -833,7 +846,8 @@ export default {
         let tdEle = this.getParentTD(target);
 
         if (tdEle) {
-          target.classList.add("oldlace-bg");
+          const mydiv = tdEle.getElementsByTagName('div')
+          mydiv[0].classList.add("oldlace-bg");
           // if (metaKey || ctrlKey) {
           if (!target.classList.contains('select-td')) {
 
@@ -879,6 +893,18 @@ export default {
     },
     testTips() {
       console.log("test tips start");
+      document.querySelectorAll('div[htmlelementerror]').forEach(td => {
+        const htmlElementError = td.getAttribute('htmlelementerror')
+        if (htmlElementError == '1') {
+          td.style.position = 'relative'
+          const child = document.createElement('div')
+          child.className = 'warnstyle-date'
+          td.appendChild(child)
+        }
+      })
+      document.querySelectorAll('input').forEach(input => {
+        input.readOnly = true;
+      })
       document.querySelectorAll('td[title]').forEach(td => {
         // 鼠标进入时临时清空 title 并显示自定义提示
         td.addEventListener('mouseenter', function (e) {
@@ -903,9 +929,6 @@ export default {
         });
       });
     }
-
-
-
   },
   watch: {
     'options'() {
@@ -1000,8 +1023,31 @@ export default {
     border-style: solid;
 
   }
+
+  .el-date-picker,
+  .el-date-range-picker,
+  .el-time-panel,
+  .el-picker-panel {
+    display: none !important;
+  }
+}
+
+::v-deep .warnstyle-date {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: url('/img/login/warn.png') !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
+// ::v-deep .warnstyle .el-range-input {
+//   background-color: transparent;
+// }
+
 ::v-deep .warnstyle .el-input__inner {
   background-image: url('/img/login/warn.png') !important;
   background-repeat: no-repeat;
@@ -1036,9 +1082,6 @@ export default {
   position: relative;
   padding-top: 20px;
   padding-left: 20px;
-
-
-
 }
 
 
@@ -1053,6 +1096,7 @@ export default {
 
 .save-btn {
   width: 100%;
+
   .el-button--primary {
     width: 100%;
     background: #2550A2;

src/views/manager/projectinfo/tree.vue

@@ -1111,7 +1111,7 @@
     </el-dialog>
 
     <!-- 编辑元素 -->
-    <el-dialog title="　" :visible.sync="editElementVisible" fullscreen append-to-body class="full-dialog">
+    <el-dialog title="" :visible.sync="editElementVisible" fullscreen append-to-body class="full-dialog">
       <EditElement :editElementQuery="curTreeData" :pkeyId="editElementQuery.pkeyId" :excelId="editElementQuery.excelId"
         :id="editElementQuery.id" :initTableName="editElementQuery.initTableName" :pid="editElementQuery.pid"
         :wbsid="editElementQuery.wbsid" :initTableId="editElementQuery.initTableId" :nodeid="editElementQuery.nodeid"
@@ -1316,7 +1316,6 @@
     </el-dialog>
 
     <!-- 项目数据同步 -->
-
     <el-dialog :visible.sync="proSyncTag" width="80%" append-to-body @close="closeProSyncTag">
       <span slot="title" class="dialog-title">
         <div class="dialog-title-text">项目数据同步</div>

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

@@ -177,6 +177,15 @@ export default {
       })
       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
@@ -239,10 +248,10 @@ export default {
     },
     domss() {
       this.copss()
-
     },
 
     getInformation(name, tr, td) {//鼠标点击事件
+      console.log(name, tr, td);
       if (!this.isTimeElement) {
         let tdEle = null;
         //获取TD元素
@@ -269,6 +278,8 @@ export default {
     },
     //excel父节点点击检测
     async parentClick(e) {
+      this.hideAllElementPickers();
+      console.log('parentClick', e.target);
       if (!this.isTimeElement) {
         let target = e.target;
         const {metaKey, ctrlKey} = e