This commit is contained in:
汪少伟
2025-03-24 16:58:33 +08:00
parent 8705ead31d
commit 4c5d4c7113

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="secret-container"> <div class="secret-container">
<div class="search-form"> <div class="search-form">
<d-form layout='horizontal' :label-align="'end'"> <d-form layout="horizontal" :label-align="'end'">
<d-row :gutter="16"> <d-row :gutter="16">
<d-col :span="8"> <d-col :span="8">
<d-form-item field="name" label="软件名称"> <d-form-item field="name" label="软件名称">
@@ -69,15 +69,31 @@
<d-button variant="solid" color="secondary" @click="clear">清空</d-button> <d-button variant="solid" color="secondary" @click="clear">清空</d-button>
</div> </div>
<div class="left-btn"> <div class="left-btn">
<d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text" @click="exportResult">导出</d-button> <d-button v-if="isLogin" class="output-btn" icon="icon-share" variant="text" @click="exportResult"
>导出</d-button
>
<span v-if="isLogin" style="height: 14px" class="split"></span> <span v-if="isLogin" style="height: 14px" class="split"></span>
<TableSetting :columns="columns" @setDefult="setDefult" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/> <TableSetting
:columns="columns"
@setDefult="setDefult"
:show-column-list="showColumnList"
@update:show-column-list="updateShowColumnList"
/>
</div> </div>
</div> </div>
<div class="mt-3 px-20"> <div class="mt-3 px-20">
<d-table :key="tableKey" class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto"> <d-table
:key="tableKey"
ref="filterTableRef"
class="jyh-table"
v-if="tableData.length"
:striped="false"
:data="tableData"
table-layout="auto"
>
<d-column type="checkable" width="40" reserve-check align="center"></d-column>
<!-- 索引列 --> <!-- 索引列 -->
<d-column type="index" width="40"></d-column> <!-- <d-column type="index" width="40"></d-column> -->
<!-- 动态渲染列 --> <!-- 动态渲染列 -->
<template v-for="column in columns" :key="column.key"> <template v-for="column in columns" :key="column.key">
@@ -136,24 +152,39 @@
</template> </template>
</d-table> </d-table>
<!-- <DataPanel v-else skeleton :card="false" :empty="true">--> <!-- <DataPanel v-else skeleton :card="false" :empty="true">-->
<!-- </DataPanel>--> <!-- </DataPanel>-->
<NoData v-else :small="false"></NoData> <NoData v-else :small="false"></NoData>
</div> </div>
<div class="mt-20 mb-20 flex justify-end"> <div class="mt-20 mb-20 flex justify-end">
<d-pagination size="md" :page-size-options="[10, 20, 50]" :total="pager.total" <d-pagination
v-model:pageSize="pager.pageSize" v-model:pageIndex="pager.pageIndex" :max-items="5" size="md"
:can-change-page-size="true" :can-view-total="true" total-item-text="总计" :page-size-options="[10, 20, 50]"
@page-index-change="getReleaseList()" :total="pager.total"
@page-size-change="getReleaseList()" /> v-model:pageSize="pager.pageSize"
v-model:pageIndex="pager.pageIndex"
:max-items="5"
:can-change-page-size="true"
:can-view-total="true"
total-item-text="总计"
@page-index-change="getReleaseList()"
@page-size-change="getReleaseList()"
/>
</div> </div>
<!-- 删除组件 --> <!-- 删除组件 -->
<GModal v-model="deletevModels" ref="deleteModal" title="删除?" @confirm="confirmDelete" showWarnIcon <GModal
confirmColor="danger"> v-model="deletevModels"
<span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all">你确认删除此项{{ item.cla_name }} ref="deleteModal"
</span> title="删除?"
@confirm="confirmDelete"
showWarnIcon
confirmColor="danger"
>
<span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all"
>你确认删除此项{{ item.cla_name }} </span
>
</GModal> </GModal>
<!-- 引入子组件 --> <!-- 引入子组件 -->
@@ -165,7 +196,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import AdvanceSearch from '@/components/AdvanceSearch/index.vue' import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import SettingTitle from '@/components/Setting/SettingTitle/index.vue'; import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
import SettingText from '@/components/Setting/SettingText/index.vue'; import SettingText from '@/components/Setting/SettingText/index.vue';
import { ref, reactive, onMounted, watch, nextTick } from 'vue'; import { ref, reactive, onMounted, watch, nextTick } from 'vue';
@@ -177,20 +208,20 @@ import { reqCatch } from '@/utils/catch';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo'; import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import { Message } from 'vue-devui'; import { Message } from 'vue-devui';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import CountryModal from './CountryModal.vue' import CountryModal from './CountryModal.vue';
import OrgModal from './OrgModal.vue' import OrgModal from './OrgModal.vue';
import NoData from '@/components/NoData/NoData.vue'; import NoData from '@/components/NoData/NoData.vue';
import { useAccountStore } from '@/stores/user'; import { useAccountStore } from '@/stores/user';
import * as XLSX from "xlsx" import * as XLSX from 'xlsx';
const { formatTime } = useTimeFormat(); const { formatTime } = useTimeFormat();
import { releasePage, searchLanguageList } from '@/api/jyh'; import { releasePage, searchLanguageList } from '@/api/jyh';
import { useTimeFormat } from '@/utils/hooks/useTimeFormat'; import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
import { useGlobalInfoStore } from '@/stores/Global'; import { useGlobalInfoStore } from '@/stores/Global';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const filterTableRef = ref();
const { namespace } = getOrgInfo(); const { namespace } = getOrgInfo();
const userInfo = useAccountStore(); const userInfo = useAccountStore();
const { isLogin } = storeToRefs(userInfo); const { isLogin } = storeToRefs(userInfo);
@@ -202,7 +233,7 @@ const allTableData = ref([]);
const tableData = ref([]); const tableData = ref([]);
const languageList = ref([]); const languageList = ref([]);
const globalInfo = useGlobalInfoStore(); const globalInfo = useGlobalInfoStore();
const headerSearch = ref(globalInfo.headerSearch) const headerSearch = ref(globalInfo.headerSearch);
const industryList = ref(globalInfo.industryList); const industryList = ref(globalInfo.industryList);
const newFormData = ref({ const newFormData = ref({
licenseName: '', licenseName: '',
@@ -214,7 +245,7 @@ const newFormData = ref({
interestTag: '', interestTag: '',
industry: '', industry: '',
dateRange: ['', ''] dateRange: ['', '']
}) });
// watch(() => globalInfo.headerSearch, (newVal: any) => { // watch(() => globalInfo.headerSearch, (newVal: any) => {
// headerSearch.value = newVal; // headerSearch.value = newVal;
@@ -258,10 +289,16 @@ const defultColumns = ref([
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false }, { key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false },
{ key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false }, { key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false },
{ key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false }, { key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false },
{ key: 'externalVulnerabilitySource', label: '外部漏洞源的软件名称', visible: false, filterable: true, sortable: false }, {
key: 'externalVulnerabilitySource',
label: '外部漏洞源的软件名称',
visible: false,
filterable: true,
sortable: false
},
{ key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false }, { key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
{ key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false }, { key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false },
{ key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true }, { key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true }
]); ]);
// 定义 columns 数据 // 定义 columns 数据
const columns = ref([ const columns = ref([
@@ -282,10 +319,16 @@ const columns = ref([
{ key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false }, { key: 'contributorOrganizations', label: '贡献者组织/公司分布', visible: false, filterable: false, sortable: false },
{ key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false }, { key: 'communityHash', label: '社区hash值', visible: false, filterable: false, sortable: false },
{ key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false }, { key: 'copyright', label: 'Copyright', visible: false, filterable: false, sortable: false },
{ key: 'externalVulnerabilitySource', label: '外部漏洞源的软件名称', visible: false, filterable: true, sortable: false }, {
key: 'externalVulnerabilitySource',
label: '外部漏洞源的软件名称',
visible: false,
filterable: true,
sortable: false
},
{ key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false }, { key: 'versionDescription', label: '版本描述', visible: false, filterable: false, sortable: false },
{ key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false }, { key: 'compatibilityRisk', label: '兼容性风险描述', visible: false, filterable: false, sortable: false },
{ key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true }, { key: 'eolDate', label: '社区EOL时间', visible: false, filterable: true, sortable: true }
]); ]);
// 定义 showColumnList 状态 // 定义 showColumnList 状态
@@ -295,7 +338,7 @@ const countryModalRef = ref(null);
const orgModalRef = ref(null); const orgModalRef = ref(null);
const getIndustryName = (value) => { const getIndustryName = (value) => {
const industry = industryList.value.find(item => item.value === value); const industry = industryList.value.find((item) => item.value === value);
return industry ? industry.name : '未知行业'; // 如果找不到,返回默认值 return industry ? industry.name : '未知行业'; // 如果找不到,返回默认值
}; };
@@ -311,13 +354,13 @@ const clear = () => {
interestTag: '', interestTag: '',
industry: '', industry: '',
dateRange: ['', ''] dateRange: ['', '']
} };
getReleaseList(); getReleaseList();
} };
// 打开模态框的方法 // 打开模态框的方法
const setDefult = () => { const setDefult = () => {
columns.value = defultColumns.value columns.value = defultColumns.value;
}; };
// 打开模态框的方法 // 打开模态框的方法
const openCountryModal = () => { const openCountryModal = () => {
@@ -415,7 +458,7 @@ const signCla = (row: any) => {
router.push('/cla/' + row.object_id); router.push('/cla/' + row.object_id);
}; };
const getReleaseList = async() => { const getReleaseList = async () => {
const { data, error } = await releasePage({ const { data, error } = await releasePage({
softwareName: newFormData.value.softwareName || '', softwareName: newFormData.value.softwareName || '',
searchType: newFormData.value.searchType || '', searchType: newFormData.value.searchType || '',
@@ -425,21 +468,22 @@ const getReleaseList = async() => {
industry: newFormData.value.industry || '', industry: newFormData.value.industry || '',
licenseName: newFormData.value.licenseName || '', licenseName: newFormData.value.licenseName || '',
dependentSoftware: newFormData.value.dependentSoftware || '', dependentSoftware: newFormData.value.dependentSoftware || '',
releaseDateStart: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[0]:'', releaseDateStart:
releaseDateEnd: newFormData.value.dateRange&&newFormData.value.dateRange.length>0?newFormData.value.dateRange[1]:'', newFormData.value.dateRange && newFormData.value.dateRange.length > 0 ? newFormData.value.dateRange[0] : '',
releaseDateEnd:
newFormData.value.dateRange && newFormData.value.dateRange.length > 0 ? newFormData.value.dateRange[1] : '',
current: pager.value.pageIndex, current: pager.value.pageIndex,
size: pager.value.pageSize size: pager.value.pageSize
}); });
if (!error && data) { if (!error && data) {
allTableData.value = data.data.records allTableData.value = data.data.records;
tableData.value = data.data.records; tableData.value = data.data.records;
pager.value.total = data.data.total; pager.value.total = data.data.total;
console.log(tableData.value) console.log(tableData.value);
} }
}; };
const getLanguageList = async () => { const getLanguageList = async () => {
const res: any = await searchLanguageList(); const res: any = await searchLanguageList();
if (!res.error) { if (!res.error) {
@@ -447,20 +491,20 @@ const getLanguageList = async () => {
} }
}; };
onMounted(async() => { onMounted(async () => {
await getLanguageList(); await getLanguageList();
newFormData.value.softwareName = route.query.softwareName || ''; newFormData.value.softwareName = route.query.softwareName || '';
newFormData.value.searchType = route.query.searchType || ''; newFormData.value.searchType = route.query.searchType || '';
newFormData.value.softwareVersion = route.query.softwareVersion || ''; newFormData.value.softwareVersion = route.query.softwareVersion || '';
newFormData.value.programmingLanguage = route.query.programmingLanguage || ''; newFormData.value.programmingLanguage = route.query.programmingLanguage || '';
newFormData.value.interestTag = route.query.interestTag || ''; newFormData.value.interestTag = route.query.interestTag || '';
newFormData.value.industry = route.query.searchType || ''; newFormData.value.industry = route.query.searchType || '';
newFormData.value.licenseName = route.query.licenseName || ''; newFormData.value.licenseName = route.query.licenseName || '';
newFormData.value.dependentSoftware = route.query.dependentSoftware || ''; newFormData.value.dependentSoftware = route.query.dependentSoftware || '';
newFormData.value.dateRange = [route.query.releaseDateStart || '',route.query.releaseDateEnd || ''] newFormData.value.dateRange = [route.query.releaseDateStart || '', route.query.releaseDateEnd || ''];
nextTick(() => { nextTick(() => {
getReleaseList(); getReleaseList();
}) });
// getReleaseList(); // getReleaseList();
}); });
@@ -472,29 +516,32 @@ onMounted(async() => {
// }); // });
const exportResult = () => { const exportResult = () => {
const selectDatas = filterTableRef.value.store.getCheckedRows().map((d) => d.id);
if (!allTableData.value.length) { if (!allTableData.value.length || selectDatas.length <= 0) {
Message.info('暂无结果'); Message.info('未选择任何数据');
return; return;
} }
const exportData = allTableData.value.map(item => { const exportData = allTableData.value
let res = {} .filter((d) => {
columns.value.forEach(col => { return selectDatas.includes(d.id);
if (col.key === 'validStatus') {
res[col.label] = validStatusMap[item[col.key]] ? validStatusMap[item[col.key]] : '';
} else {
res[col.label] = item[col.key] ? item[col.key] : '';
}
}) })
return res .map((item) => {
}) let res = {};
columns.value.forEach((col) => {
if (col.key === 'validStatus') {
res[col.label] = validStatusMap[item[col.key]] ? validStatusMap[item[col.key]] : '';
} else {
res[col.label] = item[col.key] ? item[col.key] : '';
}
});
return res;
});
try { try {
const workSheet = XLSX.utils.json_to_sheet(exportData); const workSheet = XLSX.utils.json_to_sheet(exportData);
const workBook: any = { Sheets: { '校验结果': workSheet}, SheetNames: ['校验结果']}; const workBook: any = { Sheets: { 校验结果: workSheet }, SheetNames: ['校验结果'] };
const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array'}); const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
const link = document.createElement('a'); const link = document.createElement('a');
const blob = new Blob([excelBuffer]); const blob = new Blob([excelBuffer]);
@@ -504,12 +551,11 @@ const exportResult = () => {
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
Message.success('导出成功') Message.success('导出成功');
} catch { } catch {
Message.error('导出失败') Message.error('导出失败');
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -524,7 +570,6 @@ const exportResult = () => {
right: 0; right: 0;
top: 0; top: 0;
} }
} }
.error { .error {
@@ -543,7 +588,7 @@ const exportResult = () => {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin-right: 8px; margin-right: 8px;
border: 1px solid #E3E3EE; border: 1px solid #e3e3ee;
} }
.one-line { .one-line {