feat: 添加高优先级投标折叠功能并优化链接样式
为高优先级投标表格添加折叠/展开功能,当数据为空时自动折叠 优化链接样式,统一设置无下划线及悬停颜色
This commit is contained in:
@@ -76,3 +76,14 @@ const handleSizeChange = (size: number) => {
|
||||
emit('fetch', currentPage.value, pageSize.value, selectedSource.value || undefined)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,22 +11,31 @@
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="card-header" @click="toggleHighPriority" style="cursor: pointer;">
|
||||
<span>High Priority Bids</span>
|
||||
<el-tag type="danger">Top 10</el-tag>
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<el-tag type="danger">Top 10</el-tag>
|
||||
<el-icon :style="{ transform: highPriorityCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="highPriorityBids" style="width: 100%" size="small">
|
||||
<el-table-column prop="title" label="Title">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="source" label="Source" width="240" />
|
||||
<el-table-column prop="publishDate" label="Date" width="120">
|
||||
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-collapse-transition>
|
||||
<div v-show="!highPriorityCollapsed">
|
||||
<el-table :data="highPriorityBids" style="width: 100%" size="small">
|
||||
<el-table-column prop="title" label="Title">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="source" label="Source" width="240" />
|
||||
<el-table-column prop="publishDate" label="Date" width="120">
|
||||
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -83,7 +92,7 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import { Refresh, ArrowDown } from '@element-plus/icons-vue'
|
||||
|
||||
interface Props {
|
||||
todayBids: any[]
|
||||
@@ -103,6 +112,19 @@ const emit = defineEmits<{
|
||||
const selectedKeywords = ref<string[]>([])
|
||||
const dateRange = ref<[string, string] | null>(null)
|
||||
const crawling = ref(false)
|
||||
const highPriorityCollapsed = ref(false)
|
||||
|
||||
// 切换 High Priority Bids 的折叠状态
|
||||
const toggleHighPriority = () => {
|
||||
highPriorityCollapsed.value = !highPriorityCollapsed.value
|
||||
}
|
||||
|
||||
// 监听 highPriorityBids,当没有数据时自动折叠
|
||||
watch(() => props.highPriorityBids, (newBids) => {
|
||||
if (newBids.length === 0) {
|
||||
highPriorityCollapsed.value = true
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 从 localStorage 加载保存的关键字
|
||||
const loadSavedKeywords = () => {
|
||||
@@ -207,9 +229,7 @@ const setLast3Days = () => {
|
||||
const filteredCount = result.length
|
||||
|
||||
console.log('setLast3Days result, totalBids:', totalBids, 'filteredCount:', filteredCount)
|
||||
if (totalBids === 0) {
|
||||
ElMessage.warning('暂无数据,请先抓取数据')
|
||||
}
|
||||
// 只在手动点击按钮时显示提示,初始化时不显示
|
||||
}
|
||||
|
||||
// 设置日期范围为最近7天
|
||||
@@ -244,9 +264,7 @@ const setLast7Days = () => {
|
||||
const filteredCount = result.length
|
||||
|
||||
console.log('setLast7Days result, totalBids:', totalBids, 'filteredCount:', filteredCount)
|
||||
if (totalBids === 0) {
|
||||
ElMessage.warning('暂无数据,请先抓取数据')
|
||||
}
|
||||
// 只在手动点击按钮时显示提示,初始化时不显示
|
||||
}
|
||||
|
||||
const handleCrawl = async () => {
|
||||
@@ -268,6 +286,9 @@ const handleCrawl = async () => {
|
||||
|
||||
// 初始化时加载保存的关键字
|
||||
loadSavedKeywords()
|
||||
|
||||
// 初始化时设置默认日期范围为最近3天
|
||||
setLast3Days()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -276,4 +297,13 @@ loadSavedKeywords()
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user