fix: 修复只读模式下富文本编辑器的值无法显示的问题

This commit is contained in:
gaoyunqi
2024-04-18 11:22:52 +08:00
parent a5a8ba94c4
commit 7faa374524
2 changed files with 20 additions and 2 deletions

View File

@ -1,5 +1,8 @@
<template> <template>
<div class="field-readonly">{{ fieldValue }}</div> <div class="field-readonly">
<div v-if="schema.component === 'RichTextEditor'" v-html="htmlValue"> </div>
{{ fieldValue }}
</div>
</template> </template>
<script setup> <script setup>
@ -13,6 +16,7 @@
const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Text', 'InputTextArea', 'InputNumber']; const textComponents = ['Input', 'AutoCodeRule', 'DatePicker', 'TimePicker', 'Text', 'InputTextArea', 'InputNumber'];
const fieldValue = ref(genFieldValue(props.value)); const fieldValue = ref(genFieldValue(props.value));
const htmlValue = ref(getHtmlValue(props.value));
function parseRangeVal(val, component) { function parseRangeVal(val, component) {
if (component !== 'RangePicker' || !val) { if (component !== 'RangePicker' || !val) {
@ -21,10 +25,22 @@
return val.split(' ')[0]; return val.split(' ')[0];
} }
function getHtmlValue(val) {
const schema = props.schema;
const { component } = schema;
if (component === 'RichTextEditor') {
return val;
}
return ''
}
function genFieldValue(val) { function genFieldValue(val) {
const schema = props.schema; const schema = props.schema;
const model = props.model; const model = props.model;
const { componentProps, component } = schema; const { componentProps, component } = schema;
if (component === 'RichTextEditor') {
return '';
}
if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) { if (model && (component === 'TimeRangePicker' || component === 'RangePicker')) {
const fieldArr = schema.field.split(','); const fieldArr = schema.field.split(',');
const valStart = parseRangeVal(model[fieldArr[0]], component); const valStart = parseRangeVal(model[fieldArr[0]], component);
@ -46,12 +62,14 @@
() => props.value, () => props.value,
(newValue) => { (newValue) => {
fieldValue.value = genFieldValue(newValue); fieldValue.value = genFieldValue(newValue);
htmlValue.value = getHtmlValue(newValue);
} }
); );
watch( watch(
() => props.model, () => props.model,
(newValue) => { (newValue) => {
fieldValue.value = genFieldValue(newValue); fieldValue.value = genFieldValue(newValue);
htmlValue.value = getHtmlValue(newValue);
}, },
{ deep: true } { deep: true }
); );

View File

@ -417,7 +417,7 @@
} }
function readonlySupport(name) { function readonlySupport(name) {
return /Input|AutoCodeRule|DatePicker|Text|TimePicker|Range/.test(name); return /^(Input|AutoCodeRule|DatePicker|Text|TimePicker|Range|RichTextEditor)$/.test(name);
} }
function getShow(schema: FormSchema): boolean { function getShow(schema: FormSchema): boolean {