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:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user