wc24
c49663e16e
- 新增 FieldObject.vue(嵌套字段组,display/edit 递归渲染)、FieldArray.vue (元素列表,增删 + 每项递归渲染 item;第一版从简:无排序拖拽)。靠 glob 自动注册成 object/array。 - 删 FieldJson.vue(json 类型退场,object 取代)。 - 版本与 shrimp-server 统一为 0.7.0。
108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
||
<!-- 显示：逐元素递归渲染 item 的 display 组件 -->
|
||
<template v-if="mode === 'display'">
|
||
<span v-if="!items.length">-</span>
|
||
<span v-else class="arr-display">
|
||
<span v-for="(el, i) in items" :key="i" class="arr-chip">
|
||
<component :is="vueAdmin.getFieldComponent(moduleKey, field.item.type, '')"
|
||
:field="field.item" :model-value="el" mode="display" />
|
||
</span>
|
||
</span>
|
||
</template>
|
||
<!-- 编辑：每项一行(标题 + item 编辑组件 + 删除),底部添加。第一版从简:无排序拖拽 -->
|
||
<div v-else class="field-array">
|
||
<div v-for="(el, i) in items" :key="i" class="arr-row">
|
||
<div class="arr-head">
|
||
<span class="arr-idx">{{ itemTitle }} #{{ i + 1 }}</span>
|
||
<el-button type="danger" text size="small" @click="removeAt(i)">删除</el-button>
|
||
</div>
|
||
<component :is="vueAdmin.getFieldComponent(moduleKey, field.item.type, '')"
|
||
:field="field.item" :model-value="el"
|
||
@update:model-value="setAt(i, $event)" mode="edit" :disabled="disabled" />
|
||
</div>
|
||
<el-button type="primary" text @click="addOne" :disabled="disabled">+ 添加{{ itemTitle }}</el-button>
|
||
</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 items = computed<any[]>(() => Array.isArray(props.modelValue) ? props.modelValue : [])
|
||
const itemTitle = computed(() => vueAdmin.t(props.field.item?.label) || '项')
|
||
|
||
function setAt(i: number, value: any) {
|
||
const arr = items.value.slice()
|
||
arr[i] = value
|
||
emit('update:modelValue', arr)
|
||
}
|
||
function removeAt(i: number) {
|
||
const arr = items.value.slice()
|
||
arr.splice(i, 1)
|
||
emit('update:modelValue', arr)
|
||
}
|
||
function addOne() {
|
||
emit('update:modelValue', [...items.value, defaultOf(props.field.item)])
|
||
}
|
||
|
||
/** 按 item schema 递归生成一个默认元素 */
|
||
function defaultOf(schema: any): any {
|
||
if (!schema) return null
|
||
if (schema.defaultValue !== undefined) return schema.defaultValue
|
||
if (schema.type === 'object') {
|
||
const obj: any = {}
|
||
for (const f of schema.fields || []) obj[f.key] = defaultOf(f)
|
||
return obj
|
||
}
|
||
if (schema.type === 'array') return []
|
||
if (schema.type === 'number') return 0
|
||
if (schema.type === 'boolean') return false
|
||
return null
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.arr-display {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 4px 12px;
|
||
}
|
||
|
||
.field-array {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.arr-row {
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--el-border-color-lighter);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.arr-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.arr-idx {
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
</style>
|