fix: 去掉表头排序及筛选
This commit is contained in:
@@ -1,48 +1,56 @@
|
||||
<template>
|
||||
<div class="BatchVerify">
|
||||
<div class="search-form" v-if="isLogin">
|
||||
<FileUploadButton
|
||||
buttonText="批量导入"
|
||||
accept=".xlsx"
|
||||
:onFileUpload="handleFileUpload"
|
||||
/>
|
||||
<d-search class="mt-0 mb-2" style="width: 400px" :delay="1000" @search="onSearch($event)" placeholder="请输入软件名称"></d-search>
|
||||
<FileUploadButton buttonText="批量导入" accept=".xlsx" :onFileUpload="handleFileUpload" />
|
||||
<d-search
|
||||
class="mt-0 mb-2"
|
||||
style="width: 400px"
|
||||
:delay="1000"
|
||||
@search="onSearch($event)"
|
||||
placeholder="请输入软件名称"
|
||||
></d-search>
|
||||
<div class="tjsj">
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>可使用:</span>
|
||||
<span class="green" @click="filterVerifyResult(1)">{{useNum}}</span>
|
||||
<span class="green" @click="filterVerifyResult(1)">{{ useNum }}</span>
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>有风险:</span>
|
||||
<span class="red" @click="filterVerifyResult(2)">{{riskNum}}</span>
|
||||
<span class="red" @click="filterVerifyResult(2)">{{ riskNum }}</span>
|
||||
<span style="height: 14px" class="split"></span>
|
||||
<span>未治理:</span>
|
||||
<span class="yellow" @click="filterVerifyResult(0)">{{noNum}}</span>
|
||||
<span class="yellow" @click="filterVerifyResult(0)">{{ noNum }}</span>
|
||||
</div>
|
||||
<div class="left-btn">
|
||||
<a v-if="isLogin" class="cursor-pointer" href="/static/软件存在及可信校验模版.xlsx" download><i class="icon icon-download-2"></i>下载excel模板</a>
|
||||
<a v-if="isLogin" class="cursor-pointer" href="/static/软件存在及可信校验模版.xlsx" download
|
||||
><i class="icon icon-download-2"></i>下载excel模板</a
|
||||
>
|
||||
<span v-if="isLogin" style="height: 14px" class="split"></span>
|
||||
<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>
|
||||
<TableSetting :columns="columns" :show-column-list="showColumnList" @update:show-column-list="updateShowColumnList"/>
|
||||
<TableSetting
|
||||
:columns="columns"
|
||||
:show-column-list="showColumnList"
|
||||
@update:show-column-list="updateShowColumnList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-20">
|
||||
<d-table class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto" :show-loading="loading">
|
||||
|
||||
<d-table
|
||||
class="jyh-table"
|
||||
v-if="tableData.length"
|
||||
:striped="false"
|
||||
:data="tableData"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<!-- 索引列 -->
|
||||
<d-column type="index" width="40"></d-column>
|
||||
|
||||
<!-- 动态渲染列 -->
|
||||
<template v-for="column in columns" :key="column.key">
|
||||
<d-column
|
||||
v-if="column.visible"
|
||||
:field="column.key"
|
||||
:header="column.label"
|
||||
:filterable="column.filterable"
|
||||
:filter-list="column.filterList"
|
||||
:sortable="column.sortable"
|
||||
@filter-change="handleFilterChange"
|
||||
>
|
||||
<d-column v-if="column.visible" :field="column.key" :header="column.label">
|
||||
<!-- 自定义列内容 -->
|
||||
<template #default="scope">
|
||||
<template v-if="column.key === 'validStatus'">
|
||||
@@ -91,30 +99,33 @@
|
||||
</d-column>
|
||||
</template>
|
||||
<d-column header="操作" width="200" fixed-right="0px">
|
||||
<!--TODO:申请入口只有校验不通过的才显示-->
|
||||
<!--TODO:申请入口只有校验不通过的才显示-->
|
||||
<template #default="scope">
|
||||
<d-button
|
||||
variant="text"
|
||||
v-if="scope.row.validStatus == 0"
|
||||
:disabled="scope.row.validStatus !== 0"
|
||||
>
|
||||
<d-button variant="text" v-if="scope.row.validStatus == 0" :disabled="scope.row.validStatus !== 0">
|
||||
申请入库
|
||||
</d-button>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
|
||||
<!-- <DataPanel v-else skeleton :card="false" :empty="true">-->
|
||||
<!-- </DataPanel>-->
|
||||
<!-- <DataPanel v-else skeleton :card="false" :empty="true">-->
|
||||
<!-- </DataPanel>-->
|
||||
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</div>
|
||||
|
||||
<!-- 删除组件 -->
|
||||
<GModal v-model="deletevModels" ref="deleteModal" 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
|
||||
v-model="deletevModels"
|
||||
ref="deleteModal"
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
@@ -134,28 +145,28 @@ import { storeToRefs } from 'pinia';
|
||||
import TableSetting from '@/components/TableSetting/index.vue';
|
||||
import FileUploadButton from '@/components/FileUploadButton/index.vue';
|
||||
import { releasePage, repoImport } from '@/api/jyh';
|
||||
import NoData from "@/components/NoData/NoData.vue";
|
||||
import * as XLSX from "xlsx"
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
const useNum = computed(() => {
|
||||
if (tableData.value.length>0) {
|
||||
return tableData.value.filter(item => item.validStatus === 1).length;
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 1).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const riskNum = computed(() => {
|
||||
if (tableData.value.length>0) {
|
||||
return tableData.value.filter(item => item.validStatus === 2).length;
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 2).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const noNum = computed(() => {
|
||||
if (tableData.value.length>0) {
|
||||
return tableData.value.filter(item => item.validStatus === 0).length;
|
||||
if (tableData.value.length > 0) {
|
||||
return tableData.value.filter((item) => item.validStatus === 0).length;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
@@ -165,10 +176,10 @@ const noNum = computed(() => {
|
||||
const handleFileUpload = async (file) => {
|
||||
console.log('选择的文件:', file.name);
|
||||
|
||||
const { data, error } = await repoImport({file});
|
||||
const { data, error } = await repoImport({ file });
|
||||
if (!error && data) {
|
||||
currentReusltFilter.value = null;
|
||||
allTableData.value = data.data.data
|
||||
allTableData.value = data.data.data;
|
||||
tableData.value = [...allTableData.value];
|
||||
}
|
||||
|
||||
@@ -195,14 +206,24 @@ const columns = ref([
|
||||
{ key: 'licenseCount', label: 'License数量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false },
|
||||
{ key: 'codeLines', label: '代码量', visible: true, filterable: false, sortable: false }
|
||||
]);
|
||||
const validStatusMap = {
|
||||
0 : '未治理',
|
||||
1 : '可使用',
|
||||
2 : '有风险'
|
||||
}
|
||||
const formData = ref({ title: '',type: '', useType: '',formData:'',select: '',time1:null,name:'',versionCode:'',pulishTime:'' });
|
||||
0: '未治理',
|
||||
1: '可使用',
|
||||
2: '有风险'
|
||||
};
|
||||
const formData = ref({
|
||||
title: '',
|
||||
type: '',
|
||||
useType: '',
|
||||
formData: '',
|
||||
select: '',
|
||||
time1: null,
|
||||
name: '',
|
||||
versionCode: '',
|
||||
pulishTime: ''
|
||||
});
|
||||
const typeOptions = reactive(['主软件', '依赖软件']);
|
||||
const riskOptions = reactive(['低', '中', '高']);
|
||||
const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
|
||||
@@ -230,35 +251,38 @@ const openDelete = (row: any) => {
|
||||
deletevModels.value = true;
|
||||
};
|
||||
|
||||
const getReleaseList = async() => {
|
||||
const getReleaseList = async () => {
|
||||
if (!isLogin.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
const { data, error } = await releasePage({ current: pager.value.pageIndex,size: pager.value.pageSize });
|
||||
const { data, error } = await releasePage({ current: pager.value.pageIndex, size: pager.value.pageSize });
|
||||
if (!error && data) {
|
||||
loading.value = false;
|
||||
allTableData.value = data.data.records;
|
||||
tableData.value = [...allTableData.value]
|
||||
tableData.value = [...allTableData.value];
|
||||
pager.value.total = data.data.total;
|
||||
} else {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
onMounted(async () => {
|
||||
// getReleaseList();
|
||||
});
|
||||
|
||||
const filterTable = () => {
|
||||
tableData.value = allTableData.value.filter(item => {
|
||||
tableData.value = allTableData.value.filter((item) => {
|
||||
if (currentReusltFilter.value !== null) {
|
||||
return item.softwareName.trim().toLowerCase().includes(searchStr.value.trim().toLowerCase()) && item.validStatus === currentReusltFilter.value;
|
||||
return (
|
||||
item.softwareName.trim().toLowerCase().includes(searchStr.value.trim().toLowerCase()) &&
|
||||
item.validStatus === currentReusltFilter.value
|
||||
);
|
||||
} else {
|
||||
return item.softwareName.trim().toLowerCase().includes(searchStr.value.trim().toLowerCase());
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const filterVerifyResult = (type) => {
|
||||
if (currentReusltFilter.value === type) {
|
||||
@@ -267,12 +291,12 @@ const filterVerifyResult = (type) => {
|
||||
currentReusltFilter.value = type;
|
||||
}
|
||||
filterTable();
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (str: string) => {
|
||||
searchStr.value = str;
|
||||
filterTable();
|
||||
}
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@@ -285,8 +309,8 @@ const updateShowColumnList = (newValue) => {
|
||||
tableKey.value++; // 更新 tableKey,强制刷新表格
|
||||
};
|
||||
|
||||
|
||||
const handleBatchImport = async() => { // 多个项目导入
|
||||
const handleBatchImport = async () => {
|
||||
// 多个项目导入
|
||||
// importRepo.value = queryTable.value.filter((val) => val.checked);
|
||||
loadingStatus.batchMigrating = true;
|
||||
// await batchMigrate();
|
||||
@@ -294,29 +318,27 @@ const handleBatchImport = async() => { // 多个项目导入
|
||||
};
|
||||
|
||||
const exportResult = () => {
|
||||
|
||||
if (!allTableData.value.length) {
|
||||
Message.info('暂无结果');
|
||||
return;
|
||||
}
|
||||
|
||||
const exportData = allTableData.value.map(item => {
|
||||
let res = {}
|
||||
columns.value.forEach(col => {
|
||||
|
||||
const exportData = allTableData.value.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
|
||||
})
|
||||
});
|
||||
return res;
|
||||
});
|
||||
|
||||
try {
|
||||
const workSheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workBook: any = { Sheets: { '校验结果': workSheet}, SheetNames: ['校验结果']};
|
||||
const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array'});
|
||||
const workBook: any = { Sheets: { 校验结果: workSheet }, SheetNames: ['校验结果'] };
|
||||
const excelBuffer = XLSX.write(workBook, { bookType: 'xlsx', type: 'array' });
|
||||
|
||||
const link = document.createElement('a');
|
||||
const blob = new Blob([excelBuffer]);
|
||||
@@ -326,11 +348,11 @@ const exportResult = () => {
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
Message.success('导出成功')
|
||||
Message.success('导出成功');
|
||||
} catch {
|
||||
Message.error('导出失败')
|
||||
Message.error('导出失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转
|
||||
const gotoDetail = (row) => {
|
||||
@@ -421,7 +443,6 @@ const signCla = (row: any) => {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error {
|
||||
@@ -440,7 +461,7 @@ const signCla = (row: any) => {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #E3E3EE;
|
||||
border: 1px solid #e3e3ee;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
@@ -485,7 +506,6 @@ const signCla = (row: any) => {
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user