替换元素支持多选

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

@@ -27,6 +27,33 @@
           style="position: fixed;right: 13px;"
         >
           <div v-show="AddNewElementField == '替换元素'">
+            <!-- <div>
+              <el-checkbox v-model="isMultiple" @change="multipleChange">多选模式</el-checkbox>
+            </div> -->
+            <el-table
+              :data="eleData" height="300px"
+              border size="small" v-show="isMultiple"
+              style="width: 100%;margin-bottom:10px;">
+              <el-table-column
+                label="td_tr" width="100px" align="center">
+                <template slot-scope="scope">
+                  <span>{{scope.row.td}}_{{scope.row.tr}}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="名称">
+              </el-table-column>
+              <el-table-column label="操作" width="100px" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="eleDelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            
             <el-select
               style="width:300px;"
               v-model="value"
@@ -223,6 +250,9 @@ export default {
       }],
 
       ekeyReg:/(key_\d+)/,
+
+      isMultiple:false,
+      eleData:[],
     }
   },
   mounted () {
@@ -272,6 +302,7 @@ export default {
     RightClick2 (tr, td, x1, x2, y1, y2) {
       //console.log(event.target.getAttribute("keyname"))
       let targetkeyname = event.target.getAttribute("keyname");
+      //console.log(event.target)
       let ekey = null;
       if(this.ekeyReg.test(targetkeyname)){
         ekey = targetkeyname.match(this.ekeyReg)[1]
@@ -294,7 +325,55 @@ export default {
       this.setTimeout = setTimeout(() => {
         this.cascaderPanel = false
       }, 3000)
+
+      let curTdEle = this.getTd(event.target);
+      if(this.isMultiple){
+        //是否已经存在了
+        for (let i = 0; i < this.eleData.length; i++) {
+          if(this.eleData[i].tr == tr && this.eleData[i].td == td){
+            //存在就移除
+            this.eleData[i].tdEle.classList.remove('select-td');
+            this.eleData.splice(i,1);
+            return;
+          }
+        }
+
+        //添加
+        this.eleData.push({
+          tr,
+          td,
+          tdEle:curTdEle,
+          name:curTdEle.getAttribute("title")
+        })
+      }else{
+        this.clearSelect();
+        this.eleData = [{
+          tr,
+          td,
+          tdEle:curTdEle,
+          name:curTdEle.getAttribute("title")
+        }]
+      }
+      
+      curTdEle.classList.add('select-td')
+
     },
+
+    getTd(ele){
+
+      while(ele.tagName.toLowerCase() != 'td' && ele.id != 'parent'){
+        ele = ele.parentNode;
+        //console.log(ele);
+      }
+
+      if(ele.id == 'parent'){
+        return null;
+      }else{
+        return ele;
+      }
+
+    },
+
     deleteelement () {//删除元素提示
       let _that = this
       this.$confirm('确认删除该元素？', '提示', {
@@ -398,13 +477,6 @@ export default {
     saveReplace () {//保存按钮
       if (this.value) {
         this.tag = true
-        console.log({
-          tabId: this.$route.query.pkeyId,
-          tdIndex: this.table.td,
-          trIndex: this.table.tr,
-          colName: "",
-          htmlType: this.value
-        });
         this.submit({
           tabId: this.$route.query.pkeyId,
           tdIndex: this.table.td,
@@ -527,6 +599,25 @@ export default {
     // 返回上一页
     toBack(){
       this.$router.go(-1);
+    },
+
+
+    eleDelete(index){
+      this.eleData[index].tdEle.classList.remove('select-td');
+      this.eleData.splice(index,1);
+    },
+    clearSelect(){
+      this.eleData.forEach((data)=>{
+        data.tdEle.classList.remove('select-td');
+      })
+    },
+    multipleChange(value){
+      if(!value && this.eleData.length > 1){
+        let last = this.eleData[this.eleData.length-1];
+        this.clearSelect();
+        this.eleData = [last];
+        this.eleData[0].tdEle.classList.add('select-td');
+      }
     }
   },
   watch: {
@@ -598,4 +689,12 @@ export default {
     text-decoration: none;
   }
 }
+
+.parent{
+  /deep/ .select-td{
+    border-width: 4px;
+    border-color: #E6A23C;
+    border-style: solid;
+  }
+}
 </style>