数据映射多选修改

src/views/tentative/components/dataMap.vue

@@ -15,15 +15,15 @@
           >保存</el-button
         >
       </div>
-      <div class="right_box" v-for="(item,index) in listArr" :key="item.id">
+      <div class="right_box" v-for="(eleItem,index) in listArr" :key="index">
      
              <div>
                 <span>选择表单</span>
                 <el-select
-                  v-model="formVal"
+                  v-model="eleItem.formVal"
                   placeholder="请选择"
                   style="width: 65%; margin-left: 10px"
-                  @change="changeform"
+                  @change="changeform($event,index)"
                 >
                   <el-option
                     v-for="item in formoptions"
@@ -37,10 +37,10 @@
               <div>
                 <span>选择元素</span>
                 <el-select
-                  v-model="eleVal"
+                  v-model="eleItem.eleVal"
                   placeholder="请选择"
                   style="width: 65%; margin-left: 10px; margin-top: 15px"
-                  @change="changeEle"
+                  @change="changeEle($event,index)"
                   filterable
                 >
                   <el-option
@@ -57,13 +57,13 @@
                 <div style="width: 100%; height: 100%; overflow-y: auto">
                   <el-row class="mb-4">
                     <div class="form_text">
-                      <div>表单名称：{{ infoDetail.tabName }}</div>
-                      <div>元素字段：{{ infoDetail.elementName }}</div>
+                      <div>表单名称：{{ eleItem.tabName }}</div>
+                      <div>元素字段：{{ eleItem.elementName }}</div>
                     </div>
                   </el-row>
                   <div class="martop20">
                     <el-button type="primary" size="small" @click="addList(index)">新增元素</el-button>
-                    <el-button type="danger"  size="small" v-if="index>0" @click="delList(index)">删除元素</el-button>
+                    <el-button type="danger"  size="small" v-if="index>0" @click="delList(index,item)">删除元素</el-button>
                   </div>
                 
                 </div>
@@ -113,8 +113,7 @@ export default {
       },
       linkedData: [], //已经绑定的数组
       listArr: [
-        {id: "1",  },
-        {id: "2",  },
+      {}
 ],
     };
   },
@@ -276,6 +275,10 @@ export default {
         this.clickKeyname =
           target.getAttribute("keyname") || target1.getAttribute("keyname");
           this.$set(this.curItem, "htmlKeyName", this.clickKeyname);
+          this.listArr.forEach((ele)=>{
+            ele.htmlKeyName= this.clickKeyname
+        
+          })
         await this.getInfoDEtail();   
 
      
@@ -325,25 +328,28 @@ export default {
       }
     },
     //选择表单获
-    changeform(val) {
+    changeform(val,index) {
       this.getEleList(val);
       this.formoptions.forEach((ele) => {
         if (ele.initTabId === val) {
           this.formpid = ele.pkeyId;
           this.formname = ele.initTableName;
           this.infoDetail.tabName = ele.tabName;
-          this.$set(this.curItem, "trialTabId", ele.pkeyId);
-          this.$set(this.curItem, "trialTabName", ele.initTableName);
+   
+          this.listArr[index].trialTabId= ele.pkeyId
+          this.listArr[index].trialTabName= ele.initTableName
         }
       });
     },
-    changeEle(val) {
+    changeEle(val,index) {
       this.eleOptions.forEach((ele) => {
         if (ele.ekey === val) {
           this.eleId = ele.id;
           this.infoDetail.elementName = ele.eName;
-          this.$set(this.curItem, "elementKey", val);
-          this.$set(this.curItem, "elementId", ele.id);
+          // this.$set(this.curItem, "elementKey", val);
+          // this.$set(this.curItem, "elementId", ele.id);
+          this.listArr[index].elementName= ele.eName
+          this.listArr[index].elementId= ele.id
         }
       });
     },
@@ -372,8 +378,9 @@ export default {
           this.formoptions.forEach((ele) => {
             if (ele.tabName === this.infoDetail.tabName) {
               this.formVal = ele.initTabId;
-              this.$set(this.curItem, "trialTabName", ele.initTableName);
-              this.$set(this.curItem, "trialTabId", ele.pkeyId);
+              // this.$set(this.curItem, "trialTabName", ele.initTableName);
+              // this.$set(this.curItem, "trialTabId", ele.pkeyId);
+            
             }
           });
           await this.getEleList(this.formVal);
@@ -402,28 +409,30 @@ export default {
     //映射数据保存
     async saveInfo() {
       console.log(this.clickArr, "this.clickArr");
-      if (this.clickArr.length === 0) {
-        this.$message.warning("请进行数据映射配置");
-        return;
-      }
+      console.log(this.listArr,'listArr')
+      
+      // if (this.clickArr.length === 0) {
+      //   this.$message.warning("请进行数据映射配置");
+      //   return;
+      // }
 
-      this.saveLoaing = true;
-      const { data: res } = await saveLinkDetail({
-        classId: this.classId,
-        reflectionBeanList: this.clickArr,
-      });
-      console.log(res);
-      this.saveLoaing = false;
-      if (res.code === 200) {
-        this.$message({
-          type: "success",
-          message: res.msg,
-        });
-        await this.getLinkedData();
-        await this.getExcelHtmlCol(this.classId, this.linkedData); //获取excel模板
-        this.clickArr = [];
-        this.curItem={}
-      }
+      // this.saveLoaing = true;
+      // const { data: res } = await saveLinkDetail({
+      //   classId: this.classId,
+      //   reflectionBeanList: this.clickArr,
+      // });
+      // console.log(res);
+      // this.saveLoaing = false;
+      // if (res.code === 200) {
+      //   this.$message({
+      //     type: "success",
+      //     message: res.msg,
+      //   });
+      //   await this.getLinkedData();
+      //   await this.getExcelHtmlCol(this.classId, this.linkedData); //获取excel模板
+      //   this.clickArr = [];
+      //   this.curItem={}
+      // }
     },
     addList(index){
        this.listArr.splice(index + 1, 0, {