feat(web-admin): show dual carets on CRM datetime column headers.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
58b5d9d7de
commit
23d23d0b86
2 files changed
+59
No files matched your search
@@ -569,4 +569,33 @@
|
||||
.col-header-with-filter__label.is-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-header-sort-pair {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.col-header-sort-btn {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.col-header-sort-btn:hover {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.col-header-sort-btn.on {
|
||||
color: #059669;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,28 @@
|
||||
class="col-header-with-filter__label"
|
||||
:class="{ 'is-left': align === 'left', 'is-right': align === 'right' }"
|
||||
>{{ label }}</span>
|
||||
<span
|
||||
v-if="showSort"
|
||||
class="col-header-sort-pair"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="col-header-sort-btn"
|
||||
:class="{ on: sortApi.isSortActive(prop, 'asc') }"
|
||||
title="升序"
|
||||
aria-label="升序"
|
||||
@click="sortApi.setSort(prop, 'asc')"
|
||||
>▲</button>
|
||||
<button
|
||||
type="button"
|
||||
class="col-header-sort-btn"
|
||||
:class="{ on: sortApi.isSortActive(prop, 'desc') }"
|
||||
title="降序"
|
||||
aria-label="降序"
|
||||
@click="sortApi.setSort(prop, 'desc')"
|
||||
>▼</button>
|
||||
</span>
|
||||
<ColumnHeaderFilter
|
||||
v-if="api && def"
|
||||
:prop="prop"
|
||||
@@ -41,9 +63,17 @@
|
||||
)
|
||||
|
||||
const api = inject<FilterApi | null>(props.injectKey, null)
|
||||
const sortApi = inject<{
|
||||
setSort: (prop: string, order: 'asc' | 'desc') => void
|
||||
isSortActive: (prop: string, order?: 'asc' | 'desc') => boolean
|
||||
} | null>('crmColumnSort', null)
|
||||
|
||||
const def = computed(() => api?.defMap.get(props.prop))
|
||||
const label = computed(() => def.value?.label || props.prop)
|
||||
const options = computed(() =>
|
||||
def.value?.type === 'enum' ? api?.enumOptionsFor(props.prop) : undefined
|
||||
)
|
||||
const showSort = computed(
|
||||
() => Boolean(sortApi && def.value?.type === 'datetime')
|
||||
)
|
||||
</script>
|
||||
Reference in new issue
Block a user