数据映射修改

src/views/tentative/components/dataMap.vue

@@ -15,54 +15,66 @@
           >保存</el-button
         >
       </div>
-      <div class="right_box">
-        <div>
-          <span>选择表单</span>
-          <el-select
-            v-model="formVal"
-            placeholder="请选择"
-            style="width: 65%; margin-left: 10px"
-            @change="changeform"
-          >
-            <el-option
-              v-for="item in formoptions"
-              :key="item.initTabId"
-              :label="item.tabName"
-              :value="item.initTabId"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div>
-          <span>选择元素</span>
-          <el-select
-            v-model="eleVal"
-            placeholder="请选择"
-            style="width: 65%; margin-left: 10px; margin-top: 15px"
-            @change="changeEle"
-            filterable
-          >
-            <el-option
-              v-for="item in eleOptions"
-              :key="item.ekey"
-              :label="item.eName"
-              :value="item.ekey"
-            >
-            </el-option>
-          </el-select>
-        </div>
+      <template v-if="listArr.length>0">
+         <div class="right_box" v-for="(eleItem,index) in listArr" :key="index">
+     
+             <div>
+                <span>选择表单</span>
+                <el-select
+                  v-model="eleItem.initTabId"
+                  placeholder="请选择"
+                  style="width: 65%; margin-left: 10px"
+                  @change="changeform($event,index)"
+                >
+                  <el-option
+                    v-for="item in formoptions"
+                    :key="item.initTabId"
+                    :label="item.tabName"
+                    :value="item.initTabId"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                <span>选择元素</span>
+                <el-select
+                  v-model="eleItem.elementId"
+                  placeholder="请选择"
+                  style="width: 65%; margin-left: 10px; margin-top: 15px"
+                  @change="changeEle($event,index)"
+                  filterable
+                >
+                  <el-option
+                    v-for="item in eleOptions"
+                    :key="item.id"
+                    :label="item.eName"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
+              </div>
 
-        <div class="martop20 replace_box">
-          <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 class="martop10 replace_box">
+                <div style="width: 100%; height: 100%; overflow-y: auto">
+                  <el-row class="mb-4">
+                    <div class="form_text">
+                      <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,eleItem)">删除元素</el-button>
+                  </div>
+                
+                </div>
               </div>
-            </el-row>
-          </div>
-        </div>
+       
       </div>
+      </template>
+      <el-empty description="暂无数据" v-else ></el-empty>
+
+     
     </div>
   </div>
 </template>
@@ -72,8 +84,9 @@ import {
   getLinkTablist,
   getLinkElelist,
   getLinkDetail,
-  saveLinkDetail,
+  removeLinkData,
   getLinkData,
+  saveLinkDetail 
 } from "@/api/tentative/testcollect";
 import Vue from "vue";
 import Split from "split.js";
@@ -83,11 +96,11 @@ export default {
       formoptions: [],
       eleOptions: [],
       heights: "",
-      formVal: "",
+      initTabId: "",
       formpid: "",
       formname: "",
       classId: "",
-      eleVal: "",
+      elementId: "",
       eleId: "",
       clickKeyname: "",
       infoDetail: {
@@ -105,55 +118,16 @@ export default {
         trialTabName: "",
       },
       linkedData: [], //已经绑定的数组
+      listArr: [
+      {}
+],
     };
   },
   watch: {
-    curItem: {
-      handler(newVal, oldVal) {
-        if (
-          this.curItem.elementId &&
-          this.curItem.elementKey &&
-          this.curItem.htmlKeyName &&
-          this.curItem.trialTabId &&
-          this.curItem.trialTabName
-        ) {
-          const newItem = Object.assign({}, newVal);
-          const isContained = this.containsObject(
-            this.clickArr,
-            "htmlKeyName",
-            newItem.htmlKeyName
-          );
-        
-          
-          if (isContained) {
-            this.clickArr.forEach((ele) => {
-              if (ele.htmlKeyName === newItem.htmlKeyName) {
-                ele.elementId = newItem.elementId;
-                ele.elementKey = newItem.elementKey;
-                ele.htmlKeyName = newItem.htmlKeyName;
-                ele.trialTabId = newItem.trialTabId;
-                ele.trialTabName = newItem.trialTabName;
-              }
-            });
-          } else {
-            this.clickArr.push(newItem);
-          }
-        }
-        // 在这里执行你想要的操作
-      },
-      deep: true, // 指定为深度监听,
-    },
+ 
   },
   methods: {
-    // 判断数组中是否包含目标对象的函数
-    containsObject(array, keyName, targetValue) {
-      for (let i = 0; i < array.length; i++) {
-        if (array[i][keyName] === targetValue) {
-          return true;
-        }
-      }
-      return false;
-    },
+  
     async getExcelHtmlCol(classId, form) {
       //获取excel模板
       const { data: res } = await getLinkHtml({ classId });
@@ -178,12 +152,7 @@ export default {
           },
           template: res.data,
           methods: {
-            //改变表单数据
-            //  setFormData(obj) {
-            //         this.formData = obj
-            //         _that.setFormData2(obj)
-            //         console.log(this.formData,'this.formData1111111');
-            //  },
+     
             contextmenuClick() {},
             getInformation() {},
             formUploadSuccess() {},
@@ -262,9 +231,12 @@ export default {
             }
           });
         }
-        this.clickKeyname =
-          target.getAttribute("keyname") || target1.getAttribute("keyname");
+        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();   
 
      
@@ -314,25 +286,25 @@ 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
+          this.listArr[index].tabName= ele.tabName
         }
       });
     },
-    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);
+        if (ele.id === val) {
+       
+       
+          this.listArr[index].elementName= ele.eName
+          this.listArr[index].elementId= ele.id
         }
       });
     },
@@ -341,7 +313,7 @@ export default {
       const { data: res } = await getLinkElelist({
         id: val,
       });
-      console.log(res);
+
       if (res.code === 200) {
         this.eleOptions = res.data;
       } else {
@@ -355,53 +327,56 @@ export default {
         keyName: this.clickKeyname,
       });
       if (res.code === 200) {
-        this.infoDetail = res.data;
+        this.listArr = res.data.length>0?res.data:[{}]
+          this.listArr.forEach((ele)=>{
+            ele.htmlKeyName= this.clickKeyname
+        
+          })
+        this.formoptions.forEach((ele)=>{
+         this.listArr.forEach(async(eleItem,eleIndex)=>{
+          if(ele.pkeyId===eleItem.trialTabId){
+            eleItem.initTabId=ele.initTabId
+            await this.getEleList(ele.initTabId)
+           this.changeEle(eleItem.elementId,eleIndex)
 
-        if (this.infoDetail && this.infoDetail.id) {
-          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);
-            }
-          });
-          await this.getEleList(this.formVal);
-          this.eleOptions.forEach((ele) => {
-            if (ele.eName === this.infoDetail.elementName) {
-              this.eleVal = ele.ekey;
-              // this.curItem.elementId=ele.id
-              // this.curItem.elementKey=ele.ekey
-              this.$set(this.curItem, "elementId", ele.id);
-              this.$set(this.curItem, "elementKey", ele.ekey);
-            }
-          });
-        } else {
-          this.infoDetail = {};
-          this.formVal = "";
-          this.eleVal = "";
-          this.curItem = {};
-          // this.curItem.htmlKeyName=this.clickKeyname
-          this.$set(this.curItem, "htmlKeyName", this.clickKeyname);
-        }
+            
+          }
+
+         })
+        })
+      
+       
+        
+
+    
       } else {
-        this.infoDetail = {};
-      }
+          this.listArr = [{}]
+
+        }
     },
 
     //映射数据保存
     async saveInfo() {
-      console.log(this.clickArr, "this.clickArr");
-      if (this.clickArr.length === 0) {
+  
+      
+      if (this.listArr.length === 0) {
         this.$message.warning("请进行数据映射配置");
         return;
       }
-
+    const isValid = this.listArr.every(item => 
+    item.elementId && item.initTabId
+  );
+  
+  if (!isValid) {
+    this.$message.warning("请确保选择了所有表单和元素字段！");
+    return;
+  }
       this.saveLoaing = true;
       const { data: res } = await saveLinkDetail({
         classId: this.classId,
-        reflectionBeanList: this.clickArr,
+        reflectionBeanList: this.listArr,
       });
-      console.log(res);
+
       this.saveLoaing = false;
       if (res.code === 200) {
         this.$message({
@@ -414,6 +389,56 @@ export default {
         this.curItem={}
       }
     },
+    addList(index){
+        const currentItem = this.listArr[index];
+        if (!currentItem.elementId || !currentItem.initTabId) {
+          this.$message({
+            type: "warning",
+            message: "请选择元素和表单",
+          });
+          return; // 不满足条件则不添加
+        }
+       this.listArr.splice(index + 1, 0, { 
+          htmlKeyName: this.clickKeyname
+        ,
+
+          tabName: '',
+          elementName: ''
+        });
+    },
+  delList(index, item) {
+      if (!item.id) {
+        this.listArr.splice(index, 1);
+        return;
+      } else {
+        this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 接口调用时添加 catch 处理接口错误
+          removeLinkData({ id: item.id })
+            .then((res) => {
+              if (res.data.code === 200) {
+                this.$message.success(res.data.msg);
+                this.listArr.splice(index, 1);
+                this.getLinkedData();
+                this.getExcelHtmlCol(this.classId, this.linkedData);
+              } else {
+                this.$message.error(res.data.msg);
+              }
+            })
+            .catch((err) => {
+              // 处理接口调用失败（如网络错误、500错误等）
+              this.$message.error('删除接口调用失败，请重试');
+              console.error('删除失败：', err); // 方便调试
+            });
+        }).catch(() => {
+          // 这里仅处理用户点击“取消”的情况
+          this.$message.info('已取消删除');
+        });
+      }
+}
   },
   async created() {
     this.classId = this.$route.query.classId;
@@ -472,4 +497,7 @@ export default {
     background-repeat: no-repeat;
     background-position: center;
 }
+.right_box{
+  margin-bottom: 15px;
+}
 </style>