align(asin·像素复刻): 品牌库/查询ASIN/最低价ASIN/商品类目 四页自绘复刻旧版(panel-invalid-asin-data/query-asin/skip-price-asin/product-categories)——原生rowspan表格+可复制ASIN+btn-sm行操作+原生confirm删除+旧式分页(类目15/页/搜索态)+面板头搜索组/操作组+树[+/−]折叠/懒加载/编辑态按钮文案；编辑弹窗父级只读
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { formatDateTime } from '@/utils/datetime'
|
||||
/** 不符合 ASIN（品牌数据库）：分页 + 手动新增/编辑/删除。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
/** 品牌数据库(不符合ASIN)页 · 像素复刻旧版 admin.html panel-invalid-asin-data（自绘：面板头+新增、筛选、旧式表格/分页、原生 confirm 删除）。
|
||||
* script 逻辑沿用现有 Vue 实现（分组锁定/来源 AUTO 编辑隐藏分组）；弹窗保留现有组件。 */
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
import { createInvalidAsin, deleteInvalidAsin, fetchInvalidAsinPage, updateInvalidAsin } from '../invalidasin/invalid-asin-api.ts'
|
||||
import type { InvalidAsinItem } from '../invalidasin/invalid-asin-model.ts'
|
||||
@@ -16,8 +17,10 @@ const loading = ref(false)
|
||||
const rows = ref<InvalidAsinItem[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const pageSize = 15
|
||||
const groups = ref<ShopGroupOption[]>([])
|
||||
const jumpPage = ref('')
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
|
||||
|
||||
const filter = reactive({ dataValue: '', brand: '', groupId: null as number | null })
|
||||
|
||||
@@ -55,7 +58,7 @@ async function load() {
|
||||
try {
|
||||
const result = await fetchInvalidAsinPage({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
pageSize,
|
||||
dataValue: filter.dataValue.trim() || undefined,
|
||||
brand: filter.brand.trim() || undefined,
|
||||
groupId: filter.groupId,
|
||||
@@ -75,15 +78,21 @@ function apply() {
|
||||
load()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
filter.dataValue = ''
|
||||
filter.brand = ''
|
||||
// 非超管重置不解除分组锁定。
|
||||
filter.groupId = isSuperAdmin.value ? null : lockedGroupId.value
|
||||
page.value = 1
|
||||
function changePage(next: number) {
|
||||
if (next < 1 || next > totalPages.value) return
|
||||
page.value = next
|
||||
load()
|
||||
}
|
||||
|
||||
function goJump() {
|
||||
const n = Number.parseInt(jumpPage.value, 10)
|
||||
if (Number.isNaN(n)) {
|
||||
ElMessage.warning('请输入页码')
|
||||
return
|
||||
}
|
||||
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
editingSource.value = ''
|
||||
@@ -128,11 +137,8 @@ async function submit() {
|
||||
}
|
||||
|
||||
async function remove(row: InvalidAsinItem) {
|
||||
try {
|
||||
await ElMessageBox.confirm(invalidAsinDeleteText(row), '删除', { type: 'warning' })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
// 对齐旧版：原生 confirm。
|
||||
if (!window.confirm(invalidAsinDeleteText(row))) return
|
||||
try {
|
||||
await deleteInvalidAsin(row.id)
|
||||
ElMessage.success('已删除')
|
||||
@@ -142,6 +148,10 @@ async function remove(row: InvalidAsinItem) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(isSuperAdmin, () => {
|
||||
if (isSuperAdmin.value) filter.groupId = null
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadGroups()
|
||||
load()
|
||||
@@ -149,69 +159,87 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>不符合 ASIN 数据</h2>
|
||||
<p>管理命中"不符合 ASIN"的品牌数据库记录。</p>
|
||||
<div class="invalid-view">
|
||||
<section class="panel-box">
|
||||
<div class="invalid-head">
|
||||
<h3>品牌数据列表</h3>
|
||||
<button class="btn" type="button" @click="openCreate">新增</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" style="margin-bottom: 14px">
|
||||
<div class="filter-grid">
|
||||
<div class="f-item">
|
||||
<div class="form-row invalid-filter-row">
|
||||
<div class="form-group" style="min-width: 200px">
|
||||
<label>ASIN</label>
|
||||
<el-input v-model="filter.dataValue" placeholder="精确/模糊搜索ASIN" clearable @keyup.enter="apply" />
|
||||
<input v-model="filter.dataValue" type="text" placeholder="输入 ASIN" @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<div class="form-group" style="min-width: 200px">
|
||||
<label>品牌</label>
|
||||
<el-input v-model="filter.brand" placeholder="品牌模糊" clearable @keyup.enter="apply" />
|
||||
<input v-model="filter.brand" type="text" placeholder="输入品牌" @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<div class="form-group" style="min-width: 180px">
|
||||
<label>分组</label>
|
||||
<el-select v-model="filter.groupId" placeholder="全部分组" clearable :disabled="!isSuperAdmin">
|
||||
<el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="f-item btn-row">
|
||||
<el-button type="primary" @click="apply">查询</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<select v-model="filter.groupId" :disabled="!isSuperAdmin">
|
||||
<option :value="null">全部分组</option>
|
||||
<option v-for="group in groupOptions" :key="group.id" :value="group.id">{{ group.groupName }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn" type="button" @click="apply">查询</button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增</el-button>
|
||||
<div class="table-scroll invalid-asin-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 70px">ID</th>
|
||||
<th style="width: 170px">ASIN</th>
|
||||
<th style="width: 150px">品牌</th>
|
||||
<th style="width: 140px">分组</th>
|
||||
<th style="width: 110px">来源</th>
|
||||
<th style="width: 170px">创建时间</th>
|
||||
<th style="width: 150px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="rows.length">
|
||||
<tr v-for="row in rows" :key="row.id">
|
||||
<td>{{ row.id }}</td>
|
||||
<td class="mono-cell">{{ row.dataValue }}</td>
|
||||
<td>{{ row.brand || '—' }}</td>
|
||||
<td>{{ row.groupName || '未分组' }}</td>
|
||||
<td>
|
||||
<span class="source-text" :class="{ 'is-auto': row.recordSource !== 'MANUAL' }">
|
||||
{{ recordSourceLabel(row.recordSource) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ formatDateTime(row.createdAt) }}</td>
|
||||
<td class="ops-cell">
|
||||
<button class="btn btn-sm" type="button" @click="openEdit(row)">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" type="button" @click="remove(row)">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="7" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="7" class="empty-tip">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="rows" stripe border>
|
||||
<el-table-column prop="dataValue" label="ASIN" min-width="160" />
|
||||
<el-table-column prop="brand" label="品牌" min-width="140">
|
||||
<template #default="{ row }">{{ (row as InvalidAsinItem).brand || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="groupName" label="分组" min-width="130" />
|
||||
<el-table-column label="来源" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" effect="light" :type="(row as InvalidAsinItem).recordSource !== 'MANUAL' ? 'info' : undefined">
|
||||
{{ recordSourceLabel((row as InvalidAsinItem).recordSource) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createdAt" label="创建时间" min-width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" @click="openEdit(row as InvalidAsinItem)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="remove(row as InvalidAsinItem)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<span>共 <b>{{ total.toLocaleString() }}</b> 条</span>
|
||||
<el-pagination background layout="sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :current-page="page" @current-change="(p: number) => { page = p; load() }" @size-change="() => { page = 1; load() }" />
|
||||
|
||||
<div class="pagination">
|
||||
<span class="page-total">共 {{ total }} 条</span>
|
||||
<button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||
<span class="page-jump">
|
||||
跳至
|
||||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||||
页
|
||||
<button type="button" @click="goJump">跳转</button>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="editingId == null ? '新增不符合ASIN' : '编辑不符合ASIN'" width="520px">
|
||||
<el-form label-width="110px">
|
||||
@@ -236,12 +264,231 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-heading { display: flex; justify-content: space-between; align-items: center; }
|
||||
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
|
||||
.f-item { display: flex; flex-direction: column; gap: 6px; width: 200px; }
|
||||
.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
|
||||
.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
|
||||
.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
|
||||
.table-footer b { color: var(--el-text-color-primary); }
|
||||
/* 像素复刻旧版 admin.html panel-invalid-asin-data（蓝白末层）。 */
|
||||
.invalid-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.invalid-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group label {
|
||||
color: #5b6f83;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 9px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
color-scheme: light;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
.form-group input:hover,
|
||||
.form-group select:hover {
|
||||
border-color: #9fb7cd;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
background: #ffffff;
|
||||
border-color: #5f85ad;
|
||||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.invalid-asin-table-scroll > table {
|
||||
min-width: 860px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.mono-cell {
|
||||
font-family: "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.source-text {
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #cbd9e6;
|
||||
background: #fff;
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
}
|
||||
.source-text.is-auto {
|
||||
background: #e7f0f8;
|
||||
border-color: #c2d5e6;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.ops-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ops-cell .btn + .btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #c7d7e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: #edf5fb;
|
||||
border-color: #95b1cb;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
background: #eef3f7;
|
||||
color: #9baaba;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-total {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.page-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.page-jump input {
|
||||
width: 56px;
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 8px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/** 商品类目：对齐 admin panel-product-categories —— 树节点带 来源/排序/备注 + 行内编辑删除(有子禁用)、
|
||||
* 按需懒加载子级(「加载更多 已加载 x/y」)、搜索态独立分页/加载更多、导出、新增/编辑弹窗语义。 */
|
||||
/** 商品类目 · 像素复刻旧版 admin.html panel-product-categories（自绘：面板头搜索框组+新增类目 同行、原生树表格[+/−]折叠+懒加载「加载更多 已加载 x/y」、搜索态旧式分页）。
|
||||
* script 逻辑沿用现有 Vue 实现（懒加载树/编辑删除/导出/弹窗）。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { fetchProductCategoryChildren, searchProductCategories } from './product-category-api.ts'
|
||||
@@ -54,6 +54,7 @@ function flatten(nodes: ProductCategoryNode[]): ProductCategoryNode[] {
|
||||
const allNodes = computed(() => flatten(tree.value))
|
||||
const searching = computed(() => (keyword.value || '').trim().length > 0)
|
||||
const dialogTitle = computed(() => (editingId.value == null ? '新增商品类目' : '编辑商品类目'))
|
||||
const searchTotalPages = computed(() => Math.max(1, Math.ceil(searchTotal.value / PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE)))
|
||||
|
||||
/** 拉取根级第一页（对齐 admin.js loadProductCategoryChildren(null) 懒加载根）。 */
|
||||
async function loadTree(): Promise<void> {
|
||||
@@ -171,7 +172,6 @@ async function runSearch(page: number): Promise<void> {
|
||||
searchLoading.value = true
|
||||
try {
|
||||
const result = await searchProductCategories(keyword.value, page, PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE)
|
||||
// 分页换页模式：每页独立展示当前页结果（对齐列表统一分页交互）。
|
||||
searchRows.value = result.items
|
||||
searchTotal.value = result.total
|
||||
searchPage.value = result.page
|
||||
@@ -197,10 +197,6 @@ function reset(): void {
|
||||
void loadTree()
|
||||
}
|
||||
|
||||
function searchChangePage(p: number): void {
|
||||
void runSearch(p)
|
||||
}
|
||||
|
||||
function openCreate(parent: ProductCategoryNode | null) {
|
||||
editingId.value = null
|
||||
Object.assign(draft, createProductCategoryDraft())
|
||||
@@ -236,21 +232,16 @@ async function removeCategory(node: ProductCategoryNode): Promise<void> {
|
||||
ElMessage.warning('存在子类目，不能删除')
|
||||
return
|
||||
}
|
||||
// 对齐旧版：原生 confirm。
|
||||
if (!window.confirm(`确定删除“${node.name}”？`)) return
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除“${node.name}”？`, '删除类目', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
await deleteProductCategory(node.id)
|
||||
ElMessage.success('已删除')
|
||||
if (selected.value?.id === node.id) selected.value = null
|
||||
if (searching.value) void runSearch(1)
|
||||
else void loadTree()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel' && error !== 'close') {
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -293,169 +284,327 @@ onMounted(loadTree)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>商品类目</h2>
|
||||
<p>维护商品类目树与类目名称/说明；有子类目节点不可删除。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" style="margin-bottom: 14px">
|
||||
<div class="filter-row">
|
||||
<el-input v-model="keyword" placeholder="搜索类目名称、编码或备注" clearable style="width: 280px" @keyup.enter="apply" />
|
||||
<el-button type="primary" @click="apply">搜索</el-button>
|
||||
<el-button @click="reset">清空</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="!searching" shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<div class="tb-buttons">
|
||||
<el-button type="primary" @click="openCreate(null)">新增类目</el-button>
|
||||
<el-button :disabled="!selected" @click="openCreate(selected)">新增子类目</el-button>
|
||||
<el-button @click="exportCategories">导出</el-button>
|
||||
<div class="category-view">
|
||||
<section class="panel-box">
|
||||
<div class="category-head">
|
||||
<h3>商品类目</h3>
|
||||
<div class="category-head-tools">
|
||||
<input v-model="keyword" type="text" placeholder="搜索类目名称、编码或备注" class="category-keyword" @keyup.enter="apply" />
|
||||
<button class="btn btn-sm" type="button" @click="apply">搜索</button>
|
||||
<button class="btn btn-sm btn-secondary" type="button" @click="reset">清空</button>
|
||||
<button class="btn btn-sm btn-secondary" type="button" @click="exportCategories">导出</button>
|
||||
<button v-if="selected && !searching" class="btn btn-sm" type="button" @click="openCreate(selected)">新增子类目</button>
|
||||
<button class="btn" type="button" @click="openCreate(null)">新增类目</button>
|
||||
</div>
|
||||
<span class="dim">{{ selected ? `已选：${selected.path || selected.name}` : '未选中节点' }}</span>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="treeRows" row-key="node.id" :class="{ 'tree-table': true }">
|
||||
<el-table-column label="类目名称" min-width="320">
|
||||
<template #default="{ row }">
|
||||
<template v-if="isCategoryLoadMoreNode(row.node)">
|
||||
<div class="tree-name-cell">
|
||||
<span class="tree-indent" :style="{ '--indent': `${(row.depth + 1) * 24}px` }"></span>
|
||||
<el-button link size="small" type="primary" :loading="moreLoading(row.node)" @click="loadMoreChildren(row.node)">加载更多</el-button>
|
||||
<span class="dim">已加载 {{ row.node.loadedCount }} / {{ row.node.totalCount }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="tree-name-cell" @click="onNodeClick(row.node as ProductCategoryNode)">
|
||||
<span class="tree-indent" :style="{ '--indent': `${row.depth * 24}px` }"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="tree-node-mark"
|
||||
:class="{ 'is-leaf': (row.node as ProductCategoryNode).childCount <= 0 }"
|
||||
:disabled="(row.node as ProductCategoryNode).childCount <= 0"
|
||||
:title="expandedIds.has((row.node as ProductCategoryNode).id) ? '折叠' : '展开'"
|
||||
@click.stop="toggleExpand(row.node as ProductCategoryNode)"
|
||||
>
|
||||
{{ (row.node as ProductCategoryNode).childCount > 0 ? (expandedIds.has((row.node as ProductCategoryNode).id) ? '−' : '+') : '' }}
|
||||
</button>
|
||||
<strong class="node-name">{{ (row.node as ProductCategoryNode).name }}</strong>
|
||||
<el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
|
||||
{{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="层级路径" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<span class="dim" :title="(row.node as ProductCategoryNode).path">{{ (row.node as ProductCategoryNode).path || (row.node as ProductCategoryNode).name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" min-width="80">
|
||||
<template #default="{ row }">{{ (row.node as ProductCategoryNode).sortOrder ?? 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" min-width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
|
||||
{{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="说明" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span v-if="(row.node as ProductCategoryNode).description" class="node-desc" :title="(row.node as ProductCategoryNode).description">{{ (row.node as ProductCategoryNode).description }}</span>
|
||||
<span v-else class="dim">—</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="140" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<template v-if="!isCategoryLoadMoreNode(row.node)">
|
||||
<el-button size="small" type="primary" @click="openEdit(row.node as ProductCategoryNode)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
:disabled="!canDelete(row.node as ProductCategoryNode)"
|
||||
@click="removeCategory(row.node as ProductCategoryNode)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card v-else shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<div class="tb-buttons">
|
||||
<el-button type="primary" @click="openCreate(null)">新增类目</el-button>
|
||||
<el-button @click="exportCategories">导出</el-button>
|
||||
</div>
|
||||
<span class="dim">搜索结果：共 {{ searchTotal.toLocaleString() }} 条{{ keyword ? ` · ${keyword}` : '' }}</span>
|
||||
<div class="table-scroll category-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 34%">类目</th>
|
||||
<th>层级路径</th>
|
||||
<th style="width: 90px">排序</th>
|
||||
<th style="width: 120px">来源</th>
|
||||
<th>备注</th>
|
||||
<th style="width: 150px">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="!searching">
|
||||
<template v-if="treeRows.length">
|
||||
<template v-for="row in treeRows" :key="String(row.node.id)">
|
||||
<tr v-if="isCategoryLoadMoreNode(row.node)" class="load-more-row">
|
||||
<td colspan="6">
|
||||
<div class="load-more-cell">
|
||||
<span class="tree-indent" :style="{ width: `${(row.depth + 1) * 24}px` }"></span>
|
||||
<button class="btn btn-sm btn-secondary" type="button" :disabled="moreLoading(row.node)" @click="loadMoreChildren(row.node)">
|
||||
{{ moreLoading(row.node) ? '加载中...' : '加载更多' }}
|
||||
</button>
|
||||
<span class="loaded-count">已加载 {{ row.node.loadedCount }} / {{ row.node.totalCount }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td>
|
||||
<div class="tree-name-cell" @click="onNodeClick(row.node)">
|
||||
<span class="tree-indent" :style="{ width: `${row.depth * 24}px` }"></span>
|
||||
<button
|
||||
type="button"
|
||||
class="tree-node-mark"
|
||||
:class="{ 'is-leaf': row.node.childCount <= 0 }"
|
||||
:disabled="row.node.childCount <= 0"
|
||||
:title="expandedIds.has(row.node.id) ? '折叠' : '展开'"
|
||||
@click.stop="toggleExpand(row.node)"
|
||||
>
|
||||
{{ row.node.childCount > 0 ? (expandedIds.has(row.node.id) ? '−' : '+') : '' }}
|
||||
</button>
|
||||
<strong class="node-name">{{ row.node.name }}</strong>
|
||||
<span v-if="selected?.id === row.node.id" class="selected-flag">已选</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="category-path-value" :title="row.node.path || row.node.name">{{ row.node.path || row.node.name }}</span>
|
||||
</td>
|
||||
<td>{{ row.node.sortOrder ?? 0 }}</td>
|
||||
<td>
|
||||
<span class="category-tag" :class="{ 'is-custom': !row.node.isBuiltin }">{{ productCategorySourceLabel(row.node) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="row.node.description" class="node-desc" :title="row.node.description">{{ row.node.description }}</span>
|
||||
<span v-else class="dim">—</span>
|
||||
</td>
|
||||
<td class="ops-cell">
|
||||
<button class="btn btn-sm" type="button" @click="openEdit(row.node)">编辑</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger"
|
||||
type="button"
|
||||
:disabled="!canDelete(row.node)"
|
||||
:title="!canDelete(row.node) ? '存在子类目，不能删除' : undefined"
|
||||
@click="removeCategory(row.node)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="6" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="6" class="empty-tip">暂无商品类目</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-else>
|
||||
<template v-if="searchRows.length">
|
||||
<tr v-for="row in searchRows" :key="row.id">
|
||||
<td><strong class="node-name">{{ row.name }}</strong></td>
|
||||
<td><span class="category-path-value" :title="row.path || row.name">{{ row.path || row.name }}</span></td>
|
||||
<td>{{ row.sortOrder ?? '—' }}</td>
|
||||
<td>
|
||||
<span class="category-tag" :class="{ 'is-custom': !row.isBuiltin }">{{ productCategorySourceLabel(row) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="row.description" class="node-desc" :title="row.description">{{ row.description }}</span>
|
||||
<span v-else class="dim">—</span>
|
||||
</td>
|
||||
<td class="ops-cell">
|
||||
<button class="btn btn-sm" type="button" @click="openEdit(row)">编辑</button>
|
||||
<button
|
||||
class="btn btn-sm btn-danger"
|
||||
type="button"
|
||||
:disabled="!canDelete(row)"
|
||||
:title="!canDelete(row) ? '存在子类目，不能删除' : undefined"
|
||||
@click="removeCategory(row)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="searchLoading">
|
||||
<td colspan="6" class="empty-tip">搜索中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="6" class="empty-tip">暂无搜索结果</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-table v-loading="searchLoading" :data="searchRows" stripe border>
|
||||
<el-table-column prop="name" label="类目名称" min-width="180" />
|
||||
<el-table-column label="层级路径" min-width="240">
|
||||
<template #default="{ row }">{{ (row as ProductCategoryNode).path || (row as ProductCategoryNode).name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" min-width="90">
|
||||
<template #default="{ row }">{{ (row as ProductCategoryNode).sortOrder ?? '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" effect="plain" :type="(row as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
|
||||
{{ productCategorySourceLabel(row as ProductCategoryNode) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="说明" min-width="180">
|
||||
<template #default="{ row }">{{ (row as ProductCategoryNode).description || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" @click="openEdit(row as ProductCategoryNode)">编辑</el-button>
|
||||
<el-button size="small" type="danger" :disabled="!canDelete(row as ProductCategoryNode)" @click="removeCategory(row as ProductCategoryNode)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<el-pagination background layout="prev, pager, next, jumper" :total="searchTotal" :page-size="PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE" :current-page="searchPage" @current-change="searchChangePage" />
|
||||
|
||||
<div v-if="searching" class="pagination">
|
||||
<span class="page-total">共 {{ searchTotal }} 条 · 搜索结果</span>
|
||||
<button type="button" :disabled="searchPage <= 1" @click="runSearch(searchPage - 1)">上一页</button>
|
||||
<span class="page-cur">第 {{ searchPage }} / {{ searchTotalPages }} 页</span>
|
||||
<button type="button" :disabled="searchPage >= searchTotalPages" @click="runSearch(searchPage + 1)">下一页</button>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px">
|
||||
<el-form label-width="110px">
|
||||
<el-form-item label="父级类目">
|
||||
<el-select v-model="draft.parentId" placeholder="无（根级）" clearable filterable>
|
||||
<el-option v-for="node in allNodes" :key="node.id" :label="node.path || node.name" :value="node.id" />
|
||||
<el-option
|
||||
v-for="node in allNodes"
|
||||
:key="node.id"
|
||||
:label="node.path || node.name"
|
||||
:value="node.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类目名称" required>
|
||||
<el-input v-model="draft.name" placeholder="类目名称" />
|
||||
<el-input v-model="draft.name" placeholder="如：洁面" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="draft.sortOrder" placeholder="非负整数，可选" />
|
||||
<el-input v-model="draft.sortOrder" placeholder="如 10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="说明">
|
||||
<el-input v-model="draft.description" type="textarea" :rows="2" placeholder="可选" />
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="draft.description" type="textarea" :rows="3" placeholder="可选" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">{{ editingId == null ? '取消' : '取消编辑' }}</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submit">保存类目</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submit">{{ editingId == null ? '保存' : '保存类目' }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-heading { display: flex; justify-content: space-between; align-items: center; }
|
||||
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
|
||||
.tb-buttons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.filter-row { display: flex; gap: 10px; align-items: center; }
|
||||
.dim { color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
/* 树形表格（对齐旧版 panel-product-categories）：缩进 + [+/−] 折叠标记 + 粗体名称。 */
|
||||
.tree-name-cell { display: flex; align-items: center; gap: 8px; min-height: 24px; }
|
||||
.tree-indent { flex: 0 0 auto; width: var(--indent, 0px); }
|
||||
/* 像素复刻旧版 admin.html panel-product-categories（蓝白末层）。 */
|
||||
.category-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.category-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.category-head-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.category-keyword {
|
||||
width: 240px;
|
||||
min-height: 36px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 9px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
color-scheme: light;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
.category-keyword:hover {
|
||||
border-color: #9fb7cd;
|
||||
}
|
||||
.category-keyword:focus {
|
||||
background: #ffffff;
|
||||
border-color: #5f85ad;
|
||||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
border-color: #c7d7e5;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
color: #2f5d8b;
|
||||
border-color: #95b1cb;
|
||||
background: #edf5fb;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.category-table-scroll > table {
|
||||
min-width: 860px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tree-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tree-indent {
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
.tree-node-mark {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -474,9 +623,114 @@ onMounted(loadTree)
|
||||
flex: none;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.tree-node-mark:not(.is-leaf):hover { background: var(--admin-primary-strong, #2f5d8b); color: #fff; }
|
||||
.tree-node-mark.is-leaf { background: transparent; cursor: default; }
|
||||
.node-name { font-weight: 600; color: var(--el-text-color-primary); white-space: nowrap; }
|
||||
.node-desc { color: var(--el-text-color-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; display: inline-block; vertical-align: middle; }
|
||||
.tree-table .el-table__row { cursor: pointer; }
|
||||
.tree-node-mark:not(.is-leaf):hover {
|
||||
background: var(--admin-primary-strong, #2f5d8b);
|
||||
color: #ffffff;
|
||||
}
|
||||
.tree-node-mark.is-leaf {
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.node-name {
|
||||
font-weight: 600;
|
||||
color: #24384d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.selected-flag {
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
background: #e7f0f8;
|
||||
color: #2f5d8b;
|
||||
font-size: 11px;
|
||||
}
|
||||
.category-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #c2d5e6;
|
||||
background: #e7f0f8;
|
||||
color: #2f5d8b;
|
||||
font-size: 12px;
|
||||
}
|
||||
.category-tag.is-custom {
|
||||
border-color: #bcd9c6;
|
||||
background: #eef7f0;
|
||||
color: #3d7158;
|
||||
}
|
||||
.category-path-value {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node-desc {
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 320px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dim {
|
||||
color: #8293a5;
|
||||
}
|
||||
.ops-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ops-cell .btn + .btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.load-more-row td {
|
||||
background: #fbfdfe;
|
||||
}
|
||||
.load-more-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.loaded-count {
|
||||
color: #8293a5;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #c7d7e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: #edf5fb;
|
||||
border-color: #95b1cb;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
background: #eef3f7;
|
||||
color: #9baaba;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-total {
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/** 查询 ASIN：对齐 admin panel-query-asin —— 纵向 rowspan 展示(序号/分组/店铺合并 + 逐国 ASIN 行可点击复制) +
|
||||
* 新增 ASIN 弹窗(分组→店铺联动→国家→ASIN) + 行内「配置」抽屉 + 导入添加/删除导入/导出。 */
|
||||
/** 查询 ASIN · 像素复刻旧版 admin.html panel-query-asin（自绘：面板头操作组、筛选+导出 XLSX、原生 rowspan 表格+可复制 ASIN、旧式分页）。
|
||||
* script 逻辑沿用现有 Vue 实现（新增级联/配置抽屉/导入轮询/导出）。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import CopyText from '@/components/CopyText.vue'
|
||||
@@ -19,20 +19,14 @@ const loading = ref(false)
|
||||
const rows = ref<QueryAsinItem[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const pageSize = 15
|
||||
const groups = ref<ShopGroupOption[]>([])
|
||||
const filter = reactive<QueryAsinFilterState>(createQueryAsinFilterState())
|
||||
const jumpPage = ref('')
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
|
||||
|
||||
/** 纵向展示行：分组/店铺/操作 按 rowspan 合并，逐国一行（对齐 admin.js renderQueryAsinRows）。 */
|
||||
const displayRows = computed(() => queryAsinDisplayRows(rows.value, (page.value - 1) * pageSize.value + 1))
|
||||
|
||||
/** rowspan 合并（去序号后列序 分组0/店铺1/ASIN2/国家3/操作4）：分组(0)/店铺(1)/操作(4) 仅首行占位，其余合并。 */
|
||||
function spanMethod({ row, columnIndex }: { row: { isFirst: boolean; rowspan: number }; columnIndex: number }): [number, number] {
|
||||
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4) {
|
||||
return row.isFirst ? [row.rowspan, 1] : [0, 0]
|
||||
}
|
||||
return [1, 1]
|
||||
}
|
||||
const displayRows = computed(() => queryAsinDisplayRows(rows.value, (page.value - 1) * pageSize + 1))
|
||||
|
||||
function asinOf(row: QueryAsinItem, country: string): string {
|
||||
const map: Record<string, string> = { DE: row.asinDe, UK: row.asinUk, FR: row.asinFr, IT: row.asinIt, ES: row.asinEs }
|
||||
@@ -216,15 +210,7 @@ async function submitImport(): Promise<void> {
|
||||
return
|
||||
}
|
||||
if (importMode.value === 'delete') {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定按 Excel 中的分组、店铺名和国家 ASIN 批量删除吗？', '删除导入', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
if (!window.confirm('确定按 Excel 中的分组、店铺名和国家 ASIN 批量删除吗？')) return
|
||||
}
|
||||
const mode = importMode.value
|
||||
const groupId = importGroupId.value ?? undefined
|
||||
@@ -282,7 +268,7 @@ async function load() {
|
||||
try {
|
||||
const result = await fetchQueryAsinList({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
pageSize,
|
||||
groupId: filter.groupId,
|
||||
shopName: filter.shopName.trim() || undefined,
|
||||
asin: filter.asin.trim() || undefined,
|
||||
@@ -303,12 +289,21 @@ function apply() {
|
||||
void load()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(filter, createQueryAsinFilterState())
|
||||
page.value = 1
|
||||
function changePage(next: number) {
|
||||
if (next < 1 || next > totalPages.value) return
|
||||
page.value = next
|
||||
void load()
|
||||
}
|
||||
|
||||
function goJump() {
|
||||
const n = Number.parseInt(jumpPage.value, 10)
|
||||
if (Number.isNaN(n)) {
|
||||
ElMessage.warning('请输入页码')
|
||||
return
|
||||
}
|
||||
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadGroups()
|
||||
void load()
|
||||
@@ -316,89 +311,101 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>查询 ASIN</h2>
|
||||
<p>每店铺在 5 个站点查询到的 ASIN 清单；行内可逐站配置 ASIN。</p>
|
||||
<div class="query-view">
|
||||
<section class="panel-box">
|
||||
<div class="query-head">
|
||||
<h3>店铺列表</h3>
|
||||
<div class="query-head-actions">
|
||||
<button class="btn" type="button" @click="openCreate">新增 ASIN</button>
|
||||
<button class="btn btn-secondary" type="button" @click="openImportAdd">导入添加</button>
|
||||
<button class="btn" type="button" @click="openImportDelete">导入删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="filter-grid">
|
||||
<div class="f-item">
|
||||
<div class="form-row query-filter-row">
|
||||
<div class="form-group">
|
||||
<label>分组</label>
|
||||
<el-select v-model="filter.groupId" placeholder="全部分组" clearable filterable>
|
||||
<el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
|
||||
</el-select>
|
||||
<select v-model="filter.groupId">
|
||||
<option :value="null">全部分组</option>
|
||||
<option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<div class="form-group">
|
||||
<label>店铺名</label>
|
||||
<el-input v-model="filter.shopName" placeholder="请输入店铺名" clearable @keyup.enter="apply" />
|
||||
<input v-model="filter.shopName" type="text" placeholder="请输入店铺名" @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<label>ASIN</label>
|
||||
<el-input v-model="filter.asin" placeholder="请输入 ASIN" clearable @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<div class="form-group">
|
||||
<label>国家</label>
|
||||
<el-select v-model="filter.country" placeholder="全部国家" clearable>
|
||||
<el-option v-for="code in QUERY_ASIN_COUNTRIES" :key="code" :label="asinCountryLabel(code)" :value="code" />
|
||||
</el-select>
|
||||
<select v-model="filter.country">
|
||||
<option value="">全部国家</option>
|
||||
<option v-for="code in QUERY_ASIN_COUNTRIES" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="f-item btn-row">
|
||||
<el-button type="primary" @click="apply">查询</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
<div class="form-group">
|
||||
<label>ASIN</label>
|
||||
<input v-model="filter.asin" type="text" placeholder="请输入 ASIN" @keyup.enter="apply" />
|
||||
</div>
|
||||
<button class="btn" type="button" @click="apply">查询</button>
|
||||
<button class="btn btn-secondary" type="button" @click="doExport">导出 XLSX</button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增 ASIN</el-button>
|
||||
<el-button @click="openImportAdd">导入添加</el-button>
|
||||
<el-button @click="openImportDelete">导入删除</el-button>
|
||||
<el-button @click="doExport">导出</el-button>
|
||||
<div class="table-scroll query-asin-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 6%">序号</th>
|
||||
<th style="width: 13%">分组</th>
|
||||
<th style="width: 15%">店铺名</th>
|
||||
<th style="width: 24%">ASIN</th>
|
||||
<th style="width: 12%">国家</th>
|
||||
<th style="width: 9%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="displayRows.length">
|
||||
<tr v-for="row in displayRows" :key="`${row.item.id}-${row.country}`">
|
||||
<template v-if="row.isFirst">
|
||||
<td :rowspan="row.rowspan">{{ row.rowNo }}</td>
|
||||
<td :rowspan="row.rowspan">{{ row.item.groupName || '—' }}</td>
|
||||
<td :rowspan="row.rowspan">{{ row.item.shopName }}</td>
|
||||
</template>
|
||||
<td>
|
||||
<template v-if="row.asin">
|
||||
<CopyText :text="row.asin" class="asin-cell" />
|
||||
</template>
|
||||
<span v-else class="asin-empty">-</span>
|
||||
</td>
|
||||
<td>{{ asinCountryLabel(row.country || '') }}</td>
|
||||
<template v-if="row.isFirst">
|
||||
<td :rowspan="row.rowspan" class="asin-col-actions">
|
||||
<button class="btn btn-sm" type="button" @click="openConfig(row.item as QueryAsinItem)">配置</button>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="6" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="6" class="empty-tip">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="displayRows" :span-method="spanMethod" stripe border>
|
||||
<el-table-column label="分组" min-width="130">
|
||||
<template #default="{ row }">{{ row.item.groupName || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="店铺" min-width="150">
|
||||
<template #default="{ row }">{{ row.item.shopName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ASIN" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<CopyText v-if="row.asin" :text="row.asin" class="asin-cell" />
|
||||
<span v-else class="dim">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="国家" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.country">{{ asinCountryLabel(row.country) }}</span>
|
||||
<span v-else class="dim">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="90" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.isFirst" size="small" type="primary" @click="openConfig(row.item as QueryAsinItem)">配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<span>共 {{ total.toLocaleString() }} 条</span>
|
||||
<el-pagination
|
||||
background
|
||||
layout="sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:current-page="page"
|
||||
@current-change="(p: number) => { page = p; void load() }"
|
||||
@size-change="() => { page = 1; void load() }"
|
||||
/>
|
||||
|
||||
<div class="pagination">
|
||||
<span class="page-total">共 {{ total }} 条</span>
|
||||
<button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||
<span class="page-jump">
|
||||
跳至
|
||||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||||
页
|
||||
<button type="button" @click="goJump">跳转</button>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="createVisible" title="新增查询 ASIN" width="560px" :close-on-click-modal="false">
|
||||
<el-form label-position="top" @submit.prevent>
|
||||
@@ -476,16 +483,270 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
|
||||
.heading-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
|
||||
.f-item { display: flex; flex-direction: column; gap: 6px; width: 200px; }
|
||||
.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
|
||||
.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
|
||||
.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
|
||||
.asin-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
|
||||
.dim { color: var(--el-text-color-placeholder); }
|
||||
.drawer-tip { color: var(--el-text-color-secondary); font-size: 12px; margin: 0 0 12px; }
|
||||
.import-tip { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
/* 像素复刻旧版 admin.html panel-query-asin（蓝白末层）。 */
|
||||
.query-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.query-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.query-head-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 14px 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.query-filter-row > .form-group {
|
||||
flex: 1 1 140px;
|
||||
min-width: 0;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group label {
|
||||
color: #5b6f83;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 9px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
color-scheme: light;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
.form-group input:hover,
|
||||
.form-group select:hover {
|
||||
border-color: #9fb7cd;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
background: #ffffff;
|
||||
border-color: #5f85ad;
|
||||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
border-color: #c7d7e5;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
color: #2f5d8b;
|
||||
border-color: #95b1cb;
|
||||
background: #edf5fb;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.query-asin-table-scroll > table {
|
||||
min-width: 860px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.table-scroll td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.asin-cell {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: -3px 0 -3px -7px;
|
||||
padding: 3px 7px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 13.5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.asin-cell:hover {
|
||||
border-color: #c7d7e5;
|
||||
background: #eef4fa;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.asin-empty {
|
||||
color: #8b9aaa;
|
||||
}
|
||||
.asin-col-actions {
|
||||
text-align: right;
|
||||
background: #ffffff;
|
||||
box-shadow: -9px 0 12px -10px rgba(31, 48, 66, 0.45);
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #c7d7e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: #edf5fb;
|
||||
border-color: #95b1cb;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
background: #eef3f7;
|
||||
color: #9baaba;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-total {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.page-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.page-jump input {
|
||||
width: 56px;
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 8px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.drawer-tip {
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.import-tip {
|
||||
margin: 6px 0 0;
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/** 最低价 ASIN（跳过跟价）：对齐 admin panel-skip-price-asin —— 纵向 rowspan 展示(序号/分组/店铺合并 + 逐国
|
||||
* ASIN 可点击复制 + 最低价两位小数)、新增 ASIN 弹窗(分组→店铺联动→国家→ASIN+最低价)、价格范围筛选、
|
||||
* 行内「配置」抽屉(逐国 ASIN+最低价，留空=删除该站点、低价必带 ASIN)、导入添加/删除导入/导出。 */
|
||||
/** 最低价 ASIN（跳过跟价）· 像素复刻旧版 admin.html panel-skip-price-asin（自绘：面板头操作组、筛选(分组/店铺/国家/ASIN/最低价≥≤)+导出 XLSX、原生 rowspan 表格、旧式分页）。
|
||||
* script 逻辑沿用现有 Vue 实现（新增级联+最低价、配置抽屉双列、导入轮询、导出）。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import CopyText from '@/components/CopyText.vue'
|
||||
@@ -20,9 +19,11 @@ const loading = ref(false)
|
||||
const rows = ref<SkipPriceItem[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const pageSize = 15
|
||||
const groups = ref<ShopGroupOption[]>([])
|
||||
const filter = reactive<SkipPriceFilterState>(createSkipPriceFilterState())
|
||||
const jumpPage = ref('')
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
|
||||
|
||||
const COUNTRIES = ['DE', 'UK', 'FR', 'IT', 'ES'] as const
|
||||
const ASIN_MAP: Record<string, keyof SkipPriceItem> = { DE: 'asinDe', UK: 'asinUk', FR: 'asinFr', IT: 'asinIt', ES: 'asinEs' }
|
||||
@@ -38,15 +39,7 @@ function priceOf(row: SkipPriceItem, code: string): number | null {
|
||||
}
|
||||
|
||||
/** 纵向展示行：分组/店铺/操作 按 rowspan 合并，逐国一行（对齐 admin.js renderSkipPriceAsinRows）。 */
|
||||
const displayRows = computed(() => skipPriceDisplayRows(rows.value, (page.value - 1) * pageSize.value + 1))
|
||||
|
||||
/** rowspan 合并（去序号后列序 分组0/店铺1/ASIN2/国家3/最低价4/操作5）：分组(0)/店铺(1)/操作(5) 仅首行占位，其余合并。 */
|
||||
function spanMethod({ row, columnIndex }: { row: { isFirst: boolean; rowspan: number }; columnIndex: number }): [number, number] {
|
||||
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
|
||||
return row.isFirst ? [row.rowspan, 1] : [0, 0]
|
||||
}
|
||||
return [1, 1]
|
||||
}
|
||||
const displayRows = computed(() => skipPriceDisplayRows(rows.value, (page.value - 1) * pageSize + 1))
|
||||
|
||||
// ---- 新增 ASIN 弹窗（对齐 admin.js btnOpenCreateSkipPriceAsin/btnCreateSkipPriceAsin） ----
|
||||
const createVisible = ref(false)
|
||||
@@ -262,15 +255,7 @@ async function submitImport(): Promise<void> {
|
||||
return
|
||||
}
|
||||
if (importMode.value === 'delete') {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定按 Excel 中的删除ASIN批量删除该店铺跳过跟价 ASIN 吗？', '删除导入', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
if (!window.confirm('确定按 Excel 中的删除ASIN批量删除该店铺跳过跟价 ASIN 吗？')) return
|
||||
}
|
||||
const mode = importMode.value
|
||||
const groupId = importGroupId.value as number
|
||||
@@ -325,7 +310,7 @@ async function loadGroups() {
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchSkipPriceList(toSkipPriceParams(filter, page.value, pageSize.value))
|
||||
const result = await fetchSkipPriceList(toSkipPriceParams(filter, page.value, pageSize))
|
||||
rows.value = result.items
|
||||
total.value = result.total
|
||||
page.value = result.page
|
||||
@@ -341,12 +326,21 @@ function apply() {
|
||||
void load()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(filter, createSkipPriceFilterState())
|
||||
page.value = 1
|
||||
function changePage(next: number) {
|
||||
if (next < 1 || next > totalPages.value) return
|
||||
page.value = next
|
||||
void load()
|
||||
}
|
||||
|
||||
function goJump() {
|
||||
const n = Number.parseInt(jumpPage.value, 10)
|
||||
if (Number.isNaN(n)) {
|
||||
ElMessage.warning('请输入页码')
|
||||
return
|
||||
}
|
||||
changePage(Math.min(Math.max(n, 1), totalPages.value))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadGroups()
|
||||
void load()
|
||||
@@ -354,103 +348,111 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-stack">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h2>最低价 ASIN / 跳过跟价</h2>
|
||||
<p>每店铺在 5 个站点设定的最低价 ASIN 清单；行内可逐站配置 ASIN 与最低价。</p>
|
||||
<div class="skip-view">
|
||||
<section class="panel-box">
|
||||
<div class="skip-head">
|
||||
<h3>店铺列表</h3>
|
||||
<div class="skip-head-actions">
|
||||
<button class="btn" type="button" @click="openCreate">新增 ASIN</button>
|
||||
<button class="btn btn-secondary" type="button" @click="openImportAdd">导入文件新增</button>
|
||||
<button class="btn" type="button" @click="openImportDelete">导入文件删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="filter-grid">
|
||||
<div class="f-item">
|
||||
<div class="form-row skip-filter-row">
|
||||
<div class="form-group">
|
||||
<label>分组</label>
|
||||
<el-select v-model="filter.groupId" placeholder="全部分组" clearable filterable>
|
||||
<el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
|
||||
</el-select>
|
||||
<select v-model="filter.groupId">
|
||||
<option :value="null">全部分组</option>
|
||||
<option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<label>店铺</label>
|
||||
<el-input v-model="filter.shopName" placeholder="店铺名模糊" clearable @keyup.enter="apply" />
|
||||
<div class="form-group">
|
||||
<label>店铺名</label>
|
||||
<input v-model="filter.shopName" type="text" placeholder="请输入店铺名" @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<label>ASIN</label>
|
||||
<el-input v-model="filter.asin" placeholder="ASIN 搜索" clearable @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<div class="form-group">
|
||||
<label>国家</label>
|
||||
<el-select v-model="filter.country" placeholder="全部" clearable>
|
||||
<el-option v-for="code in COUNTRIES" :key="code" :label="asinCountryLabel(code)" :value="code" />
|
||||
</el-select>
|
||||
<select v-model="filter.country">
|
||||
<option value="">全部国家</option>
|
||||
<option v-for="code in COUNTRIES" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="f-item price-range">
|
||||
<label>最低价</label>
|
||||
<div class="form-group">
|
||||
<label>ASIN</label>
|
||||
<input v-model="filter.asin" type="text" placeholder="请输入 ASIN" @keyup.enter="apply" />
|
||||
</div>
|
||||
<div class="form-group price-range">
|
||||
<label>最低价范围</label>
|
||||
<div class="price-range-row">
|
||||
<el-input v-model="filter.minimumPriceFrom" placeholder="≥ 最低值" clearable @keyup.enter="apply" />
|
||||
<span class="range-sep">至</span>
|
||||
<el-input v-model="filter.minimumPriceTo" placeholder="≤ 最高值" clearable @keyup.enter="apply" />
|
||||
<input v-model="filter.minimumPriceFrom" type="number" min="0" step="0.01" placeholder="最低价 ≥" @keyup.enter="apply" />
|
||||
<span class="range-sep">-</span>
|
||||
<input v-model="filter.minimumPriceTo" type="number" min="0" step="0.01" placeholder="最高价 ≤" @keyup.enter="apply" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="f-item btn-row">
|
||||
<el-button type="primary" @click="apply">查询</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
<button class="btn" type="button" @click="apply">查询</button>
|
||||
<button class="btn btn-secondary" type="button" @click="doExport">导出 XLSX</button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="table-toolbar">
|
||||
<el-button type="primary" @click="openCreate">新增 ASIN</el-button>
|
||||
<el-button @click="openImportAdd">导入添加</el-button>
|
||||
<el-button @click="openImportDelete">导入删除</el-button>
|
||||
<el-button @click="doExport">导出</el-button>
|
||||
<div class="table-scroll skip-price-asin-table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 6%">序号</th>
|
||||
<th style="width: 13%">分组</th>
|
||||
<th style="width: 15%">店铺名</th>
|
||||
<th style="width: 24%">ASIN</th>
|
||||
<th style="width: 12%">国家</th>
|
||||
<th style="width: 10%">最低价</th>
|
||||
<th style="width: 9%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="displayRows.length">
|
||||
<tr v-for="row in displayRows" :key="`${row.item.id}-${row.country}`">
|
||||
<template v-if="row.isFirst">
|
||||
<td :rowspan="row.rowspan">{{ row.rowNo }}</td>
|
||||
<td :rowspan="row.rowspan">{{ row.item.groupName || '—' }}</td>
|
||||
<td :rowspan="row.rowspan">{{ row.item.shopName }}</td>
|
||||
</template>
|
||||
<td>
|
||||
<template v-if="row.asin">
|
||||
<CopyText :text="row.asin" class="asin-cell" />
|
||||
</template>
|
||||
<span v-else class="asin-empty">-</span>
|
||||
</td>
|
||||
<td>{{ asinCountryLabel(row.country || '') }}</td>
|
||||
<td class="price-cell">{{ row.minimumPrice !== '' ? row.minimumPrice : '-' }}</td>
|
||||
<template v-if="row.isFirst">
|
||||
<td :rowspan="row.rowspan" class="asin-col-actions">
|
||||
<button class="btn btn-sm" type="button" @click="openConfig(row.item as SkipPriceItem)">配置</button>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-else-if="loading">
|
||||
<td colspan="7" class="empty-tip">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else>
|
||||
<td colspan="7" class="empty-tip">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="displayRows" :span-method="spanMethod" stripe border>
|
||||
<el-table-column label="分组" min-width="130">
|
||||
<template #default="{ row }">{{ row.item.groupName || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="店铺" min-width="150">
|
||||
<template #default="{ row }">{{ row.item.shopName }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ASIN" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<CopyText v-if="row.asin" :text="row.asin" class="asin-cell" />
|
||||
<span v-else class="dim">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="国家" min-width="110">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.country">{{ asinCountryLabel(row.country) }}</span>
|
||||
<span v-else class="dim">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最低价" min-width="110" align="right">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.minimumPrice !== ''">{{ row.minimumPrice }}</span>
|
||||
<span v-else class="dim">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="90" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.isFirst" size="small" type="primary" @click="openConfig(row.item as SkipPriceItem)">配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-footer">
|
||||
<span>共 {{ total.toLocaleString() }} 条</span>
|
||||
<el-pagination
|
||||
background
|
||||
layout="sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:current-page="page"
|
||||
@current-change="(p: number) => { page = p; void load() }"
|
||||
@size-change="() => { page = 1; void load() }"
|
||||
/>
|
||||
|
||||
<div class="pagination">
|
||||
<span class="page-total">共 {{ total }} 条</span>
|
||||
<button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
|
||||
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button type="button" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
|
||||
<span class="page-jump">
|
||||
跳至
|
||||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||||
页
|
||||
<button type="button" @click="goJump">跳转</button>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="createVisible" title="新增 ASIN" width="560px" :close-on-click-modal="false">
|
||||
<el-form label-position="top" @submit.prevent>
|
||||
@@ -534,22 +536,297 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
|
||||
.heading-actions { display: flex; gap: 8px; flex: none; }
|
||||
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
|
||||
.f-item { display: flex; flex-direction: column; gap: 6px; width: 190px; }
|
||||
.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
|
||||
/* 最低价范围筛选：≥ 与 ≤ 并排同一行。 */
|
||||
.f-item.price-range { width: 300px; }
|
||||
.price-range-row { display: flex; align-items: center; gap: 8px; width: 100%; }
|
||||
.price-range-row .el-input { flex: 1; }
|
||||
.range-sep { color: var(--el-text-color-secondary); font-size: 12px; flex: none; }
|
||||
.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
|
||||
.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
|
||||
.asin-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
|
||||
.dim { color: var(--el-text-color-placeholder); }
|
||||
.drawer-tip { color: var(--el-text-color-secondary); font-size: 12px; margin: 0 0 12px; }
|
||||
.country-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
|
||||
.import-tip { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; }
|
||||
/* 像素复刻旧版 admin.html panel-skip-price-asin（蓝白末层）。 */
|
||||
.skip-view {
|
||||
font-family: inherit;
|
||||
color: #24384d;
|
||||
}
|
||||
.panel-box {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px 22px 24px;
|
||||
border: 1px solid #d8e3ee;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(145deg, #ffffff, #f9fbfd);
|
||||
box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: #24384d;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.skip-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.skip-head-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 14px 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.skip-filter-row > .form-group {
|
||||
flex: 1 1 130px;
|
||||
min-width: 0;
|
||||
}
|
||||
.skip-filter-row .form-group.price-range {
|
||||
flex: 1 1 220px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-group label {
|
||||
color: #5b6f83;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 9px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13.5px;
|
||||
font-family: inherit;
|
||||
color-scheme: light;
|
||||
outline: none;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
.form-group input:hover,
|
||||
.form-group select:hover {
|
||||
border-color: #9fb7cd;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
background: #ffffff;
|
||||
border-color: #5f85ad;
|
||||
box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
|
||||
}
|
||||
.price-range-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.price-range-row input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.price-range-row .range-sep {
|
||||
color: #8293a5;
|
||||
flex: none;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 9px 18px;
|
||||
border: 1px solid #4f78a5;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #5f85ad, #4f78a5);
|
||||
color: #ffffff;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
|
||||
transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #7094ba, #5d83ac);
|
||||
box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
|
||||
}
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
border-color: #c7d7e5;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
color: #2f5d8b;
|
||||
border-color: #95b1cb;
|
||||
background: #edf5fb;
|
||||
}
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #c06d77, #b35f6a);
|
||||
border-color: #b35f6a;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #cb7c84, #b96570);
|
||||
}
|
||||
.btn-sm {
|
||||
min-height: 36px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #dbe5ee;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.table-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.skip-price-asin-table-scroll > table {
|
||||
min-width: 900px;
|
||||
}
|
||||
.table-scroll th,
|
||||
.table-scroll td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid #e0e8ef;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-scroll th {
|
||||
background: #edf4fa;
|
||||
color: #4e6479;
|
||||
border-bottom-color: #d5e1eb;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.table-scroll tbody tr:hover td {
|
||||
background: #f1f7fb;
|
||||
}
|
||||
.table-scroll tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.table-scroll td {
|
||||
vertical-align: top;
|
||||
}
|
||||
.asin-cell {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: -3px 0 -3px -7px;
|
||||
padding: 3px 7px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 13.5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.asin-cell:hover {
|
||||
border-color: #c7d7e5;
|
||||
background: #eef4fa;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.asin-empty {
|
||||
color: #8b9aaa;
|
||||
}
|
||||
.price-cell {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.asin-col-actions {
|
||||
text-align: right;
|
||||
background: #ffffff;
|
||||
box-shadow: -9px 0 12px -10px rgba(31, 48, 66, 0.45);
|
||||
}
|
||||
.empty-tip {
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
color: #8293a5;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
color: #5b6f83;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pagination button {
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #c7d7e5;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #5b6f83;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: #edf5fb;
|
||||
border-color: #95b1cb;
|
||||
color: #2f5d8b;
|
||||
}
|
||||
.pagination button:disabled {
|
||||
background: #eef3f7;
|
||||
color: #9baaba;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.page-total {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.page-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.page-jump input {
|
||||
width: 56px;
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #cbd9e6;
|
||||
border-radius: 8px;
|
||||
background: #f8fbfd;
|
||||
color: #24384d;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.drawer-tip {
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.country-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.import-tip {
|
||||
margin: 6px 0 0;
|
||||
color: #5b6f83;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user