优化商品管理界面 快速点击筛选
This commit is contained in:
yml
@@ -83,6 +83,18 @@ function resetFilters() {
|
||||
void queryListings()
|
||||
}
|
||||
|
||||
function setStatusFilter(status: string) {
|
||||
filters.status = filters.status === status ? '' : status
|
||||
filters.review_status = ''
|
||||
void queryListings()
|
||||
}
|
||||
|
||||
function setReviewStatusFilter(reviewStatus: string) {
|
||||
filters.review_status = filters.review_status === reviewStatus ? '' : reviewStatus
|
||||
filters.status = ''
|
||||
void queryListings()
|
||||
}
|
||||
|
||||
async function handlePageSizeChange(size: number) {
|
||||
pageSize.value = size
|
||||
currentPage.value = 1
|
||||
@@ -332,40 +344,87 @@ function formatQuantity(value: number) {
|
||||
</div>
|
||||
|
||||
<div class="listing-control-panel">
|
||||
<div class="listing-metric-strip">
|
||||
<span>结果 <strong>{{ totalListings }}</strong></span>
|
||||
<span>本页 <strong>{{ listings.length }}</strong></span>
|
||||
<span>已上架 <strong>{{ publishedCount }}</strong></span>
|
||||
<span>已锁定 <strong>{{ rentedCount }}</strong></span>
|
||||
<span>待审核 <strong>{{ pendingCount }}</strong></span>
|
||||
<!-- 统计指标行 -->
|
||||
<div class="listing-stats-row">
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: !filters.status && !filters.review_status }"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<span class="stat-label">全部商品</span>
|
||||
<strong class="stat-value">{{ totalListings }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.status === 'published' }"
|
||||
@click="setStatusFilter('published')"
|
||||
>
|
||||
<span class="stat-label">已上架</span>
|
||||
<strong class="stat-value">{{ publishedCount }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.status === 'rented' }"
|
||||
@click="setStatusFilter('rented')"
|
||||
>
|
||||
<span class="stat-label">已锁定</span>
|
||||
<strong class="stat-value">{{ rentedCount }}</strong>
|
||||
</div>
|
||||
<div
|
||||
class="stat-card clickable"
|
||||
:class="{ active: filters.review_status === 'pending' }"
|
||||
@click="setReviewStatusFilter('pending')"
|
||||
>
|
||||
<span class="stat-label">待审核</span>
|
||||
<strong class="stat-value">{{ pendingCount }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="listing-filter-bar" label-position="top">
|
||||
<el-form-item label="号主 ID">
|
||||
<el-input v-model="filters.owner_id" clearable placeholder="按号主筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="已上架" value="published" />
|
||||
<el-option label="已锁定" value="rented" />
|
||||
<el-option label="已下架" value="offline" />
|
||||
<el-option label="异常" value="abnormal" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核状态">
|
||||
<el-select v-model="filters.review_status" clearable placeholder="全部审核状态" class="full-control">
|
||||
<el-option label="未提交" value="none" />
|
||||
<el-option label="待审核" value="pending" />
|
||||
<el-option label="已通过" value="approved" />
|
||||
<el-option label="已拒绝" value="rejected" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="listing-action-strip">
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryListings">查询</el-button>
|
||||
<el-button :disabled="!listings.length" @click="copyTableScreenshot">复制截图</el-button>
|
||||
<el-button :disabled="!listings.length" @click="downloadTableScreenshot">下载截图</el-button>
|
||||
|
||||
<!-- 筛选和操作行 -->
|
||||
<div class="listing-filter-row">
|
||||
<el-form class="listing-filter-bar" inline>
|
||||
<el-form-item label="号主 ID">
|
||||
<el-input
|
||||
v-model="filters.owner_id"
|
||||
clearable
|
||||
placeholder="筛选号主"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态">
|
||||
<el-select
|
||||
v-model="filters.status"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
style="width: 140px"
|
||||
>
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="已上架" value="published" />
|
||||
<el-option label="已锁定" value="rented" />
|
||||
<el-option label="已下架" value="offline" />
|
||||
<el-option label="异常" value="abnormal" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="审核状态">
|
||||
<el-select
|
||||
v-model="filters.review_status"
|
||||
clearable
|
||||
placeholder="全部审核"
|
||||
style="width: 140px"
|
||||
>
|
||||
<el-option label="未提交" value="none" />
|
||||
<el-option label="待审核" value="pending" />
|
||||
<el-option label="已通过" value="approved" />
|
||||
<el-option label="已拒绝" value="rejected" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="listing-action-strip">
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
<el-button type="primary" :icon="Search" :loading="loading" @click="queryListings">查询</el-button>
|
||||
<el-button :disabled="!listings.length" @click="copyTableScreenshot">复制截图</el-button>
|
||||
<el-button :disabled="!listings.length" @click="downloadTableScreenshot">下载截图</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user