feat(tab): 类型可清空(clearable=!required)+ 空状态
FieldTab: 类型 select 非必填可清空 → type=null、整个 tab 置空、分支消失。去掉 innerValue/ initValue/onMounted 那套强制默认(空状态由 isEmpty 配 required 决定)。配合后端递归 isEmpty。
This commit is contained in:
@@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<template v-if="mode === 'display'">
|
||||
<!-- 显示=前端递归渲染:分支标签 + 选中分支的子字段(各自 display 组件,relation 查 refs/可点、嵌套 tab 再递归) -->
|
||||
<span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
|
||||
<!-- 显示=前端递归渲染:分支标签 + 选中分支子字段。没选 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="innerValue[childField.key]" mode="display" />
|
||||
: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">
|
||||
<el-select :model-value="innerValue.type" @update:model-value="onTypeChange" :disabled="disabled">
|
||||
<!-- 非必填可清空 → 清空后 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>
|
||||
@@ -22,7 +24,7 @@
|
||||
<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]"
|
||||
:model-value="(modelValue || {})[childField.key]"
|
||||
@update:model-value="onChildChange(childField.key, $event)"
|
||||
mode="edit"
|
||||
:disabled="disabled" />
|
||||
@@ -33,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, onMounted } from 'vue'
|
||||
import { computed, inject } from 'vue'
|
||||
import { vueAdmin } from '../../VueAdmin'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -49,37 +51,18 @@ const emit = defineEmits<{
|
||||
|
||||
const moduleKey = inject('shrimpModuleKey', '')
|
||||
|
||||
const branchLabel = computed(() => {
|
||||
const tab = selectedTab.value
|
||||
return tab ? vueAdmin.t(tab.label) : String(props.modelValue?.type ?? '')
|
||||
})
|
||||
const selectedTab = computed(() =>
|
||||
props.field.tabs?.find((t: any) => t.key === props.modelValue?.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
|
||||
}
|
||||
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) => {
|
||||
@@ -91,15 +74,8 @@ function onTypeChange(type: any) {
|
||||
}
|
||||
|
||||
function onChildChange(key: string, value: any) {
|
||||
emit('update:modelValue', { ...innerValue.value, [key]: value })
|
||||
emit('update:modelValue', { ...(props.modelValue || {}), [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>
|
||||
|
||||
Reference in New Issue
Block a user