<script setup lang="ts">
|
import { SpreadSheet, Node } from '@antv/s2'
|
import { PropType } from 'vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { S2Event, SortFuncParam } from '@antv/s2'
|
import { SortUp, SortDown, Sort } from '@element-plus/icons-vue'
|
import { cloneDeep } from 'lodash-es'
|
|
const { t } = useI18n()
|
const props = defineProps({
|
table: {
|
type: Object as PropType<SpreadSheet>,
|
required: true
|
},
|
meta: {
|
type: Object as PropType<Node>,
|
required: true
|
}
|
})
|
const sortFunc = (sortParams: SortFuncParam) => {
|
if (!sortParams.sortMethod) {
|
return sortParams.data
|
}
|
const data = cloneDeep(sortParams.data)
|
return data.sort((a, b) => {
|
// 总计行放最后
|
if (a['SUMMARY']) {
|
return 1
|
}
|
const field = sortParams.sortFieldId
|
const aValue = a[field]
|
const bValue = b[field]
|
if (aValue === bValue) {
|
return 0
|
}
|
if (sortParams.sortMethod === 'asc') {
|
if (typeof aValue === 'number') {
|
return aValue - bValue
|
}
|
return aValue < bValue ? -1 : 1
|
}
|
if (typeof aValue === 'number') {
|
return bValue - aValue
|
}
|
return aValue > bValue ? -1 : 1
|
})
|
}
|
const sort = (type?) => {
|
props.table.updateSortMethodMap(props.meta.field, type, true)
|
props.table.emit(S2Event.RANGE_SORT, [
|
{
|
sortFieldId: props.meta.field,
|
sortMethod: type,
|
sortFunc
|
}
|
])
|
}
|
</script>
|
<template>
|
<el-col style="color: black">
|
<el-row align="middle">
|
<el-icon><SortUp /></el-icon>
|
<span class="sort-btn" @click="() => sort('asc')">{{ t('chart.asc') }}</span>
|
</el-row>
|
<el-row align="middle">
|
<el-icon><SortDown /></el-icon>
|
<span class="sort-btn" @click="() => sort('desc')">{{ t('chart.desc') }}</span>
|
</el-row>
|
<el-row align="middle">
|
<el-icon><Sort /></el-icon>
|
<span class="sort-btn" @click="() => sort()">{{ t('chart.default') }}</span>
|
</el-row>
|
</el-col>
|
</template>
|
<style scoped>
|
.sort-btn {
|
font-size: 14px;
|
cursor: pointer;
|
}
|
</style>
|
