Compare commits
5 Commits
c445366624
...
7561f0d22e
| Author | SHA1 | Date | |
|---|---|---|---|
|
7561f0d22e | ||
|
|
c0fa196ac6 | ||
|
|
86799ccf1d | ||
|
|
1a2f9417fb | ||
|
|
d5ea7b295b |
BIN
src/assets/image/icon/icon-excel.png
Normal file
BIN
src/assets/image/icon/icon-excel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
src/assets/image/icon/icon-pdf.png
Normal file
BIN
src/assets/image/icon/icon-pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
src/assets/image/icon/icon-word.png
Normal file
BIN
src/assets/image/icon/icon-word.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
@ -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: "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 },
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
@ -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(() => {
|
||||
// 月份名称映射
|
||||
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,
|
||||
};
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
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(
|
||||
"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: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
})
|
||||
),
|
||||
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 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>
|
||||
|
||||
|
||||
@ -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: "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 },
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
@ -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(() => {
|
||||
// 月份名称映射
|
||||
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,
|
||||
};
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
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(
|
||||
"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: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
})
|
||||
),
|
||||
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 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>
|
||||
|
||||
|
||||
@ -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: "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 },
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
@ -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(() => {
|
||||
// 月份名称映射
|
||||
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,
|
||||
};
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
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",
|
||||
width: 80,
|
||||
key: "fileLink",
|
||||
width: 150,
|
||||
render: (row) => {
|
||||
return h(
|
||||
"div",
|
||||
@ -231,60 +306,132 @@ const columns = [
|
||||
},
|
||||
},
|
||||
[
|
||||
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: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
})
|
||||
),
|
||||
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 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>
|
||||
|
||||
|
||||
@ -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: "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 },
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
|
||||
// 每页条数选项
|
||||
@ -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(() => {
|
||||
// 月份名称映射
|
||||
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,
|
||||
};
|
||||
});
|
||||
getListData();
|
||||
});
|
||||
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(
|
||||
"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: iconLink,
|
||||
alt: "link",
|
||||
style: {
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
},
|
||||
})
|
||||
),
|
||||
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 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>
|
||||
|
||||
|
||||
@ -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">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
<div class="format-item" v-if="filingData.pdfFile">
|
||||
<img :src="pdfFile" alt="link" class="format-icon" />
|
||||
<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 file = fileList.find((item) => item.idx == idx);
|
||||
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);
|
||||
const { filingKey } = route.query;
|
||||
getPageData(filingKey);
|
||||
});
|
||||
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">
|
||||
|
||||
@ -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">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
<div class="format-item" v-if="filingData.pdfFile">
|
||||
<img :src="pdfFile" alt="link" class="format-icon" />
|
||||
<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 file = fileList.find((item) => item.idx == idx);
|
||||
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. ",
|
||||
};
|
||||
}
|
||||
const { filingKey } = route.query;
|
||||
getPageData(filingKey);
|
||||
});
|
||||
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">
|
||||
|
||||
@ -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">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
<div class="format-item" v-if="filingData.pdfFile">
|
||||
<img :src="pdfFile" alt="link" class="format-icon" />
|
||||
<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 file = fileList.find((item) => item.idx == idx);
|
||||
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);
|
||||
const { filingKey } = route.query;
|
||||
getPageData(filingKey);
|
||||
});
|
||||
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">
|
||||
|
||||
@ -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">
|
||||
<img :src="iconLink" alt="link" class="format-icon" />
|
||||
<a :href="filingData.htmlLink" class="format-link" target="_blank"
|
||||
<div class="format-item" v-if="filingData.pdfFile">
|
||||
<img :src="pdfFile" alt="link" class="format-icon" />
|
||||
<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 file = fileList.find((item) => item.idx == idx);
|
||||
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);
|
||||
const { filingKey } = route.query;
|
||||
getPageData(filingKey);
|
||||
});
|
||||
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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user