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 属性,只能手动清空输入框、无按钮。
79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<template>
|
|
<template v-if="mode === 'display'">
|
|
<template v-if="Array.isArray(modelValue)">{{ modelValue.join('\n') || '-' }}</template>
|
|
<template v-else-if="!isLong">{{ text }}</template>
|
|
<div v-else class="textarea-cell">
|
|
<span class="text" :class="{ collapsed: !expanded }">{{ text }}</span>
|
|
<el-link type="primary" underline="never" class="toggle" @click.stop="expanded = !expanded">
|
|
{{ expanded ? $t('base.collapse') : $t('base.expand') }}
|
|
</el-link>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="field.multiple">
|
|
<el-alert type="warning" :title="$t('table.textareaMultipleNotSupported')" :closable="false" />
|
|
</template>
|
|
<el-input
|
|
v-else
|
|
:type="mode === 'filter' ? 'text' : 'textarea'"
|
|
:rows="mode === 'filter' ? undefined : 3"
|
|
:model-value="modelValue"
|
|
@update:model-value="$emit('update:modelValue', $event)"
|
|
:disabled="disabled"
|
|
:clearable="!field.required"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
field: any
|
|
modelValue: any
|
|
mode: 'display' | 'edit' | 'filter'
|
|
disabled?: boolean
|
|
displayLabel?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const text = computed(() => {
|
|
const v = props.displayLabel ?? props.modelValue
|
|
return v == null || v === '' ? '-' : String(v)
|
|
})
|
|
|
|
const isLong = computed(() => {
|
|
const s = text.value
|
|
return s.length > 40 || s.includes('\n')
|
|
})
|
|
|
|
const expanded = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.textarea-cell {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
.text {
|
|
flex: 1;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
min-width: 0;
|
|
}
|
|
.text.collapsed {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
.toggle {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|