pc-component-v5/packages/process/src/EnumSelectWidget.vue

<template>
  <div :style="style">
    <a-select
      v-model:value="selectedValue"
      @change="selectChanged"
    >
      <a-select-option v-for="keyValue in keyValues" :key="keyValue.keyStr" :value="keyValue.keyStr">
        {{ keyValue.value }}
      </a-select-option>
    </a-select>
  </div>

  <!-- <div class="form-group">
    <div>
      <select
        v-model="selectedValue"
        class="form-control"
      >
        <option
          v-for="keyValue in keyValues"
          :key="keyValue.keyStr"
          :value="keyValue.keyStr"
        >
          {{ keyValue.value }}
        </option>
      </select>
    </div>
  </div> -->
</template>

<script>
export default {
  props: {
    'keyValues':{
      type: Array,
      default: function(){
        return [];
      },
    }, 
    'enumValue':{
      type: String,
      default: '',
    },
    'style': {
      type: Object,
      default: null,
    },
  },

  emits: ['valueChanged'],
  data: function () {
    return {
      selectedValue: (this.enumValue == undefined ? '' : this.enumValue),
    };
  },

  // watch: {
  //   selectedValue: function (curVal, oldVal) {
  //     console.log('Enum Selected Value changed：' + curVal);
  //     if (curVal != oldVal) {
  //       this.$emit('valueChanged', curVal);
  //     }
  //   },

  //   enumValue: function (val) {
  //     this.selectedValue = val;
  //   },
  // },
  methods: {
    selectChanged(value) {
      this.$emit('valueChanged', value);
    },
  },
};

</script>

<style scoped>
.required-mark {
    color: red;
    margin-right: 10px;
}
</style>