pc-component-v5/packages/info/src/EnumSelectWidgetInfo.vue

<template>
  <div>
    <!-- <label :for="'enum-select-widget-' + field.fieldName" class="m-form-group-label">{{ field.name }}</label> -->
    <select :id="'enum-select-widget-' + field.fieldName" v-model="selectedValue" class="form-control form-control-complex form-input">
      <option value="" />
      <option v-for="keyValue in field.keyValues" :key="keyValue.keyStr" :value="keyValue.keyStr">{{ keyValue.value }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    'field': {
      type: Object,
      default: null,
    },
    'fieldValue': {
      type: Object,
      default: null,
    },
  },

  emits: ['valueChanged'],

  data: function(){
    return {
      selectedValue: ((this.fieldValue == undefined || this.fieldValue.displayValue == undefined) ? '' : this.fieldValue.displayValue[0]),
    };
  },

  watch: {
    selectedValue: function(curVal,oldVal){
      if(curVal != oldVal){					
        var newFieldValue = {
          displayValue: [curVal],
          fieldType: 'String',
        };
        this.$emit('valueChanged', newFieldValue);
      }
    },
  },
};

</script>
<style scoped>
	@media (min-width: 768px){
		.m-form-group-label{
			width: 80px;
			text-align: right;
			padding-right: 10px;
		}
	}
	.form-control-complex{
		width: 200px !important;
		float: none !important;
	}
	.form-input{
		border-radius: 4px !important;
	}
</style>