wc24
09ad43007a
FieldTab: 类型 select 非必填可清空 → type=null、整个 tab 置空、分支消失。去掉 innerValue/ initValue/onMounted 那套强制默认(空状态由 isEmpty 配 required 决定)。配合后端递归 isEmpty。
116 lines
3.9 KiB
Vue
116 lines
3.9 KiB
Vue
<template>
|
|
<template v-if="mode === 'display'">
|
|
<!-- 显示=前端递归渲染:分支标签 + 选中分支子字段。没选 type(清空) → 显示 - -->
|
|
<span v-if="!modelValue || typeof modelValue !== 'object' || modelValue.type == null">-</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="(modelValue || {})[childField.key]" mode="display" />
|
|
</span>
|
|
</span>
|
|
</template>
|
|
<div v-else class="field-tab">
|
|
<el-form-item :label="vueAdmin.t(field.label) + ' - 类型'" :required="field.required">
|
|
<!-- 非必填可清空 → 清空后 type=null、整个 tab 置空、下面分支消失 -->
|
|
<el-select :model-value="modelValue?.type ?? undefined" @update:model-value="onTypeChange"
|
|
:clearable="!field.required" :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="(modelValue || {})[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 } from 'vue'
|
|
import { vueAdmin } from '../../VueAdmin'
|
|
|
|
const props = defineProps<{
|
|
field: any
|
|
modelValue: any
|
|
mode: 'display' | 'edit' | 'filter'
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const moduleKey = inject('shrimpModuleKey', '')
|
|
|
|
const selectedTab = computed(() =>
|
|
props.field.tabs?.find((t: any) => t.key === props.modelValue?.type)
|
|
)
|
|
|
|
const branchLabel = computed(() => selectedTab.value ? vueAdmin.t(selectedTab.value.label) : '')
|
|
|
|
function onTypeChange(type: any) {
|
|
// 清空(非必填) → 整个 tab 置空：type=null、空状态、分支消失
|
|
if (type == null || type === '') {
|
|
emit('update:modelValue', null)
|
|
return
|
|
}
|
|
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', { ...(props.modelValue || {}), [key]: value })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tab-display {
|
|
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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tab-fields {
|
|
padding-left: 16px;
|
|
border-left: 2px solid var(--el-border-color-lighter);
|
|
}
|
|
</style>
|