pagetype列表页拆分过滤栏和操作栏为独立的组件
This commit is contained in:
parent
7aa2b10cdd
commit
0cfb0101a3
@ -57,10 +57,10 @@
|
||||
}"
|
||||
/>
|
||||
<!-- 默认过滤栏 -->
|
||||
<FilterBar
|
||||
<GenericListPageFilterBar
|
||||
v-else-if="!isSinglePage && metaFields.length > 0"
|
||||
:fields="metaFields"
|
||||
v-model="filters"
|
||||
v-model:filters="filters"
|
||||
@filter-change="onFilterChange"
|
||||
/>
|
||||
|
||||
@ -148,17 +148,15 @@
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<template v-else>
|
||||
<button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
|
||||
<i class="fa fa-eye"></i>
|
||||
</button>
|
||||
<button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
|
||||
<i class="fa fa-edit"></i>
|
||||
</button>
|
||||
<button class="action-btn delete-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</template>
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="card"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -245,17 +243,15 @@
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<template v-else>
|
||||
<button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
|
||||
<i class="fa fa-eye"></i>
|
||||
</button>
|
||||
<button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
|
||||
<i class="fa fa-edit"></i>
|
||||
</button>
|
||||
<button class="action-btn delete-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</template>
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="list"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -280,8 +276,9 @@ import { get_session_api_headers } from '@/shared/api/auth'
|
||||
import { usePageTypeSlug } from '@/shared/utils/slug'
|
||||
import { isSinglePageType } from '@/shared/utils/pagetype'
|
||||
import SinglePageDetail from './SinglePageDetail.vue'
|
||||
import FilterBar from '@/core/components/FilterBar.vue'
|
||||
import GenericListPageToolBar from './GenericListPageToolBar.vue'
|
||||
import GenericListPageFilterBar from './GenericListPageFilterBar.vue'
|
||||
import GenericListPageActions from './GenericListPageActions.vue'
|
||||
import {
|
||||
resolvePagetypeListOverride,
|
||||
resolvePagetypeListToolbarOverride,
|
||||
@ -1419,42 +1416,6 @@ function formatDisplayValue(value: any, fieldName: string) {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
background: #fafbfc;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.delete-btn:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 工具栏容器样式（保留用于布局） */
|
||||
.header-right { display: flex; align-items: center; gap: 12px; }
|
||||
|
||||
@ -1558,6 +1519,7 @@ function formatDisplayValue(value: any, fieldName: string) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 操作列容器样式（用于网格布局，按钮样式由 GenericListPageActions 组件处理） */
|
||||
.col-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1565,31 +1527,6 @@ function formatDisplayValue(value: any, fieldName: string) {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.delete-btn:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 布尔值样式 */
|
||||
.boolean-true {
|
||||
color: #059669;
|
||||
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div :class="containerClass">
|
||||
<!-- 操作按钮 -->
|
||||
<button class="action-btn" @click.stop="handleView" :title="t('View')">
|
||||
<i class="fa fa-eye"></i>
|
||||
</button>
|
||||
<button class="action-btn" @click.stop="handleEdit" :title="t('Edit')">
|
||||
<i class="fa fa-edit"></i>
|
||||
</button>
|
||||
<button class="action-btn delete-btn" @click.stop="handleDelete" :title="t('Delete')">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { t } from '@/shared/i18n'
|
||||
|
||||
interface Props {
|
||||
row: any
|
||||
entity: string
|
||||
viewMode?: 'card' | 'list'
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'view', row: any): void
|
||||
(e: 'edit', row: any): void
|
||||
(e: 'delete', row: any): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 根据视图模式决定容器类名
|
||||
const containerClass = computed(() => {
|
||||
return props.viewMode === 'card' ? 'card-actions' : 'col-actions'
|
||||
})
|
||||
|
||||
function handleView() {
|
||||
emit('view', props.row)
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
emit('edit', props.row)
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
emit('delete', props.row)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 卡片视图操作按钮容器 */
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
background: #fafbfc;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* 列表视图操作按钮容器 */
|
||||
.col-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 操作按钮通用样式 */
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.delete-btn:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 列表视图中的按钮稍小一些 */
|
||||
.col-actions .action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<FilterBar
|
||||
v-if="fields.length > 0"
|
||||
:fields="fields"
|
||||
:model-value="filters"
|
||||
@update:model-value="handleUpdateFilters"
|
||||
@filter-change="handleFilterChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FilterBar from '@/core/components/FilterBar.vue'
|
||||
|
||||
interface Props {
|
||||
fields: any[]
|
||||
filters: Record<string, any>
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:filters', value: Record<string, any>): void
|
||||
(e: 'filter-change'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
function handleUpdateFilters(value: Record<string, any>) {
|
||||
emit('update:filters', value)
|
||||
}
|
||||
|
||||
function handleFilterChange() {
|
||||
emit('filter-change')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 过滤栏样式由 FilterBar 组件内部处理 */
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user