cloud-web/src/views/property/astr/index.vue

<template>
  <div>
    <h1>数据资产结构</h1>

    <el-container>
      <el-aside width="400px">

        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

      </el-aside>

      <el-main>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: xx-large"></span>
            <template>

              <el-descriptions class="margin-top" title="资产模型基本信息" :column="2"  border>
                <el-descriptions-item>
                  <template slot="label">表名称</template>
                  {{ tableBasic.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">表备注</template>
                  {{ tableBasic.tableRemark }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">数据量</template>
                  {{ dataNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">是否核心</template>
                  <dict-tag :options="dict.type.sys_no" :value="tableBasic.isCenter"/>
                </el-descriptions-item>
              </el-descriptions>
            </template>

          </div>




        </el-card>

        <el-card class="box-card" title="资产模型基本信息" :column="2" >
          <div slot="header" class="clearfix">
            <span>资产模型详细信息</span>
          </div>
          <el-table
            :data="tableStructure" style="width: 100%">
            <el-table-column label="名称" prop="field"></el-table-column>
            <el-table-column label="注释" prop="annotation"></el-table-column>
            <el-table-column label="是否主键" prop="primarys">
              <template slot-scope="scope">
                  <span v-if="scope.row.primarys==='PRI'">
                    <el-tag type="success">{{scope.row.primarys }}</el-tag>
                  </span>
                <span v-if="scope.row.primarys===''">
                    <el-tag type="danger">NO</el-tag>
                  </span>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="type"></el-table-column>
            <el-table-column label="映射类型" prop="types"></el-table-column>
            <el-table-column label="是否为空" prop="nullable"></el-table-column>
            <el-table-column label="是否字典" prop="isDictionary"></el-table-column>
            <el-table-column label="映射字典" prop="dictionaryTable"></el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>

  </div>
</template>
<style>

.el-main {
  background-color: #ececec;
  color: #000000;
  line-height: 147px;
}
</style>
<script>


//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import { findTableValue, getExtractDataTableNameList } from '@/api/property/astr'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  dicts: ['sys_no'],
  props: {},
  data() {
    //这里存放数据"

    return {
      tableMapping:[],
      data:[],
      defaultProps: {
        children: 'tableNames',
        label: 'name'
      },
      dataNum:0,
      tableBasic:{

      },
      tableStructure:[],
      javaType:[],
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getSelectList(){
      getExtractDataTableNameList().then((res)=>{
        this.data = res.data
      })
    },
    handleNodeClick(data){
      // console.log(data)
      this.tableBasic=data
      this.dataNum=data.tableFie.length
      this.tableStructure=data.tableFie
      // console.log(this.tableStructure)
        findTableValue(data.dataId,data.name).then(res=>{
          let tableMapping=res.data
          // console.log(res.data)

          for (const index in tableMapping) {
            for (const i in this.tableStructure) {
              if (tableMapping[index].key === this.tableStructure[i].field) {

                this.tableStructure[i].types.push(tableMapping[index].type)

                console.log(this.tableStructure[i].types)
                if (i!== 0&& this.tableStructure[i].types==this.tableStructure[0].types){

                  alert("dawdwadad")
                  return
                }
              }
            }

          }


        })
    },


  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getSelectList();

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>



</style>