saber/src/views/manager/projectinfo/treeTemplate/dynamicExcel.vue

<template>
  <div class="excelHtnl">
    <div class="header" style=" position: absolute;left:10px;top:0">
      <div class="flexStar">
        <h2>编辑WBS库111</h2>
        <div
          class="GoBack marleft20"
          @click="GoBack()"
        >
          返回上一级
        </div>
      </div>
      <div style="width: 37%;">
        <avue-tabs :option="option" @change="handleChange"></avue-tabs>
      </div>
    </div>
    <div
      class="excelBox hc-excel-table-form"
      style="margin-top:40px;height: 100%;"
      @click="parentClick($event)"
    >
      <div style="width:60%;height: 100%;overflow: scroll;" class='parent' id='parent'></div>
      <div class="excelRight" style="width:30%;margin-left:4%;height: 100%;overflow: scroll;" >
        <span v-if="type.prop==='tab1'">
          <setInputTPT
            v-if="type.prop==='tab1'"
            :pkeyId='pkeyId'
            @cop='domss'
            :htmlData="htmlData"
            :checkList="checkList"
            @change="change"
          />
        </span>
        <span v-else-if="type.prop==='tab2'"> <electronicSignature :pkeyId1='pkeyId' :htmlData1="htmlData" /> </span>
        <span v-else-if="type.prop==='tab3'"> <setFormula :pkeyId1='pkeyId' :htmlData1="htmlData" /> </span>
        <span v-else-if="type.prop==='tab4'"> <editDefault :pkeyId1='pkeyId' :htmlData1="htmlData" /> </span>
        <span v-else-if="type.prop==='tab5'"> <promptSettings :pkeyId1='pkeyId' :htmlData1="htmlData" /> </span>
      </div>
    </div>
  </div>
</template>

<script>
import setInputTPT from './template/setInputTPT.vue'
import electronicSignature from './template/electronicSignature.vue'
import setFormula from './template/setFormula.vue'
import editDefault from './template/editDefault.vue'
import promptSettings from './template/promptSettings.vue'
import Vue from 'vue'
import {getExcelHtml } from '@/api/exctab/excelmodel'
export default {
  props: ['pkeyId'],
  data () {
    return {
      setUptype: 0,//右侧显示的类型1
      htmlData: {
        name: '',
        tr: '',
        td: ''
      },
      type:{},
      option:{
        column: [{
          label: '设置输入框',
          prop: 'tab1',
          width: 10,
        }, {

          label: '电签位置配置',
          prop: 'tab2',
        }, {
          label: '设置公式开放条件',
          prop: 'tab3',
        }, {

          label: '编辑默认信息',
          prop: 'tab4',
        }, {

          label: '提示设置',
          prop: 'tab5',
        }
        ]
      },
      checkList:[]
    }
  },
  mounted () {
    this.cop()
    this.type = this.option.column[0];
    console.log(111);
  },



  methods: {
    change(){
      this.checkList=[]
    },
    GoBack () {//返回上一级
      this.$emit('remove')
    },
    handleChange(column) {
      this.type = column;
    },
    async getExcelHtml (pkeyId) {
      const { data: res } = await getExcelHtml({ pkeyId })
      console.log(res);
      if (res.code === 200) {
        localStorage.setItem('excelHtml', res.data)
        this.copss();
      }
    },
    async cop () {
      let _that = this
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('excelHtml'),
        data () {
          return {
            formData: {},
            getTokenHeader: {},
            dap_site_data:{}
          }
        },
        methods: {
          contextmenuClick(tr, td, x1, x2, y1, y2, event) {},
          getInformation (name, tr, td) {//鼠标右键事件
            _that.getInformation(name, tr, td)
          },
          formUploadSuccess(){},
          formUploadExceed(){},
          formUploadLoading(){},
          delTableFormFile(){},
          formUploadError(){},
          uploadprogress(){},
          formRemoteMethod(){},
          getRegularExpression(){},
          checkboxGroupChange(){},
          formRemoteChange(){},
          dateKeydown(){},
          keyupShiftUp() {},
          keyupShiftDown() {},
          keyupShiftLeft() {},
          keyupShiftRight() {},
          inputLeftClick() {},
        }
      })
      var component = new MyComponent().$mount()
      document.getElementById('parent').appendChild(component.$el);
    },
    async copss () {
      let _that = this
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('excelHtml'),
        data () {
          return {
            formData: {},
            getTokenHeader: {},
            dap_site_data:{}
          }
        },
        methods: {
          contextmenuClick(tr, td, x1, x2, y1, y2, event) {},
          getInformation (name, tr, td) {//鼠标右键事件
            _that.getInformation(name, tr, td)
          },
          formUploadSuccess(){},
          formUploadExceed(){},
          formUploadLoading(){},
          delTableFormFile(){},
          formUploadError(){},
          uploadprogress(){},
          getRegularExpression(){},
          formRemoteMethod(){},
          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);
    },
    domss () {
      this.copss()
     
    },

    getInformation (name, tr, td) {//鼠标点击事件
      //console.log(event)
      let tdEle = null;
      //获取TD元素
      if(event.target.nodeName == "TD"){
        tdEle = event.target
      }else{
        tdEle = this.getParentTD(event.target);
      }
      let moreObj = {};
      if(tdEle){
        moreObj = this.getWidget(tdEle);
      }

      this.htmlData = Object.assign({
        name,
        tr,
        td
      },moreObj)
    },

    //excel父节点点击检测
    parentClick(e){
      let target = e.target;
      const{metaKey,ctrlKey}=e
      //console.log(target)
      let bgs = document.querySelectorAll("#parent .oldlace-bg")
      //console.log(bgs)
      for (let i = 0; i < bgs.length; i++) {
        bgs[i].classList.remove("oldlace-bg");
      }
      //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");
          if(metaKey||ctrlKey){
            target.classList.add("select-td");
            this.checkList.push({
              tr:target.getAttribute('trindex'),
              td:target.getAttribute('tdindex'),
            })
          }else{
            target.classList.remove("select-td");
            this.checkList.forEach((ele,index)=>{
              if(ele.tr===target.getAttribute('trindex')){
                this.checkList.splice(index,1)
              }
            })
          }
        }
      }
    },

    getParentTD(ele){
      let targetParent = ele.parentNode;
      while (targetParent.nodeName !== "TD") {
          if(targetParent.id == 'parent'){
            return null;
          }
          targetParent = targetParent.parentNode;
      }
      return targetParent;
    },


    //获取控件信息
    getWidget(tdEle){
      let checkLabels = tdEle.querySelectorAll('.el-checkbox-group span.el-checkbox__label');
      //console.log(checkLabels)
      if(checkLabels.length > 0){
        let checkLabelDatas = [];
        for (let i = 0; i < checkLabels.length; i++) {
          //console.dir(checkLabels[i])
          checkLabelDatas.push({
            dictValue:checkLabels[i].innerText
          });
        }
        return {
          type:'checkbox',
          checkLabelDatas
        }
      }

      let radioLabels = tdEle.querySelectorAll('.el-radio .el-radio__label');
      if(radioLabels.length > 0){
        let radioDatas = [];
        for (let i = 0; i < radioLabels.length; i++) {
          radioDatas.push({
            dictValue:radioLabels[i].innerText
          });
        }
        return {
          type:'radio',
          radioDatas
        }
      }

      let elSelect = tdEle.querySelectorAll('.el-select');
      //console.dir(elSelect[0])
      if(elSelect.length){
        let options = elSelect[0].__vue__.options;
        let selectDatas = [];
        for (let i = 0; i < options.length; i++) {
          selectDatas.push({
            dictValue:options[i].label
          });
        }
        return {
          type:'select',
          selectDatas
        }
      }

      return {};
    },


  },
  components: {
    setInputTPT,
    electronicSignature,
    setFormula,
    editDefault,
    promptSettings
  }
}
</script>

<style lang="scss" scoped>
.excelHtnl {
  margin: 0 0 0 10px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 100px 20px;
  height: 100%;
  .header {
    border-radius: 4px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    z-index: 99;
    height: 50px;
    align-items: center;
    .GoBack {
      color: rgba(0, 82, 216, 1);
      text-decoration: underline;
      display: flex;
      align-items: center;
      font-family: SourceHanSansSC;
      cursor: pointer;
    }
  }
  .excelBox {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    .excelRight {
      flex-grow: 1;
      box-sizing: border-box;
      padding: 20px 0px 0px 30px;
    }
  }
}

// 设置图片样式
.hc-upload-table-form {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hc-upload-table-form .el-upload {
  position: relative;
  flex: 1;
  height: 100%;
  color: #ccc;
}
.hc-upload-table-form .el-upload .hc-table-form-icon {
  font-size: 24px;
  font-weight: 100;
}
.hc-upload-table-form .el-upload .hc-table-form-img {
  width: 100%;
  height: 100%;
}

.excelBox{
  /deep/ .oldlace-bg{
    background-color: oldlace;
  }
  /deep/ .select-td{
    border-width: 4px;
    border-color: #E6A23C;
    border-style: solid;
  }
}
</style>