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

<template>
  <div class="info w-full">
    <div class="flex items-center justify-start w-full gap-1">
      <img src="@/assets/imgs/jyh/infoIcon.png">
      <span class="text-base font-medium">治理标准:</span>
    </div>
    <div>
      <ul>
        <li>
          1、在依赖冲突或者解决依赖软件漏洞的场景下，产品引入的依赖组件与社区的依赖关系不一致，从而通过产品自行录入，由使用方自行维护（可通过“产品快速补包流程维护”，<a class="devui-link">操作指导</a>）。该部分的依赖组件漏洞由产品自行解决。
        </li>
        <li>
          2、点击下面组件编码跳转到组件详情页面，可直接看到基于当前火车过滤的组件依赖路径。
        </li>
      </ul>
    </div>
  </div>
  <div class="flex items-center justify-end gap-3 mt-3">
    <d-button variant="text" icon="export">导出</d-button>
    <div class="vertical-line"></div>
    <d-button variant="text" @click="openAll(baseTreeTableData1)">
      <div v-if="!isAllExpand" class="flex items-center justify-start gap-1">
        <img style="width: 14px; height: 14px;" src="@/assets/imgs/jyh/openAll.png">
        全部展开
      </div>
      <div v-else class="flex items-center justify-start gap-1">
        <img style="width: 14px; height: 14px;" src="@/assets/imgs/jyh/closeAll.png">
        全部关闭
      </div>
    </d-button>
  </div>
  <Card simple class="jyh-card mt-3">
    <div class="clear-padding">
      <d-table ref="table" :data="baseTreeTableData1" >
        <d-column width="20px" type="index">
        </d-column>
        <d-column field="name" header="组件版本名称" show-overflow-tooltip></d-column>
        <d-column field="groupid" header="groupid"></d-column>
        <d-column field="code" filterable :filter-list="filterList" @filter-change="handleFilterChange" header="组件编号">
          <template #default="scope">
            <a class="devui-link" @click="showDetail = true">{{ scope.row.code }}</a>
          </template>
        </d-column>
        <d-column field="packageName" filterable :filter-list="packageFilterList" @filter-change="handleFilterChange" header="packageName"></d-column>
        <d-column field="version" filterable :filter-list="versionFilterList" @filter-change="handleFilterChange" header="version"></d-column>
        <d-column field="language" filterable :filter-list="languageFilterList" @filter-change="handleFilterChange" header="编程语言"></d-column>
        <d-column field="number" header="组件漏洞数量">
          <template #default="scope">
            <a class="devui-link" @click="showDetail = true">{{ scope.row.number }}</a>
          </template>
        </d-column>
      </d-table>
    </div>
  </Card>
  <div class="w-full flex justify-end my-4">
      <d-pagination
        size="sm"
        :total="pager.total"
        v-model:pageSize="pager.pageSize"
        v-model:pageIndex="pager.pageIndex"
        :can-view-total="true"
        :can-change-page-size="true"
        :can-jump-page="true"
        :max-items="5"
      />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const checked = ref(false);
const showDetail = ref(false);
const table = ref(null)
const isAllExpand = ref(false);
const pager = ref({
  pageIndex: 1,
  pageSize: 30,
  total: 10
})
const filterList = ref([{name: '001', value: '001'}, {name: '002', value: '002'}, {name: '003', value: '003'}, {name: '004', value: '004'}])
const handleFilterChange = (val) => {
  if (!val.length) {
    baseTreeTableData1.value = [ ...originSource.value ]
    return
  }
  const filterList = val.map((item) => item.value);
  baseTreeTableData1.value = originSource.value.filter((item) => filterList.includes(item.code));
};
const originSource = ref([
  {
    id: '1',
    name: 'ssl',
    groupid: '2000000',
    code: '001',
    packageName: '包名称',
    version: '202306',
    language: 'java',
    number: '20',
    children: [
      {
        id: '2',
        name: 'ssl',
        groupid: '2000000',
        code: '001',
        packageName: '包名称',
        version: '202306',
        language: 'java',
        number: '20',
        children: [
          {
            id: '3',
            name: 'ssl',
            groupid: '2000000',
            code: '001',
            packageName: '包名称',
            version: '202306',
            language: 'java',
            number: '20',
          },
          {
            id: '4',
            name: 'ssl',
            groupid: '2000000',
            code: '001',
            packageName: '包名称',
            version: '202306',
            language: 'java',
            number: '20',
          }
        ]
      }
    ]
  },
  {
    id: '5',
    name: 'ssl',
    groupid: '2000000',
    code: '002',
    packageName: '包名称',
    version: '202306',
    language: 'java',
    number: '10',
    children: [
      {
        id: '6',
        name: 'ssl',
        groupid: '2000000',
        code: '003',
        packageName: '包名称',
        version: '202306',
        language: 'java',
        number: '20',
        children: [
          {
            id: '7',
            name: 'ssl',
            groupid: '2000000',
            code: '003',
            packageName: '包名称',
            version: '202306',
            language: 'java',
            number: '11',
          },
          {
            id: '8',
            name: 'ssl',
            groupid: '2000000',
            code: '004',
            packageName: '包名称',
            version: '202306',
            language: 'java',
            number: '30',
          }
        ]
      }
    ]
  },
  {
    id: '9',
    name: 'ssl',
    groupid: '2000000',
    code: '001',
    packageName: '包名称',
    version: '202306',
    language: 'java',
    number: '5',
  }
]);
const baseTreeTableData1 = ref([...originSource.value]);

const packageFilterList = ref(originSource.value.map(item => {
  return {name: item.packageName, value: item.packageName}
}))

const versionFilterList = ref(originSource.value.map(item => {
  return {name: item.version, value: item.version}
}))

const languageFilterList = ref(originSource.value.map(item => {
  return {name: item.language, value: item.language}
}))

const openAll = (tree) => {
  if (!tree || !tree.length) {
    return
  }

  tree.forEach(node => {
    table.value.store.toggleRowExpansion(node);
    if (node.children) {
      openAll(node.children);
    }
  })
  isAllExpand.value = !isAllExpand.value
}

const sortNumberMethod = (a, b) => {
  return a.number > b.number
}
</script>

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

.info {
  padding: 10px 20px;
  border-radius: 4px;
  background: #E1E8FD;
  img {
    width: 14px;
    height: 14px;
  }
  ul {
    padding-left: 18px;
    line-height: 22px;
  }
}

.vertical-line {
  width: 1px;
  height: 20px;
  background-color: #dcdcdc; /* 设置竖线颜色 */
  margin: 0 8px; /* 设置竖线与按钮的间距 */
}
</style>