feat!: object/array 字段组件 + 去掉 FieldJson + 版本统一 0.7.0
- 新增 FieldObject.vue(嵌套字段组,display/edit 递归渲染)、FieldArray.vue (元素列表,增删 + 每项递归渲染 item;第一版从简:无排序拖拽)。靠 glob 自动注册成 object/array。 - 删 FieldJson.vue(json 类型退场,object 取代)。 - 版本与 shrimp-server 统一为 0.7.0。
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<!-- 显示:递归渲染各子字段的 display 组件(relation 子查 refs) -->
|
||||
<template v-if="mode === 'display'">
|
||||
<span v-if="!modelValue || typeof modelValue !== 'object'">-</span>
|
||||
<span v-else class="obj-display">
|
||||
<span v-for="f in field.fields || []" :key="f.key" class="obj-child">
|
||||
<span class="obj-label">{{ vueAdmin.t(f.label) }}:</span>
|
||||
<component :is="vueAdmin.getFieldComponent(moduleKey, f.type, f.key)"
|
||||
:field="f" :model-value="(modelValue || {})[f.key]" mode="display" />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 编辑:每个子字段一行,递归渲染 edit 组件 -->
|
||||
<div v-else class="field-object">
|
||||
<el-form-item v-for="f in field.fields || []" :key="f.key" :label="vueAdmin.t(f.label)" :required="f.required">
|
||||
<component :is="vueAdmin.getFieldComponent(moduleKey, f.type, f.key)"
|
||||
:field="f" :model-value="(modelValue || {})[f.key]"
|
||||
@update:model-value="onChild(f.key, $event)" mode="edit" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { 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', '')
|
||||
|
||||
function onChild(key: string, value: any) {
|
||||
emit('update:modelValue', { ...(props.modelValue || {}), [key]: value })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.obj-display {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px 10px;
|
||||
}
|
||||
|
||||
.obj-child {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.obj-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.field-object {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-left: 12px;
|
||||
border-left: 2px solid var(--el-border-color-lighter);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user