TBA_GXPT/ruoyi-ui/src/views/register/modelData/index.vue

<template>
  <div style="width: 100%;padding-top: 0%;display: flex;" :style="{'height':heightAll+'px'}">
    <div style="width: 10%;;height: 87vh;">
      <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="data" @node-click="handleNodeClick" 
      node-key="id" style="margin-left: 1%;margin-top: 1%;width: 110%;background-color: transparent;" default-expand-all :key="valueKet">
          <template #default="{ node, data }">
            <span  style="justify-content: space-between;display: flex;width: 50%;align-items: center;">
              <div class="custom-tree-node">
                  <svg-icon icon-class="model2" style="color: #eebe77;width: 1.5rem;height:1.5rem;" v-if="data.label=='数据源'"/>
                  <svg-icon icon-class="model" style="color: #13E03B;;width: 1.5rem;height:1.5rem;" v-if="data.label=='数据集'"/>
                  <svg-icon svg-icon icon-class="cate" style="color: red;;width: 1.5rem;height:1.5rem;" v-if="data.label=='元数据'"/>
                  <svg-icon icon-class="流程图" style="color: red;;width: 1.5rem;height:1.5rem;" v-if="data.label=='流程图'"/>
                <span style="font-size: 1rem;">{{ node.label }}</span>
              </div>
            </span>
          </template>
        </el-tree>
    </div>
    <div style="width: 89%;margin-left: 1%;height: 87vh;background-color:#F5F8F9;padding-top: 0.8%;">
        <dataSource :data="dataSourceData" v-if="currentNodeKey =='1'"/>
        <metaData :data="dataSourceData" v-if="currentNodeKey =='2'"/>
        <dataJi :data="dataSourceData" v-if="currentNodeKey =='3'"/>
        <liucheng v-if="currentNodeKey =='4'"/>
    </div>
  </div>
</template>
<script   setup>
import { reactive } from 'vue'
import dataSource from './dataSource.vue';
import metaData from './metaData.vue';
import dataJi from './dataJi.vue';
import liucheng from './liucheng.vue';
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const data =  ref([
    {
        label:'数据源',
        value:'dataSource',
        id:'1'
    },
    {
        label:'元数据',
        value:'metaData',
        id:'2'
    },
    {
        label:'数据集',
        value:'dataUn',
        id:'3'
    },
    {
        label:'流程图',
        value:'dataUn',
        id:'4'
    },
])
const currentNodeKey = ref('1')
const dataSourceData = ref()
const title =  ref([])
const titleTree =  ref([])
const currentPage =  ref(1)
const total =  ref(1)
const tableData = ref([])
const tableheight = window.innerHeight*0.7
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');

const formZu = ref({
  itemName:'',
  itemTp:'',
  itemEn:'',
  itemTp:'',
  itemDataTp:'',
  itemDefaultVal:'',
  itemUnit:'',
  itemNotes:'',
});
const rulesZu = reactive({
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
  itemEn: [{ required: true, message: '必填', trigger: 'blur' }],
  itemTp: [{ required: true, message: '必填', trigger: 'blur' }],
  itemDataTp: [{ required: true, message: '必填', trigger: 'blur' }],
  itemDefaultVal: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefZu = ref();

const formTree = ref({
  itemName:'',
  catePid:'',
  itemNo:'',
  itemNotes:''
});
const rulesTree = reactive({
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  catePid: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();

function handleNodeClick(node, data){
    currentNodeKey.value = node.id
    console.log(node, data)
}
onMounted(() => {
});

</script>
<style scoped>
:deep(.treeLeft) .el-tree-node__content {
  display: flex !important;
  height: 40px;                  /* 按设计稿调整高度 */
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #ecf5ff;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: #d9ecff !important;
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }

.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center; 
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>