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="libraryName" header="组件名称" show-overflow-tooltip>
          <template #default="scope">
            <a class="devui-link" @click="setSelectRow(scope.row)">{{ scope.row.libraryName }}</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 selectRow = ref({});

const tableData = ref([]);

const setSelectRow = (row) => {
  selectRow.value = row;
  showDetail.value = true;
};

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

  // 如果对象有 `components` 属性，将其改为 `children`
  if (obj.hasOwnProperty('component')) {
    // 生成随机 UUID 并赋值给 id
    obj.id = crypto.randomUUID(); // 使用浏览器/Node.js 原生 API
    // obj.id = obj.component.id; // 将 components 改为 children
    obj.libraryName = obj.component.libraryName; // 将 components 改为 children
    obj.latestVersion = obj.component.latestVersion; // 将 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?.components) {
    tableData.value = renameComponentsToChildren(data?.data?.data?.components);
    // 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>