Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/SBOM.vue

<template>
  <div class="flex align-center justify-start">
    <d-search icon-position="left" style="width: 380px" placeholder="请输入搜索软件名称"></d-search>
    <d-checkbox class="ml-10" label="只显示有漏洞的软件" :isShowTitle="false" v-model="checked" />
  </div>
  <Card simple class="jyh-card mt-3">
    <div class="clear-padding">
      <d-table class="jyh-table" v-if="tableData.length>0"  :indent="32" @check-change="treeCheckChange" :data="tableData" row-key="id">
        <d-column field="licenseName" header="组织名称" show-overflow-tooltip>
          <template #default="scope">
            <a class="devui-link" @click="showDetail = true">{{ scope.row.licenseName }}</a>
          </template>
        </d-column>
        <d-column field="latestVersion" header="版本"></d-column>
      </d-table>
      <NoData v-else :small="false"></NoData>
    </div>
  </Card>
  <d-drawer v-model="showDetail" style="width: 800px; padding: 20px">
    <SBOMDetail :selectRow="selectRow" @close="showDetail = false" />
  </d-drawer>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineProps } from 'vue';
import SBOMDetail from './SBOMDetail.vue';
import NoData from '@/components/NoData/NoData.vue';
import { dependencyTree, getVulnList } from '@/api/jyh';
import { useRoute } from 'vue-router';
const propsData = defineProps(['versionId']);
const checked = ref(false);
const route = useRoute(); // 获取路由对象
const showDetail = ref(false);

const baseTreeTableData1 = ref([
  {
    id: '1',
    licenseName: 'openssl',
    latestVersion: 'N.A.',
    components: [
      {
        id: '2',
        licenseName: 'ssl',
        latestVersion: 'N.A.',
        components: [
          {
            id: '3',
            licenseName: 'ssl',
            latestVersion: 'N.A.'
          },
          {
            id: '4',
            licenseName: 'crypto',
            latestVersion: 'N.A.'
          }
        ]
      }
    ]
  },
  {
    id: '5',
    licenseName: 'Text-Template-1.56',
    latestVersion: 'N.A.',
    children: [
      {
        id: '6',
        licenseName: 'ssl',
        latestVersion: 'N.A.',
        children: [
          {
            id: '7',
            licenseName: 'ssl',
            latestVersion: 'N.A.'
          },
          {
            id: '8',
            licenseName: 'crypto',
            latestVersion: 'N.A.'
          }
        ]
      }
    ]
  },
  {
    id: '9',
    licenseName: 'Text-Template-1.56',
    latestVersion: 'N.A.'
  }
]);

const tableData = ref([]);

const renameComponentsToChildren = (obj) => {
  // 如果传入的不是对象，直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 如果对象有 `components` 属性，将其改为 `children`
  if (obj.hasOwnProperty('components')) {
    obj.children = obj.components; // 将 components 改为 children
    delete obj.components; // 删除原来的 components 属性
  }

  // 递归处理对象的子元素
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      obj[key] = renameComponentsToChildren(obj[key]); // 递归处理子对象
    }
  }

  return obj;
}

const treeCheckChange = (val, row, selection) => {
  console.log('treeCheckChange', selection);
};

const fetchDependencyTree = async () => {
  const { data } = await dependencyTree({
    // softwareId: 47,
    softwareId: propsData.versionId,
    componentId: '',
    current: 1,
    size: 10
  });
  if(data.data.code===200 &&data?.data?.data &&data?.data?.data.total>0) {
    tableData.value = [renameComponentsToChildren(data?.data?.data)] || [];
    // pager.value.total = data?.data?.data?.total || [];
  } else {
    // tableData.value = baseTreeTableData1.value
  }
}


onMounted( () => {
  fetchDependencyTree()
});
</script>

<style scoped lang="scss">
.clear-padding {
  margin: -16px -20px;
}
:deep(.devui-table__cell) {
  display: flex;
  align-items: center;
  .devui-table__tree-operate {
    transform: translateY(-3px);
  }
}
</style>