refactor(F006-W11): 7 view 标准化 (PageHeader/SearchBar) - inquiry ×2 + good/servicegood + openapi ×3
This commit is contained in:
zou
parent
e3536ff2dd
commit
a8be2d0b35
@ -12,6 +12,7 @@ import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
|
||||
interface Inquiry {
|
||||
id: string
|
||||
@ -122,9 +123,9 @@ watch(inquiryId, load)
|
||||
|
||||
<template>
|
||||
<div class="rr-page">
|
||||
<div class="rr-page-header">
|
||||
<PageHeader title="询价详情" :sub="`询价单号: ${detail?.id || ''} · 发布时间: ${detail ? fmtDate(detail.createDate) : ''}`">
|
||||
<el-button text @click="onBack">← 返回询价列表</el-button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div v-if="loading" class="rr-loading"><el-skeleton :rows="6" animated /></div>
|
||||
<div v-else-if="!detail" class="rr-empty"><el-empty description="询价不存在" /></div>
|
||||
@ -212,7 +213,6 @@ watch(inquiryId, load)
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rr-page { max-width: 1400px; }
|
||||
.rr-page-header { margin-bottom: 16px; }
|
||||
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
|
||||
.rr-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
|
||||
.rr-card-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
|
||||
|
||||
@ -11,6 +11,8 @@ import { onMounted, computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
import { useInquiryStore, STATUS_OPTIONS } from '@/stores/inquiry'
|
||||
import { httpGet } from '@/utils/request'
|
||||
|
||||
@ -120,15 +122,9 @@ onMounted(() => { load() })
|
||||
|
||||
<template>
|
||||
<div class="rr-inquiry-list">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">询价管理</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 条询价</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="询价管理" :sub="`共 ${total} 条询价`">
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</PageHeader>
|
||||
|
||||
<div class="rr-tabs-row">
|
||||
<div class="rr-tabs">
|
||||
@ -140,20 +136,15 @@ onMounted(() => { load() })
|
||||
@click="onStatusTab(t.value)"
|
||||
>{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="rr-filters">
|
||||
<el-input
|
||||
v-model="filters.searchKey"
|
||||
placeholder="搜索单号/客户/商品"
|
||||
clearable
|
||||
class="rr-search-input"
|
||||
size="small"
|
||||
:prefix-icon="'Search'"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<el-button class="rr-btn-secondary" size="small" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[{ key: "searchKey", label: "", type: "text", placeholder: "搜索单号/客户/商品", clearable: true }]'
|
||||
:show-reset="false"
|
||||
@search="onSearch"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
@ -190,41 +181,10 @@ onMounted(() => { load() })
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rr-page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.rr-page-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.rr-page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.rr-page-sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.rr-page-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rr-tabs-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
@ -261,14 +221,6 @@ onMounted(() => { load() })
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.rr-filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rr-search-input { width: 240px; }
|
||||
|
||||
.rr-list-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
|
||||
@ -26,6 +26,8 @@ import { onMounted, ref, reactive, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { httpGet } from '@/utils/request'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
|
||||
interface AuditLog {
|
||||
@ -293,16 +295,9 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="rr-openapi-audit">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">审计日志</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 条调用记录</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
<el-button type="primary" class="rr-btn-primary" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="审计日志" :sub="`共 ${total} 条调用记录`">
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</PageHeader>
|
||||
|
||||
<div class="rr-tabs-row">
|
||||
<div class="rr-tabs">
|
||||
@ -314,59 +309,23 @@ onMounted(() => {
|
||||
@click="onStatusTab(t.value)"
|
||||
>{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="rr-filters">
|
||||
<el-input
|
||||
v-model="filters.searchKey"
|
||||
placeholder="搜索 工具 / 请求ID / 摘要"
|
||||
clearable
|
||||
class="rr-search-input"
|
||||
size="small"
|
||||
:prefix-icon="'Search'"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<el-select
|
||||
v-model="filters.customerCode"
|
||||
placeholder="客户"
|
||||
class="rr-customer-select"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in customerOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="filters.appId"
|
||||
placeholder="App"
|
||||
class="rr-app-select"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in appOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="filters.callType"
|
||||
placeholder="类型"
|
||||
class="rr-type-select"
|
||||
clearable
|
||||
size="small"
|
||||
>
|
||||
<el-option value="MCP" label="MCP" />
|
||||
<el-option value="REST" label="REST" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[
|
||||
{ key: "searchKey", label: "", type: "text", placeholder: "搜索 工具 / 请求ID / 摘要", clearable: true },
|
||||
{ key: "customerCode", label: "客户", type: "select", placeholder: "客户", clearable: true,
|
||||
options: customerOptions.map(o => ({ value: o.value, label: o.label })) },
|
||||
{ key: "appId", label: "App", type: "select", placeholder: "App", clearable: true,
|
||||
options: appOptions.map(o => ({ value: o.value, label: o.label })) },
|
||||
{ key: "callType", label: "类型", type: "select", placeholder: "类型", clearable: true,
|
||||
options: [{ value: "MCP", label: "MCP" }, { value: "REST", label: "REST" }] }
|
||||
]'
|
||||
:show-reset="false"
|
||||
@search="onSearch"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
:columns="[
|
||||
@ -533,36 +492,15 @@ onMounted(() => {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rr-page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-page-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-page-sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-page-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-tabs-row {
|
||||
display: flex;
|
||||
@ -604,16 +542,12 @@ onMounted(() => {
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.rr-filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-search-input { width: 240px; }
|
||||
.rr-customer-select { width: 180px; }
|
||||
.rr-app-select { width: 180px; }
|
||||
.rr-type-select { width: 90px; }
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-list-card {
|
||||
background: var(--el-bg-color);
|
||||
|
||||
@ -21,6 +21,8 @@ import { onMounted, ref, reactive } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { httpGet, httpPost } from '@/utils/request'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
|
||||
interface CompanyAccount {
|
||||
@ -239,34 +241,20 @@ onMounted(() => { load(); loadCustomers() })
|
||||
|
||||
<template>
|
||||
<div class="rr-openapi-company">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">公司账号管理</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 个公司账号</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="公司账号管理" :sub="`共 ${total} 个公司账号`">
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</PageHeader>
|
||||
|
||||
<div class="rr-filters-row">
|
||||
<el-select
|
||||
v-model="filters.customerCode"
|
||||
placeholder="选择客户筛选"
|
||||
class="rr-customer-select"
|
||||
clearable
|
||||
filterable
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in customerOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button class="rr-btn-secondary" size="small" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[{
|
||||
key: "customerCode", label: "客户筛选", type: "select",
|
||||
placeholder: "选择客户筛选", clearable: true,
|
||||
options: customerOptions.map(o => ({ value: o.value, label: o.label }))
|
||||
}]'
|
||||
@search="onSearch"
|
||||
@reset="load"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
@ -421,50 +409,19 @@ onMounted(() => { load(); loadCustomers() })
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rr-page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
/* PageHeader 接管 */
|
||||
|
||||
.rr-page-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
/* PageHeader 接管 */
|
||||
|
||||
.rr-page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
/* PageHeader 接管 */
|
||||
|
||||
.rr-page-sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
/* PageHeader 接管 */
|
||||
|
||||
.rr-page-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
/* PageHeader 接管 */
|
||||
|
||||
.rr-filters-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* SearchBar 接管 */
|
||||
|
||||
.rr-customer-select {
|
||||
width: 280px;
|
||||
}
|
||||
/* SearchBar 接管 */
|
||||
|
||||
.rr-list-card {
|
||||
background: var(--el-bg-color);
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
import { onMounted, ref, reactive, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { httpGet, httpPost } from '@/utils/request'
|
||||
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
||||
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
||||
import DataTable from '@/components/DataTable/DataTable.vue'
|
||||
import ApplyApiKeyDialog from './ApplyApiKeyDialog.vue'
|
||||
|
||||
@ -321,16 +323,10 @@ onMounted(() => { load(); loadCustomers() })
|
||||
|
||||
<template>
|
||||
<div class="rr-openapi-app">
|
||||
<div class="rr-page-header">
|
||||
<div class="rr-page-titles">
|
||||
<h2 class="rr-page-title">应用列表</h2>
|
||||
<p class="rr-page-sub">共 {{ total }} 个集成应用</p>
|
||||
</div>
|
||||
<div class="rr-page-actions">
|
||||
<el-button @click="onReset" class="rr-btn-secondary">重置</el-button>
|
||||
<el-button type="primary" class="rr-btn-primary" @click="onApplyDialogOpen">+ 申请新 APIKey</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="应用列表" :sub="`共 ${total} 个集成应用`">
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
<el-button type="primary" @click="onApplyDialogOpen">+ 申请新 APIKey</el-button>
|
||||
</PageHeader>
|
||||
|
||||
<div class="rr-tabs-row">
|
||||
<div class="rr-tabs">
|
||||
@ -342,33 +338,19 @@ onMounted(() => { load(); loadCustomers() })
|
||||
@click="onStatusTab(t.value)"
|
||||
>{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="rr-filters">
|
||||
<el-input
|
||||
v-model="filters.searchKey"
|
||||
placeholder="搜索 app 名称 / app_id / 客户名"
|
||||
clearable
|
||||
class="rr-search-input"
|
||||
:prefix-icon="'Search'"
|
||||
@keyup.enter="onSearch"
|
||||
/>
|
||||
<el-select
|
||||
v-model="filters.customerCode"
|
||||
placeholder="客户"
|
||||
class="rr-customer-select"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in customerOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button class="rr-btn-secondary" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
v-model:filters="filters"
|
||||
:fields='[
|
||||
{ key: "searchKey", label: "", type: "text", placeholder: "搜索 app 名称 / app_id / 客户名", clearable: true },
|
||||
{ key: "customerCode", label: "客户", type: "select", placeholder: "客户", clearable: true,
|
||||
options: customerOptions.map(o => ({ value: o.value, label: o.label })) }
|
||||
]'
|
||||
@search="onSearch"
|
||||
@reset="load"
|
||||
/>
|
||||
|
||||
<div class="rr-list-card">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
@ -573,17 +555,11 @@ onMounted(() => { load(); loadCustomers() })
|
||||
<style scoped lang="scss">
|
||||
.rr-openapi-app { max-width: 1400px; }
|
||||
|
||||
.rr-page-header {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.rr-page-titles { display: flex; flex-direction: column; gap: 4px; }
|
||||
.rr-page-title {
|
||||
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
|
||||
color: var(--ink); margin: 0;
|
||||
}
|
||||
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
|
||||
.rr-page-actions { display: flex; gap: 8px; flex-shrink: 0; }
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
.rr-list-card {
|
||||
background: var(--surface);
|
||||
@ -610,9 +586,9 @@ onMounted(() => { load(); loadCustomers() })
|
||||
height: 2px; background: var(--brand); border-radius: 1px;
|
||||
}
|
||||
}
|
||||
.rr-filters { display: flex; gap: 8px; flex-shrink: 0; }
|
||||
.rr-search-input { width: 280px; }
|
||||
.rr-customer-select { width: 160px; }
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
/* PageHeader/SearchBar 接管 */
|
||||
|
||||
/* 状态徽章(浅底色块 - 4 种状态) */
|
||||
.rr-badge {
|
||||
|
||||
@ -484,13 +484,9 @@ 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; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px 0; }
|
||||
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
|
||||
.rr-page-actions { display: flex; gap: 8px; }
|
||||
/* PageHeader 复用通用组件样式 */
|
||||
.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-search :deep(.el-form-item) { margin-bottom: 0; margin-right: 12px; }
|
||||
/* search 由 SearchBar 接管 */
|
||||
.rr-tabs-row { margin-bottom: 16px; display: flex; align-items: center; }
|
||||
.rr-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
|
||||
.rr-tab { padding: 6px 16px; border-radius: var(--radius); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all 0.15s; }
|
||||
|
||||
@ -13,6 +13,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 ServiceGood {
|
||||
id: string
|
||||
@ -122,31 +124,20 @@ 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 @click="onExport">导出</el-button>
|
||||
<el-button type="primary" @click="onAdd">新增服务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader title="服务商品管理" :sub="`共 ${total} 个服务商品`">
|
||||
<el-button @click="onExport">导出</el-button>
|
||||
<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: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商">
|
||||
<el-input v-model="filters.enterpriseName" placeholder="供应商" clearable style="width: 200px" />
|
||||
</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: "服务名称", clearable: true },
|
||||
{ key: "enterpriseName", label: "供应商", type: "text", placeholder: "供应商", clearable: true }
|
||||
]'
|
||||
@search="onSearch"
|
||||
@reset="load"
|
||||
/>
|
||||
|
||||
<div class="rr-tabs-row">
|
||||
<div class="rr-tabs">
|
||||
@ -284,12 +275,7 @@ 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-page-actions { display: flex; gap: 8px; }
|
||||
.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-tabs-row { margin-bottom: 16px; }
|
||||
.rr-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: fit-content; }
|
||||
.rr-tab { padding: 6px 16px; border-radius: var(--radius); font-size: 13px; color: var(--ink-2); cursor: pointer; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user