272 lines
7.0 KiB
Vue
272 lines
7.0 KiB
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>
|