eta_front/src/components/edbHistoryDialog.vue

<template>
    <!-- ETA1.5.4 将该组件作为一个页面,若上线后无回滚需求可删除 -->
  <el-dialog
		:visible.sync="isOpenDialog"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
    custom-class="edb-hitory-dialog dialog"
    :title="treeData.EdbName"
		@close="cancelHandle"
		center
		width="1200px"
		top="5vh"
		v-dialogDrag
	>
    <div class="main">
      <vue2-org-tree
        :data="treeData"
        :props="{
          label: 'EdbName',
				  children: 'Child',
        }"
        :horizontal="false"
        :render-content="renderContent"
        @on-node-click="handleClickNode"
      />
        <!-- @on-node-mouseover="showWholeName"
        @on-node-mouseout="hideWholeName" -->
    </div>
  </el-dialog>
</template>
<script>
import { dataBaseInterface } from '@/api/api.js';
export default {
  props: {
    isOpenDialog: {
      type: Boolean
    },
    edbId: {
      type: Number
    }
  },
  watch: {
    isOpenDialog(newval) {
      newval&&this.getData()
    }
  },
  data() {
    return {
      treeData: {}
    }
  },
  methods: {
    renderContent(h,data) {
      return (
        <el-tooltip content={data.RuleTitle} placement='top' popper-class='node-tooltip'>
          <span class='node'>{data.EdbName}</span>
        </el-tooltip>
      )
    },
    handleClickNode(e,data){
        //console.log(data)
        //EdbInfoType=1 跳预测指标详情,=0跳指标库详情
        const {ClassifyId,UniqueCode,EdbInfoId,EdbInfoType} = data
        let {href} = this.$router.resolve({path:EdbInfoType===1?'/predictEdb':'/database',query:{code:UniqueCode,id:EdbInfoId,classifyId:ClassifyId}});
        window.open(href,'_blank');

    },

     async getData() {
      const res = await dataBaseInterface.getEdbCreateHistory({EdbInfoId: Number(this.edbId)})

      if(res.Ret!==200) return

      this.treeData = res.Data;
    },

    cancelHandle() {
      this.$emit('update:isOpenDialog',false)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  text-align: center;
}
</style>
<style lang="scss">
.edb-hitory-dialog {
  .org-tree-container {
    margin: 0 auto;
    /* .org-tree-node-label {  } */
    .org-tree-node-label-inner{
        cursor: pointer;
        background-color: #F2F6FA;
        color: #333333;
        padding:20px;
        border-radius: 4px;
        font-size: 16px;
        &:hover{
            color:#409EFF;
            text-decoration: underline;
        }
    }
    .org-tree{
        >.org-tree-node{
            >.org-tree-node-label{
                .org-tree-node-label-inner{
                    background-color: #409EFF;
                    color: white;
                }
            }
        }
    }
    .org-tree-node-children {
        .org-tree-node ~ .org-tree-node{
            padding-left: 40px;
        }
    }
    
  }
  .el-dialog__body {
    height: 600px;
    overflow-y: auto;
  }
}
.node-tooltip{
    font-size: 14px;
    padding:10px;
    text-align: center;
}
</style>