shrimp-admin/src/components/fields/FieldTab.vue

<template>
    <template v-if="mode === 'display'">
        <!-- 表格列展示后端算好的 stringify 文本(displayLabel=${key}_label);本体仍是对象,供编辑/逻辑用 -->
        <el-tooltip v-if="displayLabel" :content="String(displayLabel)" placement="top">
            <span class="tab-display">{{ displayLabel }}</span>
        </el-tooltip>
        <span v-else-if="!modelValue || typeof modelValue !== 'object'">-</span>
        <el-tooltip v-else :content="JSON.stringify(modelValue, null, 2)" placement="top">
            <span class="tab-display">{{ displayText }}</span>
        </el-tooltip>
    </template>
    <div v-else class="field-tab">
        <el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
            <el-select :model-value="innerValue.type" @update:model-value="onTypeChange" :disabled="disabled">
                <el-option v-for="tab in field.tabs" :key="tab.key" :label="vueAdmin.t(tab.label)" :value="tab.key" />
            </el-select>
        </el-form-item>
        <div v-if="selectedTab?.fields?.length" class="tab-fields">
            <template v-for="childField in selectedTab.fields" :key="childField.key">
                <el-form-item :label="vueAdmin.t(childField.label)" :required="childField.required">
                    <component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
                        :field="childField"
                        :model-value="innerValue[childField.key]"
                        @update:model-value="onChildChange(childField.key, $event)"
                        mode="edit"
                        :disabled="disabled" />
                </el-form-item>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, inject, onMounted } from 'vue'
import { vueAdmin } from '../../VueAdmin'

const props = defineProps<{
    field: any
    modelValue: any
    mode: 'display' | 'edit' | 'filter'
    disabled?: boolean
    displayLabel?: string
}>()

const emit = defineEmits<{
    'update:modelValue': [value: any]
}>()

const moduleKey = inject('shrimpModuleKey', '')

const displayText = computed(() => {
    if (!props.modelValue || typeof props.modelValue !== 'object') return '-'
    const type = props.modelValue.type
    const tab = props.field.tabs?.find((t: any) => t.key === type)
    return tab ? vueAdmin.t(tab.label) : String(type)
})

const selectedTab = computed(() => {
    const type = props.modelValue?.type
    return props.field.tabs?.find((t: any) => t.key === type)
})

const innerValue = computed(() => {
    const val = props.modelValue
    if (val != null && typeof val === 'object' && Object.keys(val).length > 0) {
        return val
    }
    return initValue()
})

function initValue() {
    const firstTab = props.field.tabs?.[0]
    if (!firstTab) return {}
    const obj: any = { type: firstTab.key }
    firstTab.fields?.forEach((f: any) => {
        if (f.defaultValue !== undefined) {
            obj[f.key] = typeof f.defaultValue === 'function' ? f.defaultValue() : f.defaultValue
        }
    })
    return obj
}

function onTypeChange(type: any) {
    const tab = props.field.tabs?.find((t: any) => t.key === type)
    const obj: any = { type }
    tab?.fields?.forEach((f: any) => {
        if (f.defaultValue !== undefined) {
            obj[f.key] = typeof f.defaultValue === 'function' ? f.defaultValue() : f.defaultValue
        }
    })
    emit('update:modelValue', obj)
}

function onChildChange(key: string, value: any) {
    emit('update:modelValue', { ...innerValue.value, [key]: value })
}

onMounted(() => {
    const val = props.modelValue
    if (val == null || val === '' || (typeof val === 'object' && Object.keys(val).length === 0)) {
        emit('update:modelValue', initValue())
    }
})
</script>

<style scoped>
.tab-display {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-tab {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-fields {
    padding-left: 16px;
    border-left: 2px solid var(--el-border-color-lighter);
}
</style>