refactor(F006-W10): 8 view 标准化 (PageHeader/SearchBar 替换)

批次 1-3 共 10 个 view 套标准组件:
- 批次 1 (5): feedback/help/lunbo/label/textconfig
- 批次 2 (2): region/categoryGood (保留 el-table 树形)
- 批次 3 (3): groupbuy/seckill/supplierBrand

改动: 替换硬编码 rr-page-header/rr-card rr-search 为 PageHeader/SearchBar 组件
规范: 按 F006-VIEW-TEMPLATE.md 8 条硬性约定
验证: 13 URL 200 OK, build 4.04s, dist gzip 375KB
This commit is contained in:
zou 2026-07-05 21:46:59 +08:00
parent a97ae49595
commit 1970313cc3
10 changed files with 166 additions and 257 deletions

View File

@ -1,6 +1,6 @@
<script setup lang="ts">
/**
* F006 意见反馈 - W6 P0 完整化
* F006 意见反馈 - W10 A1 标准化
*
* 沿用老 vue api/feedback.vue 137 行:
* - 搜索: 用户昵称
@ -8,11 +8,14 @@
* - 操作: 预览 / 删除
* - 预览弹窗展示完整反馈内容 (含图片列表)
* - /api/feedback 后端 404 → FALLBACK mock
*
* W10 A1: 套 PageHeader/SearchBar 标准化模板 (无 STATUS_MAP, 无增改弹窗)
*/
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Feedback {
id: string
@ -27,6 +30,7 @@ interface Feedback {
raw: any
}
// ========== 端点 404 降级 mock ==========
const FALLBACK: Feedback[] = [
{ id: 'F001', userId: 'U10086', nickName: '张经理', phone: '13800138001', title: '订单延迟发货', content: '我们于6月28日下单采购一批钢材, 至今未发货, 影响项目进度, 请尽快处理。', orderCode: 'O20260628001', createDate: '2026-07-01 09:32:18', imgList: ['https://placehold.co/120x120/2563EB/fff?text=IMG1', 'https://placehold.co/120x120/2563EB/fff?text=IMG2'], raw: {} },
{ id: 'F002', userId: 'U10087', nickName: '李工', phone: '13900139002', title: '产品质量问题', content: '收到的商品有破损, 已拍照。附件图1是外包装破损, 图2是商品本身。', orderCode: 'O20260630002', createDate: '2026-07-02 11:15:42', imgList: ['https://placehold.co/120x120/DC2626/fff?text=BAD1'], raw: {} },
@ -36,17 +40,20 @@ const FALLBACK: Feedback[] = [
{ id: 'F006', userId: 'U10091', nickName: '孙技术', phone: '13400134006', title: '功能建议: 自定义审批流', content: '建议在询价单模块增加自定义审批流, 当前固定流程不够灵活。', orderCode: '', createDate: '2026-07-04 09:10:00', imgList: [], raw: {} }
]
// ========== 标准状态 ==========
const list = ref<Feedback[]>([])
const total = ref(0)
const loading = ref(false)
const error = ref<string | null>(null)
const page = ref(1)
const limit = ref(20)
const filters = reactive({ nickName: '' })
const filters = reactive<{ nickName: string }>({ nickName: '' })
// ========== 弹窗状态 ==========
const previewVisible = ref(false)
const previewData = ref<Feedback | null>(null)
// ========== 加载逻辑 ==========
async function load() {
loading.value = true
error.value = null
@ -63,6 +70,7 @@ async function load() {
} finally { loading.value = false }
}
// ========== 事件 ==========
function onSearch() { page.value = 1; load() }
function onReset() { filters.nickName = ''; load() }
function onPageChange(p: number) { page.value = p; load() }
@ -80,24 +88,16 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">意见反馈</h2>
<p class="rr-page-sub">用户反馈信息管理 (共 {{ total }} 条)</p>
</div>
</div>
<PageHeader title="意见反馈" :sub="`用户反馈信息管理 (共 ${total} 条)`" />
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="用户昵称">
<el-input v-model="filters.nickName" placeholder="请输入用户昵称" clearable style="width: 240px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'nickName', label: '用户昵称', type: 'text', placeholder: '请输入用户昵称' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<DataTable
@ -164,11 +164,6 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.feedback-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback-img-item { width: 80px; height: 80px; border-radius: 6px; border: 1px solid var(--border); }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 帮助中心 - W6 P0 完整化
* F006 帮助中心 - W10 A1 标准化
*
* W10 A1: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue api/help.vue 60 行:
* - 搜索: 标题
@ -12,6 +14,8 @@ import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Help {
id: string
@ -84,27 +88,18 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">帮助中心</h2>
<p class="rr-page-sub">常见问题与帮助文档管理 (共 {{ total }} 条)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd">新增文档</el-button>
</div>
</div>
<PageHeader title="帮助中心" :sub="`常见问题与帮助文档管理 (共 ${total} 条)`">
<el-button type="primary" @click="onAdd">新增文档</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="标题">
<el-input v-model="filters.title" placeholder="请输入标题" clearable style="width: 280px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'title', label: '标题', type: 'text', placeholder: '请输入标题' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<DataTable
@ -158,9 +153,4 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 轮播图管理 - W6 P0 完整化
* F006 轮播图管理 - W10 A1 标准化
*
* W10 A1: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue api/lunbo.vue 88 行:
* - 搜索: 标题 / 展示位置
@ -12,6 +14,8 @@ import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Lunbo {
id: string
@ -100,33 +104,22 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">轮播图管理</h2>
<p class="rr-page-sub">App/小程序首页与商城轮播图配置 (共 {{ total }} 张)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd">新增轮播</el-button>
</div>
</div>
<PageHeader title="轮播图管理" :sub="`App/小程序首页与商城轮播图配置 (共 ${total} 张)`">
<el-button type="primary" @click="onAdd">新增轮播</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="标题">
<el-input v-model="filters.title" placeholder="请输入标题" clearable style="width: 220px" />
</el-form-item>
<el-form-item label="展示位置">
<el-select v-model="filters.position" placeholder="全部" clearable style="width: 160px">
<el-option label="首页" :value="1" />
<el-option label="在线商城" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'title', label: '标题', type: 'text', placeholder: '请输入标题' },
{ key: 'position', label: '展示位置', type: 'select', options: [
{ value: 1, label: '首页' },
{ value: 2, label: '在线商城' }
] }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<DataTable
@ -205,10 +198,5 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.lunbo-thumb { width: 80px; height: 60px; border-radius: 4px; border: 1px solid var(--border); }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 商品分类 - W6 P0 完整化
* F006 商品分类 - W10 A2 标准化
*
* W10 A2: 套 PageHeader/SearchBar (保留 el-table 树形, DataTable 不支持树形)
*
* 沿用老 vue other/categoryGood.vue 273 行:
* - 搜索: 分类名
@ -13,6 +15,8 @@
import { ref, onMounted, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Category {
id: string
@ -138,28 +142,19 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">商品分类</h2>
<p class="rr-page-sub">商品 3 级分类管理 (含子级: {{ tree.length }} 个一级分类)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd()">新增一级分类</el-button>
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</div>
</div>
<PageHeader title="商品分类" :sub="`商品 3 级分类管理 (含子级: ${tree.length} 个一级分类)`">
<el-button type="primary" @click="onAdd()">新增一级分类</el-button>
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="分类名称">
<el-input v-model="filters.name" placeholder="请输入分类名" clearable style="width: 240px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'name', label: '分类名称', type: 'text', placeholder: '请输入分类名' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<el-table
@ -225,10 +220,5 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1500px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.cat-table { background: transparent; }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 拼团活动 - W6 P0 完整化
* F006 拼团活动 - W10 A3 标准化
*
* W10 A3: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue other/groupbuy.vue 116 行:
* - 搜索: 活动名称
@ -12,6 +14,8 @@
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Groupbuy {
id: string
@ -98,25 +102,18 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">拼团活动</h2>
<p class="rr-page-sub">拼团/团购活动管理 (共 {{ total }} 个)</p>
</div>
</div>
<PageHeader title="拼团活动" :sub="`拼团/团购活动管理 (共 ${total} 个)`">
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="活动名称">
<el-input v-model="filters.name" placeholder="请输入活动名称" clearable style="width: 280px" />
</el-form-item>
<el-form-item>
<el-button @click="onReset">重置</el-button>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'name', label: '活动名称', type: 'text', placeholder: '请输入活动名称' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<div class="rr-pagination">
@ -145,10 +142,5 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.rr-pagination { padding: 12px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 标签管理 - 完整版 (W6 整改)
* F006 标签管理 - W10 A1 标准化
*
* W10 A1: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue other/label.vue 173 行:
* - 搜索: 标签名
@ -15,6 +17,8 @@ import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Label {
id: string
@ -103,27 +107,18 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">标签管理</h2>
<p class="rr-page-sub">商品/活动/服务标签分类管理 (共 {{ total }} 个)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd">新增标签</el-button>
</div>
</div>
<PageHeader title="标签管理" :sub="`商品/活动/服务标签分类管理 (共 ${total} 个)`">
<el-button type="primary" @click="onAdd">新增标签</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="标签名称">
<el-input v-model="filters.name" placeholder="请输入标签名" clearable style="width: 240px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'name', label: '标签名称', type: 'text', placeholder: '请输入标签名' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<DataTable
@ -184,9 +179,4 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 秒杀活动 - W6 P0 完整化
* F006 秒杀活动 - W10 A3 标准化
*
* W10 A3: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue other/seckill.vue 113 行:
* - 搜索: 活动名称
@ -12,6 +14,8 @@
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Seckill {
id: string
@ -99,25 +103,18 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">秒杀活动</h2>
<p class="rr-page-sub">限时秒杀活动管理 (共 {{ total }} 个)</p>
</div>
</div>
<PageHeader title="秒杀活动" :sub="`限时秒杀活动管理 (共 ${total} 个)`">
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="活动名称">
<el-input v-model="filters.name" placeholder="请输入活动名称" clearable style="width: 280px" />
</el-form-item>
<el-form-item>
<el-button @click="onReset">重置</el-button>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'name', label: '活动名称', type: 'text', placeholder: '请输入活动名称' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<div class="rr-pagination">
@ -146,10 +143,5 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.rr-pagination { padding: 12px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 供应商品牌审核 - W6 P0 完整化
* F006 供应商品牌审核 - W10 A3 标准化
*
* W10 A3: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue other/supplierBrand.vue 230 行:
* - 搜索: 品牌名/企业名/审核状态/申请时间范围
@ -13,6 +15,8 @@
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface Brand {
id: string
@ -108,35 +112,24 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">供应商品牌审核</h2>
<p class="rr-page-sub">供应商提交的品牌授权审核 (共 {{ total }} 个)</p>
</div>
</div>
<PageHeader title="供应商品牌审核" :sub="`供应商提交的品牌授权审核 (共 ${total} 个)`">
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="品牌名称">
<el-input v-model="filters.brandName" placeholder="请输入品牌名" clearable style="width: 180px" />
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="filters.enterpriseName" placeholder="请输入企业名" clearable style="width: 180px" />
</el-form-item>
<el-form-item label="审核状态">
<el-select v-model="filters.status" placeholder="全部" clearable style="width: 140px">
<el-option label="待审核" :value="1" />
<el-option label="审核通过" :value="2" />
<el-option label="审核拒绝" :value="3" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
<el-button type="danger" :disabled="selection.length === 0" @click="onBatchDelete">批量删除 ({{ selection.length }})</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'brandName', label: '品牌名称', type: 'text', placeholder: '请输入品牌名' },
{ key: 'enterpriseName', label: '企业名称', type: 'text', placeholder: '请输入企业名' },
{ key: 'status', label: '审核状态', type: 'select', options: [
{ value: 1, label: '待审核' },
{ value: 2, label: '审核通过' },
{ value: 3, label: '审核拒绝' }
] }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<div class="rr-pagination">
@ -166,11 +159,6 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1500px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.rr-pagination { padding: 12px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }
.brand-auth { width: 50px; height: 50px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 常量配置 - 完整版 (W6 整改)
* F006 常量配置 - W10 A1 标准化
*
* W10 A1: 套 PageHeader/SearchBar 标准化模板
*
* 沿用老 vue other/textconfig.vue 85 行:
* - 搜索: 描述
@ -14,6 +16,8 @@
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DataTable from '@/components/DataTable/DataTable.vue'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
interface TextConfig {
id: string
@ -97,27 +101,18 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">常量配置</h2>
<p class="rr-page-sub">系统常量/协议/横幅配置 (共 {{ total }} 条)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd">新增常量</el-button>
</div>
</div>
<PageHeader title="常量配置" :sub="`系统常量/协议/横幅配置 (共 ${total} 条)`">
<el-button type="primary" @click="onAdd">新增常量</el-button>
</PageHeader>
<div class="rr-card rr-search">
<el-form :inline="true" @keyup.enter="onSearch">
<el-form-item label="描述">
<el-input v-model="filters.descr" placeholder="请输入描述" clearable style="width: 240px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<SearchBar
v-model:filters="filters"
:fields="[
{ key: 'descr', label: '描述', type: 'text', placeholder: '请输入描述' }
]"
@search="onSearch"
@reset="onReset"
/>
<div class="rr-card">
<DataTable
@ -196,11 +191,6 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.rr-content-text { color: var(--ink); font-size: 13px; }
.rr-richtext { line-height: 1.6; color: var(--ink); }
</style>

View File

@ -1,6 +1,8 @@
<script setup lang="ts">
/**
* F006 行政区划 - W6 P0 完整化
* F006 行政区划 - W10 A2 标准化
*
* W10 A2: 套 PageHeader (保留 el-table 树形, DataTable 不支持树形)
*
* 沿用老 vue sys/region.vue 90 行:
* - 树形表格 (3 级省/市/区), lazy load
@ -11,6 +13,7 @@
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { httpGet } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
interface Region {
id: string
@ -109,15 +112,9 @@ onMounted(load)
<template>
<div class="rr-page">
<div class="rr-page-header">
<div>
<h2 class="rr-page-title">行政区划</h2>
<p class="rr-page-sub">省/市/区/街道 4 级行政区划管理 (含子级: {{ tree.length }} 个省级)</p>
</div>
<div class="rr-page-actions">
<el-button type="primary" @click="onAdd()">新增省级</el-button>
</div>
</div>
<PageHeader title="行政区划" :sub="`省/市/区/街道 4 级行政区划管理 (含子级: ${tree.length} 个省级)`">
<el-button type="primary" @click="onAdd()">新增省级</el-button>
</PageHeader>
<div class="rr-card">
<el-table
@ -182,9 +179,6 @@ onMounted(load)
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; padding: 8px; }
.region-table { background: transparent; }
</style>