数据映射配置修改

src/views/tentative/components/dataMap.vue

@@ -0,0 +1,275 @@
+<!--  -->
+<template>
+  <basic-container>
+    <el-row
+        :gutter="20"
+        :style="{height:heights-150+'px',}"
+      >
+        <el-col :span="16">
+          <div
+            class='parent hc-excel-table-form'
+            id='parent'
+            @click="parentClick($event)"
+          >
+          </div>
+
+        </el-col>
+        <el-col
+          :span="7"
+          style="position: fixed;right: 13px;"
+        >
+        <div style="margin-bottom: 20px;text-align: right;">
+          <el-button>返回上一级</el-button>
+          <el-button type="primary" >保存</el-button>
+          <el-button
+                v-show="AddNewElementField == '替换元素'"
+                type="primary"
+                :disabled="tag"
+              
+          >保存</el-button>
+        </div>
+        <div class="right_box">
+          <div>
+            <span>选择表单</span>
+            <el-select v-model="formVal" placeholder="请选择" style="width: 65%;margin-left: 10px;">
+              <el-option
+                v-for="item in formoptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            <span>选择元素</span>
+            <el-select v-model="formVal" placeholder="请选择" style="width: 65%;margin-left: 10px;margin-top: 15px;">
+              <el-option
+                v-for="item in formoptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </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>表单名称：xxxxxxxx</div>
+                      <div>表单名称：xxxxxxxx</div>
+                    </div>
+                </el-row>
+              </div>
+            </div>
+        </div>
+      
+     
+        </el-col>
+      </el-row>
+  </basic-container>
+
+</template>
+
+<script >
+import {
+
+  getExcelHtmlCol,
+
+} from "@/api/exctab/excelmodel";
+import Vue from "vue";
+export default{
+  data(){
+    return{
+      formoptions: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        formVal:'',
+    }
+  },
+  methods:{
+    async getExcelHtmlCol(id) {
+      //获取excel模板
+      const { data: res } = await getExcelHtmlCol({ id });
+      console.log(res);
+      if (res.code == 200) {
+        // let _that = this
+        var MyComponent = await Vue.extend({
+          data() {
+            return {
+              formData: {},
+            };
+          },
+          template: res.data,
+          methods: {
+            contextmenuClick() {},
+            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");
+        na.innerHTML = `<div
+        class='parent'
+        id='parent'"
+      ></div>`;
+        document.getElementById("parent").appendChild(component.$el);
+      }
+    },
+        //excel父节点点击检测
+    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]
+
+        }
+      for (let i = 0; i < bgs.length; i++) {
+        bgs[i].classList.remove("oldlace-bg");
+      }
+      if (
+        target.getAttribute("trindex") !== null &&
+        target.getAttribute("tdindex")
+      ) {
+        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");
+
+          let trtd =
+            target.getAttribute("trindex") +
+            "_" +
+            target.getAttribute("tdindex");
+    
+
+
+          this.$nextTick(() => {
+            let row = document.querySelectorAll(".warning-row");
+            if (row.length) {
+              this.$refs.tablescroll.$el.scrollTop = row[0].offsetTop;
+            }
+   
+          });
+        }
+      }
+    },
+    getParentTD(ele) {
+      let targetParent = ele.parentNode;
+      while (targetParent.nodeName !== "TD") {
+        if (targetParent.id == "parent") {
+          return null;
+        }
+        targetParent = targetParent.parentNode;
+      }
+      return targetParent;
+    },
+  },
+  created(){
+    this.getExcelHtmlCol('1719887474777899009'); //获取excel模板
+  },
+  mounted(){
+ 
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+
+.parent{
+  /deep/ .select-td{
+    border-width: 4px;
+    border-color: #E6A23C;
+    border-style: solid;
+  }
+
+  /deep/ .oldlace-bg{
+    background-color: oldlace;
+  }
+}
+
+.right_box{
+  width: 95%;
+  height: calc(100vh - 235px);
+  border: 1px solid gray;
+  padding-left: 20px;
+  padding-top: 20px;
+  text-align: left;
+}
+
+.replace_box{
+  margin-top: 80px;
+  border-top: 1px gray dashed;
+  width: 95%;
+
+  position: relative;
+  padding-top: 20px;
+  padding-left: 15px;
+
+ 
+ 
+}
+.replace_box::after {
+				content: '映射数据来源';
+				position: absolute;
+				right: 34%;
+				top: -15px;
+        background-color: white;
+				text-align: center;
+				font-size: 18px;
+				color: orange;
+        font-weight: 900;
+		}
+    .form_text{
+      width: 100%;
+      text-align: left;
+      line-height: 30px;
+    }
+
+</style>

src/views/tentative/testclassifyset.vue

@@ -405,11 +405,13 @@
     },
     //数据映射配置
     associatedClick() {
-        this.$message({
-          type: "warning",
-          message: "暂无相关接口"
-        });
-      },
+      this.$router.push({
+        path: '/tentative/dataMap',
+        // query: { pid: this.projectid,wbsid:this.$route.query.wbsid }
+
+
+      });
+     },
     },
   
   };