wc24
bba08dadcc
之前 Select/Relation 编辑态根本没 clearable(可选也删不掉),String/Textarea/Date 又恒清。 现统一 String/Textarea/Select/Relation/Date 的 edit 控件 clearable=!required:可选给清空、必填不给。 Relation 清空归一成 null(el-select 单选清空发 '',ObjectId 存 '' 会 cast 报错)。 已知例外:Number 用 el-input-number 无 clearable 属性,只能手动清空输入框、无按钮。
67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<template>
|
|
<template v-if="mode === 'display'">
|
|
<template v-if="Array.isArray(modelValue)"
|
|
>{{ displayLabels.join(', ') || '-' }}</template
|
|
>
|
|
<template v-else>{{ displayText }}</template>
|
|
</template>
|
|
<el-select
|
|
v-else-if="mode === 'filter'"
|
|
:model-value="modelValue"
|
|
@update:model-value="$emit('update:modelValue', $event)"
|
|
multiple
|
|
clearable
|
|
style="width: 100%"
|
|
>
|
|
<el-option v-for="opt in resolvedOptions" :key="opt.value" :label="vueAdmin.t(opt.label)" :value="opt.value" />
|
|
</el-select>
|
|
<el-select
|
|
v-else
|
|
:model-value="modelValue"
|
|
@update:model-value="$emit('update:modelValue', $event)"
|
|
:disabled="disabled"
|
|
:multiple="field.multiple"
|
|
:clearable="!field.required"
|
|
style="width: 100%"
|
|
>
|
|
<el-option v-for="opt in resolvedOptions" :key="opt.value" :label="vueAdmin.t(opt.label)" :value="opt.value" />
|
|
</el-select>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { vueAdmin } from '../../VueAdmin'
|
|
|
|
const props = defineProps<{
|
|
field: any
|
|
modelValue: any
|
|
mode: 'display' | 'edit' | 'filter'
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const resolvedOptions = computed(() => {
|
|
const opts = props.field.options
|
|
if (typeof opts === 'string') {
|
|
return vueAdmin.globalOptions[opts] || []
|
|
}
|
|
return opts || []
|
|
})
|
|
|
|
const displayText = computed(() => {
|
|
const label = resolvedOptions.value.find((o: any) => o.value === props.modelValue)?.label
|
|
return label ? vueAdmin.t(label) : (props.modelValue ?? '-')
|
|
})
|
|
|
|
const displayLabels = computed(() => {
|
|
if (!Array.isArray(props.modelValue)) return []
|
|
return props.modelValue.map((val: any) => {
|
|
const opt = resolvedOptions.value.find((o: any) => o.value === val)
|
|
return opt ? vueAdmin.t(opt.label) : val
|
|
})
|
|
})
|
|
</script>
|