fiee-official-website/src/views/financialinformation/secfilings/size768/index.vue

<template>
  <div class="page-container">
    <div class="sec-filings-container">
      <!-- 标题 -->
      <div class="page-title">SEC Filings</div>

      <!-- 筛选器 -->
      <div class="filters">
        <div class="filter-group">
          <label class="filter-label">Filing year</label>
          <n-select
            v-model:value="state.selectedYear"
            :options="state.yearOptions"
            placeholder="- Any -"
            style="width: 150px"
            clearable
            @update:value="handleYearChange"
          />
        </div>

        <div class="filter-group">
          <label class="filter-label">Items per page:</label>
          <n-select
            v-model:value="state.pageSize"
            :options="state.pageSizeOptions"
            style="width: 150px"
            @update:value="handlePageSizeChange"
          />
        </div>
      </div>

      <!-- 表格 -->
      <div class="table-container">
        <n-data-table
          :columns="columns"
          :loading="state.tableLoading"
          :data="state.tableData"
          :pagination="false"
          :bordered="false"
          :size="'medium'"
          :row-key="(row) => row.idx"
          @update:sorter="handleSort"
        />

        <!-- 分页器 -->
        <div class="pagination-container">
          <n-pagination
            class="w-full"
            v-model:page="state.currentPage"
            v-model:page-size="state.pageSize"
            show-size-picker
            show-quick-jumper
            :item-count="state.total"
            :page-sizes="[10, 25, 50]"
            @update:page="handlePageChange"
            @update:page-size="handlePageSizeChange"
          >
            <template #prev>
              <span>‹ Previous</span>
            </template>
            <template #next>
              <span>Next ›</span>
            </template>
          </n-pagination>

          <div class="pagination-info w-full mt-[20px]">
            Displaying {{ startIndex }} - {{ endIndex }} of
            {{ 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";

const { t } = useI18n();
const router = useRouter();
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: "2023",
      value: "2023",
    },
    {
      label: "2022",
      value: "2022",
    },
    {
      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",
    },
  ],

  // 每页条数选项
  pageSizeOptions: [
    { label: "10", value: 10 },
    { label: "25", value: 25 },
    { label: "50", value: 50 },
  ],
});

const monthNames = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
onMounted(() => {
  getListData();
});
import axios from "axios";
const getListData = async () => {
  state.tableData = [];
  let url = "http://121.229.45.214:9031/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: "filing_date",
    sorter: "default",
    width: 150,
  },
  {
    title: "Form",
    key: "form",
    width: 120,
    render: (row) => {
      return h(
        "a",
        {
          href: "javascript:void(0)",
          style: {
            color: "#0078d7",
            textDecoration: "none",
            cursor: "pointer",
          },
          onClick: (e) => {
            e.preventDefault();
            router.push({
              path: "/secfilingsDefail",
              query: {
                filingKey: row.filingKey,
              },
            });
          },
          onMouseover: (e) => {
            e.target.style.textDecoration = "underline";
          },
          onMouseout: (e) => {
            e.target.style.textDecoration = "none";
          },
        },
        row.form
      );
    },
  },
  {
    title: "Description",
    key: "description",
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: "View",
    key: "fileLink",
    width: 150,
    render: (row) => {
      return h(
        "div",
        {
          style: {
            display: "flex",
            gap: "8px",
          },
        },
        [
          row.pdfFile
            ? h(
                "a",
                {
                  href: "javascript:void(0)",
                  style: {
                    color: "#0078d7",
                    textDecoration: "none",
                    fontSize: "12px",
                  },
                  onClick: (e) => {
                    e.preventDefault();
                    handleViewDocument(row.pdfFile, "pdf");
                  },
                  onMouseover: (e) => {
                    e.target.style.textDecoration = "underline";
                  },
                  onMouseout: (e) => {
                    e.target.style.textDecoration = "none";
                  },
                },
                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 startIndex = computed(() => {
  return (state.currentPage - 1) * state.pageSize + 1;
});

// 当前页结束索引
const endIndex = computed(() => {
  const end = state.currentPage * state.pageSize;
  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>

<style scoped lang="scss">
.page-container {
  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 20px;
}

.sec-filings-container {
  max-width: calc(100% - 300px);
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  font-size: 85px;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

.filters {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 50px;
  color: #333;
  font-weight: 500;
}

.table-container {
  .n-data-table {
    --n-th-color: #f5f5f5;
    --n-th-text-color: #333;
    --n-td-color: #fff;
    --n-border-color: #e0e0e0;
  }
}

.pagination-container {
  display: flex;
  flex-wrap: wrap; // 添加这行
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 20px 0;
}

.pagination-info {
  font-size: 40px;
  color: #666;
}

:deep(.n-data-table-th) {
  background-color: #9e9e9e !important;
  color: white !important;
  font-weight: bold;
  text-align: left;
}

:deep(.n-data-table-td) {
  border-bottom: 1px solid #e0e0e0;
}

:deep(.n-data-table-tr:hover .n-data-table-td) {
  background-color: #f9f9f9;
}

:deep(.n-select) {
  .n-base-selection {
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

:deep(.n-pagination) {
  .n-pagination-item {
    border: 1px solid #ccc;

    &.n-pagination-item--active {
      background-color: #969696;
      border-color: #969696;
      color: white;
    }
  }

  .n-pagination-quick-jumper {
    font-size: 40px;
  }

  .n-pagination-sizes {
    font-size: 40px;
  }
}
</style>