fix request api

src/views/financialinformation/secfilings/size1440/index.vue

@@ -33,11 +33,13 @@
       <div class="table-container">
         <n-data-table
           :columns="columns"
-          :data="paginatedData"
+          :loading="state.tableLoading"
+          :data="state.tableData"
           :pagination="false"
           :bordered="false"
           :size="'medium'"
           :row-key="(row) => row.idx"
+          @update:sorter="handleSort"
         />
 
         <!-- 分页器 -->
@@ -47,7 +49,7 @@
             v-model:page-size="state.pageSize"
             show-size-picker
             show-quick-jumper
-            :item-count="filteredData.length"
+            :item-count="state.total"
             :page-sizes="[10, 25, 50]"
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
@@ -62,49 +64,106 @@
 
           <div class="pagination-info">
             Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ filteredData.length }} results
+            {{ state.total }} results
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-
 <script setup>
 import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secFiles.js";
+
 const { t } = useI18n();
 const router = useRouter();
-import iconLink from "@/assets/image/icon/icon-link.png";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
   pageSize: 10,
   currentPage: 1,
+  tableData: [],
+  tableLoading: false,
+  total: 0,
+  sortParams: {},
 
   // 年份选项
   yearOptions: [
     { label: "- Any -", value: null },
-    { label: "2025", value: 2025 },
+    {
-    { label: "2024", value: 2024 },
+      label: "2025",
-    { label: "2023", value: 2023 },
+      value: "2025",
-    { label: "2022", value: 2022 },
+    },
-    { label: "2021", value: 2021 },
+    {
-    { label: "2020", value: 2020 },
+      label: "2024",
-    { label: "2019", value: 2019 },
+      value: "2024",
-    { label: "2018", value: 2018 },
+    },
-    { label: "2017", value: 2017 },
+    {
-    { label: "2016", value: 2016 },
+      label: "2023",
-    { label: "2015", value: 2015 },
+      value: "2023",
-    { label: "2014", value: 2014 },
+    },
-    { label: "2013", value: 2013 },
+    {
-    { label: "2012", value: 2012 },
+      label: "2022",
-    { label: "2011", value: 2011 },
+      value: "2022",
-    { label: "2010", value: 2010 },
+    },
-    { label: "2009", value: 2009 },
+    {
+      label: "2021",
+      value: "2021",
+    },
+    {
+      label: "2020",
+      value: "2020",
+    },
+    {
+      label: "2019",
+      value: "2019",
+    },
+    {
+      label: "2018",
+      value: "2018",
+    },
+    {
+      label: "2017",
+      value: "2017",
+    },
+    {
+      label: "2016",
+      value: "2016",
+    },
+    {
+      label: "2015",
+      value: "2015",
+    },
+    {
+      label: "2014",
+      value: "2014",
+    },
+    {
+      label: "2013",
+      value: "2013",
+    },
+    {
+      label: "2012",
+      value: "2012",
+    },
+    {
+      label: "2011",
+      value: "2011",
+    },
+    {
+      label: "2010",
+      value: "2010",
+    },
+    {
+      label: "2009",
+      value: "2009",
+    },
   ],
 
   // 每页条数选项
@@ -113,71 +172,87 @@ const state = reactive({
     { label: "25", value: 25 },
     { label: "50", value: 50 },
   ],
-
-  // SEC文件数据
-  secFilingsData: [],
 });
+
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 onMounted(() => {
-  // 月份名称映射
+  getListData();
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  state.secFilingsData = fileList.map((item, index) => {
-    // 从 filingDate 中提取年份，支持两种格式：
-    // 1. "Feb 04, 2019" 格式（英文）
-    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
-    let year = null;
-    let formattedDate = item.filingDate;
-
-    if (item.filingDate) {
-      if (item.filingDate.includes(", ")) {
-        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
-        year = parseInt(item.filingDate.split(", ")[1]);
-      } else if (item.filingDate.includes("-")) {
-        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
-        const dateParts = item.filingDate.split("-");
-        const yearPart = parseInt(dateParts[0]);
-        const monthPart = parseInt(dateParts[1]);
-        const dayPart = parseInt(dateParts[2]);
-
-        year = yearPart;
-        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
-        const dayFormatted = dayPart.toString().padStart(2, "0");
-        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
-      }
-    }
-
-    return {
-      ...item,
-      formattedDate: formattedDate, // 更新为统一的英文格式
-      year: year,
-    };
-  });
 });
+import axios from "axios";
+const getListData = async () => {
+  state.tableData = [];
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/list";
+  let params = {
+    page: state.currentPage,
+    pageSize: state.pageSize,
+    year: state.selectedYear,
+  };
+  Object.assign(params, state.sortParams);
+  state.tableLoading = true;
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let resData = res.data.data?.data || [];
+    resData.forEach((item) => {
+      if (item.filingDate) {
+        let year = null;
+        let filingDate = item.filingDate;
+        if (item.filingDate.includes(", ")) {
+          // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+          year = parseInt(item.filingDate.split(", ")[1]);
+        } else if (item.filingDate.includes("-")) {
+          // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+          const dateParts = item.filingDate.split("-");
+          const yearPart = parseInt(dateParts[0]);
+          const monthPart = parseInt(dateParts[1]);
+          const dayPart = parseInt(dateParts[2]);
+
+          year = yearPart;
+          const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+          const dayFormatted = dayPart.toString().padStart(2, "0");
+          filingDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+          item.year = year;
+          item.filingDate = filingDate;
+          item.filing_date = filingDate;
+        }
+      }
+    });
+    state.tableData = resData;
+    state.total = res.data.data?.total;
+  }
+  state.tableLoading = false;
+};
+const handleSort = (sortData) => {
+  state.sortParams = {};
+  if (sortData.order !== false) {
+    state.sortParams["sortField"] = sortData.columnKey;
+    state.sortParams["sortOrder"] = sortData.order.replace("end", "");
+  }
+  getListData();
+};
 // 表格列定义
 const columns = [
   {
     title: "Filing Date",
-    key: "formattedDate",
+    key: "filing_date",
     sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
-    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -194,7 +269,7 @@ const columns = [
             router.push({
               path: "/secfilingsDefail",
               query: {
-                filingDate: row.filingDate,
+                filingKey: row.filingKey,
               },
             });
           },
@@ -212,14 +287,13 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
   },
   {
     title: "View",
-    key: "view",
+    key: "fileLink",
     width: 150,
     render: (row) => {
       return h(
@@ -231,60 +305,132 @@ const columns = [
           },
         },
         [
-          h(
+          row.pdfFile
-            "a",
+            ? h(
-            {
+                "a",
-              href: row.fileLink,
+                {
-              style: {
+                  href: "javascript:void(0)",
-                color: "#0078d7",
+                  style: {
-                textDecoration: "none",
+                    color: "#0078d7",
-                fontSize: "12px",
+                    textDecoration: "none",
-              },
+                    fontSize: "12px",
-              onMouseover: (e) => {
+                  },
-                e.target.style.textDecoration = "underline";
+                  onClick: (e) => {
-              },
+                    e.preventDefault();
-              onMouseout: (e) => {
+                    handleViewDocument(row.pdfFile, "pdf");
-                e.target.style.textDecoration = "none";
+                  },
-              },
+                  onMouseover: (e) => {
-            },
+                    e.target.style.textDecoration = "underline";
-            h("img", {
+                  },
-              src: iconLink,
+                  onMouseout: (e) => {
-              alt: "link",
+                    e.target.style.textDecoration = "none";
-              style: {
+                  },
-                width: "24px",
+                },
-                height: "24px",
+                h("img", {
-              },
+                  src: pdfFile,
-            })
+                  alt: "link",
-          ),
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.wordFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.wordFile, "word");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: wordFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.excelFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.excelFile, "excel");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: excelFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.fileLink
+            ? h(
+                "a",
+                {
+                  href: row.fileLink,
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: fileLink,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
         ]
       );
     },
   },
 ];
 
-// 筛选后的数据
-const filteredData = computed(() => {
-  let data = state.secFilingsData;
-
-  if (state.selectedYear) {
-    data = data.filter((item) => item.year === state.selectedYear);
-  }
-
-  return data;
-});
-
-// 分页数据
-const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return filteredData.value.slice(start, end);
-});
-
-// 总页数
-const totalPages = computed(() => {
-  return Math.ceil(filteredData.value.length / state.pageSize);
-});
-
 // 当前页起始索引
 const startIndex = computed(() => {
   return (state.currentPage - 1) * state.pageSize + 1;
@@ -293,24 +439,34 @@ const startIndex = computed(() => {
 // 当前页结束索引
 const endIndex = computed(() => {
   const end = state.currentPage * state.pageSize;
-  return Math.min(end, filteredData.value.length);
+  return Math.min(end, state.total);
 });
 
 // 处理年份变化
 const handleYearChange = (value) => {
   state.selectedYear = value;
   state.currentPage = 1;
+  getListData();
 };
 
 // 处理页码变化
 const handlePageChange = (page) => {
   state.currentPage = page;
+  getListData();
 };
 
 // 处理每页条数变化
 const handlePageSizeChange = (size) => {
   state.pageSize = size;
   state.currentPage = 1;
+  getListData();
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
 };
 </script>
 

src/views/financialinformation/secfilings/size1920/index.vue

@@ -33,11 +33,13 @@
       <div class="table-container">
         <n-data-table
           :columns="columns"
-          :data="paginatedData"
+          :loading="state.tableLoading"
+          :data="state.tableData"
           :pagination="false"
           :bordered="false"
           :size="'medium'"
           :row-key="(row) => row.idx"
+          @update:sorter="handleSort"
         />
 
         <!-- 分页器 -->
@@ -47,7 +49,7 @@
             v-model:page-size="state.pageSize"
             show-size-picker
             show-quick-jumper
-            :item-count="filteredData.length"
+            :item-count="state.total"
             :page-sizes="[10, 25, 50]"
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
@@ -62,7 +64,7 @@
 
           <div class="pagination-info">
             Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ filteredData.length }} results
+            {{ state.total }} results
           </div>
         </div>
       </div>
@@ -75,37 +77,94 @@ import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secFiles.js";
 
 const { t } = useI18n();
 const router = useRouter();
-import iconLink from "@/assets/image/icon/icon-link.png";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
   pageSize: 10,
   currentPage: 1,
+  tableData: [],
+  tableLoading: false,
+  total: 0,
+  sortParams: {},
 
   // 年份选项
   yearOptions: [
     { label: "- Any -", value: null },
-    { label: "2025", value: 2025 },
+    {
-    { label: "2024", value: 2024 },
+      label: "2025",
-    { label: "2023", value: 2023 },
+      value: "2025",
-    { label: "2022", value: 2022 },
+    },
-    { label: "2021", value: 2021 },
+    {
-    { label: "2020", value: 2020 },
+      label: "2024",
-    { label: "2019", value: 2019 },
+      value: "2024",
-    { label: "2018", value: 2018 },
+    },
-    { label: "2017", value: 2017 },
+    {
-    { label: "2016", value: 2016 },
+      label: "2023",
-    { label: "2015", value: 2015 },
+      value: "2023",
-    { label: "2014", value: 2014 },
+    },
-    { label: "2013", value: 2013 },
+    {
-    { label: "2012", value: 2012 },
+      label: "2022",
-    { label: "2011", value: 2011 },
+      value: "2022",
-    { label: "2010", value: 2010 },
+    },
-    { label: "2009", value: 2009 },
+    {
+      label: "2021",
+      value: "2021",
+    },
+    {
+      label: "2020",
+      value: "2020",
+    },
+    {
+      label: "2019",
+      value: "2019",
+    },
+    {
+      label: "2018",
+      value: "2018",
+    },
+    {
+      label: "2017",
+      value: "2017",
+    },
+    {
+      label: "2016",
+      value: "2016",
+    },
+    {
+      label: "2015",
+      value: "2015",
+    },
+    {
+      label: "2014",
+      value: "2014",
+    },
+    {
+      label: "2013",
+      value: "2013",
+    },
+    {
+      label: "2012",
+      value: "2012",
+    },
+    {
+      label: "2011",
+      value: "2011",
+    },
+    {
+      label: "2010",
+      value: "2010",
+    },
+    {
+      label: "2009",
+      value: "2009",
+    },
   ],
 
   // 每页条数选项
@@ -114,71 +173,87 @@ const state = reactive({
     { label: "25", value: 25 },
     { label: "50", value: 50 },
   ],
-
-  // SEC文件数据
-  secFilingsData: [],
 });
+
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 onMounted(() => {
-  // 月份名称映射
+  getListData();
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  state.secFilingsData = fileList.map((item, index) => {
-    // 从 filingDate 中提取年份，支持两种格式：
-    // 1. "Feb 04, 2019" 格式（英文）
-    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
-    let year = null;
-    let formattedDate = item.filingDate;
-
-    if (item.filingDate) {
-      if (item.filingDate.includes(", ")) {
-        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
-        year = parseInt(item.filingDate.split(", ")[1]);
-      } else if (item.filingDate.includes("-")) {
-        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
-        const dateParts = item.filingDate.split("-");
-        const yearPart = parseInt(dateParts[0]);
-        const monthPart = parseInt(dateParts[1]);
-        const dayPart = parseInt(dateParts[2]);
-
-        year = yearPart;
-        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
-        const dayFormatted = dayPart.toString().padStart(2, "0");
-        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
-      }
-    }
-
-    return {
-      ...item,
-      formattedDate: formattedDate, // 更新为统一的英文格式
-      year: year,
-    };
-  });
 });
+import axios from "axios";
+const getListData = async () => {
+  state.tableData = [];
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/list";
+  let params = {
+    page: state.currentPage,
+    pageSize: state.pageSize,
+    year: state.selectedYear,
+  };
+  Object.assign(params, state.sortParams);
+  state.tableLoading = true;
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let resData = res.data.data?.data || [];
+    resData.forEach((item) => {
+      if (item.filingDate) {
+        let year = null;
+        let filingDate = item.filingDate;
+        if (item.filingDate.includes(", ")) {
+          // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+          year = parseInt(item.filingDate.split(", ")[1]);
+        } else if (item.filingDate.includes("-")) {
+          // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+          const dateParts = item.filingDate.split("-");
+          const yearPart = parseInt(dateParts[0]);
+          const monthPart = parseInt(dateParts[1]);
+          const dayPart = parseInt(dateParts[2]);
+
+          year = yearPart;
+          const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+          const dayFormatted = dayPart.toString().padStart(2, "0");
+          filingDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+          item.year = year;
+          item.filingDate = filingDate;
+          item.filing_date = filingDate;
+        }
+      }
+    });
+    state.tableData = resData;
+    state.total = res.data.data?.total;
+  }
+  state.tableLoading = false;
+};
+const handleSort = (sortData) => {
+  state.sortParams = {};
+  if (sortData.order !== false) {
+    state.sortParams["sortField"] = sortData.columnKey;
+    state.sortParams["sortOrder"] = sortData.order.replace("end", "");
+  }
+  getListData();
+};
 // 表格列定义
 const columns = [
   {
     title: "Filing Date",
-    key: "formattedDate",
+    key: "filing_date",
     sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
-    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -195,7 +270,7 @@ const columns = [
             router.push({
               path: "/secfilingsDefail",
               query: {
-                idx: row.idx,
+                filingKey: row.filingKey,
               },
             });
           },
@@ -213,14 +288,13 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
   },
   {
     title: "View",
-    key: "view",
+    key: "fileLink",
     width: 150,
     render: (row) => {
       return h(
@@ -232,60 +306,132 @@ const columns = [
           },
         },
         [
-          h(
+          row.pdfFile
-            "a",
+            ? h(
-            {
+                "a",
-              href: row.fileLink,
+                {
-              style: {
+                  href: "javascript:void(0)",
-                color: "#0078d7",
+                  style: {
-                textDecoration: "none",
+                    color: "#0078d7",
-                fontSize: "12px",
+                    textDecoration: "none",
-              },
+                    fontSize: "12px",
-              onMouseover: (e) => {
+                  },
-                e.target.style.textDecoration = "underline";
+                  onClick: (e) => {
-              },
+                    e.preventDefault();
-              onMouseout: (e) => {
+                    handleViewDocument(row.pdfFile, "pdf");
-                e.target.style.textDecoration = "none";
+                  },
-              },
+                  onMouseover: (e) => {
-            },
+                    e.target.style.textDecoration = "underline";
-            h("img", {
+                  },
-              src: iconLink,
+                  onMouseout: (e) => {
-              alt: "link",
+                    e.target.style.textDecoration = "none";
-              style: {
+                  },
-                width: "24px",
+                },
-                height: "24px",
+                h("img", {
-              },
+                  src: pdfFile,
-            })
+                  alt: "link",
-          ),
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.wordFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.wordFile, "word");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: wordFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.excelFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.excelFile, "excel");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: excelFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.fileLink
+            ? h(
+                "a",
+                {
+                  href: row.fileLink,
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: fileLink,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
         ]
       );
     },
   },
 ];
 
-// 筛选后的数据
-const filteredData = computed(() => {
-  let data = state.secFilingsData;
-
-  if (state.selectedYear) {
-    data = data.filter((item) => item.year === state.selectedYear);
-  }
-
-  return data;
-});
-
-// 分页数据
-const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return filteredData.value.slice(start, end);
-});
-
-// 总页数
-const totalPages = computed(() => {
-  return Math.ceil(filteredData.value.length / state.pageSize);
-});
-
 // 当前页起始索引
 const startIndex = computed(() => {
   return (state.currentPage - 1) * state.pageSize + 1;
@@ -294,24 +440,34 @@ const startIndex = computed(() => {
 // 当前页结束索引
 const endIndex = computed(() => {
   const end = state.currentPage * state.pageSize;
-  return Math.min(end, filteredData.value.length);
+  return Math.min(end, state.total);
 });
 
 // 处理年份变化
 const handleYearChange = (value) => {
   state.selectedYear = value;
   state.currentPage = 1;
+  getListData();
 };
 
 // 处理页码变化
 const handlePageChange = (page) => {
   state.currentPage = page;
+  getListData();
 };
 
 // 处理每页条数变化
 const handlePageSizeChange = (size) => {
   state.pageSize = size;
   state.currentPage = 1;
+  getListData();
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
 };
 </script>
 

src/views/financialinformation/secfilings/size375/index.vue

@@ -33,9 +33,11 @@
       <div class="table-container">
         <n-data-table
           :columns="columns"
-          :data="paginatedData"
+          :loading="state.tableLoading"
+          :data="state.tableData"
           :pagination="false"
           :row-key="(row) => row.idx"
+          @update:sorter="handleSort"
           :bordered="false"
           :single-line="false"
           :scroll-x="600"
@@ -47,7 +49,7 @@
             v-model:page="state.currentPage"
             v-model:page-size="state.pageSize"
             show-size-picker
-            :item-count="filteredData.length"
+            :item-count="state.total"
             :page-sizes="[10, 25, 50]"
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
@@ -62,7 +64,7 @@
 
           <div class="pagination-info mt-[40px]">
             Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ filteredData.length }} results
+            {{ state.total }} results
           </div>
         </div>
       </div>
@@ -75,36 +77,94 @@ import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secFiles.js";
+
 const { t } = useI18n();
 const router = useRouter();
-import iconLink from "@/assets/image/icon/icon-link.png";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
   pageSize: 10,
   currentPage: 1,
+  tableData: [],
+  tableLoading: false,
+  total: 0,
+  sortParams: {},
 
   // 年份选项
   yearOptions: [
     { label: "- Any -", value: null },
-    { label: "2025", value: 2025 },
+    {
-    { label: "2024", value: 2024 },
+      label: "2025",
-    { label: "2023", value: 2023 },
+      value: "2025",
-    { label: "2022", value: 2022 },
+    },
-    { label: "2021", value: 2021 },
+    {
-    { label: "2020", value: 2020 },
+      label: "2024",
-    { label: "2019", value: 2019 },
+      value: "2024",
-    { label: "2018", value: 2018 },
+    },
-    { label: "2017", value: 2017 },
+    {
-    { label: "2016", value: 2016 },
+      label: "2023",
-    { label: "2015", value: 2015 },
+      value: "2023",
-    { label: "2014", value: 2014 },
+    },
-    { label: "2013", value: 2013 },
+    {
-    { label: "2012", value: 2012 },
+      label: "2022",
-    { label: "2011", value: 2011 },
+      value: "2022",
-    { label: "2010", value: 2010 },
+    },
-    { label: "2009", value: 2009 },
+    {
+      label: "2021",
+      value: "2021",
+    },
+    {
+      label: "2020",
+      value: "2020",
+    },
+    {
+      label: "2019",
+      value: "2019",
+    },
+    {
+      label: "2018",
+      value: "2018",
+    },
+    {
+      label: "2017",
+      value: "2017",
+    },
+    {
+      label: "2016",
+      value: "2016",
+    },
+    {
+      label: "2015",
+      value: "2015",
+    },
+    {
+      label: "2014",
+      value: "2014",
+    },
+    {
+      label: "2013",
+      value: "2013",
+    },
+    {
+      label: "2012",
+      value: "2012",
+    },
+    {
+      label: "2011",
+      value: "2011",
+    },
+    {
+      label: "2010",
+      value: "2010",
+    },
+    {
+      label: "2009",
+      value: "2009",
+    },
   ],
 
   // 每页条数选项
@@ -113,71 +173,87 @@ const state = reactive({
     { label: "25", value: 25 },
     { label: "50", value: 50 },
   ],
-
-  // SEC文件数据
-  secFilingsData: [],
 });
+
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 onMounted(() => {
-  // 月份名称映射
+  getListData();
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  state.secFilingsData = fileList.map((item, index) => {
-    // 从 filingDate 中提取年份，支持两种格式：
-    // 1. "Feb 04, 2019" 格式（英文）
-    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
-    let year = null;
-    let formattedDate = item.filingDate;
-
-    if (item.filingDate) {
-      if (item.filingDate.includes(", ")) {
-        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
-        year = parseInt(item.filingDate.split(", ")[1]);
-      } else if (item.filingDate.includes("-")) {
-        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
-        const dateParts = item.filingDate.split("-");
-        const yearPart = parseInt(dateParts[0]);
-        const monthPart = parseInt(dateParts[1]);
-        const dayPart = parseInt(dateParts[2]);
-
-        year = yearPart;
-        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
-        const dayFormatted = dayPart.toString().padStart(2, "0");
-        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
-      }
-    }
-
-    return {
-      ...item,
-      formattedDate: formattedDate, // 更新为统一的英文格式
-      year: year,
-    };
-  });
 });
+import axios from "axios";
+const getListData = async () => {
+  state.tableData = [];
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/list";
+  let params = {
+    page: state.currentPage,
+    pageSize: state.pageSize,
+    year: state.selectedYear,
+  };
+  Object.assign(params, state.sortParams);
+  state.tableLoading = true;
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let resData = res.data.data?.data || [];
+    resData.forEach((item) => {
+      if (item.filingDate) {
+        let year = null;
+        let filingDate = item.filingDate;
+        if (item.filingDate.includes(", ")) {
+          // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+          year = parseInt(item.filingDate.split(", ")[1]);
+        } else if (item.filingDate.includes("-")) {
+          // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+          const dateParts = item.filingDate.split("-");
+          const yearPart = parseInt(dateParts[0]);
+          const monthPart = parseInt(dateParts[1]);
+          const dayPart = parseInt(dateParts[2]);
+
+          year = yearPart;
+          const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+          const dayFormatted = dayPart.toString().padStart(2, "0");
+          filingDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+          item.year = year;
+          item.filingDate = filingDate;
+          item.filing_date = filingDate;
+        }
+      }
+    });
+    state.tableData = resData;
+    state.total = res.data.data?.total;
+  }
+  state.tableLoading = false;
+};
+const handleSort = (sortData) => {
+  state.sortParams = {};
+  if (sortData.order !== false) {
+    state.sortParams["sortField"] = sortData.columnKey;
+    state.sortParams["sortOrder"] = sortData.order.replace("end", "");
+  }
+  getListData();
+};
 // 表格列定义
 const columns = [
   {
     title: "Filing Date",
-    key: "formattedDate",
+    key: "filing_date",
     sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
-    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -194,7 +270,7 @@ const columns = [
             router.push({
               path: "/secfilingsDefail",
               query: {
-                filingDate: row.filingDate,
+                filingKey: row.filingKey,
               },
             });
           },
@@ -212,15 +288,14 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
   },
   {
     title: "View",
-    key: "view",
+    key: "fileLink",
-    width: 80,
+    width: 150,
     render: (row) => {
       return h(
         "div",
@@ -231,60 +306,132 @@ const columns = [
           },
         },
         [
-          h(
+          row.pdfFile
-            "a",
+            ? h(
-            {
+                "a",
-              href: row.fileLink,
+                {
-              style: {
+                  href: "javascript:void(0)",
-                color: "#0078d7",
+                  style: {
-                textDecoration: "none",
+                    color: "#0078d7",
-                fontSize: "12px",
+                    textDecoration: "none",
-              },
+                    fontSize: "12px",
-              onMouseover: (e) => {
+                  },
-                e.target.style.textDecoration = "underline";
+                  onClick: (e) => {
-              },
+                    e.preventDefault();
-              onMouseout: (e) => {
+                    handleViewDocument(row.pdfFile, "pdf");
-                e.target.style.textDecoration = "none";
+                  },
-              },
+                  onMouseover: (e) => {
-            },
+                    e.target.style.textDecoration = "underline";
-            h("img", {
+                  },
-              src: iconLink,
+                  onMouseout: (e) => {
-              alt: "link",
+                    e.target.style.textDecoration = "none";
-              style: {
+                  },
-                width: "24px",
+                },
-                height: "24px",
+                h("img", {
-              },
+                  src: pdfFile,
-            })
+                  alt: "link",
-          ),
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.wordFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.wordFile, "word");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: wordFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.excelFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.excelFile, "excel");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: excelFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.fileLink
+            ? h(
+                "a",
+                {
+                  href: row.fileLink,
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: fileLink,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
         ]
       );
     },
   },
 ];
 
-// 筛选后的数据
-const filteredData = computed(() => {
-  let data = state.secFilingsData;
-
-  if (state.selectedYear) {
-    data = data.filter((item) => item.year === state.selectedYear);
-  }
-
-  return data;
-});
-
-// 分页数据
-const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return filteredData.value.slice(start, end);
-});
-
-// 总页数
-const totalPages = computed(() => {
-  return Math.ceil(filteredData.value.length / state.pageSize);
-});
-
 // 当前页起始索引
 const startIndex = computed(() => {
   return (state.currentPage - 1) * state.pageSize + 1;
@@ -293,24 +440,34 @@ const startIndex = computed(() => {
 // 当前页结束索引
 const endIndex = computed(() => {
   const end = state.currentPage * state.pageSize;
-  return Math.min(end, filteredData.value.length);
+  return Math.min(end, state.total);
 });
 
 // 处理年份变化
 const handleYearChange = (value) => {
   state.selectedYear = value;
   state.currentPage = 1;
+  getListData();
 };
 
 // 处理页码变化
 const handlePageChange = (page) => {
   state.currentPage = page;
+  getListData();
 };
 
 // 处理每页条数变化
 const handlePageSizeChange = (size) => {
   state.pageSize = size;
   state.currentPage = 1;
+  getListData();
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
 };
 </script>
 

src/views/financialinformation/secfilings/size768/index.vue

@@ -33,11 +33,13 @@
       <div class="table-container">
         <n-data-table
           :columns="columns"
-          :data="paginatedData"
+          :loading="state.tableLoading"
+          :data="state.tableData"
           :pagination="false"
           :bordered="false"
           :size="'medium'"
           :row-key="(row) => row.idx"
+          @update:sorter="handleSort"
         />
 
         <!-- 分页器 -->
@@ -48,7 +50,7 @@
             v-model:page-size="state.pageSize"
             show-size-picker
             show-quick-jumper
-            :item-count="filteredData.length"
+            :item-count="state.total"
             :page-sizes="[10, 25, 50]"
             @update:page="handlePageChange"
             @update:page-size="handlePageSizeChange"
@@ -63,7 +65,7 @@
 
           <div class="pagination-info w-full mt-[20px]">
             Displaying {{ startIndex }} - {{ endIndex }} of
-            {{ filteredData.length }} results
+            {{ state.total }} results
           </div>
         </div>
       </div>
@@ -76,36 +78,94 @@ import { reactive, computed, h, onMounted } from "vue";
 import { NSelect, NDataTable, NPagination, NButton, NIcon } from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { fileList } from "@/dict/secFiles.js";
+
 const { t } = useI18n();
 const router = useRouter();
-import iconLink from "@/assets/image/icon/icon-link.png";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
 // 使用 reactive 管理所有状态
 const state = reactive({
   selectedYear: null,
   pageSize: 10,
   currentPage: 1,
+  tableData: [],
+  tableLoading: false,
+  total: 0,
+  sortParams: {},
 
   // 年份选项
   yearOptions: [
     { label: "- Any -", value: null },
-    { label: "2025", value: 2025 },
+    {
-    { label: "2024", value: 2024 },
+      label: "2025",
-    { label: "2023", value: 2023 },
+      value: "2025",
-    { label: "2022", value: 2022 },
+    },
-    { label: "2021", value: 2021 },
+    {
-    { label: "2020", value: 2020 },
+      label: "2024",
-    { label: "2019", value: 2019 },
+      value: "2024",
-    { label: "2018", value: 2018 },
+    },
-    { label: "2017", value: 2017 },
+    {
-    { label: "2016", value: 2016 },
+      label: "2023",
-    { label: "2015", value: 2015 },
+      value: "2023",
-    { label: "2014", value: 2014 },
+    },
-    { label: "2013", value: 2013 },
+    {
-    { label: "2012", value: 2012 },
+      label: "2022",
-    { label: "2011", value: 2011 },
+      value: "2022",
-    { label: "2010", value: 2010 },
+    },
-    { label: "2009", value: 2009 },
+    {
+      label: "2021",
+      value: "2021",
+    },
+    {
+      label: "2020",
+      value: "2020",
+    },
+    {
+      label: "2019",
+      value: "2019",
+    },
+    {
+      label: "2018",
+      value: "2018",
+    },
+    {
+      label: "2017",
+      value: "2017",
+    },
+    {
+      label: "2016",
+      value: "2016",
+    },
+    {
+      label: "2015",
+      value: "2015",
+    },
+    {
+      label: "2014",
+      value: "2014",
+    },
+    {
+      label: "2013",
+      value: "2013",
+    },
+    {
+      label: "2012",
+      value: "2012",
+    },
+    {
+      label: "2011",
+      value: "2011",
+    },
+    {
+      label: "2010",
+      value: "2010",
+    },
+    {
+      label: "2009",
+      value: "2009",
+    },
   ],
 
   // 每页条数选项
@@ -114,71 +174,87 @@ const state = reactive({
     { label: "25", value: 25 },
     { label: "50", value: 50 },
   ],
-
-  // SEC文件数据
-  secFilingsData: [],
 });
+
+const monthNames = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 onMounted(() => {
-  // 月份名称映射
+  getListData();
-  const monthNames = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-
-  state.secFilingsData = fileList.map((item, index) => {
-    // 从 filingDate 中提取年份，支持两种格式：
-    // 1. "Feb 04, 2019" 格式（英文）
-    // 2. "2025-10-24" 格式（ISO格式）转换为英文格式
-    let year = null;
-    let formattedDate = item.filingDate;
-
-    if (item.filingDate) {
-      if (item.filingDate.includes(", ")) {
-        // "Feb 04, 2019" 格式，已经是英文格式，保持不变
-        year = parseInt(item.filingDate.split(", ")[1]);
-      } else if (item.filingDate.includes("-")) {
-        // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
-        const dateParts = item.filingDate.split("-");
-        const yearPart = parseInt(dateParts[0]);
-        const monthPart = parseInt(dateParts[1]);
-        const dayPart = parseInt(dateParts[2]);
-
-        year = yearPart;
-        const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
-        const dayFormatted = dayPart.toString().padStart(2, "0");
-        formattedDate = `${monthName} ${dayFormatted}, ${yearPart}`;
-      }
-    }
-
-    return {
-      ...item,
-      formattedDate: formattedDate, // 更新为统一的英文格式
-      year: year,
-    };
-  });
 });
+import axios from "axios";
+const getListData = async () => {
+  state.tableData = [];
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/list";
+  let params = {
+    page: state.currentPage,
+    pageSize: state.pageSize,
+    year: state.selectedYear,
+  };
+  Object.assign(params, state.sortParams);
+  state.tableLoading = true;
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let resData = res.data.data?.data || [];
+    resData.forEach((item) => {
+      if (item.filingDate) {
+        let year = null;
+        let filingDate = item.filingDate;
+        if (item.filingDate.includes(", ")) {
+          // "Feb 04, 2019" 格式，已经是英文格式，保持不变
+          year = parseInt(item.filingDate.split(", ")[1]);
+        } else if (item.filingDate.includes("-")) {
+          // "2025-10-24" 格式，转换为 "Oct 24, 2025" 英文格式
+          const dateParts = item.filingDate.split("-");
+          const yearPart = parseInt(dateParts[0]);
+          const monthPart = parseInt(dateParts[1]);
+          const dayPart = parseInt(dateParts[2]);
+
+          year = yearPart;
+          const monthName = monthNames[monthPart - 1]; // 月份从1开始，数组从0开始
+          const dayFormatted = dayPart.toString().padStart(2, "0");
+          filingDate = `${monthName} ${dayFormatted}, ${yearPart}`;
+          item.year = year;
+          item.filingDate = filingDate;
+          item.filing_date = filingDate;
+        }
+      }
+    });
+    state.tableData = resData;
+    state.total = res.data.data?.total;
+  }
+  state.tableLoading = false;
+};
+const handleSort = (sortData) => {
+  state.sortParams = {};
+  if (sortData.order !== false) {
+    state.sortParams["sortField"] = sortData.columnKey;
+    state.sortParams["sortOrder"] = sortData.order.replace("end", "");
+  }
+  getListData();
+};
 // 表格列定义
 const columns = [
   {
     title: "Filing Date",
-    key: "formattedDate",
+    key: "filing_date",
     sorter: "default",
     width: 150,
   },
   {
     title: "Form",
     key: "form",
-    sorter: "default",
     width: 120,
     render: (row) => {
       return h(
@@ -195,7 +271,7 @@ const columns = [
             router.push({
               path: "/secfilingsDefail",
               query: {
-                filingDate: row.filingDate,
+                filingKey: row.filingKey,
               },
             });
           },
@@ -213,14 +289,14 @@ const columns = [
   {
     title: "Description",
     key: "description",
-    sorter: "default",
     ellipsis: {
       tooltip: true,
     },
   },
   {
     title: "View",
-    key: "view",
+    key: "fileLink",
+    width: 150,
     render: (row) => {
       return h(
         "div",
@@ -231,60 +307,132 @@ const columns = [
           },
         },
         [
-          h(
+          row.pdfFile
-            "a",
+            ? h(
-            {
+                "a",
-              href: row.fileLink,
+                {
-              style: {
+                  href: "javascript:void(0)",
-                color: "#0078d7",
+                  style: {
-                textDecoration: "none",
+                    color: "#0078d7",
-                fontSize: "12px",
+                    textDecoration: "none",
-              },
+                    fontSize: "12px",
-              onMouseover: (e) => {
+                  },
-                e.target.style.textDecoration = "underline";
+                  onClick: (e) => {
-              },
+                    e.preventDefault();
-              onMouseout: (e) => {
+                    handleViewDocument(row.pdfFile, "pdf");
-                e.target.style.textDecoration = "none";
+                  },
-              },
+                  onMouseover: (e) => {
-            },
+                    e.target.style.textDecoration = "underline";
-            h("img", {
+                  },
-              src: iconLink,
+                  onMouseout: (e) => {
-              alt: "link",
+                    e.target.style.textDecoration = "none";
-              style: {
+                  },
-                width: "24px",
+                },
-                height: "24px",
+                h("img", {
-              },
+                  src: pdfFile,
-            })
+                  alt: "link",
-          ),
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.wordFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.wordFile, "word");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: wordFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.excelFile
+            ? h(
+                "a",
+                {
+                  href: "javascript:void(0)",
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleViewDocument(row.excelFile, "excel");
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: excelFile,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
+          row.fileLink
+            ? h(
+                "a",
+                {
+                  href: row.fileLink,
+                  style: {
+                    color: "#0078d7",
+                    textDecoration: "none",
+                    fontSize: "12px",
+                  },
+                  onMouseover: (e) => {
+                    e.target.style.textDecoration = "underline";
+                  },
+                  onMouseout: (e) => {
+                    e.target.style.textDecoration = "none";
+                  },
+                },
+                h("img", {
+                  src: fileLink,
+                  alt: "link",
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                  },
+                })
+              )
+            : null,
         ]
       );
     },
   },
 ];
 
-// 筛选后的数据
-const filteredData = computed(() => {
-  let data = state.secFilingsData;
-
-  if (state.selectedYear) {
-    data = data.filter((item) => item.year === state.selectedYear);
-  }
-
-  return data;
-});
-
-// 分页数据
-const paginatedData = computed(() => {
-  const start = (state.currentPage - 1) * state.pageSize;
-  const end = start + state.pageSize;
-  return filteredData.value.slice(start, end);
-});
-
-// 总页数
-const totalPages = computed(() => {
-  return Math.ceil(filteredData.value.length / state.pageSize);
-});
-
 // 当前页起始索引
 const startIndex = computed(() => {
   return (state.currentPage - 1) * state.pageSize + 1;
@@ -293,24 +441,34 @@ const startIndex = computed(() => {
 // 当前页结束索引
 const endIndex = computed(() => {
   const end = state.currentPage * state.pageSize;
-  return Math.min(end, filteredData.value.length);
+  return Math.min(end, state.total);
 });
 
 // 处理年份变化
 const handleYearChange = (value) => {
   state.selectedYear = value;
   state.currentPage = 1;
+  getListData();
 };
 
 // 处理页码变化
 const handlePageChange = (page) => {
   state.currentPage = page;
+  getListData();
 };
 
 // 处理每页条数变化
 const handlePageSizeChange = (size) => {
   state.pageSize = size;
   state.currentPage = 1;
+  getListData();
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
 };
 </script>
 

src/views/financialinformation/secfilingsdetail/size1440/index.vue

@@ -10,7 +10,7 @@
         <div class="details-grid">
           <div class="detail-item">
             <span class="detail-label">Form:</span>
-            <a :href="filingData.htmlLink" class="detail-value link">{{
+            <a :href="filingData.fileLink" class="detail-value link">{{
               filingData.form
             }}</a>
           </div>
@@ -37,9 +37,39 @@
       <div class="section">
         <h2 class="section-title">Filing Formats</h2>
         <div class="formats-list">
-          <div class="format-item">
+          <div class="format-item" v-if="filingData.pdfFile">
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="pdfFile" alt="link" class="format-icon" />
-            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.pdfFile, 'pdf')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.wordFile">
+            <img :src="wordFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.wordFile, 'word')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.excelFile">
+            <img :src="excelFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.excelFile, 'excel')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.fileLink">
+            <img :src="fileLink" alt="link" class="format-icon" />
+            <a :href="filingData.fileLink" class="format-link" target="_blank"
               >View HTML</a
             >
           </div>
@@ -60,7 +90,7 @@
             v-for="(item, idx) in filingData.dataFiles"
             :key="idx"
           >
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="fileLink" alt="link" class="format-icon" />
             <a :href="item.fileUrl" class="format-link" target="_blank">{{
               item.description
             }}</a>
@@ -73,8 +103,12 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import iconLink from "@/assets/image/icon/icon-link.png";
+
-import { fileList } from "@/dict/secFiles.js";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
+
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -84,27 +118,48 @@ const filingData = ref({
   formDescription: "",
   company: "",
   issuer: "",
-  htmlLink: "#",
+  fileLink: "#",
 });
 
 const route = useRoute();
 
 onMounted(() => {
-  const { idx } = route.query;
+  const { filingKey } = route.query;
-  const file = fileList.find((item) => item.idx == idx);
+  getPageData(filingKey);
-  if (file) {
-    filingData.value = {
-      form: file.form,
-      filingDate: file.filingDate,
-      formDescription: file.formDescription,
-      htmlLink: file.fileLink || "#",
-      dataFiles: file.dataFiles || [],
-      company: "FiEE, Inc. ",
-      issuer: "FiEE, Inc. ",
-    };
-  }
-  // console.log(filingData.value);
 });
+import axios from "axios";
+const getPageData = async (filingKey) => {
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/detail";
+  let params = {
+    filingKey,
+  };
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let file = res.data.data.data;
+    console.log(file);
+    if (file) {
+      filingData.value = {
+        form: file.form,
+        filingDate: file.filingDate,
+        formDescription: file.formDescription,
+        fileLink: file.fileLink || "",
+        pdfFile: file.pdfFile || "",
+        wordFile: file.wordFile || "",
+        excelFile: file.excelFile || "",
+        dataFiles: file.dataFiles || [],
+        company: "FiEE, Inc. ",
+        issuer: "FiEE, Inc. ",
+      };
+    }
+  }
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
+};
 </script>
 
 <style scoped lang="scss">

src/views/financialinformation/secfilingsdetail/size1920/index.vue

@@ -10,7 +10,7 @@
         <div class="details-grid">
           <div class="detail-item">
             <span class="detail-label">Form:</span>
-            <a :href="filingData.htmlLink" class="detail-value link">{{
+            <a :href="filingData.fileLink" class="detail-value link">{{
               filingData.form
             }}</a>
           </div>
@@ -37,9 +37,39 @@
       <div class="section">
         <h2 class="section-title">Filing Formats</h2>
         <div class="formats-list">
-          <div class="format-item">
+          <div class="format-item" v-if="filingData.pdfFile">
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="pdfFile" alt="link" class="format-icon" />
-            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.pdfFile, 'pdf')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.wordFile">
+            <img :src="wordFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.wordFile, 'word')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.excelFile">
+            <img :src="excelFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.excelFile, 'excel')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.fileLink">
+            <img :src="fileLink" alt="link" class="format-icon" />
+            <a :href="filingData.fileLink" class="format-link" target="_blank"
               >View HTML</a
             >
           </div>
@@ -60,7 +90,7 @@
             v-for="(item, idx) in filingData.dataFiles"
             :key="idx"
           >
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="fileLink" alt="link" class="format-icon" />
             <a :href="item.fileUrl" class="format-link" target="_blank">{{
               item.description
             }}</a>
@@ -73,8 +103,12 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import iconLink from "@/assets/image/icon/icon-link.png";
+
-import { fileList } from "@/dict/secFiles.js";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
+
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -84,26 +118,48 @@ const filingData = ref({
   formDescription: "",
   company: "",
   issuer: "",
-  htmlLink: "#",
+  fileLink: "#",
 });
 
 const route = useRoute();
 
 onMounted(() => {
-  const { idx } = route.query;
+  const { filingKey } = route.query;
-  const file = fileList.find((item) => item.idx == idx);
+  getPageData(filingKey);
-  if (file) {
-    filingData.value = {
-      form: file.form,
-      filingDate: file.filingDate,
-      formDescription: file.formDescription,
-      htmlLink: file.fileLink || "#",
-      dataFiles: file.dataFiles || [],
-      company: "FiEE, Inc. ",
-      issuer: "FiEE, Inc. ",
-    };
-  }
 });
+import axios from "axios";
+const getPageData = async (filingKey) => {
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/detail";
+  let params = {
+    filingKey,
+  };
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let file = res.data.data.data;
+    console.log(file);
+    if (file) {
+      filingData.value = {
+        form: file.form,
+        filingDate: file.filingDate,
+        formDescription: file.formDescription,
+        fileLink: file.fileLink || "",
+        pdfFile: file.pdfFile || "",
+        wordFile: file.wordFile || "",
+        excelFile: file.excelFile || "",
+        dataFiles: file.dataFiles || [],
+        company: "FiEE, Inc. ",
+        issuer: "FiEE, Inc. ",
+      };
+    }
+  }
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
+};
 </script>
 
 <style scoped lang="scss">

src/views/financialinformation/secfilingsdetail/size375/index.vue

@@ -10,7 +10,7 @@
         <div class="details-grid">
           <div class="detail-item">
             <span class="detail-label">Form:</span>
-            <a :href="filingData.htmlLink" class="detail-value link">{{
+            <a :href="filingData.fileLink" class="detail-value link">{{
               filingData.form
             }}</a>
           </div>
@@ -37,9 +37,39 @@
       <div class="section">
         <h2 class="section-title">Filing Formats</h2>
         <div class="formats-list">
-          <div class="format-item">
+          <div class="format-item" v-if="filingData.pdfFile">
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="pdfFile" alt="link" class="format-icon" />
-            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.pdfFile, 'pdf')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.wordFile">
+            <img :src="wordFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.wordFile, 'word')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.excelFile">
+            <img :src="excelFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.excelFile, 'excel')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.fileLink">
+            <img :src="fileLink" alt="link" class="format-icon" />
+            <a :href="filingData.fileLink" class="format-link" target="_blank"
               >View HTML</a
             >
           </div>
@@ -60,7 +90,7 @@
             v-for="(item, idx) in filingData.dataFiles"
             :key="idx"
           >
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="fileLink" alt="link" class="format-icon" />
             <a :href="item.fileUrl" class="format-link" target="_blank">{{
               item.description
             }}</a>
@@ -73,8 +103,12 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import iconLink from "@/assets/image/icon/icon-link.png";
+
-import { fileList } from "@/dict/secFiles.js";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
+
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -84,27 +118,48 @@ const filingData = ref({
   formDescription: "",
   company: "",
   issuer: "",
-  htmlLink: "#",
+  fileLink: "#",
 });
 
 const route = useRoute();
 
 onMounted(() => {
-  const { idx } = route.query;
+  const { filingKey } = route.query;
-  const file = fileList.find((item) => item.idx == idx);
+  getPageData(filingKey);
-  if (file) {
-    filingData.value = {
-      form: file.form,
-      filingDate: file.filingDate,
-      formDescription: file.formDescription,
-      htmlLink: file.fileLink || "#",
-      dataFiles: file.dataFiles || [],
-      company: "FiEE, Inc. ",
-      issuer: "FiEE, Inc. ",
-    };
-  }
-  // console.log(filingData.value);
 });
+import axios from "axios";
+const getPageData = async (filingKey) => {
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/detail";
+  let params = {
+    filingKey,
+  };
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let file = res.data.data.data;
+    console.log(file);
+    if (file) {
+      filingData.value = {
+        form: file.form,
+        filingDate: file.filingDate,
+        formDescription: file.formDescription,
+        fileLink: file.fileLink || "",
+        pdfFile: file.pdfFile || "",
+        wordFile: file.wordFile || "",
+        excelFile: file.excelFile || "",
+        dataFiles: file.dataFiles || [],
+        company: "FiEE, Inc. ",
+        issuer: "FiEE, Inc. ",
+      };
+    }
+  }
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
+};
 </script>
 
 <style scoped lang="scss">

src/views/financialinformation/secfilingsdetail/size768/index.vue

@@ -10,7 +10,7 @@
         <div class="details-grid">
           <div class="detail-item">
             <span class="detail-label">Form:</span>
-            <a :href="filingData.htmlLink" class="detail-value link">{{
+            <a :href="filingData.fileLink" class="detail-value link">{{
               filingData.form
             }}</a>
           </div>
@@ -37,9 +37,39 @@
       <div class="section">
         <h2 class="section-title">Filing Formats</h2>
         <div class="formats-list">
-          <div class="format-item">
+          <div class="format-item" v-if="filingData.pdfFile">
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="pdfFile" alt="link" class="format-icon" />
-            <a :href="filingData.htmlLink" class="format-link" target="_blank"
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.pdfFile, 'pdf')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.wordFile">
+            <img :src="wordFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.wordFile, 'word')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.excelFile">
+            <img :src="excelFile" alt="link" class="format-icon" />
+            <a
+              href="javascript:void(0)"
+              class="format-link"
+              target="_blank"
+              @click="handleViewDocument(filingData.excelFile, 'excel')"
+              >View HTML</a
+            >
+          </div>
+          <div class="format-item" v-if="filingData.fileLink">
+            <img :src="fileLink" alt="link" class="format-icon" />
+            <a :href="filingData.fileLink" class="format-link" target="_blank"
               >View HTML</a
             >
           </div>
@@ -60,7 +90,7 @@
             v-for="(item, idx) in filingData.dataFiles"
             :key="idx"
           >
-            <img :src="iconLink" alt="link" class="format-icon" />
+            <img :src="fileLink" alt="link" class="format-icon" />
             <a :href="item.fileUrl" class="format-link" target="_blank">{{
               item.description
             }}</a>
@@ -73,8 +103,12 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import iconLink from "@/assets/image/icon/icon-link.png";
+
-import { fileList } from "@/dict/secFiles.js";
+import pdfFile from "@/assets/image/icon/icon-pdf.png";
+import wordFile from "@/assets/image/icon/icon-word.png";
+import excelFile from "@/assets/image/icon/icon-excel.png";
+import fileLink from "@/assets/image/icon/icon-link.png";
+
 import { useRoute } from "vue-router";
 
 // 这里可以根据路由参数或props获取具体的文件详情
@@ -84,27 +118,48 @@ const filingData = ref({
   formDescription: "",
   company: "",
   issuer: "",
-  htmlLink: "#",
+  fileLink: "#",
 });
 
 const route = useRoute();
 
 onMounted(() => {
-  const { idx } = route.query;
+  const { filingKey } = route.query;
-  const file = fileList.find((item) => item.idx == idx);
+  getPageData(filingKey);
-  if (file) {
-    filingData.value = {
-      form: file.form,
-      filingDate: file.filingDate,
-      formDescription: file.formDescription,
-      htmlLink: file.fileLink || "#",
-      dataFiles: file.dataFiles || [],
-      company: "FiEE, Inc. ",
-      issuer: "FiEE, Inc. ",
-    };
-  }
-  // console.log(filingData.value);
 });
+import axios from "axios";
+const getPageData = async (filingKey) => {
+  let url = "https://saas.fiee.com/api/fiee/sec-filing/web/detail";
+  let params = {
+    filingKey,
+  };
+  const res = await axios.post(url, params);
+  if (res.data.status === 0) {
+    let file = res.data.data.data;
+    console.log(file);
+    if (file) {
+      filingData.value = {
+        form: file.form,
+        filingDate: file.filingDate,
+        formDescription: file.formDescription,
+        fileLink: file.fileLink || "",
+        pdfFile: file.pdfFile || "",
+        wordFile: file.wordFile || "",
+        excelFile: file.excelFile || "",
+        dataFiles: file.dataFiles || [],
+        company: "FiEE, Inc. ",
+        issuer: "FiEE, Inc. ",
+      };
+    }
+  }
+};
+// 查看文档
+const handleViewDocument = (val, type) => {
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
+    "_blank"
+  );
+};
 </script>
 
 <style scoped lang="scss">