<template> <div class="app-column-render"> {{textValue}} <template v-if="Object.is(type,'input')"> <input-box :disabled="disabled" v-model="editorvalue" @change="($event)=>{onEditorValueChange($event)}"></input-box> </template> <template v-else-if="Object.is(type,'dropdown')"> <i-select v-model="editorvalue" :disabled="disabled" :clearable="true" :placeholder="$t('components.appcolumnrender.select')" > <i-option v-for="(item, index) in codelist" :key="index" :value="item.value">{{item.text}}</i-option> </i-select> </template> <template v-else> <span>{{type}}{{$t('components.appcolumnrender.unsupported')}}</span> </template> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from "vue-property-decorator"; @Component({ }) export default class AppColumnRender extends Vue { /** * 值 * @type {any} * @memberof AppColumnRender */ @Prop() public value?: any; /** * 是否禁用 * @type {boolean} * @memberof AppColumnRender */ @Prop() public disabled?: boolean; /** * 列字段名称 * * @type {string} * @memberof AppColumnRender */ @Prop() public name?: string; /** * 表格行数据 * * @type {string} * @memberof AppColumnRender */ @Prop() public row?: any; /** * 自定义样式 * * @type {string} * @memberof AppColumnRender */ @Prop() public customStyle?: string; /** * 文本信息 * @type {String} * @memberof AppColumnRender */ public textValue: string = ""; /** * 编辑器类型 * @type {String} * @memberof AppColumnRender */ public type: string = ""; /** * 值项名称 * * @type {string} * @memberof AppColumnRender */ public valueitem: string = ""; /** * 编辑器值 * @type {any} * @memberof AppColumnRender */ public editorvalue: any = ""; /** * 代码表选项数组 * @memberof AppColumnRender */ public codelist: any = []; public created(){ this.onValueChange(this.value,""); } /** * 自定义列值监控 * * @param {*} newVal * @param {*} oldVal * @memberof AppColumnRender */ @Watch('value') onValueChange(newVal: any, oldVal: any) { if (newVal) { let arrs = newVal.split("%"); this.textValue = arrs[0]; let params = []; if(arrs[1]){ (arrs[1].split(";")).forEach((item:any)=>{ let temp = item.split("="); if(Object.is(temp[0], "type")){ this.type = temp[1]; } else if(Object.is(temp[0], "value")) { this.valueitem = temp[1]; if(this.valueitem && this.row[this.valueitem]){ this.editorvalue = this.row[this.valueitem]; } } else if(Object.is(temp[0], "codelist")) { this.codelist = temp[1]; } }); } } } /** * 编辑器值变化回调 * @param item */ public onEditorValueChange(item: any): void { if (this.name) { // this.$emit('griditemvaluechange', { name: this.name, value: item }); } if (this.valueitem) { this.$emit('griditemvaluechange', { name: this.valueitem, value: item }); } } } </script>