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" header="软件编号">
          <template #default="scope">
            <a class="devui-link" @click="showDetail = true">{{ scope.row.code }}</a>
          </template>
        </d-column>
        <d-column field="packageName" header="packageName"></d-column>
        <d-column field="version" header="version"></d-column>
        <d-column field="language" 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';
import { getDepencyList } from '@/api/jyh';
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;
};

const getList = async () => {
  const res = await getDepencyList('APACHE-001');
};
getList();
</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>