赵忠林
5e26fdc7fb
- 添加 .dockerignore 和 .env.example 配置文件 - 添加 .gitignore 忽略规则配置 - 创建服务端代理API路由（_file、_modules、_server） - 集成 Ant Design Vue 组件库并配置SSR样式提取 - 定义API响应类型封装 - 创建基础布局组件（blank、console） - 实现应用中心页面和组件（AppsCenter） - 添加文章列表测试页面 - 配置控制台导航菜单结构 - 实现控制台头部组件 - 创建联系页面表单
122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
|
<main class="min-h-screen bg-gray-50 p-8">
|
|
<div class="mx-auto max-w-5xl space-y-6">
|
|
<a-card title="文章列表 (pageCmsArticle)" class="shadow-sm">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<a-input-password
|
|
v-model:value="token"
|
|
placeholder="Authorization (AccessToken)"
|
|
class="w-96"
|
|
/>
|
|
<a-button :disabled="pending" @click="applyToken">设置Token</a-button>
|
|
<a-button :disabled="pending" danger @click="clearToken">清除Token</a-button>
|
|
<a-input
|
|
v-model:value="keywords"
|
|
placeholder="关键词 keywords"
|
|
class="w-72"
|
|
@pressEnter="doSearch"
|
|
/>
|
|
<a-button type="primary" :loading="pending" @click="doSearch">查询</a-button>
|
|
<a-button :disabled="pending" @click="refresh">刷新</a-button>
|
|
<div class="text-sm text-gray-500">
|
|
TenantId: {{ tenantId }}
|
|
</div>
|
|
</div>
|
|
|
|
<a-alert
|
|
v-if="error"
|
|
class="mt-4"
|
|
show-icon
|
|
type="error"
|
|
:message="String(error)"
|
|
/>
|
|
|
|
<a-table
|
|
class="mt-4"
|
|
:data-source="list"
|
|
:loading="pending"
|
|
:pagination="false"
|
|
row-key="articleId"
|
|
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="code" width="220" />
|
|
<a-table-column title="栏目" data-index="categoryName" width="160" />
|
|
<a-table-column title="创建时间" data-index="createTime" width="180" />
|
|
</a-table>
|
|
|
|
<div class="mt-4 flex items-center justify-end">
|
|
<a-pagination
|
|
:current="page"
|
|
:page-size="limit"
|
|
:total="total"
|
|
show-size-changer
|
|
:page-size-options="['10', '20', '50', '100']"
|
|
@change="onPageChange"
|
|
@showSizeChange="onPageSizeChange"
|
|
/>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { pageCmsArticle } from '@/api/cms/cmsArticle/index'
|
|
import { getToken, removeToken, setToken } from '@/utils/token-util'
|
|
|
|
const config = useRuntimeConfig()
|
|
const tenantId = computed(() => String(config.public.tenantId))
|
|
|
|
const page = ref(1)
|
|
const limit = ref(10)
|
|
const keywords = ref('')
|
|
const token = ref('')
|
|
|
|
onMounted(() => {
|
|
token.value = getToken()
|
|
})
|
|
|
|
const { data, pending, error, refresh } = useAsyncData(
|
|
'cms-article-page',
|
|
() =>
|
|
pageCmsArticle({
|
|
page: page.value,
|
|
limit: limit.value,
|
|
keywords: keywords.value || undefined
|
|
}),
|
|
{ server: false }
|
|
)
|
|
|
|
const list = computed(() => data.value?.list ?? [])
|
|
const total = computed(() => data.value?.count ?? 0)
|
|
|
|
function applyToken() {
|
|
setToken(token.value, true)
|
|
refresh()
|
|
}
|
|
|
|
function clearToken() {
|
|
removeToken()
|
|
token.value = ''
|
|
refresh()
|
|
}
|
|
|
|
function doSearch() {
|
|
page.value = 1
|
|
refresh()
|
|
}
|
|
|
|
function onPageChange(nextPage: number) {
|
|
page.value = nextPage
|
|
refresh()
|
|
}
|
|
|
|
function onPageSizeChange(_current: number, nextSize: number) {
|
|
limit.value = nextSize
|
|
page.value = 1
|
|
refresh()
|
|
}
|
|
</script>
|