หากไม่มี ตัวเลือกให้กรอกเอง

src/modules/04_registry/components/Salary.vue

@@ -274,13 +274,14 @@
                         :readonly="!edit"
                         :borderless="!edit"
                         v-model="formDataSalary.levelPosition"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ หรือหากกรอกเอง กรุณากด enter'}`]"
                         :label="`${'ระดับ'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
                         option-label="name"
                         :options="opLevel"
+                        @new-value="createValue"
                         option-value="name"
                         hide-bottom-space
                         use-input
@@ -2113,6 +2114,25 @@ function coppyForm() {
   formDataSalary.templateDoc = formDataSalary.templateDoc;
   formDataSalary.doc = formDataSalary.doc;
 }
+
+function createValue(val: any, done: any) {
+  if (val.length > 0) {
+    const maxId = optionStore.optipnLevel.reduce((max: any, item: any) => {
+      const itemId = typeof item.id === "number" ? item.id : parseInt(item.id);
+      return itemId > max ? itemId : max;
+    }, 0);
+    const newId = isNaN(maxId) ? 1 : maxId + 1;
+    const newObj = {
+      id: typeof val === "number" ? val : newId,
+      name: val,
+    };
+    if (!optionStore.optipnLevel.some((item: any) => item.id === newObj.id)) {
+      optionStore.optipnLevel.push(newObj);
+    }
+
+    done(newObj, "toggle");
+  }
+}
 </script>
 <style lang="scss">
 .modalfix {