diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 895acb766..e719eea9b 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -283,17 +283,22 @@
                     </div>
                     <div
                       v-for="(item, index) in knowledgeArray"
+                      :key="index"
                       class="col-12 row q-col-gutter-sm"
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title}-${item.description}`
+                          "
+                          :option-value="(level) => level.level_id"
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
                               : []
                           "
                           hide-bottom-space
-                          :options="getOpknowledge(item)"
+                          :options="OPknowledge"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -346,15 +351,17 @@
                             v-for="(item, index) in checkRule"
                             :key="item.id"
                           >
-                            <div v-if="index == 0" class="col-1 text-center">
+                            <div v-if="index === 0" class="col-1 text-center">
                               <q-checkbox
-                                v-show="item.status_select === 1"
+                                :true-value="1"
+                                :false-value="0"
+                                v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index == 0" class="col-11">
+                            <div v-if="index === 0" class="col-11">
                               {{ item.description }}
                             </div>
                           </div>
@@ -365,11 +372,11 @@
                             class="row bg-grey-2 q-py-xs borderCheck"
                           >
                             <div class="col-1"></div>
-                            <div class="col-10 ">
+                            <div class="col-10">
                               {{ item.description }}
                             </div>
                           </div>
-                          </div>
+                        </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
                           <div
                             v-if="index === 2"
@@ -386,6 +393,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -412,6 +421,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -438,6 +449,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -464,6 +477,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -520,11 +535,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPcomputer"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -536,11 +556,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPenglish"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -552,11 +577,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPinfomation"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -568,11 +598,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPresourse"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -600,9 +635,13 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -614,9 +653,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -628,9 +671,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -642,9 +689,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -654,11 +705,16 @@
                           label="ตัวที่ 4"
                         />
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -675,11 +731,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group2,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -691,11 +752,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -707,11 +772,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -1284,10 +1353,12 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
 
+import config from "@/app.config";
 const $q = useQuasar();
 const val1 = ref([
   {
@@ -1300,7 +1371,12 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-
+const filterData = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
+const filterMain = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1323,7 +1399,41 @@ const other5_no2_desc = ref<object>({});
 const experimenter_dated = ref<Date>();
 const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
+const group = ref<any | null>(null);
+const group2 = ref<any | null>(null);
+const group3 = ref<any | null>(null);
+const main = ref<any>();
+const main2 = ref<any>();
+const main3 = ref<any>();
+const main4 = ref<any>();
+const main5 = ref<any>();
 
+
+const Other = ref<string>("");
+const commander = ref<string>("");
+
+const date1 = ref<Date>();
+const date2 = ref<Date>();
+const date3 = ref<Date>();
+const date4 = ref<Date>();
+
+const OPmain = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
+
+const OPgroup = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
 const clearDateExam = () => {
   date_start.value = null;
 };
@@ -1338,6 +1448,7 @@ const name = ref<string>("");
 const position = ref<string>("");
 
 const monthSelect = ref<number>();
+
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
@@ -1375,8 +1486,18 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
-const OPknowledge = ["1", "2", "3", "4"];
+const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const OPknowledge = ref<
+  Array<{
+    knowledge_id: number;
+    title: number;
+    options: Array<Option>;
+  }>
+>([]);
+interface Option {
+  level_id: number;
+  level_desc: string;
+}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1413,534 +1534,159 @@ const addProductivity = () => {
 const ProductivityArray = computed(() => {
   return Array(productivityCount.value).fill("");
 });
-
-const checkRule = ref([
-  {
-    id: 1,
-    parent_id: 0,
-    description: "๑. รัฐธรรมนูญ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 2,
-    parent_id: 0,
-    description: "๒. กฎหมายปกครอง",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 3,
-    parent_id: 2,
-    description: "๒.๑. ด้านการบริหารราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 4,
-    parent_id: 3,
-    description: "๑) กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 5,
-    parent_id: 3,
-    description: "๒) กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 6,
-    parent_id: 3,
-    description: "๓) กฎหมายว่าด้วยลักษณะปกครองท้องที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 7,
-    parent_id: 3,
-    description:
-      "๔) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์พ.ศ.๒๕๓๙",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 8,
-    parent_id: 3,
-    description:
-      "๕) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดีพ.ศ.๒๕๔๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 9,
-    parent_id: 3,
-    description:
-      "๖) พระราชกฤษฎีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,  
-  },
-  {
-    id: 10,
-    parent_id: 2,
-    description: "๒.๒. ด้านการปฏิบัติราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 11,
-    parent_id: 10,
-    description: "๑) ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 12,
-    parent_id: 10,
-    description: "๒) กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 13,
-    parent_id: 10,
-    description: "๓) กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 14,
-    parent_id: 10,
-    description: "๔) กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 15,
-    parent_id: 10,
-    description: "๕) ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 16,
-    parent_id: 10,
-    description: "๖) ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 17,
-    parent_id: 2,
-    description: "๒.๓ ด้านการบริหารทรัพยากรบุคคล เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 18,
-    parent_id: 17,
-    description:
-      "๑) กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 19,
-    parent_id: 17,
-    description:
-      "๒) กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 20,
-    parent_id: 2,
-    description: "๒.๔. ด้านการบริหารงบประมาณและการคลัง เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 21,
-    parent_id: 20,
-    description:
-      "๑) ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 22,
-    parent_id: 20,
-    description:
-      "๒) ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 23,
-    parent_id: 20,
-    description:
-      "๓) ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 24,
-    parent_id: 20,
-    description: "๔) พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 25,
-    parent_id: 20,
-    description:
-      "๕) ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 26,
-    parent_id: 20,
-    description: "๖) กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 27,
-    parent_id: 20,
-    description:
-      "๗) พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 28,
-    parent_id: 20,
-    description: "๘) พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 29,
-    parent_id: 20,
-    description:
-      "๙) ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-]);
-const checkList21 = ref([
-  {
-    id: 1,
-    text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
-    checked: false,
-  },
-  { id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
-  {
-    id: 4,
-    text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
-    checked: false,
-  },
-]);
-const checkList22 = ref([
-  {
-    id: 1,
-    text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
-    checked: false,
-  },
-  {
-    id: 3,
-    text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
-    checked: false,
-  },
-  {
-    id: 4,
-    text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-]);
-const checkList23 = ref([
-  {
-    id: 1,
-    text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
-    checked: false,
-  },
-]);
-const checkList24 = ref([
-  {
-    id: 1,
-    text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
-    checked: false,
-  },
-  {
-    id: 3,
-    text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
-    checked: false,
-  },
-  {
-    id: 4,
-    text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
-    checked: false,
-  },
-  {
-    id: 7,
-    text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
-    checked: false,
-  },
-  {
-    id: 8,
-    text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
-    checked: false,
-  },
-  {
-    id: 9,
-    text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 10,
-    text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 11,
-    text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
-    checked: false,
-  },
-  {
-    id: 12,
-    text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
-    checked: false,
-  },
-  {
-    id: 13,
-    text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
-    checked: false,
-  },
-  {
-    id: 14,
-    text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
-    checked: false,
-  },
-]);
-const law = ref([]);
-const listlaw = [
-  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
-  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
-  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
-  {
-    id: 4,
-    label:
-      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
-  },
-];
 interface CheckboxItem {
   id: number;
-  text: string;
-  checked: boolean;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
 }
 
-// const nameRef = ref()
-// const positionRef = ref()
-// const monthRef = ref()
-// const startDateRef = ref()
-
-// const caregiverRef1 = ref()
-// const caregiverRef2 = ref()
+const checkRule = ref<CheckboxItem[]>([]);
+  const getcompetency = async () => {
+  await http.get(config.API.competencyOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPmain.value = data;
+    main.value = data[0];
+    main2.value = data[1];
+    main3.value = data[2];
+    main4.value = data[3];
+    main5.value = data[4];
+  });
+};
+const getCompetencyGroup = async () => {
+  await http.get(config.API.competencyGroupOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPgroup.value = data;
+    group.value = data[0];
+    group2.value = data[1];
+    group3.value = data[2];
+  });
+};
+const getKnowledge = async () => {
+  await http.get(config.API.knowledgeOptions()).then((res: any) => {
+    OPknowledge.value = res.data.data;
+  });
+};
+const getSkill = async () => {
+  await http.get(config.API.skillOptions()).then((res: any) => {
+    const skillData = res.data.data;
+    OPcomputer.value = [skillData.computer];
+    OPenglish.value = [skillData.english];
+    OPinfomation.value = [skillData.information];
+    OPresourse.value = [skillData.resourse];
+    skill.value = skillData.computer;
+    skill2.value = skillData.english;
+    skill3.value = skillData.information;
+    skill4.value = skillData.resourse;
+  });
+};
+const getLaw = async () => {
+  await http.get(config.API.lawOptions()).then((res: any) => {
+    checkRule.value = res.data.data;
+  });
+};
 
 const putData = () => {
-  const checkboxData: Record<string, CheckboxItem[]> = {
-    checkRule: checkRule.value.filter((item) => item.checked),
-  };
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
 
-  const assign_job = activityArray.value.map((item, index) => ({
-    id: index + 1,
-    activity_desc: activity_desc.value[index],
-    goal_desc: goal_desc.value[index],
-  }));
-  const know_ledge = knowledgeArray.value.map((item, index) => ({
-    id: index + 1,
-    knowledge: knowledge.value[index],
-  }));
-  const Productivity_assign = ProductivityArray.value.map((item, index) => ({
-    id: index + 1,
-    output_desc: output_desc.value[index],
-    indicator_desc: indicator_desc.value[index],
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const know_ledge = knowledge.value.map((item) => ({
+    id: item ? item.id : null,
+    level: item ? item.level : null,
   }));
+
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: outputDesc,
+        goal_desc: indicatorDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const groupData = group.value
+    ? { id: group.value.id, level: group.value.level }
+    : null;
+  const group2Data = group2.value
+    ? { id: group2.value.id, level: group2.value.level }
+    : null;
+  const group3Data = group3.value
+    ? { id: group3.value.id, level: group3.value.level }
+    : null;
+
+  const skillData = skill.value
+    ? { id: skill.value.id, level: skill.value.level }
+    : null;
+  const skill2Data = skill2.value
+    ? { id: skill2.value.id, level: skill2.value.level }
+    : null;
+  const skill3Data = skill3.value
+    ? { id: skill3.value.id, level: skill3.value.level }
+    : null;
+  const skill4Data = skill4.value
+    ? { id: skill4.value.id, level: skill4.value.level }
+    : null;
+
+  const mainData = main.value
+    ? { id: main.value.id, level: main.value.level }
+    : null;
+  const main2Data = main2.value
+    ? { id: main2.value.id, level: main2.value.level }
+    : null;
+  const main3Data = main3.value
+    ? { id: main3.value.id, level: main3.value.level }
+    : null;
+  const main4Data = main4.value
+    ? { id: main4.value.id, level: main4.value.level }
+    : null;
+  const main5Data = main5.value
+    ? { id: main5.value.id, level: main5.value.level }
+    : null;
+
   const data = {
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value,
+    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
     date_start: date_start.value,
     date_finish: date_finish.value,
     caretaker_1: caretaker1.value,
     caretaker_2: caretaker2.value,
     knowledge: know_ledge,
-    assign_job: assign_job,
+    assign_job: assign_job.filter((item) => item !== null),
     otherlaw: OtherLaw.value,
-    skill: skill.value,
-    skill_2: skill2.value,
-    skill_3: skill3.value,
-    skill_4: skill4.value,
-    main: main.value,
-    main_2: main2.value,
-    main_3: main3.value,
-    main_4: main4.value,
-    main_5: main5.value,
-    group: group.value,
-    group_2: group2.value,
-    group_3: group3.value,
+    skill: skillData,
+    skill_2: skill2Data,
+    skill_3: skill3Data,
+    skill_4: skill4Data,
+    main: mainData,
+    main_2: main2Data,
+    main_3: main3Data,
+    main_4: main4Data,
+    main_5: main5Data,
+    group: groupData,
+    group_2: group2Data,
+    group_3: group3Data,
     other: Other.value,
     other_5: Other5.value,
-    productivity_assign: Productivity_assign,
+    productivity_assign: Productivity_assign.filter((item) => item !== null),
     commander: commander.value,
     date_1: date1.value,
     date_2: date2.value,
@@ -1950,7 +1696,12 @@ const putData = () => {
     position_foot: positionFoot.value,
     caretaker_foot: caretakerFoot.value,
     caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkboxData,
+    checkarray: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
   };
   console.log("test", data);
 };
@@ -1966,8 +1717,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // แสดงข้อมูลใน Console
-
       $q.dialog({
         title: "บันทึกข้อมูล",
         message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
@@ -1977,45 +1726,64 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          putData();
+          // putData();
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
       // ลอง
-      // putData();
+      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-const skill = ref<string>("ความรู้ความสามารถด้าน 1");
-const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
-const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
-const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
-const OPskill = [""];
 
-const main = ref<string>("คุณธรรมจริยธรรม");
-const main2 = ref<string>("การให้บริการที่ดี");
-const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
-const main4 = ref<string>("ทํางานเป็นทีม");
-const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
-const OPmain = [""];
+const skill = ref<any>();
+const skill2 = ref<any>();
+const skill3 = ref<any>();
+const skill4 = ref<any>();
+const OPcomputer = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPenglish = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPinfomation = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPresourse = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
 
-const group = ref<string>("");
-const group2 = ref<string>("");
-const group3 = ref<string>("");
-const OPgroup = ["test"];
-
-const Other = ref<string>("");
-
-const commander = ref<string>("");
-
-const date1 = ref<Date>();
-const date2 = ref<Date>();
-const date3 = ref<Date>();
-const date4 = ref<Date>();
+onMounted(async () => {
+  await getLaw();
+  await getcompetency();
+  await getCompetencyGroup();
+  await getSkill();
+  await getKnowledge();
+});
 </script>
 <style lang="scss" scoped>
 .border_y {