feat(tab): 显示搬前端,递归渲染子字段组件(替代后端 _label 串)

FieldTab.display 不再吃 displayLabel 字符串,改为渲染选中分支的子字段(各自 display 组件):
relation 子→查 refs 出可点名、number→数字、嵌套 tab→再递归。配 shrimp-server v0.6.9
的 refs 下钻,嵌套关联名自动有。ShrimpTable displayLabel 绑定去掉 tab。
This commit is contained in:
2026-06-29 21:30:48 +08:00
parent 3b0887b126
commit 35abfd831c
3 changed files with 35 additions and 21 deletions
+1 -1
View File
@@ -29,7 +29,7 @@
<slot :name="`column-${field.key}`" :row="row" :field="field">
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
:model-value="row[field.key]" mode="display"
v-bind="field.type === 'textarea' || field.type === 'tab' ? { displayLabel: row[field.key + '_label'] } : {}" />
v-bind="field.type === 'textarea' ? { displayLabel: row[field.key + '_label'] } : {}" />
</slot>
</template>
</el-table-column>
+33 -19
View File
@@ -1,13 +1,15 @@
<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>
<!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
<span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
<span v-else class="tab-display">
<span class="tab-branch">{{ branchLabel }}</span>
<span v-for="childField in selectedTab?.fields || []" :key="childField.key" class="tab-child">
<span class="tab-child-label">{{ vueAdmin.t(childField.label) }}:</span>
<component :is="vueAdmin.getFieldComponent(moduleKey, childField.type, childField.key)"
:field="childField" :model-value="innerValue[childField.key]" mode="display" />
</span>
</span>
</template>
<div v-else class="field-tab">
<el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
@@ -39,7 +41,6 @@ const props = defineProps<{
modelValue: any
mode: 'display' | 'edit' | 'filter'
disabled?: boolean
displayLabel?: string
}>()
const emit = defineEmits<{
@@ -48,11 +49,9 @@ const emit = defineEmits<{
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 branchLabel = computed(() => {
const tab = selectedTab.value
return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
})
const selectedTab = computed(() => {
@@ -105,11 +104,26 @@ onMounted(() => {
<style scoped>
.tab-display {
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
}
.tab-branch {
font-weight: 600;
color: var(--el-color-primary);
}
.tab-child {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tab-child-label {
color: var(--el-text-color-secondary);
font-size: 12px;
}
.field-tab {