fix: select

src/components/04_product-service/BasicInfoProduct.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { locale } = useI18n({ useScope: 'global' });
+
 const remark = defineModel<string>('remark', { default: '' });
 const detail = defineModel<string>('detail');
 const process = defineModel<number>('process');
 const name = defineModel<string>('name');
 const code = defineModel<string>('code');
 
+const codeOption = ref([]);
+
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -12,6 +18,18 @@ defineProps<{
   separator?: boolean;
   isType?: boolean;
 }>();
+
+onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  const option = await resultOption.json();
+
+  if (locale.value === 'en-US') {
+    codeOption.value = option.eng.typeProduct;
+  }
+  if (locale.value === 'th-th') {
+    codeOption.value = option.tha.typeProduct;
+  }
+});
 </script>
 
 <template>
@@ -20,17 +38,24 @@ defineProps<{
   </div>
 
   <div class="col-9 row q-col-gutter-md">
-    <q-input
+    <q-select
-      for="input-code"
+      id="select-br-id"
-      :outlined="!readonly"
       :dense="dense"
+      outlined
       :readonly="readonly"
-      :borderless="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      clearable
       hide-bottom-space
       class="col-3"
-      :label="$t('productCode')"
       v-model="code"
-      :rules="[(val: string) => (!!val && val === 'AC') || val === 'DO']"
+      :label="$t('productCode')"
+      option-label="label"
+      option-value="value"
+      :options="codeOption"
+      :rules="[(val: string) => !!val]"
     />
 
     <q-input