<template> <codelist v-if="codeList && !showSourceMode" :codeList="codeList" :value="value" :data="data" ref="codelist" :localContext="localContext" :localParam="localParam" :context="context" :viewparams="viewparams" ></codelist> <app-upload-file-info v-else-if=" Object.is(this.editorType, 'PICTURE') || Object.is(this.editorType, 'PICTURE_ONE') || Object.is(this.editorType, 'FILEUPLOADER') " :value="value" :name="name" /> <span class="app-span" :title="text" v-else> <span v-if="(!text && (text !== 0) && !unitName) && Object.is('STYLE1', noValueShowMode)">- - -</span> <span v-else-if="textFormat"> <span class="app-span-value-format" v-format="textFormat">{{text}}</span> </span> <span v-else style="white-space:pre-line"> {{ text + ' ' + (unitName ? unitName : '') }} </span> </span> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import moment from 'moment'; @Component({}) export default class AppSpan extends Vue { /** * 当前值 * * @type {*} * @memberof AppSpan */ @Prop() public value?: any; /** * 数据类型 * * @type {string} * @memberof AppSpan */ @Prop() public dataType?: string; /** * 单位名称 * * @type {string} * @memberof AppSpan */ @Prop({ default: '' }) public unitName?: string; /** * 精度 * * @type {number} * @memberof AppSpan */ @Prop({ default: '2' }) public precision?: number; /** * 数据值格式化 * * @type {string} * @memberof AppSpan */ @Prop() public valueFormat!: string; /** * 当前表单项名称 * * @type {*} * @memberof AppSpan */ @Prop() public name?: any; /** * 代码表模型 * * @type {*} * @memberof AppSpan */ @Prop() public codeList?: any; /** * 显示模式(为true不做翻译,直接显示值,配合codelist使用) * * @type {string} * @memberof AppSpan */ @Prop({default:false}) public showSourceMode?: boolean; /** * 传入表单数据 * * @type {*} * @memberof AppSpan */ @Prop() public data?: any; /** * 局部上下文导航参数 * * @type {any} * @memberof AppSpan */ @Prop() public localContext!: any; /** * 局部导航参数 * * @type {any} * @memberof AppSpan */ @Prop() public localParam!: any; /** * 视图上下文 * * @type {*} * @memberof AppSpan */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof AppSpan */ @Prop() public viewparams!: any; /** * 无值显示模式 * * @type {boolean} * @memberof AppSpan */ @Prop({default: 'DEFAULT'}) public noValueShowMode?: 'DEFAULT' | 'STYLE1'; /** * 监控表单属性 data 值 * * @memberof AppSpan */ @Watch('value') onDataChange(newVal: any, oldVal: any) { if (newVal !== oldVal) { this.load(); } } /** * 显示值 * @type {*} * @memberof AppSpan */ public text: any = ''; /** * 显示值格式 * @type {*} * @memberof AppSpan */ public textFormat: any = ''; /** * 编辑器类型 * * @type {string} * @memberof AppSpan */ @Prop() public editorType?: string; /** * vue 生命周期 * * @memberof AppSpan */ public created() { this.load(); } /** * 处理数据 * * @memberof AppSpan */ public load() { if (this.codeList && !this.showSourceMode) { return; //代码表走codelist组件 } else if (this.editorType === 'ADDRESSPICKUP') { if (this.$util.isEmpty(this.value)) { this.text = ''; } else { JSON.parse(this.value).forEach((item: any, index: number) => { this.text += index === 0 ? item.srfmajortext : ',' + item.srfmajortext; }); } } else { if (this.$util.isEmpty(this.value)) { this.text = ''; } else if (this.dataType) { this.dataFormat(); } else { this.text = this.value; } } } /** * 数据格式化 * * @memberof AppSpan */ public dataFormat() { if (this.valueFormat) { this.formatData(); return; } if (Object.is(this.dataType, 'CURRENCY')) { let number: any = Number(this.value); this.text = Number(number.toFixed(this.precision)).toLocaleString('en-US'); } else if (Object.is(this.dataType, 'FLOAT') || Object.is(this.dataType, 'DECIMAL')) { let number: any = Number(this.value); const decimalCnt: number = this.value.toString().split('.').length > 1 ? this.value.toString().split('.')[1].length : 0; this.text = Number(this.precision) === 0 && decimalCnt !== 0 ? number.toFixed(decimalCnt) : number.toFixed(this.precision); } else { this.text = this.value; } } /** * 数据格式化 * * @memberof AppSpan */ public formatData() { if (this.valueFormat && !Object.is(this.getDataType(), 'DATETIME')) { this.textFormat = this.unitName ? this.valueFormat + '_' + this.unitName : this.valueFormat; //vue-text-format插件重复值修复 if(this.valueFormat.includes("*")) { this.$nextTick(()=> { const el: any = this.$el.getElementsByClassName("vue-format-single-fill")[0]; el.innerHTML = el.innerHTML.repeat(el.offsetWidth); }) } } if (Object.is(this.getDataType(), 'DATETIME') && this.valueFormat.length > 0) { this.text = moment(this.value).format(this.valueFormat); }else { this.text = this.value; } } /** * 获取数据格式 * * @memberof AppSpan */ public getDataType() { if ( this.dataType && (this.dataType == 'DATETIME' || this.dataType == 'DATE' || this.dataType == 'TIME' || this.dataType == 'SMALLDATETIME') ) { // 日期格式统一处理 return 'DATETIME'; } else { return this.dataType; } } } </script> <style lang='less'> @import './app-span.less'; </style>