编辑元素页面修改

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

@@ -3,7 +3,7 @@
     <basic-container class="editElement">
       <div class="flex" style="position:fixed;left:30px;top:0;">
         <h2 class="mg-r-10">编辑元素</h2>
-        <!-- <el-link type="primary" @click="toBack">返回上一级</el-link> -->
+   
       </div>
       <div class="header" style="padding-bottom:20px;">
         提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 红色：代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
@@ -19,33 +19,29 @@
           <div style="text-align: right;">
             <el-button @click="toBack">返回上一级</el-button>
             <el-button type="warning" @click="adjustExcel">进入表单调整</el-button>
-            <!-- <el-button v-show="AddNewElementField == '替换元素'" type="primary" :disabled="tag"
-              @click="saveReplace()">保存</el-button> -->
+      
           </div>
            
-          <div v-show="AddNewElementField == '替换元素'">
+          <div>
            <div class="martop20"  style="font-weight: bold;font-size: 18px;"> 
                <i class="el-icon-edit" style="color: #52B200;"></i>
                替换操作栏
             </div>
             <div class="martop20">
               <div style="font-weight: bold;">选中的元素</div>
-              <div class="check_box">选中元素的值</div>
+              <div class="check_box">
+                <span v-for="(item,index) in checkList" :key="index" style="margin-right: 4px;">{{ item.name }}</span>
+              </div>
             </div>
       
-            <!-- <el-select style="width:95%;" v-model="value" filterable placeholder="输入元素名称搜索">
-              <el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
-              </el-option>
-            </el-select> -->
             <div class="tihuan"  style="font-weight: bold;">替换为：</div>
-            <!-- <el-input style="width:95%;" :disabled="true" type="textarea" :rows="4" placeholder="请输入内容" v-model="names">
-            </el-input> -->
+        
            <el-select style="width:100%;" v-model="value" filterable placeholder="输入元素名称搜索">
               <el-option v-for="item in options" :key="item.id" :label="item.eName" :value="item.id">
               </el-option>
             </el-select>
           <div class="martop20 save-btn">
-               <el-button v-show="AddNewElementField == '替换元素'" type="primary" :disabled="tag"
+               <el-button type="primary" :disabled="tag"
               @click="saveReplace()">保存</el-button>
           </div>
           <div class="martop20"  style="font-weight: bold;font-size: 18px;"> 
@@ -348,6 +344,8 @@ export default {
       }, 3000)
 
       let curTdEle = this.getTd(event.target);
+      console.log(curTdEle,'curTdEle');
+      
       if (this.isMultiple) {
         //是否已经存在了
         for (let i = 0; i < this.eleData.length; i++) {
@@ -385,7 +383,8 @@ export default {
           pickers[i].parentNode.parentNode.parentNode.style.display = 'none'
         }
       })
-
+     
+      
     },
     LeftClick(tr, td, x1, x2, y1, y2) {
       console.log('点击左');
@@ -709,6 +708,7 @@ export default {
 
         //更新下拉列表s
         this.getElementInfoByTabId()
+         this.getUnMatchFieldData()
       }
     },
     //#endregion
@@ -806,9 +806,9 @@ export default {
 
       const { metaKey, ctrlKey } = e
       let target = e.target;
-      console.log(target, 'target');
+  
       let bgs = document.querySelectorAll("#parent .oldlace-bg")
-      //console.log(bgs)
+   
       for (let i = 0; i < bgs.length; i++) {
         bgs[i].classList.remove("oldlace-bg");
       }
@@ -825,19 +825,35 @@ export default {
 
       }
 
-
+      let curTdEle = this.getTd(target);
+    
+      
 
       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.checkList.push({
-              tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
-              td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
-            })
+          // if (metaKey || ctrlKey) {
+          if (!target.classList.contains('select-td')) {
+    
+
+            if(ctrlKey){
+                      target.classList.add("select-td");
+              this.checkList.push({
+                tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
+                td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
+                name: curTdEle.getAttribute("title")
+
+              })
+            }else{
+               this.checkList=[{
+                tr: target.getAttribute('trindex') || target1.getAttribute('trindex'),
+                td: target.getAttribute('tdindex') || target1.getAttribute('tdindex'),
+                name: curTdEle.getAttribute("title")
+
+               }]
+            }
           } else {
             target.classList.remove("select-td");
             this.checkList.forEach((ele, index) => {
@@ -846,13 +862,15 @@ export default {
               }
             })
           }
-
+          
 
 
         }
 
         this.noRepeat(this.checkList)
       
+        console.log(this.checkList,'this.checkList');
+        
         
       }
     },
@@ -980,13 +998,16 @@ export default {
 
 .parent {
   ::v-deep .select-td {
-    border-width: 4px;
-    border-color: #E6A23C;
-    border-style: solid;
+  
+       background-color: #DDEAFE;
+        border-color: #2550A2 1px solid;
   }
 
   ::v-deep .oldlace-bg {
-    background-color: oldlace;
+    border-width: 4px;
+    border-color: #2550A2;
+    border-style: solid;
+
   }
 }