|
@@ -1,17 +1,10 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
<select
|
|
<select
|
|
|
- :id="'enum-select-widget-' + field.id"
|
|
|
|
|
- v-model="selectedValue"
|
|
|
|
|
- class="form-control m-form-control"
|
|
|
|
|
- :readonly="readonly"
|
|
|
|
|
- :disabled="readonly"
|
|
|
|
|
|
|
+ :id="'enum-select-widget-' + field.id" v-model="selectedValue" class="form-control m-form-control"
|
|
|
|
|
+ :readonly="readonly" :disabled="readonly" @change="selectChanged"
|
|
|
>
|
|
>
|
|
|
- <option
|
|
|
|
|
- v-for="keyValue in field.keyValues"
|
|
|
|
|
- :key="keyValue.keyStr"
|
|
|
|
|
- :value="keyValue.keyStr"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <option v-for="keyValue in field.keyValues" :key="keyValue.keyStr" :value="keyValue.keyStr">
|
|
|
{{ keyValue.value }}
|
|
{{ keyValue.value }}
|
|
|
</option>
|
|
</option>
|
|
|
</select>
|
|
</select>
|
|
@@ -21,50 +14,77 @@
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
|
|
|
|
|
-
|
|
|
|
|
- props: {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ props: {
|
|
|
readonly: {
|
|
readonly: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: null,
|
|
default: null,
|
|
|
},
|
|
},
|
|
|
field: {
|
|
field: {
|
|
|
type: Object,
|
|
type: Object,
|
|
|
- default : function(){
|
|
|
|
|
|
|
+ default: function () {
|
|
|
return null;
|
|
return null;
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
fieldValue: {
|
|
fieldValue: {
|
|
|
type: Object,
|
|
type: Object,
|
|
|
- default : function(){
|
|
|
|
|
|
|
+ default: function () {
|
|
|
return null;
|
|
return null;
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
emits: ['valueChanged'],
|
|
emits: ['valueChanged'],
|
|
|
|
|
|
|
|
data: function () {
|
|
data: function () {
|
|
|
return {
|
|
return {
|
|
|
- selectedValue: ((this.fieldValue == undefined || this.fieldValue.displayValue == undefined) ? this.field.defaultValue: this.fieldValue.displayValue[0]),
|
|
|
|
|
|
|
+ // selectedValue: ((this.fieldValue == undefined || this.fieldValue.displayValue == undefined) ? this.field.defaultValue: this.fieldValue.displayValue[0]),
|
|
|
|
|
+ selectedValue: '',
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
watch: {
|
|
|
- selectedValue: function (curVal, oldVal) {
|
|
|
|
|
- console.log('selectedValue changed:' + curVal);
|
|
|
|
|
- if (curVal != oldVal) {
|
|
|
|
|
- var newFieldValue = {
|
|
|
|
|
- displayValue: [curVal],
|
|
|
|
|
- fieldType: 'String',
|
|
|
|
|
- };
|
|
|
|
|
- this.$emit('valueChanged', newFieldValue);
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ // selectedValue: function (curVal, oldVal) {
|
|
|
|
|
+ // console.log('selectedValue changed:' + curVal);
|
|
|
|
|
+ // if (curVal != oldVal) {
|
|
|
|
|
+ // var newFieldValue = {
|
|
|
|
|
+ // displayValue: [curVal],
|
|
|
|
|
+ // fieldType: 'String',
|
|
|
|
|
+ // };
|
|
|
|
|
+ // this.$emit('valueChanged', newFieldValue);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
|
|
|
- fieldValue: function (val) {
|
|
|
|
|
- this.selectedValue = ((val == undefined || val.displayValue == undefined) ? '' : val.displayValue[0]);
|
|
|
|
|
|
|
+ // fieldValue: function (val) {
|
|
|
|
|
+ // this.selectedValue = ((val == undefined || val.displayValue == undefined) ? '' : val.displayValue[0]);
|
|
|
|
|
+ // },
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ if (this.fieldValue && this.fieldValue.displayValue && this.fieldValue.displayValue.length) {
|
|
|
|
|
+ const newFieldValue = {
|
|
|
|
|
+ displayValue: [this.fieldValue.displayValue[0]],
|
|
|
|
|
+ fieldType: 'String',
|
|
|
|
|
+ };
|
|
|
|
|
+ this.$emit('valueChanged', newFieldValue);
|
|
|
|
|
+ this.selectedValue = this.fieldValue.displayValue[0];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ const newFieldValue = {
|
|
|
|
|
+ displayValue: [this.field.defaultValue],
|
|
|
|
|
+ fieldType: 'String',
|
|
|
|
|
+ };
|
|
|
|
|
+ this.$emit('valueChanged', newFieldValue);
|
|
|
|
|
+ this.selectedValue = this.field.defaultValue;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ selectChanged(e) {
|
|
|
|
|
+ const newFieldValue = {
|
|
|
|
|
+ displayValue: [e.target.value],
|
|
|
|
|
+ fieldType: 'String',
|
|
|
|
|
+ };
|
|
|
|
|
+ this.$emit('valueChanged', newFieldValue);
|
|
|
|
|
+ this.selectedValue = e.target.value;
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -72,11 +92,11 @@ export default {
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.required-mark {
|
|
.required-mark {
|
|
|
- color: red;
|
|
|
|
|
- margin-right: 10px;
|
|
|
|
|
|
|
+ color: red;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.m-form-control{
|
|
|
|
|
- width: 100% !important;
|
|
|
|
|
|
|
+.m-form-control {
|
|
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|