app-preset-text.vue

<template>
    <div :class="curClassName" :style="curStyle">
        <!-- 直接内容类型 -->
        <template v-if="Object.is(contentType, 'RAW')">
            <template v-if="Object.is(renderMode, 'TEXT')">
                <span :style="contentStyle">{{ content }}</span>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING1')">
                <h1 :style="contentStyle">{{ content }}</h1>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING2')">
                <h2 :style="contentStyle">{{ content }}</h2>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING3')">
                <h3 :style="contentStyle">{{ content }}</h3>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING4')">
                <h4 :style="contentStyle">{{ content }}</h4>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING5')">
                <h5 :style="contentStyle">{{ content }}</h5>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING6')">
                <h6 :style="contentStyle">{{ content }}</h6>
            </template>
            <template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
                <p :style="contentStyle">{{ content }}</p>
            </template>
        </template>
        <!-- 图片类型 -->
        <template v-else-if="Object.is(contentType, 'IMAGE')">
            <img :style="contentStyle" v-if="imagePath" :src="imagePath" />
            <i :style="contentStyle" v-else :class="cssClass"></i>
        </template>
        <!-- HTML类型 -->
        <template v-else-if="Object.is(contentType, 'HTML')">
            <div :style="contentStyle" v-html="content" />
        </template>
        <!-- MARKDOWN类型 -->
        <template v-else-if="Object.is(contentType, 'MARKDOWN')">
            MARKDOWN暂未支持
            <!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
        </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppPresetText extends Vue {

    /**
     * 输入值
     *
     * @type {*}
     * @memberof AppPresetText
     */
    @Prop() public value!: any;

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppPresetText
     */
    @Prop() public name!: string;

    /**
     * 布局模型详情
     *
     * @type {*}
     * @memberof AppPresetTitle
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 图标
     *
     * @memberof AppPresetText
     */
    @Prop() public imageClass?: string;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppPresetText
     */
    @Prop({ default: 0 }) public index?: number;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppPresetText
     */
    get itemName() {
        return this.index ? `${this.name}_${this.index}` : this.name;
    }

    /**
     * 图片路径
     *
     * @memberof AppPresetText
     */
    get imagePath() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let imagePath = '';
            if (layoutModel.sysImage) {
                imagePath = layoutModel.sysImage.imagePath;
            }
            return imagePath;
        }

    }

    /**
     * 图标
     *
     * @memberof AppPresetTitle
     */
    get cssClass() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let cssClass = '';
            if (layoutModel.sysImage) {
                cssClass = layoutModel.sysImage.iconcls;
            }
            return cssClass;
        }
    }

    /**
     * 内容类型
     *
     * @memberof AppPresetTitle
     */
    get contentType() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.contentType || 'RAW';
        }
    }

    /**
     * 类名
     *
     * @memberof AppPresetTitle
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * 当前容器样式
     * 
     * @memberof AppPresetTitle
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 绘制模式
     * 
     * @memberof AppPresetTitle
     */
    get renderMode() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.renderMode || 'TEXT';
        }
    }

    /**
     * 内容
     *
     * @memberof AppPresetText
     */
    get content() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        let content = this.value;
        if (layoutModel && layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
            if (this.contentType == 'RAW') {
                content = layoutModel.rawContent;
            } else if (this.contentType == 'HTML') {
                content = layoutModel.htmlContent;
                const items = content.match(/\{{(.+?)\}}/g);
                if (items) {
                    items.forEach((item: string) => {
                        content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
                    });
                }
                content = content.replaceAll('&lt;', '<');
                content = content.replaceAll('&gt;', '>');
                content = content.replaceAll('&amp;nbsp;', ' ');
                content = content.replaceAll('&nbsp;', ' ');
            }
        }
        return content;
    }

    /**
     * 内容样式
     *
     * @memberof AppPresetText
     */
    get contentStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let contentStyle = layoutModel.contentStyle;
            if (layoutModel.predefinedType === 'STATIC_LABEL') {
                contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
            }
            return contentStyle;
        }
    }
}
</script>
<style lang="less">
@import './app-preset-text.less';
</style>