数据映射配置样式修改

src/views/tentative/components/dataMap.vue

@@ -2,139 +2,157 @@
   <div class="layout-container">
     <div class="panel" ref="panel1">
       <div
-            class='parent hc-excel-table-form'
-            id='parent'
-            @click="parentClick($event)"
-
-          >
-          </div>
+        class="parent hc-excel-table-form"
+        id="parent"
+        @click="parentClick($event)"
+      ></div>
     </div>
+    <div class="splitter"></div>
     <div class="panel" ref="panel2">
-      <div style="margin-bottom: 20px;text-align: right;">
-          <el-button @click="goBack">返回上一级</el-button>
-          <el-button type="primary" @click="saveInfo" :loading="saveLoaing">保存</el-button>
-
+      <div style="margin-bottom: 20px; text-align: right">
+        <el-button @click="goBack">返回上一级</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"
+            @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>
-        <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>
 
-            <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>
-                </el-row>
+        <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>
-            </div>
+            </el-row>
+          </div>
         </div>
-
+      </div>
     </div>
-    
   </div>
 </template>
-<script >
-import {getLinkHtml,getLinkTablist,getLinkElelist,getLinkDetail,saveLinkDetail,getLinkData} from "@/api/tentative/testcollect";
+<script>
+import {
+  getLinkHtml,
+  getLinkTablist,
+  getLinkElelist,
+  getLinkDetail,
+  saveLinkDetail,
+  getLinkData,
+} from "@/api/tentative/testcollect";
 import Vue from "vue";
-import Split from 'split.js';
-export default{
-
-
-  data(){
-    return{
-      formoptions: [ ],
-      eleOptions:[],
-      heights: '',
-      formVal:'',
-      formpid:'',
-      formname:'',
-      classId:'',
-      eleVal:'',
-      eleId:'',
-      clickKeyname:'',
-      infoDetail:{
-        elementName:'',
-        tabName:'',
-        id:''
+import Split from "split.js";
+export default {
+  data() {
+    return {
+      formoptions: [],
+      eleOptions: [],
+      heights: "",
+      formVal: "",
+      formpid: "",
+      formname: "",
+      classId: "",
+      eleVal: "",
+      eleId: "",
+      clickKeyname: "",
+      infoDetail: {
+        elementName: "",
+        tabName: "",
+        id: "",
       },
-      saveLoaing:false,
-      clickArr:[],//需要绑定的数组
-      curItem:{
-        elementId:'',
-        elementKey:'',
-        htmlKeyName:'',
-        trialTabId:'',
-        trialTabName:''
+      saveLoaing: false,
+      clickArr: [], //需要绑定的数组
+      curItem: {
+        elementId: "",
+        elementKey: "",
+        htmlKeyName: "",
+        trialTabId: "",
+        trialTabName: "",
       },
-      linkedData:[],//已经绑定的数组
-
-    }
+      linkedData: [], //已经绑定的数组
+    };
   },
-  watch:{
-    curItem:{
+  watch: {
+    curItem: {
       handler(newVal, oldVal) {
-        if(this.curItem.elementId&&this.curItem.elementKey&&this.curItem.htmlKeyName&&this.curItem.trialTabId&&this.curItem.trialTabName){
+        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
-
+          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{
+            });
+          } else {
             this.clickArr.push(newItem);
           }
-
-
         }
         // 在这里执行你想要的操作
       },
       deep: true, // 指定为深度监听,
-
     },
-
   },
-  methods:{
-       // 判断数组中是否包含目标对象的函数
+  methods: {
+    // 判断数组中是否包含目标对象的函数
     containsObject(array, keyName, targetValue) {
-        for (let i = 0; i < array.length; i++) {
-            if (array[i][keyName] === targetValue) {
-                return true;
-            }
+      for (let i = 0; i < array.length; i++) {
+        if (array[i][keyName] === targetValue) {
+          return true;
         }
-        return false;
+      }
+      return false;
     },
-    async getExcelHtmlCol(classId,form) {
-
-
+    async getExcelHtmlCol(classId, form) {
       //获取excel模板
       const { data: res } = await getLinkHtml({ classId });
       console.log(res);
@@ -146,43 +164,43 @@ export default{
               formData: form,
             };
           },
-            //监听数据，伪双向绑定（v-model）
-            watch: {
-                formData: {
-                    handler(obj) {
-                        this.formData=obj
-                    },
-                    deep: true,
-                    immediate:true
-                },
+          //监听数据，伪双向绑定（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(){},
-            formUploadExceed(){},
-            formUploadLoading(){},
-            delTableFormFile(){},
-            formUploadError(){},
-            uploadprogress(){},
-            formRemoteMethod(){},
-            getRegularExpression(){},
-            checkboxGroupChange(){},
-            formRemoteChange(){},
-            dateKeydown(){},
+            getInformation() {},
+            formUploadSuccess() {},
+            formUploadExceed() {},
+            formUploadLoading() {},
+            delTableFormFile() {},
+            formUploadError() {},
+            uploadprogress() {},
+            formRemoteMethod() {},
+            getRegularExpression() {},
+            checkboxGroupChange() {},
+            formRemoteChange() {},
+            dateKeydown() {},
             keyupShiftUp() {},
             keyupShiftDown() {},
             keyupShiftLeft() {},
             keyupShiftRight() {},
             inputLeftClick() {},
-          }
+          },
         });
         var component = new MyComponent().$mount();
         let na = document.getElementById("parent");
@@ -193,23 +211,22 @@ export default{
         document.getElementById("parent").appendChild(component.$el);
       }
     },
-        //excel父节点点击检测
+    //excel父节点点击检测
     async parentClick(e) {
       let target = e.target;
       let bgs = document.querySelectorAll("#parent .oldlace-bg");
       //console.log(bgs)
 
       let tdEle = this.getParentTD(target);
-      let target1
-        if(tdEle){
-          let mydiv=tdEle.getElementsByTagName('div')
-          target1=mydiv[0]
-        }else{
-          tdEle=target
-          let mydiv=tdEle.getElementsByTagName('div')
-          target=mydiv[0]
-
-        }
+      let target1;
+      if (tdEle) {
+        let mydiv = tdEle.getElementsByTagName("div");
+        target1 = mydiv[0];
+      } else {
+        tdEle = target;
+        let mydiv = tdEle.getElementsByTagName("div");
+        target = mydiv[0];
+      }
       for (let i = 0; i < bgs.length; i++) {
         bgs[i].classList.remove("oldlace-bg");
       }
@@ -217,16 +234,15 @@ export default{
         target.getAttribute("trindex") !== null &&
         target.getAttribute("tdindex")
       ) {
-        target=target
-      }else{
-        target=target1
+        target = target;
+      } else {
+        target = target1;
       }
       //console.log(target.getAttribute('trindex'))
       if (
         target.getAttribute("trindex") !== null &&
         target.getAttribute("tdindex")
-      )
-      {
+      ) {
         let tdEle = this.getParentTD(target);
         if (tdEle) {
           target.classList.add("oldlace-bg");
@@ -236,21 +252,17 @@ export default{
             "_" +
             target.getAttribute("tdindex");
 
-
-
           this.$nextTick(() => {
             let row = document.querySelectorAll(".warning-row");
             if (row.length) {
               this.$refs.tablescroll.$el.scrollTop = row[0].offsetTop;
             }
-
           });
         }
-        this.clickKeyname=target.getAttribute('keyname')||target1.getAttribute('keyname')
-        await  this.getInfoDEtail()
-        this.$set(this.curItem,'htmlKeyName',this.clickKeyname)
-
-
+        this.clickKeyname =
+          target.getAttribute("keyname") || target1.getAttribute("keyname");
+        await this.getInfoDEtail();
+        this.$set(this.curItem, "htmlKeyName", this.clickKeyname);
       }
     },
     getParentTD(ele) {
@@ -263,176 +275,161 @@ export default{
       }
       return targetParent;
     },
-    setFormData2(obj){
-      console.log(obj,'obj');
+    setFormData2(obj) {
+      console.log(obj, "obj");
     },
-    goBack(){
-      this.$router.go(-1)
+    goBack() {
+      this.$router.go(-1);
     },
     //获取表单类别
-    async getFormoptions(){
+    async getFormoptions() {
       const { data: res } = await getLinkTablist({
-                classId:this.classId,
-          });
-
-          if (res.code === 200) {
-           this.formoptions=res.data
+        classId: this.classId,
+      });
 
-          } else {
-          this.formoptions=[]
-        }
+      if (res.code === 200) {
+        this.formoptions = res.data;
+      } else {
+        this.formoptions = [];
+      }
     },
     //获取当前清表表所有已匹配的映射字段列表
-   async getLinkedData(){
+    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]));
-          this.linkedData=mappedObject
-          } else {
-          this.linkedData=[]
-        }
+        id: this.classId,
+      });
+      if (res.code === 200) {
+        this.linkedData = res.data;
+        const mappedObject = Object.fromEntries(
+          res.data.map((item) => [item.htmlKeyName, item.elementValue])
+        );
+        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
-          this.infoDetail.tabName=ele.tabName
-          this.$set(this.curItem,'trialTabId',ele.pkeyId)
-          this.$set(this.curItem,'trialTabName',ele.initTableName)
-
+    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)
+    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){
+    async getEleList(val) {
       const { data: res } = await getLinkElelist({
-                id:val,
-          });
-          console.log(res);
-          if (res.code === 200) {
-           this.eleOptions=res.data
-
-          } else {
-          this.eleOptions=[]
-        }
+        id: val,
+      });
+      console.log(res);
+      if (res.code === 200) {
+        this.eleOptions = res.data;
+      } else {
+        this.eleOptions = [];
+      }
     },
-   //获取数据映射源
-   async getInfoDEtail(){
+    //获取数据映射源
+    async getInfoDEtail() {
       const { data: res } = await getLinkDetail({
-            classId:this.classId,
-            keyName:this.clickKeyname
+        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);
+            }
           });
-          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)
-                  }
-                  })
-
-
-
-              }else{
-                this.infoDetail={}
-                this.formVal=''
-                this.eleVal=''
-                this.curItem={}
-                // this.curItem.htmlKeyName=this.clickKeyname
-                this.$set( this.curItem,'htmlKeyName',this.clickKeyname)
-              }
-
-           } else {
-                this.infoDetail={}
-           }
-
-
+          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 = {};
+      }
     },
 
     //映射数据保存
-   async saveInfo(){
-    console.log(this.clickArr,'this.clickArr');
-    if(this.clickArr.length===0){
-      this.$message.warning('请进行数据映射配置')
-      return
-    }
+    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({
-                    classId:this.classId,
-                    reflectionBeanList: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,
         });
-        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=[]
-
-        }
-    }
+        await this.getLinkedData();
+        await this.getExcelHtmlCol(this.classId, this.linkedData); //获取excel模板
+        this.clickArr = [];
+      }
+    },
   },
- async created(){
-      this.classId = this.$route.query.classId;
-      await this.getLinkedData()
-     await this.getExcelHtmlCol(this.classId,this.linkedData); //获取excel模板
-      this.getFormoptions()
-
+  async created() {
+    this.classId = this.$route.query.classId;
+    await this.getLinkedData();
+    await this.getExcelHtmlCol(this.classId, this.linkedData); //获取excel模板
+    this.getFormoptions();
   },
-  mounted(){
-  
+  mounted() {
     Split([this.$refs.panel1, this.$refs.panel2], {
-      direction: 'horizontal', // 设置分割方向，'horizontal' 或 'vertical'
-      gutterSize: 15,          // 设置分割条的大小
-      sizes: [75,25],     // 初始化各个面板的宽度比例
-      minSize: 100,            // 设置面板的最小尺寸
+      direction: "horizontal", // 设置分割方向，'horizontal' 或 'vertical'
+      gutterSize: 10, // 设置分割条的大小
+      sizes: [75, 25], // 初始化各个面板的宽度比例
+      minSize: 100, // 设置面板的最小尺寸
       onDragEnd: () => {
         // 拖动结束后的回调，可以执行一些额外的操作
-        console.log('Panel sizes adjusted');
-      }
+        console.log("Panel sizes adjusted");
+      },
     });
-
   },
-
-}
+};
 </script>
 
-
 <style scoped>
 .layout-container {
   display: flex;
@@ -451,4 +448,20 @@ export default{
 .panel:nth-child(odd) {
   background: white;
 }
+
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+
+</style>
+<style>
+.gutter-horizontal {
+    background-image: url('/img/split.png') !important;
+    cursor: col-resize;
+    background-repeat: no-repeat;
+    background-position: center;
+}
 </style>