update: 校验页面提供筛选&导出能力

package.json

@@ -45,7 +45,8 @@
     "vue": "^3.3.4",
     "vue-devui": "^1.6.31",
     "vue-router": "^4.2.2",
-    "yaml": "^2.4.1"
+    "yaml": "^2.4.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
@@ -61,7 +62,7 @@
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^9.22.0",
+
     "eslint-plugin-vue": "^9.11.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.27",

src/api/jyh/index.ts

@@ -20,11 +20,6 @@ export function releasePage(data): Promise<any> {
   });
 }
 
-// 导出校验结果
-export function exportVerifyResult() {
-  
-}
-
 // 获取邀请列表
 export function getInviteListData(): catchRt<any> {
   return reqCatchV2(() =>

src/views/Jyh/Search/Components/BatchVerify.vue

@@ -6,17 +6,7 @@
         accept=".xlsx"
         :onFileUpload="handleFileUpload"
       />
-      <d-input
-        style="width: 400px"
-        v-model="formData.title"
-        placeholder="请输入软件名称"
-        maxLength="50"
-        minLength="2"
-      >
-        <template #prefix>
-          <d-icon name="search" style="font-size: inherit;"></d-icon>
-        </template>
-      </d-input>
+      <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>
@@ -120,13 +110,6 @@
       <NoData v-else :small="false"></NoData>
     </div>
 
-    <div class="mt-20 mb-20 flex justify-end">
-      <d-pagination size="md" :page-size-options="[10, 20, 50]" :total="pager.total"
-                    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="changeIndex()"
-                    @page-size-change="changeSize()" />
-    </div>
-
     <!-- 删除组件 -->
     <GModal v-model="deletevModels" ref="deleteModal" title="删除?" @confirm="confirmDelete" showWarnIcon
             confirmColor="danger">
@@ -150,8 +133,9 @@ import { useAccountStore } from '@/stores/user';
 import { storeToRefs } from 'pinia';
 import TableSetting from '@/components/TableSetting/index.vue';
 import FileUploadButton from '@/components/FileUploadButton/index.vue';
-import { releasePage, repoImport, exportVerifyResult } from '@/api/jyh';
+import { releasePage, repoImport } from '@/api/jyh';
 import NoData from "@/components/NoData/NoData.vue";
+import * as XLSX from "xlsx"
 
 const useNum = computed(() => {
   if (tableData.value.length>0) {
@@ -183,8 +167,9 @@ const handleFileUpload = async (file) => {
 
   const { data, error } = await repoImport({file});
   if (!error && data) {
-    tableData.value = data.data.data;
-    pager.value.total = data.data.data.length;
+    currentReusltFilter.value = null;
+    allTableData.value = data.data.data
+    tableData.value = [...allTableData.value];
   }
 
   // 模拟文件上传逻辑
@@ -212,12 +197,18 @@ const columns = ref([
   { key: 'primaryLanguage', label: '编程语言', visible: true, filterable: true, 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:'' });
 const typeOptions = reactive(['主软件', '依赖软件']);
 const riskOptions = reactive(['低', '中', '高']);
 const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
 const isUseOptions = reactive(['是', '否']);
 const currentReusltFilter = ref(null);
+const searchStr = ref('');
 // 定义 tableKey，用于强制刷新表格
 const tableKey = ref(0);
 const pager = ref({
@@ -259,15 +250,28 @@ onMounted(async() => {
   // getReleaseList();
 });
 
+const filterTable = () => {
+  tableData.value = allTableData.value.filter(item => {
+    if (currentReusltFilter.value !== null) {
+      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) {
     currentReusltFilter.value = null;
-    tableData.value = [...allTableData.value]
   } else {
-    tableData.value = allTableData.value.filter(row => row.result === type);
     currentReusltFilter.value = type;
   }
+  filterTable();
+}
 
+const onSearch = (str: string) => {
+  searchStr.value = str;
+  filterTable();
 }
 
 const router = useRouter();
@@ -289,8 +293,43 @@ const handleBatchImport = async() => { // 多个项目导入
   loadingStatus.batchMigrating = false;
 };
 
-const exportResult = async() => {
+const exportResult = () => {
 
+  if (!allTableData.value.length) {
+    Message.info('暂无结果');
+    return;
+  }
+
+  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
+  })
+
+  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 link = document.createElement('a');
+    const blob = new Blob([excelBuffer]);
+    link.setAttribute('href', window.URL.createObjectURL(blob));
+    link.setAttribute('download', '软件存在及可信校验结果.xlsx');
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    Message.success('导出成功')
+  } catch {
+    Message.error('导出失败')
+  }
 }
 
 // 跳转