1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
<div class="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, Model, Emit, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
@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>
<style lang='less'>
@import "./app-column-render.less";
</style>