feat(article): 优化文章列表页面功能
- 将标题列改为可点击链接,支持直接跳转到文章详情页 - 新增操作列,添加查看按钮便于访问文章详情 - 修复事件绑定语法错误,将@pressEnter改为@press-enter - 修复分页组件事件绑定错误,将@showSizeChange改为@show-size-change - 实现路由参数监听,支持通过URL参数keywords自动搜索文章 - 临时禁用开发者中心的产品选择下拉菜单 - 移除已废弃的开发者中心相关页面和百色中学API接口文件
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
v-model:value="keywords"
|
||||
placeholder="关键词 keywords"
|
||||
class="w-72"
|
||||
@pressEnter="doSearch"
|
||||
@press-enter="doSearch"
|
||||
/>
|
||||
<a-button type="primary" :loading="pending" @click="doSearch">查询</a-button>
|
||||
<a-button :disabled="pending" @click="refresh">刷新</a-button>
|
||||
@@ -40,10 +40,33 @@
|
||||
size="middle"
|
||||
>
|
||||
<a-table-column title="ID" data-index="articleId" width="90" />
|
||||
<a-table-column title="标题" data-index="title" />
|
||||
<a-table-column title="标题" data-index="title">
|
||||
<template #default="{ record }">
|
||||
<NuxtLink
|
||||
v-if="record?.articleId"
|
||||
class="text-blue-600 hover:underline"
|
||||
:to="`/item/${record.articleId}`"
|
||||
>
|
||||
{{ record.title }}
|
||||
</NuxtLink>
|
||||
<span v-else>{{ record.title }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="编号" data-index="code" width="220" />
|
||||
<a-table-column title="栏目" data-index="categoryName" width="160" />
|
||||
<a-table-column title="创建时间" data-index="createTime" width="180" />
|
||||
<a-table-column title="操作" key="action" width="120">
|
||||
<template #default="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
type="link"
|
||||
:disabled="!record?.articleId"
|
||||
@click="record?.articleId && navigateTo(`/item/${record.articleId}`)"
|
||||
>
|
||||
查看
|
||||
</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
|
||||
<div class="mt-4 flex items-center justify-end">
|
||||
@@ -54,7 +77,7 @@
|
||||
show-size-changer
|
||||
:page-size-options="['10', '20', '50', '100']"
|
||||
@change="onPageChange"
|
||||
@showSizeChange="onPageSizeChange"
|
||||
@show-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
@@ -66,6 +89,7 @@
|
||||
import { pageCmsArticle } from '@/api/cms/cmsArticle/index'
|
||||
import { getToken, removeToken, setToken } from '@/utils/token-util'
|
||||
|
||||
const route = useRoute()
|
||||
const config = useRuntimeConfig()
|
||||
const tenantId = computed(() => String(config.public.tenantId))
|
||||
|
||||
@@ -78,6 +102,19 @@ onMounted(() => {
|
||||
token.value = getToken()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.query.keywords,
|
||||
(val) => {
|
||||
const next = Array.isArray(val) ? val[0] : val
|
||||
if (typeof next === 'string' && next.trim() && next.trim() !== keywords.value.trim()) {
|
||||
keywords.value = next.trim()
|
||||
page.value = 1
|
||||
refresh()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const { data, pending, error, refresh } = useAsyncData(
|
||||
'cms-article-page',
|
||||
() =>
|
||||
|
||||
Reference in New Issue
Block a user