数据映射配置修改

src/api/tentative/testcollect.js

@@ -181,4 +181,12 @@ export const saveLinkDetail = (row) => {
     method: 'post',
     data: row
   })
+}
+//获取当前清表表所有已匹配的映射字段列表接口
+export const getLinkData = (params) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/reflection/html/data',
+    method: 'get',
+    params
+  })
 }

src/views/tentative/components/dataMap.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
 
-  <basic-container>
+  <basic-container ref="heights">
     <el-row
         :gutter="20"
         :style="{height:heights-150+'px',}"
@@ -40,7 +40,7 @@
           </div>
           <div>
             <span>选择元素</span>
-            <el-select v-model="eleVal" placeholder="请选择" style="width: 65%;margin-left: 10px;margin-top: 15px;" @change="changeEle">
+            <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"
@@ -72,7 +72,7 @@
 </template>
 
 <script >
-import {getLinkHtml,getLinkTablist,getLinkElelist,getLinkDetail,saveLinkDetail} from "@/api/tentative/testcollect";
+import {getLinkHtml,getLinkTablist,getLinkElelist,getLinkDetail,saveLinkDetail,getLinkData} from "@/api/tentative/testcollect";
 import Vue from "vue";
 export default{
 
@@ -102,7 +102,8 @@ export default{
         htmlKeyName:'',
         trialTabId:'',
         trialTabName:''
-      }
+      },
+      linkedData:[],//已经绑定的数组
 
     }
   },
@@ -110,26 +111,45 @@ export default{
     curItem:{
       handler(newVal, oldVal) {
         if(this.curItem.elementId&&this.curItem.elementKey&&this.curItem.htmlKeyName&&this.curItem.trialTabId&&this.curItem.trialTabName){
-    
-          const exists =   this.clickArr.some(obj => obj.htmlKeyName === this.curItem.htmlKeyName);
-          if(exists){
-              this.clickArr.forEach((ele)=>{
-                if(ele.htmlKeyName===this.curItem.htmlKeyName){
-                  ele=this.curItem
-                }
-              })
+          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(this.curItem)
+            this.clickArr.push(newItem);
           }
+         
+        
         }
         // 在这里执行你想要的操作
       },
       deep: true, // 指定为深度监听,
-      immediate:true
-    }
+   
+    },
+
   },
   methods:{
-    async getExcelHtmlCol(classId) {
+       // 判断数组中是否包含目标对象的函数
+    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 });
       console.log(res);
@@ -138,11 +158,27 @@ export default{
         var MyComponent = await Vue.extend({
           data() {
             return {
-              formData: {},
+              formData: form,
             };
           },
+            //监听数据，伪双向绑定（v-model）
+            watch: {
+                formData: {
+                    handler(obj) {
+                        this.formData=obj
+                    },
+                    deep: true,
+                    immediate:true
+                },
+            },
           template: res.data,
           methods: {
+             //改变表单数据
+            //  setFormData(obj) {
+            //         this.formData = obj
+            //         _that.setFormData2(obj)
+            //         console.log(this.formData,'this.formData1111111');
+            //  },
             contextmenuClick() {},
             getInformation () {},
             formUploadSuccess(){},
@@ -173,7 +209,7 @@ export default{
       }
     },
         //excel父节点点击检测
-async    parentClick(e) {
+    async parentClick(e) {
       let target = e.target;
       let bgs = document.querySelectorAll("#parent .oldlace-bg");
       //console.log(bgs)
@@ -242,6 +278,9 @@ async    parentClick(e) {
       }
       return targetParent;
     },
+    setFormData2(obj){
+      console.log(obj,'obj');
+    },
     goBack(){
       this.$router.go(-1)
     },
@@ -250,7 +289,7 @@ async    parentClick(e) {
       const { data: res } = await getLinkTablist({
                 classId:this.classId,
           });
-          console.log(res);
+  
           if (res.code === 200) {
            this.formoptions=res.data
           
@@ -258,10 +297,25 @@ async    parentClick(e) {
           this.formoptions=[]
         }
     },
+    //获取当前清表表所有已匹配的映射字段列表
+   async getLinkedData(){
+      const { data: res } = await getLinkData({
+                id:this.classId,
+          });
+          if (res.code === 200) {
+           
+           this.linkedData=res.data
+           const mappedObject = Object.fromEntries(res.data.map(item => [item.htmlKeyName, item.elementValue.eName]));
+          this.linkedData=mappedObject
+          } else {
+          this.linkedData=[]
+        }
+    },
     //选择表单获
     changeform(val){
       this.getEleList(val)
       this.formoptions.forEach((ele)=>{
+
         if(ele.initTabId===val){
           this.formpid=ele.pkeyId
           this.formname=ele.initTableName
@@ -322,8 +376,9 @@ async    parentClick(e) {
                     this.$set( this.curItem,'elementKey',ele.ekey)
                   }
                   })
+            
 
-                 this.clickArr.push(this.curItem)
+               
               }else{
                 this.infoDetail={}
                 this.formVal=''
@@ -343,6 +398,10 @@ async    parentClick(e) {
     //映射数据保存
    async saveInfo(){
     console.log(this.clickArr,'this.clickArr');
+    if(this.clickArr.length===0){
+      this.$message.warning('请进行数据映射配置')
+      return
+    }
 
     this.saveLoaing=true
         const { data: res } = await saveLinkDetail({
@@ -356,19 +415,23 @@ async    parentClick(e) {
             type: "success",
             message:res.msg,
           });
-      
-    
+          await this.getLinkedData()
+          await this.getExcelHtmlCol(this.classId,this.linkedData); //获取excel模板
+          this.clickArr=[]
          
         }
     }
   },
-  created(){
+ async created(){
       this.classId = this.$route.query.classId;
-      this.getExcelHtmlCol(this.classId); //获取excel模板
+      await this.getLinkedData()
+     await this.getExcelHtmlCol(this.classId,this.linkedData); //获取excel模板
       this.getFormoptions()
+     
   },
   mounted(){
     this.heights = this.$refs.heights.clientHeight
+
   },
 
 }