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

<template>
  <div class="excelHtnl">
    <div class="header">
      <div class="flexStar">
        <h2>编辑WBS库</h2>
        <div
          class="GoBack marleft20"
          @click="GoBack()"
        >
          返回上一级
        </div>
      </div>
      <div>
        <el-button
          type="info"
          size="small"
          @click="setUptype=0"
        >设置输入框</el-button>
        <el-button
          type="info"
          size="small"
          @click="setUptype=1"
        >电签位置配置</el-button>
        <el-button
          type="success"
          size="small"
          @click="setUptype=2"
        >设置公式开放条件</el-button>
        <el-button
          type="primary"
          size="small"
          @click="setUptype=3"
        >编辑默认信息</el-button>
        <el-button
          type="info"
          size="small"
          @click="setUptype=4"
        >提示设置</el-button>
      </div>
    </div>
    <div class="excelBox">
      <div
        style="width:60%;"
        class='parent'
        id='parent'
      ></div>
      <div
        class="excelRight"
        style="width:30%;margin-left:6%;"
      >
        <setInputTPT
          v-if="setUptype===0"
          :pkeyId='pkeyId'
          @cop='domss'
          :htmlData="htmlData"
        />
        <electronicSignature v-if="setUptype===1" />
        <setFormula v-if="setUptype===2" />
        <editDefault v-if="setUptype===3" />
        <promptSettings v-if="setUptype===4" />
      </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 dictVue from '../../../system/dict.vue'
export default {
  props: ['pkeyId'],
  data () {
    return {
      setUptype: 0,//右侧显示的类型1
      htmlData: {
        name: '',
        tr: '',
        td: ''
      }
    }
  },
  mounted () {
    this.cop()
  },
  methods: {
    GoBack () {//返回上一级
      this.$emit('remove')
    },
    async cop () {
      let _that = this
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('excelHtml'),
        data () {
          return {
            formData: {}
          }
        },
        methods: {
          getInformation (name, tr, td) {//鼠标右键事件
            _that.getInformation(name, tr, td)
          },
        }
      })
      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: {}
          }
        },
        methods: {
          getInformation (name, tr, td) {//鼠标右键事件
            _that.getInformation(name, tr, td)
          },
        }
      })
      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) {//鼠标点击事件
      this.htmlData = {
        name,
        tr,
        td
      }
    },
  },
  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%;
  overflow: scroll;
  .header {
    display: flex;
    justify-content: space-between;
    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;
    }
  }
}
</style>