多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

224 lines
8.2 KiB

<script setup lang="ts">
import { onMounted } from '@vue/runtime-core'
import { type ColumnType, type LinkToAnotherRecordType, RelationTypes, type TableType, type UITypes } from 'nocodb-sdk'
import { getAvailableRollupForUiType, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
const props = defineProps<{
value: any
}>()
const emit = defineEmits(['update:value'])
const vModel = useVModel(props, 'value', emit)
const meta = inject(MetaInj, ref())
const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit } = useColumnCreateStoreOrThrow()
const baseStore = useBase()
const { tables } = storeToRefs(baseStore)
const { metas, getMeta } = useMetas()
const { t } = useI18n()
setAdditionalValidations({
fk_relation_column_id: [{ required: true, message: t('general.required') }],
fk_rollup_column_id: [{ required: true, message: t('general.required') }],
rollup_function: [{ required: true, message: t('general.required') }],
})
if (!vModel.value.fk_relation_column_id) vModel.value.fk_relation_column_id = null
if (!vModel.value.fk_rollup_column_id) vModel.value.fk_rollup_column_id = null
if (!vModel.value.rollup_function) vModel.value.rollup_function = null
const refTables = computed(() => {
if (!tables.value || !tables.value.length || !meta.value || !meta.value.columns) {
return []
}
const _refTables = meta.value.columns
.filter(
(c: ColumnType) =>
isLinksOrLTAR(c) &&
(c.colOptions as LinkToAnotherRecordType).type &&
![RelationTypes.BELONGS_TO, RelationTypes.ONE_TO_ONE].includes(
(c.colOptions as LinkToAnotherRecordType).type as RelationTypes,
) &&
!c.system &&
c.source_id === meta.value?.source_id,
)
.map((c: ColumnType) => ({
col: c.colOptions,
column: c,
...tables.value.find((t) => t.id === (c.colOptions as any)?.fk_related_model_id),
}))
return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]
})
const selectedTable = computed(() => {
return refTables.value.find((t) => t.column.id === vModel.value.fk_relation_column_id)
})
const columns = computed<ColumnType[]>(() => {
if (!selectedTable.value?.id) {
return []
}
return metas.value[selectedTable.value.id]?.columns.filter(
(c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && (!isSystemColumn(c) || c.pk),
)
})
onMounted(() => {
if (isEdit.value) {
vModel.value.fk_relation_column_id = vModel.value.colOptions?.fk_relation_column_id
vModel.value.fk_rollup_column_id = vModel.value.colOptions?.fk_rollup_column_id
vModel.value.rollup_function = vModel.value.colOptions?.rollup_function
}
})
const onRelationColChange = async () => {
if (selectedTable.value) {
await getMeta(selectedTable.value.id)
}
vModel.value.fk_rollup_column_id = columns.value?.[0]?.id
onDataTypeChange()
}
const cellIcon = (column: ColumnType) =>
h(isVirtualCol(column) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
columnMeta: column,
})
const aggFunctionsList: Ref<Record<string, string>[]> = ref([])
const allFunctions = [
{ text: t('datatype.Count'), value: 'count' },
{ text: t('general.min'), value: 'min' },
{ text: t('general.max'), value: 'max' },
{ text: t('general.avg'), value: 'avg' },
{ text: t('general.sum'), value: 'sum' },
{ text: t('general.countDistinct'), value: 'countDistinct' },
{ text: t('general.sumDistinct'), value: 'sumDistinct' },
{ text: t('general.avgDistinct'), value: 'avgDistinct' },
]
const availableRollupPerColumn = computed(() => {
const fnMap: Record<string, { text: string; value: string }[]> = {}
columns.value?.forEach((column) => {
if (!column?.id) return
fnMap[column.id] = allFunctions.filter((func) => getAvailableRollupForUiType(column.uidt as UITypes).includes(func.value))
})
return fnMap
})
const filteredColumns = computed(() => {
return columns.value?.filter((column) => {
return column.id && availableRollupPerColumn.value[column.id as string]?.length
})
})
watch(
() => vModel.value.fk_rollup_column_id,
() => {
const childFieldColumn = columns.value?.find((column: ColumnType) => column.id === vModel.value.fk_rollup_column_id)
aggFunctionsList.value = availableRollupPerColumn.value[childFieldColumn?.id as string] || []
if (aggFunctionsList.value.length && !aggFunctionsList.value.find((func) => func.value === vModel.value.rollup_function)) {
// when the previous roll up function was numeric type and the current child field is non-numeric
// reset rollup function with a non-numeric type
vModel.value.rollup_function = aggFunctionsList.value[0].value
}
},
)
</script>
<template>
<div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
<div class="w-full flex flex-row space-x-2">
<a-form-item class="flex w-1/2 pb-2" :label="$t('labels.links')" v-bind="validateInfos.fk_relation_column_id">
<a-select
v-model:value="vModel.fk_relation_column_id"
dropdown-class-name="!w-64 nc-dropdown-relation-table !rounded-md"
@change="onRelationColChange"
>
<a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
<div class="flex gap-2 w-full justify-between truncate items-center">
<NcTooltip class="font-semibold truncate min-w-1/2" show-on-truncate-only>
<template #title>{{ table.column.title }}</template>
{{ table.column.title }}</NcTooltip
>
<div class="inline-flex items-center truncate gap-2">
<div class="text-[0.65rem] flex-1 truncate text-gray-600 nc-relation-details">
<span class="uppercase">{{ table.col.type }}</span>
<span class="truncate">{{ table.title || table.table_name }}</span>
</div>
<component
:is="iconMap.check"
v-if="vModel.fk_relation_column_id === table.col.fk_column_id"
id="nc-selected-item-icon"
class="text-primary w-4 h-4"
/>
</div>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
<a-select
v-model:value="vModel.fk_rollup_column_id"
name="fk_rollup_column_id"
dropdown-class-name="nc-dropdown-relation-column !rounded-xl"
@change="onDataTypeChange"
>
<a-select-option v-for="(column, index) of filteredColumns" :key="index" :value="column.id">
<div class="flex gap-2 truncate items-center">
<div class="flex items-center flex-1 truncate font-semibold">
<component :is="cellIcon(column)" :column-meta="column" />
<div class="truncate flex-1">{{ column.title }}</div>
</div>
<component
:is="iconMap.check"
v-if="vModel.fk_rollup_column_id === column.id"
id="nc-selected-item-icon"
class="text-primary w-4 h-4"
/>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<a-form-item :label="$t('labels.aggregateFunction')" v-bind="validateInfos.rollup_function">
<a-select
v-model:value="vModel.rollup_function"
dropdown-class-name="nc-dropdown-rollup-function"
class="!mt-0.5"
@change="onDataTypeChange"
>
<a-select-option v-for="(func, index) of aggFunctionsList" :key="index" :value="func.value">
<div class="flex gap-2 justify-between items-center">
{{ func.text }}
<component
:is="iconMap.check"
v-if="vModel.rollup_function === func.value"
id="nc-selected-item-icon"
class="text-primary w-4 h-4"
/>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
</template>
<style scoped>
:deep(.ant-select-selector .ant-select-selection-item .nc-relation-details) {
@apply hidden;
}
</style>