eta_front/src/views/dataEntry_manage/sharedComponents/sharedMenu.vue

<template>
  <div class="shared-classify">
    <div class="section-item">
      <div class="tree-title">我共享的</div>
      <div class="shared-tree">
        <el-tree
          ref="sharedTree"
          :class="['catalog-tree',{'target_tree': source==='chart'}]"
          empty-text="暂无数据"
          :data="sharedClassifys"
          :props="{
            children: 'Children'
          }"
          node-key="UniqueCode"
          :expand-on-click-node="false"
          @current-change="(data,node)=>{$parent.nodeChange({data,node,treeName:'shared'})}"
        >
            <div class="custom-tree-node" slot-scope="{ data }">
                <span class="tree-label">{{ source==='edb'?data.ClassifyName:data.ChartClassifyName }}</span>
            </div>
        </el-tree>
      </div>
    </div>

    <div class="section-item receive-item">
      <div class="tree-title">收到共享</div>
      <div class="shared-tree">
        <el-tree
          ref="receiveTree"
          :class="['catalog-tree',{'target_tree': source==='chart'}]"
          empty-text="暂无数据"
          :data="receiveSharedClassifys"
          :props="{
            children: 'Children'
          }"
          node-key="UniqueCode"
          :expand-on-click-node="false"
          @current-change="(data,node)=>{$parent.nodeChange({data,node,treeName:'sharedReceive'})}"
        >
            <div class="custom-tree-node" slot-scope="{ data }">
                <span class="tree-label">{{ source==='edb'?data.ClassifyName:data.ChartClassifyName }}</span>
            </div>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { edbBaseV2Interface,chartBaseV2Interface } from '@/api/modules/chartApi';
export default {
  props: {
    source: { //指标或图库
      type: String,
      default: 'edb'
    }
  },
  data() {
    return {
      sharedClassifys: [],
      receiveSharedClassifys: []
    }
  },
  mounted(){
    this.getSharedClassify()
  },
  methods:{
    async getSharedClassify() {
      const res = this.source === 'edb'
        ? await edbBaseV2Interface.getSharedClassify()
        : await chartBaseV2Interface.getSharedClassify()
      if(res.Ret !== 200) return

      this.sharedClassifys = res.Data.Send || [];
      this.receiveSharedClassifys = res.Data.Received || [];
    }
  },
}
</script>
<style scoped lang='scss'>
.shared-classify {
  height: 100%;
  .section-item {
    height: 50%;
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    &.receive-item {
      border-top: 1px solid #C8CDD9;
    }
    .tree-title {
      font-size: 15px;
      margin: 15px 0;
    }
    .shared-tree {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>