master
parent
64b947db1a
commit
c3b48567f0
@ -0,0 +1,37 @@
|
|||||||
|
import { http } from '@/utils/http'
|
||||||
|
import type { ApiBody, Paginated } from '@/api/types'
|
||||||
|
|
||||||
|
export interface PastReviewRow {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
cover_url?: string | null
|
||||||
|
sort: number
|
||||||
|
status: number
|
||||||
|
created_at?: string | null
|
||||||
|
updated_at?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchPastReviews(params: Record<string, unknown>) {
|
||||||
|
const { data } = await http.get<ApiBody<Paginated<PastReviewRow>>>('/admin/v1/past-reviews', { params })
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchPastReview(id: number) {
|
||||||
|
const { data } = await http.get<ApiBody<PastReviewRow>>(`/admin/v1/past-reviews/${id}`)
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createPastReview(payload: Record<string, unknown>) {
|
||||||
|
const { data } = await http.post<ApiBody<{ id: number }>>('/admin/v1/past-reviews', payload)
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updatePastReview(id: number, payload: Record<string, unknown>) {
|
||||||
|
const { data } = await http.put<ApiBody<PastReviewRow>>(`/admin/v1/past-reviews/${id}`, payload)
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deletePastReview(id: number) {
|
||||||
|
const { data } = await http.delete<ApiBody<null>>(`/admin/v1/past-reviews/${id}`)
|
||||||
|
return data
|
||||||
|
}
|
||||||
@ -0,0 +1,265 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import PageTitle from '@/components/PageTitle.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { usePageLoad } from '@/composables/usePageLoad'
|
||||||
|
import {
|
||||||
|
createPastReview,
|
||||||
|
deletePastReview,
|
||||||
|
fetchPastReview,
|
||||||
|
fetchPastReviews,
|
||||||
|
updatePastReview,
|
||||||
|
type PastReviewRow,
|
||||||
|
} from '@/api/admin/past-reviews'
|
||||||
|
import { uploadBannerCover } from '@/api/admin/upload'
|
||||||
|
import { enabledStatusClass } from '@/utils/admin-list'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import type { UploadRequestOptions } from 'element-plus'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const saving = ref(false)
|
||||||
|
const items = ref<PastReviewRow[]>([])
|
||||||
|
const meta = ref({ current_page: 1, per_page: 20, total: 0 })
|
||||||
|
const page = ref(1)
|
||||||
|
const keyword = ref('')
|
||||||
|
const filterStatus = ref<number | ''>('')
|
||||||
|
|
||||||
|
const dialog = ref(false)
|
||||||
|
const editing = ref<PastReviewRow | null>(null)
|
||||||
|
const form = ref({
|
||||||
|
title: '',
|
||||||
|
cover_url: '',
|
||||||
|
sort: 0,
|
||||||
|
status: 1,
|
||||||
|
})
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params: Record<string, unknown> = {
|
||||||
|
page: page.value,
|
||||||
|
page_size: meta.value.per_page,
|
||||||
|
}
|
||||||
|
if (keyword.value) params.keyword = keyword.value
|
||||||
|
if (filterStatus.value !== '') params.status = filterStatus.value
|
||||||
|
const res = await fetchPastReviews(params)
|
||||||
|
items.value = res.items
|
||||||
|
meta.value = res.meta
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchList() {
|
||||||
|
page.value = 1
|
||||||
|
void load()
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetFilters() {
|
||||||
|
keyword.value = ''
|
||||||
|
filterStatus.value = ''
|
||||||
|
page.value = 1
|
||||||
|
void load()
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreate() {
|
||||||
|
editing.value = null
|
||||||
|
form.value = { title: '', cover_url: '', sort: 0, status: 1 }
|
||||||
|
dialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openEdit(row: PastReviewRow) {
|
||||||
|
editing.value = row
|
||||||
|
const detail = await fetchPastReview(row.id)
|
||||||
|
form.value = {
|
||||||
|
title: detail.title,
|
||||||
|
cover_url: detail.cover_url || '',
|
||||||
|
sort: detail.sort,
|
||||||
|
status: detail.status,
|
||||||
|
}
|
||||||
|
dialog.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
if (!form.value.title.trim()) {
|
||||||
|
ElMessage.warning('请填写标题')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!form.value.cover_url) {
|
||||||
|
ElMessage.warning('请上传封面图')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
title: form.value.title.trim(),
|
||||||
|
cover_url: form.value.cover_url,
|
||||||
|
sort: form.value.sort,
|
||||||
|
status: form.value.status,
|
||||||
|
}
|
||||||
|
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
if (editing.value) {
|
||||||
|
await updatePastReview(editing.value.id, payload)
|
||||||
|
} else {
|
||||||
|
await createPastReview(payload)
|
||||||
|
}
|
||||||
|
ElMessage.success('已保存')
|
||||||
|
dialog.value = false
|
||||||
|
await load()
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(row: PastReviewRow) {
|
||||||
|
await ElMessageBox.confirm(`确定删除往期回顾「${row.title}」？`, '提示', { type: 'warning' })
|
||||||
|
await deletePastReview(row.id)
|
||||||
|
ElMessage.success('已删除')
|
||||||
|
await load()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCoverUpload(opt: UploadRequestOptions) {
|
||||||
|
const raw = opt.file
|
||||||
|
const file = raw instanceof File ? raw : (raw as { raw?: File }).raw
|
||||||
|
if (!file) {
|
||||||
|
opt.onError?.(new Error('no file') as never)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await uploadBannerCover(file)
|
||||||
|
form.value.cover_url = res.url
|
||||||
|
ElMessage.success('封面上传成功')
|
||||||
|
opt.onSuccess?.({} as never)
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('封面上传失败')
|
||||||
|
opt.onError?.(new Error('upload failed') as never)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
usePageLoad(load)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="list-page">
|
||||||
|
<div class="page-header">
|
||||||
|
<PageTitle />
|
||||||
|
<el-button type="primary" size="small" class="btn-create" @click="openCreate">新增往期回顾</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-card shadow="never" class="admin-list-card">
|
||||||
|
<div class="list-filter-bar">
|
||||||
|
<el-input
|
||||||
|
v-model="keyword"
|
||||||
|
placeholder="搜索标题"
|
||||||
|
clearable
|
||||||
|
class="filter-search"
|
||||||
|
@keyup.enter="searchList"
|
||||||
|
/>
|
||||||
|
<el-select v-model="filterStatus" clearable placeholder="是否显示" class="filter-select">
|
||||||
|
<el-option label="显示" :value="1" />
|
||||||
|
<el-option label="隐藏" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" @click="searchList">搜索</el-button>
|
||||||
|
<el-button @click="resetFilters">重置</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="items" row-key="id">
|
||||||
|
<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column label="封面图" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-image
|
||||||
|
v-if="row.cover_url"
|
||||||
|
:src="row.cover_url"
|
||||||
|
:preview-src-list="[row.cover_url]"
|
||||||
|
fit="cover"
|
||||||
|
class="list-cover-thumb"
|
||||||
|
preview-teleported
|
||||||
|
/>
|
||||||
|
<span v-else class="text-mute">—</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="sort" label="排序" width="80" align="center" />
|
||||||
|
<el-table-column label="是否显示" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span class="status-badge" :class="enabledStatusClass(row.status)">
|
||||||
|
{{ row.status === 1 ? '显示' : '隐藏' }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="160" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="table-row-actions">
|
||||||
|
<el-button class="btn-action-primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button class="btn-action-brand" @click="remove(row)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="list-pager">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page"
|
||||||
|
layout="total, prev, pager, next"
|
||||||
|
:total="meta.total"
|
||||||
|
:page-size="meta.per_page"
|
||||||
|
@current-change="load"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialog"
|
||||||
|
:title="editing ? '编辑往期回顾' : '新增往期回顾'"
|
||||||
|
width="640px"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form label-position="top">
|
||||||
|
<el-form-item label="标题" required>
|
||||||
|
<el-input v-model="form.title" placeholder="请输入标题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="封面图" required>
|
||||||
|
<div class="cover-upload-row">
|
||||||
|
<el-upload :show-file-list="false" :http-request="handleCoverUpload" accept="image/*">
|
||||||
|
<el-button type="primary" plain>上传封面</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<el-image
|
||||||
|
v-if="form.cover_url"
|
||||||
|
:src="form.cover_url"
|
||||||
|
fit="cover"
|
||||||
|
class="list-cover-thumb"
|
||||||
|
preview-teleported
|
||||||
|
:preview-src-list="[form.cover_url]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="排序" required>
|
||||||
|
<el-input-number v-model="form.sort" :min="0" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="是否显示">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :value="1">显示</el-radio>
|
||||||
|
<el-radio :value="0">隐藏</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialog = false">取消</el-button>
|
||||||
|
<el-button type="primary" class="btn-create" :loading="saving" @click="save">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cover-upload-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue