数据映射配置修改

src/api/tentative/testcollect.js

@@ -139,3 +139,46 @@ export const tablazy = (params) => {
     params
   })
 }
+//获取关联清表html
+export const getLinkHtml = (params) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/tab/html',
+    method: 'get',
+    params
+  })
+}
+
+//选择表单列表
+export const getLinkTablist = (params) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/tab/list',
+    method: 'get',
+    params
+  })
+}
+//选择表单列表
+export const getLinkElelist = (params) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/element/list',
+    method: 'get',
+    params
+  })
+}
+
+//获取输入框映射数据来源
+export const getLinkDetail = (params) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/input/detail',
+    method: 'get',
+    params
+  })
+}
+
+//映射数据保存
+export const saveLinkDetail = (row) => {
+  return request({
+    url: '/api/blade-manager/trial/summary/reflection/save',
+    method: 'post',
+    data: row
+  })
+}

src/views/tentative/components/dataMap.vue

@@ -23,29 +23,29 @@
         >
         <div style="margin-bottom: 20px;text-align: right;">
           <el-button @click="goBack">返回上一级</el-button>
-          <el-button type="primary" >保存</el-button>
+          <el-button type="primary" @click="saveInfo" :loading="saveLoaing">保存</el-button>
    
         </div>
         <div class="right_box">
           <div>
             <span>选择表单</span>
-            <el-select v-model="formVal" placeholder="请选择" style="width: 65%;margin-left: 10px;">
+            <el-select v-model="formVal" placeholder="请选择" style="width: 65%;margin-left: 10px;" @change="changeform">
               <el-option
                 v-for="item in formoptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+                :key="item.initTabId"
+                :label="item.tabName"
+                :value="item.initTabId">
               </el-option>
             </el-select>
           </div>
           <div>
             <span>选择元素</span>
-            <el-select v-model="formVal" placeholder="请选择" style="width: 65%;margin-left: 10px;margin-top: 15px;">
+            <el-select v-model="eleVal" placeholder="请选择" style="width: 65%;margin-left: 10px;margin-top: 15px;" @change="changeEle">
               <el-option
-                v-for="item in formoptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
+                v-for="item in eleOptions"
+                :key="item.ekey"
+                :label="item.eName"
+                :value="item.ekey">
               </el-option>
             </el-select>
           </div>
@@ -54,8 +54,8 @@
               <div style="width: 100%;height: 100%;overflow-y: auto;">
                   <el-row class="mb-4 ">
                     <div class="form_text">
-                      <div>表单名称：xxxxxxxx</div>
-                      <div>元素字段：</div>
+                      <div>表单名称：{{ infoDetail.tabName }}</div>
+                      <div>元素字段：{{  infoDetail.elementName }}</div>
                     </div>
                 </el-row>
               </div>
@@ -72,39 +72,66 @@
 </template>
 
 <script >
-import {
-
-  getExcelHtmlCol,
-
-} from "@/api/exctab/excelmodel";
+import {getLinkHtml,getLinkTablist,getLinkElelist,getLinkDetail,saveLinkDetail} from "@/api/tentative/testcollect";
 import Vue from "vue";
 export default{
+
+
   data(){
     return{
-      formoptions: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-          heights: '',
-        formVal:'',
+      formoptions: [ ],
+      eleOptions:[],
+      heights: '',
+      formVal:'',
+      formpid:'',
+      formname:'',
+      classId:'',
+      eleVal:'',
+      eleId:'',
+      clickKeyname:'',
+      infoDetail:{
+        elementName:'',
+        tabName:'',
+        id:''
+      },
+      saveLoaing:false,
+      clickArr:[],//需要绑定的数组
+      curItem:{
+        elementId:'',
+        elementKey:'',
+        htmlKeyName:'',
+        trialTabId:'',
+        trialTabName:''
+      }
+
+    }
+  },
+  watch:{
+    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
+                }
+              })
+          }else{
+            this.clickArr.push(this.curItem)
+          }
+        }
+        // 在这里执行你想要的操作
+      },
+      deep: true, // 指定为深度监听,
+      immediate:true
     }
   },
   methods:{
-    async getExcelHtmlCol(id) {
+    async getExcelHtmlCol(classId) {
       //获取excel模板
-      const { data: res } = await getExcelHtmlCol({ id });
+      const { data: res } = await getLinkHtml({ classId });
       console.log(res);
       if (res.code == 200) {
         // let _that = this
@@ -146,9 +173,8 @@ export default{
       }
     },
         //excel父节点点击检测
-    parentClick(e) {
+async    parentClick(e) {
       let target = e.target;
-
       let bgs = document.querySelectorAll("#parent .oldlace-bg");
       //console.log(bgs)
 
@@ -199,6 +225,11 @@ export default{
    
           });
         }
+        this.clickKeyname=target.getAttribute('keyname')||target1.getAttribute('keyname')
+        await  this.getInfoDEtail()
+        this.$set(this.curItem,'htmlKeyName',this.clickKeyname)
+    
+       
       }
     },
     getParentTD(ele) {
@@ -213,14 +244,133 @@ export default{
     },
     goBack(){
       this.$router.go(-1)
+    },
+    //获取表单类别
+    async getFormoptions(){
+      const { data: res } = await getLinkTablist({
+                classId:this.classId,
+          });
+          console.log(res);
+          if (res.code === 200) {
+           this.formoptions=res.data
+          
+          } else {
+          this.formoptions=[]
+        }
+    },
+    //选择表单获
+    changeform(val){
+      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)
+        
+        }
+      })
+    },
+    changeEle(val){
+      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)
+        }
+      })
+    },
+    //获取元素列表
+   async getEleList(val){
+      const { data: res } = await getLinkElelist({
+                id:val,
+          });
+          console.log(res);
+          if (res.code === 200) {
+           this.eleOptions=res.data
+          
+          } else {
+          this.eleOptions=[]
+        }
+    },
+   //获取数据映射源
+   async getInfoDEtail(){
+      const { data: res } = await getLinkDetail({
+            classId:this.classId,
+            keyName:this.clickKeyname
+          });
+          if (res.code === 200) {
+              this.infoDetail=res.data
+              
+              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)
+                  }
+                  })
+
+                 this.clickArr.push(this.curItem)
+              }else{
+                this.infoDetail={}
+                this.formVal=''
+                this.eleVal=''
+                this.curItem={}
+                // this.curItem.htmlKeyName=this.clickKeyname
+                this.$set( this.curItem,'htmlKeyName',this.clickKeyname)
+              }
+                
+           } else {
+                this.infoDetail={}
+           }
+          
+     
+    },
+
+    //映射数据保存
+   async saveInfo(){
+    console.log(this.clickArr,'this.clickArr');
+
+    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,
+          });
+      
+    
+         
+        }
     }
   },
   created(){
-    this.getExcelHtmlCol('1595726141791379457'); //获取excel模板
+      this.classId = this.$route.query.classId;
+      this.getExcelHtmlCol(this.classId); //获取excel模板
+      this.getFormoptions()
   },
   mounted(){
     this.heights = this.$refs.heights.clientHeight
-  }
+  },
+
 }
 </script>
 <style lang="scss" scoped>

src/views/tentative/testclassifyset.vue

@@ -437,10 +437,10 @@ import configDivision from "./components/configDivision.vue";
       this.refreshChange()
     },
     //数据映射配置
-    associatedClick() {
+    associatedClick(row) {
       this.$router.push({
         path: '/tentative/dataMap',
-        // query: { pid: this.projectid,wbsid:this.$route.query.wbsid }
+        query: { classId: row.id }
 
 
       });