|
|
@@ -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>
|