diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index e6bd8b865..6e899e2af 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -1,294 +1,328 @@
 <template>
-  <div class="q-pb-md">
-    <div class="toptitle text-dark col-12 row items-center">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.go(-1)"
-        v-if="routeName == 'probationWorkAdd'"
-      />
-      <div v-if="routeName == 'probationWorkAdd'">
-        เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+  <q-form ref="myForm">
+    <div class="q-pb-md">
+      <div class="toptitle text-dark col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+          v-if="routeName == 'probationWorkAdd'"
+        />
+        <div v-if="routeName == 'probationWorkAdd'">
+          เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
       </div>
-      <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
-    </div>
-    <q-card
-      :bordered="routeName == 'probationWorkAdd'"
-      class="col-12 text-dark"
-    >
-      <div class="row col-12 q-pa-lg">
-        <div class="row col-12 q-gutter-lg">
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-              ผู้ทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-xs-12 col-sm-6">
-                <q-input
-                  :readonly="routeName != 'probationWorkAdd'"
-                  dense
-                  borderless
-                  :outlined="routeName == 'probationWorkAdd'"
-                  v-model="name"
-                  label="ชื่อ-สกุล"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-6">
-                <q-input
-                  :readonly="routeName != 'probationWorkAdd'"
-                  dense
-                  borderless
-                  :outlined="routeName == 'probationWorkAdd'"
-                  v-model="position"
-                  label="ตำแหน่ง"
-                />
-              </div>
+      <q-card
+        :bordered="routeName == 'probationWorkAdd'"
+        class="col-12 text-dark"
+      >
+        <div class="row col-12 q-pa-lg">
+          <div class="row col-12 q-gutter-lg">
+            <div class="col-12 row">
               <div class="col-12 text-top0 items-center">
-                ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+                ผู้ทดลองปฏิบัติหน้าที่ราชการ
               </div>
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateExam"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @input="handleDateExamChange"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      class="full-width datepicker q-mb-md"
-                      :model-value="
-                        dateExam != null ? date2Thai(dateExam) : null
-                      "
-                      :label="`${'ตั้งเเต่วันที่'}`"
-                      clearable
-                      @clear="clearDateExam"
-                    >
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateExam2"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      class="full-width datepicker q-mb-md"
-                      :model-value="
-                        dateExam2 != null ? date2Thai(dateExam2) : null
-                      "
-                      :label="`${'ถึงวันที่'}`"
-                      clearable
-                      @clear="clearDateExam2"
-                    >
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="3px" color="grey-2" />
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
-              <!-- <q-btn
-                v-if="routeName == 'probationWorkAdd'"
-                round
-                color="primary"
-                dense
-                icon="mdi-plus"
-                flat
-                class="q-ml-sm"
-                @click="addCaretaker"
-              /> -->
-            </div>
-
-            <div class="col-12 row q-col-gutter-md">
-              <q-select
-                :options="OPcaretaker"
-                class="col-xs-12 col-sm-6"
-                :readonly="routeName != 'probationWorkAdd'"
-                dense
-                borderless
-                :outlined="routeName == 'probationWorkAdd'"
-                v-model="caretaker1"
-                :label="`ผู้ดูแลคนที่ 1`"
-              />
-              <q-select
-                :options="OPcaretaker"
-                class="col-xs-12 col-sm-6"
-                :readonly="routeName != 'probationWorkAdd'"
-                dense
-                borderless
-                :outlined="routeName == 'probationWorkAdd'"
-                v-model="caretaker2"
-                :label="`ผู้ดูแลคนที่ 2`"
-              />
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="3px" color="grey-2" />
-          </div>
-          <!-- 3.1 -->
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-              ผลการปฏิบัติงาน
-            </div>
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
-              <q-btn
-                v-if="routeName == 'probationWorkAdd'"
-                round
-                color="primary"
-                dense
-                icon="mdi-plus"
-                flat
-                class="q-ml-sm"
-                @click="addActivity"
-              />
-            </div>
-            <div class="col-12 row q-gutter-sm">
-              <q-card
-                v-for="(item, index) in activityArray"
-                :key="index"
-                flat
-                bordered
-                class="col-12 q-pa-sm bg-grey-1"
-              >
-                <div class="col-12 row q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-6">
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="bg-white"
-                      type="textarea"
-                      v-model="activities[index]"
-                      label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-sm-5">
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="bg-white"
-                      type="textarea"
-                      v-model="goals[index]"
-                      label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
-                    />
-                  </div>
-                  <!-- delete -->
-                  <div
-                    v-if="index > 1"
-                    class="col-xs-12 col-sm-1 flex justify-center items-center"
-                  >
-                    <q-btn
-                      flat
-                      round
-                      color="red"
-                      icon="mdi-trash-can-outline"
-                      @click="deleteactivity(index)"
-                    />
-                  </div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-6">
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    hide-bottom-space
+                    :readonly="routeName != 'probationWorkAdd'"
+                    dense
+                    borderless
+                    :outlined="routeName == 'probationWorkAdd'"
+                    v-model="fullname"
+                    label="ชื่อ-สกุล"
+                  />
                 </div>
-              </q-card>
-            </div>
-          </div>
-          <!-- 3.2 -->
-          <div class="col-12 row">
-            <div class="col-12 text-top2">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
-            </div>
-            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-              <div class="row col-12 q-gutter-lg">
-                <div class="col-12 row">
-                  <div class="col-12 text-top2 row items-center">
-                    ความรู้ความสามารถในการปฏิบัติงาน
-                    <q-btn
-                      v-if="routeName == 'probationWorkAdd'"
-                      round
-                      color="primary"
-                      dense
-                      icon="mdi-plus"
-                      flat
-                      class="q-ml-sm"
-                      @click="addKnowledge"
-                    />
-                  </div>
-                  <div
-                    v-for="(item, index) in knowledgeArray"
-                    class="col-12 row q-col-gutter-sm"
+                <div class="col-xs-12 col-sm-6">
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
+                    hide-bottom-space
+                    :readonly="routeName != 'probationWorkAdd'"
+                    dense
+                    borderless
+                    :outlined="routeName == 'probationWorkAdd'"
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
+                </div>
+                <div class="col-12 text-top0 items-center">
+                  ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-select
+                    :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
+                    hide-bottom-space
+                    :options="monthOp"
+                    class="col-xs-12 col-sm-6"
+                    :readonly="routeName !== 'probationWorkAdd'"
+                    dense
+                    borderless
+                    option-label="label"
+                    :outlined="routeName === 'probationWorkAdd'"
+                    v-model="monthSelect"
+                    :label="`ระยะเวลากี่เดือน`"
+                  />
+                  <div v-if="monthSelect !== null">{{ monthSelect }} เดือน</div>
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date_start"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
                   >
-                    <div class="col-11 q-my-xs">
-                      <q-select
-                        :options="getOpknowledge(item)"
-                        class="bg-white"
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        hide-bottom-space
+                        class="full-width datepicker q-mb-md"
+                        :model-value="
+                          dateExam != null ? date2Thai(dateExam) : null
+                        "
+                        :label="`${'ตั้งเเต่วันที่'}`"
+                        clearable
+                        @clear="clearDateExam"
+                      >
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date_finish"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="isDatePicker2Readonly"
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        readonly
+                        class="full-width datepicker q-mb-md"
+                        :model-value="
+                          dateExam2 != null ? date2Thai(dateExam2) : null
+                        "
+                        :label="`${'ถึงวันที่'}`"
+                        clearable
+                        @clear="clearDateExam2"
+                        >
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+              </div>
+
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  :options="OPcaretaker"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  hide-bottom-space
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                />
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  :options="OPcaretaker"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <!-- 3.1 -->
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                ผลการปฏิบัติงาน
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+                <q-btn
+                  v-if="routeName == 'probationWorkAdd'"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addActivity"
+                />
+              </div>
+              <div class="col-12 row q-gutter-sm">
+                <q-card
+                  v-for="(item, index) in activityArray"
+                  :key="index"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
                         :readonly="routeName != 'probationWorkAdd'"
                         dense
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
-                        v-model="knowledge[index]"
-                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="activity_desc[index]"
+                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                       />
                     </div>
+                    <div class="col-xs-12 col-sm-5">
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="goal_desc[index]"
+                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                      />
+                    </div>
+                    <!-- delete -->
                     <div
+                      v-if="index > 1"
                       class="col-xs-12 col-sm-1 flex justify-center items-center"
                     >
                       <q-btn
-                        v-if="index > 2"
                         flat
                         round
                         color="red"
                         icon="mdi-trash-can-outline"
-                        @click="deleteknowledge(index)"
+                        @click="deleteactivity(index)"
                       />
                     </div>
                   </div>
-                </div>
+                </q-card>
+              </div>
+            </div>
+            <!-- 3.2 -->
+            <div class="col-12 row">
+              <div class="col-12 text-top2">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
+              </div>
+              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+                <div class="row col-12 q-gutter-lg">
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2 row items-center">
+                      ความรู้ความสามารถในการปฏิบัติงาน
+                      <q-btn
+                        v-if="routeName == 'probationWorkAdd'"
+                        round
+                        color="primary"
+                        dense
+                        icon="mdi-plus"
+                        flat
+                        class="q-ml-sm"
+                        @click="addKnowledge"
+                      />
+                    </div>
+                    <div
+                      v-for="(item, index) in knowledgeArray"
+                      class="col-12 row q-col-gutter-sm"
+                    >
+                      <div class="col-11 q-my-xs">
+                        <q-select
+                          :rules="
+                            index < 3
+                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
+                              : []
+                          "
+                          hide-bottom-space
+                          :options="getOpknowledge(item)"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="knowledge[index]"
+                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
+                            index + 1
+                          }`"
+                        />
+                      </div>
+                      <div
+                        class="col-xs-12 col-sm-1 flex justify-center items-center"
+                      >
+                        <q-btn
+                          v-if="index > 2"
+                          flat
+                          round
+                          color="red"
+                          icon="mdi-trash-can-outline"
+                          @click="deleteknowledge(index)"
+                        />
+                      </div>
+                    </div>
+                  </div>
 
-                <div class="col-12 row">
-                  <div class="col-12 text-top2 row items-center">
-                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
-                    <!-- <q-btn
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2 row items-center">
+                      ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                      <!-- <q-btn
                       v-if="routeName == 'probationWorkAdd'"
                       round
                       color="primary"
@@ -297,116 +331,116 @@
                       flat
                       class="q-ml-sm"
                     /> -->
-                  </div>
-                  <q-card
-                    flat
-                    bordered
-                    class="col-12 q-pa-md"
-                    style="max-height: 500px; overflow-y: scroll"
-                  >
-                    <div class="example-row-column-width">
-                      <div
-                        v-for="item in val1"
-                        :key="item.id"
-                        class="row bg-grey-3 q-py-xs"
-                      >
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="item.checked"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
-                        </div>
-                        <div class="col-9">1. รัฐธรรมนูญ</div>
-                      </div>
-
-                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
-                        <div class="col-1"></div>
-                        <div class="col-2">2.กฎหมายปกครอง</div>
-                      </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck">
-                        <div class="col-1"></div>
-                        <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
-                      </div>
-                      <div
-                        v-for="item in checkList21"
-                        :key="item.id"
-                        class="row q-py-xs borderCheck border_y"
-                      >
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="item.checked"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
+                    </div>
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 q-pa-md"
+                      style="max-height: 500px; overflow-y: scroll"
+                    >
+                      <div class="example-row-column-width">
+                        <div
+                          v-for="item in val1"
+                          :key="item.id"
+                          class="row bg-grey-3 q-py-xs"
+                        >
+                          <div class="col-1 text-center">
+                            <q-checkbox
+                              v-model="item.checked"
+                              dense
+                              :disable="routeName != 'probationWorkAdd'"
+                            />
+                          </div>
+                          <div class="col-9">1. รัฐธรรมนูญ</div>
                         </div>
 
-                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                      </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck">
-                        <div class="col-1"></div>
-                        <div class="col-10 q-pl-md">
-                          2.2 ด้านการปฏิบัติราชการ
+                        <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                          <div class="col-1"></div>
+                          <div class="col-2">2.กฎหมายปกครอง</div>
                         </div>
-                      </div>
-                      <div
-                        v-for="item in checkList22"
-                        :key="item.id"
-                        class="row q-py-xs borderCheck border_y"
-                      >
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="item.checked"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
+                        <div class="row bg-grey-2 q-py-xs borderCheck">
+                          <div class="col-1"></div>
+                          <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
                         </div>
+                        <div
+                          v-for="item in checkList21"
+                          :key="item.id"
+                          class="row q-py-xs borderCheck border_y"
+                        >
+                          <div class="col-1 text-center">
+                            <q-checkbox
+                              v-model="item.checked"
+                              dense
+                              :disable="routeName != 'probationWorkAdd'"
+                            />
+                          </div>
 
-                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                      </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck">
-                        <div class="col-1"></div>
-                        <div class="col-10 q-pl-md">
-                          2.3 ด้านการบริหารทรัพยากรบุคคล
+                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
                         </div>
-                      </div>
-                      <div
-                        v-for="item in checkList23"
-                        :key="item.id"
-                        class="row q-py-xs borderCheck border_y"
-                      >
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="item.checked"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
+                        <div class="row bg-grey-2 q-py-xs borderCheck">
+                          <div class="col-1"></div>
+                          <div class="col-10 q-pl-md">
+                            2.2 ด้านการปฏิบัติราชการ
+                          </div>
                         </div>
+                        <div
+                          v-for="item in checkList22"
+                          :key="item.id"
+                          class="row q-py-xs borderCheck border_y"
+                        >
+                          <div class="col-1 text-center">
+                            <q-checkbox
+                              v-model="item.checked"
+                              dense
+                              :disable="routeName != 'probationWorkAdd'"
+                            />
+                          </div>
 
-                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                      </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck">
-                        <div class="col-1"></div>
-                        <div class="col-10 q-pl-md">
-                          2.4 ด้านการบริหารงบประมาณและการคลัง
+                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
                         </div>
-                      </div>
-                      <div
-                        v-for="item in checkList24"
-                        :key="item.id"
-                        class="row q-py-xs borderCheck border_y"
-                      >
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="item.checked"
-                            dense
-                            :disable="routeName != 'probationWorkAdd'"
-                          />
+                        <div class="row bg-grey-2 q-py-xs borderCheck">
+                          <div class="col-1"></div>
+                          <div class="col-10 q-pl-md">
+                            2.3 ด้านการบริหารทรัพยากรบุคคล
+                          </div>
                         </div>
+                        <div
+                          v-for="item in checkList23"
+                          :key="item.id"
+                          class="row q-py-xs borderCheck border_y"
+                        >
+                          <div class="col-1 text-center">
+                            <q-checkbox
+                              v-model="item.checked"
+                              dense
+                              :disable="routeName != 'probationWorkAdd'"
+                            />
+                          </div>
 
-                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                      </div>
-                      <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                        </div>
+                        <div class="row bg-grey-2 q-py-xs borderCheck">
+                          <div class="col-1"></div>
+                          <div class="col-10 q-pl-md">
+                            2.4 ด้านการบริหารงบประมาณและการคลัง
+                          </div>
+                        </div>
+                        <div
+                          v-for="item in checkList24"
+                          :key="item.id"
+                          class="row q-py-xs borderCheck border_y"
+                        >
+                          <div class="col-1 text-center">
+                            <q-checkbox
+                              v-model="item.checked"
+                              dense
+                              :disable="routeName != 'probationWorkAdd'"
+                            />
+                          </div>
+
+                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                        </div>
+                        <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1 text-center"></div>
                         <div class="col-11">
                           3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
@@ -426,741 +460,788 @@
                           />
                         </div>
                       </div> -->
-                    </div>
-                  </q-card>
-                </div>
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">
-                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                      </div>
+                    </q-card>
                   </div>
-                  <div class="col-12 row q-col-gutter-md">
-                    <div class="col-12">
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">
+                      กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                    </div>
+                    <div class="col-12 row q-col-gutter-md">
+                      <div class="col-12">
+                        <q-input
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="OtherLaw"
+                          type="textarea"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">ทักษะ</div>
+                    <div class="col-12 row q-col-gutter-sm">
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          :options="OPskill"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="skill"
+                          label="ด้านที่ 1"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          :options="OPskill"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="skill2"
+                          label="ด้านที่ 2"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          :options="OPskill"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="skill3"
+                          label="ด้านที่ 3"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          :options="OPskill"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="skill4"
+                          label="ด้านที่ 4"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12 row">
+              <div class="col-12 text-top2">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+              </div>
+              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+                <div class="row col-12 q-gutter-lg">
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">สมรรถนะหลัก</div>
+                    <div class="col-12 row q-col-gutter-sm">
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="OPmain"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="main"
+                          label="ตัวที่ 1"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="OPmain"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="main2"
+                          label="ตัวที่ 2"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="OPmain"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="main3"
+                          label="ตัวที่ 3"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="OPmain"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="main4"
+                          label="ตัวที่ 4"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="OPmain"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="main5"
+                          label="ตัวที่ 4"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
+                    <div class="col-12 row q-col-gutter-sm">
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          :options="OPgroup"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="group"
+                          label="ตัวที่ 1"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          :options="OPgroup"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="group2"
+                          label="ตัวที่ 2"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-6">
+                        <q-select
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          :options="OPgroup"
+                          class="bg-white"
+                          :readonly="routeName != 'probationWorkAdd'"
+                          dense
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
+                          v-model="group3"
+                          label="ตัวที่ 3"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+                  class="text-weight-regular q-pl-sm"
+                >
+                  ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
+                  )</span
+                >
+              </div>
+              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+                <div class="row col-12 q-gutter-lg">
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
+                    <div class="col-12 row q-col-gutter-md">
+                      <div class="col-12 column q-ml-md">
+                        <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
+                        <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+                        <li>
+                          ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
+                          เอาใจใส่เป็นมาตรฐานเดียวกัน
+                        </li>
+                        <li>
+                          ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ
+                          ขยันหมั่นเพียร
+                        </li>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">
+                      ความมีคุณธรรมจริยธรรม ได้แก่
+                    </div>
+                    <div class="col-12 row q-col-gutter-md">
+                      <div class="col-12 column q-ml-md">
+                        <li>
+                          อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
+                        </li>
+                        <li>
+                          มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
+                        </li>
+                        <li>
+                          ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
+                          อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
+                          และพระมหากษัตริย์
+                        </li>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+                    <div class="col-12 row q-col-gutter-md">
+                      <div class="col-12 column q-ml-md">
+                        <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                        <li>
+                          แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
+                        </li>
+                        <li>
+                          ไม่กระทำการใด ๆ
+                          อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
+                        </li>
+                        <li>
+                          ไม่กระทำการใด ๆ
+                          อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
+                        </li>
+                        <li>
+                          ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                        </li>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12 row">
+              <div class="col-12 text-top2">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.5 อื่น ๆ (ถ้ามี)
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12">
+                  <q-input
+                    :readonly="routeName != 'probationWorkAdd'"
+                    dense
+                    borderless
+                    :outlined="routeName == 'probationWorkAdd'"
+                    v-model="Other"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+                <q-btn
+                  v-if="routeName == 'probationWorkAdd'"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addProductivity"
+                />
+              </div>
+              <div class="col-12 row q-gutter-md">
+                <q-card
+                  v-for="(item, index) in productivityCount"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
                       <q-input
+                        hide-bottom-space
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
                         class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="OtherLaw"
                         type="textarea"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="Productivitys[index]"
+                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-5">
+                      <q-input
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        class="bg-white"
+                        type="textarea"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="goals1[index]"
+                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                      />
+                    </div>
+                    <div
+                      v-if="index > 0"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteProductivitys(index)"
                       />
                     </div>
                   </div>
+                </q-card>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2">
+                  ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
+                  ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
                 </div>
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">ทักษะ</div>
-                  <div class="col-12 row q-col-gutter-sm">
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPskill"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="skill"
-                        label="ด้านที่ 1"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPskill"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="skill2"
-                        label="ด้านที่ 2"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPskill"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="skill3"
-                        label="ด้านที่ 3"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPskill"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="skill4"
-                        label="ด้านที่ 4"
-                      />
-                    </div>
-                  </div>
+                <div class="col-12 text-top2 row items-center">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+                </div>
+                <div class="col-12 text-top2 row items-center">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  4.2
+                  การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+                </div>
+                <div class="col-12 text-top2 row items-center">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  4.3
+                  การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+                </div>
+                <div class="col-12 text-top2 row items-center">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
                 </div>
               </div>
-            </q-card>
-          </div>
-
-          <div class="col-12 row">
-            <div class="col-12 text-top2">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
             </div>
-            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-              <div class="row col-12 q-gutter-lg">
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">สมรรถนะหลัก</div>
-                  <div class="col-12 row q-col-gutter-sm">
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPmain"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="main"
-                        label="ตัวที่ 1"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPmain"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="main2"
-                        label="ตัวที่ 2"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPmain"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="main3"
-                        label="ตัวที่ 3"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPmain"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="main4"
-                        label="ตัวที่ 4"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPmain"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="main5"
-                        label="ตัวที่ 4"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
-                  <div class="col-12 row q-col-gutter-sm">
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPgroup"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="group"
-                        label="ตัวที่ 1"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPgroup"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="group2"
-                        label="ตัวที่ 2"
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-6">
-                      <q-select
-                        :options="OPgroup"
-                        class="bg-white"
-                        :readonly="routeName != 'probationWorkAdd'"
-                        dense
-                        borderless
-                        :outlined="routeName == 'probationWorkAdd'"
-                        v-model="group3"
-                        label="ตัวที่ 3"
-                      />
-                    </div>
-                  </div>
-                </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
+                การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
-            </q-card>
-          </div>
-
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
-                class="text-weight-regular q-pl-sm"
-              >
-                ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
-              >
-            </div>
-            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-              <div class="row col-12 q-gutter-lg">
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
-                  <div class="col-12 row q-col-gutter-md">
-                    <div class="col-12 column q-ml-md">
-                      <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
-                      <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
-                      <li>
-                        ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
-                        เอาใจใส่เป็นมาตรฐานเดียวกัน
-                      </li>
-                      <li>
-                        ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
-                      </li>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12 row">
-                  <div class="col-12 text-top2">
-                    ความมีคุณธรรมจริยธรรม ได้แก่
-                  </div>
-                  <div class="col-12 row q-col-gutter-md">
-                    <div class="col-12 column q-ml-md">
-                      <li>
-                        อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
-                      </li>
-                      <li>
-                        มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
-                      </li>
-                      <li>
-                        ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
-                        อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
-                        และพระมหากษัตริย์
-                      </li>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                5.1
+                ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+              </div>
+              <div class="col-12 row q-gutter-md">
+                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                   <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                   <div class="col-12 row q-col-gutter-md">
                     <div class="col-12 column q-ml-md">
-                      <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                      <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
+                      <li>ทักษะที่ ก.ก. กำหนด</li>
+                      <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
+                      <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
+                      <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
+                      <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                       <li>
-                        แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
-                      </li>
-                      <li>
-                        ไม่กระทำการใด ๆ
-                        อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
-                      </li>
-                      <li>
-                        ไม่กระทำการใด ๆ
-                        อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
-                      </li>
-                      <li>
-                        ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                        อื่นๆ (ถ้ามี)
+                        <q-input
+                          dense
+                          outlined
+                          v-model="Other"
+                          label="กรอกอื่นๆ"
+                        />
                       </li>
                     </div>
                   </div>
+                </q-card>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                5.3
+                ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+              </div>
+              <div class="col-12 row q-gutter-md">
+                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12 column q-ml-md">
+                      <li>
+                        บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
+                      </li>
+                      <li>
+                        แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
+                      </li>
+                      <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
+              </div>
+              <div class="col-12 row q-gutter-md">
+                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12 column q-ml-md">
+                      <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+                      <div class="q-pl-lg">
+                        ส่วนที่ 1
+                        คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                      </div>
+                      <div class="q-pl-lg">
+                        ส่วนที่ 2
+                        คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                      </div>
+                      <div class="q-pl-lg">
+                        มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ
+                        60
+                      </div>
+                      <li>
+                        สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                      </li>
+                      <div class="q-pl-lg">
+                        คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
+                      </div>
+                      <div>
+                        <span style="text-decoration: underline">หมายเหตุ</span>
+                        ให้นำคะแนนรวมทั้ง 2
+                        ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
+                        จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2 row items-center">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  ผู้ทดลองปฏิบัติหน้าที่ราชการ
                 </div>
               </div>
-            </q-card>
-          </div>
-
-          <div class="col-12 row">
-            <div class="col-12 text-top2">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.5 อื่น ๆ (ถ้ามี)
-            </div>
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-12">
-                <q-input
-                  :readonly="routeName != 'probationWorkAdd'"
-                  dense
-                  borderless
-                  :outlined="routeName == 'probationWorkAdd'"
-                  v-model="Other"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
-              <q-btn
-                v-if="routeName == 'probationWorkAdd'"
-                round
-                color="primary"
-                dense
-                icon="mdi-plus"
-                flat
-                class="q-ml-sm"
-                @click="addProductivity"
-              />
-            </div>
-            <div class="col-12 row q-gutter-md">
-              <q-card
-                v-for="(item, index) in productivityCount"
-                flat
-                bordered
-                class="col-12 q-pa-sm bg-grey-1"
-              >
-                <div class="col-12 row q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-6">
-                    <q-input
-                      class="bg-white"
-                      type="textarea"
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      v-model="Productivitys[index]"
-                      label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-sm-5">
-                    <q-input
-                      class="bg-white"
-                      type="textarea"
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      v-model="goals1[index]"
-                      label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
-                    />
-                  </div>
-                  <div
-                    v-if="index > 0"
-                    class="col-xs-12 col-sm-1 flex justify-center items-center"
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-4">
+                  <q-input
+                    :readonly="routeName != 'probationWorkAdd'"
+                    dense
+                    borderless
+                    :outlined="routeName == 'probationWorkAdd'"
+                    v-model="name"
+                    label="ชื่อ-สกุล"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-input
+                    :readonly="routeName != 'probationWorkAdd'"
+                    dense
+                    borderless
+                    :outlined="routeName == 'probationWorkAdd'"
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date1"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
                   >
-                    <q-btn
-                      flat
-                      round
-                      color="red"
-                      icon="mdi-trash-can-outline"
-                      @click="deleteProductivitys(index)"
-                    />
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="3px" color="grey-2" />
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
-              การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12 row">
-              <div class="col-12 text-top2">
-                ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
-                ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
-              </div>
-              <div class="col-12 text-top2 row items-center">
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
-              </div>
-              <div class="col-12 text-top2 row items-center">
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                4.2
-                การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
-              </div>
-              <div class="col-12 text-top2 row items-center">
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                4.3
-                การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
-              </div>
-              <div class="col-12 text-top2 row items-center">
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
-              </div>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="3px" color="grey-2" />
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
-              การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              5.1
-              ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
-            </div>
-            <div class="col-12 row q-gutter-md">
-              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
-                <div class="col-12 row q-col-gutter-md">
-                  <div class="col-12 column q-ml-md">
-                    <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
-                    <li>ทักษะที่ ก.ก. กำหนด</li>
-                    <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
-                    <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
-                    <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
-                    <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
-                    <li>
-                      อื่นๆ (ถ้ามี)
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
                       <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="routeName != 'probationWorkAdd'"
                         dense
-                        outlined
-                        v-model="Other"
-                        label="กรอกอื่นๆ"
-                      />
-                    </li>
-                  </div>
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        class="full-width datepicker"
+                        :model-value="date1 != null ? date2Thai(date1) : null"
+                        label="ลงวันที่"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
                 </div>
-              </q-card>
-            </div>
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              5.3
-              ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
-            </div>
-            <div class="col-12 row q-gutter-md">
-              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-                <div class="col-12 row q-col-gutter-md">
-                  <div class="col-12 column q-ml-md">
-                    <li>
-                      บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
-                    </li>
-                    <li>
-                      แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
-                    </li>
-                    <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
-            </div>
-            <div class="col-12 row q-gutter-md">
-              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-                <div class="col-12 row q-col-gutter-md">
-                  <div class="col-12 column q-ml-md">
-                    <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
-                    <div class="q-pl-lg">
-                      ส่วนที่ 1
-                      คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
-                    </div>
-                    <div class="q-pl-lg">
-                      ส่วนที่ 2
-                      คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
-                    </div>
-                    <div class="q-pl-lg">
-                      มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
-                    </div>
-                    <li>
-                      สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
-                    </li>
-                    <div class="q-pl-lg">
-                      คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
-                    </div>
-                    <div>
-                      <span style="text-decoration: underline">หมายเหตุ</span>
-                      ให้นำคะแนนรวมทั้ง 2
-                      ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
-                      จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
-                    </div>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="3px" color="grey-2" />
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top0 items-center">
-              การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+              </div>
             </div>
             <div class="col-12 row">
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                ผู้ทดลองปฏิบัติหน้าที่ราชการ
+                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
-            </div>
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-xs-12 col-sm-4">
-                <q-input
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  :options="OPcaretaker1"
+                  class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="name"
-                  label="ชื่อ-สกุล"
+                  v-model="caretaker"
+                  label="ผู้ดูแลคนที่ 1"
                 />
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-input
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date2"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        class="full-width datepicker"
+                        :model-value="date2 != null ? date2Thai(date2) : null"
+                        label="ลงวันที่"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <q-select
+                  :options="OPcaretaker"
+                  class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="position"
-                  label="ตำแหน่ง"
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
                 />
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="date1"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="full-width datepicker"
-                      :model-value="date1 != null ? date2Thai(date1) : null"
-                      label="ลงวันที่"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date3"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        hide-bottom-space
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        s
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        class="full-width datepicker"
+                        :model-value="date3 != null ? date2Thai(date3) : null"
+                        label="ลงวันที่"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12 row q-col-gutter-md">
-              <q-select
-                :options="OPcaretaker1"
-                class="col-xs-12 col-sm-8"
-                :readonly="routeName != 'probationWorkAdd'"
-                dense
-                borderless
-                :outlined="routeName == 'probationWorkAdd'"
-                v-model="caretaker"
-                label="ผู้ดูแลคนที่ 1"
-              />
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="date2"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="full-width datepicker"
-                      :model-value="date2 != null ? date2Thai(date2) : null"
-                      label="ลงวันที่"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                ผู้บังคับบัญชาผู้มอบหมายงาน
               </div>
-              <q-select
-                :options="OPcaretaker"
-                class="col-xs-12 col-sm-8"
-                :readonly="routeName != 'probationWorkAdd'"
-                dense
-                borderless
-                :outlined="routeName == 'probationWorkAdd'"
-                v-model="caretaker2"
-                label="ผู้ดูแลคนที่ 2"
-              />
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="date3"
-                  :locale="'th'"
-                  autoApply
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  :options="OPcaretaker1"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
                   borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      s
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="full-width datepicker"
-                      :model-value="date3 != null ? date2Thai(date3) : null"
-                      label="ลงวันที่"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top2 row items-center">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              ผู้บังคับบัญชาผู้มอบหมายงาน
-            </div>
-            <div class="col-12 row q-col-gutter-md">
-              <q-select
-                :options="OPcaretaker1"
-                class="col-xs-12 col-sm-8"
-                :readonly="routeName != 'probationWorkAdd'"
-                dense
-                borderless
-                :outlined="routeName == 'probationWorkAdd'"
-                v-model="commander"
-                label="ผู้บังคับบัญชา"
-              />
-              <div class="col-xs-12 col-sm-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="date4"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="routeName != 'probationWorkAdd'"
-                      dense
-                      borderless
-                      :outlined="routeName == 'probationWorkAdd'"
-                      class="full-width datepicker"
-                      :model-value="date4 != null ? date2Thai(date4) : null"
-                      label="ลงวันที่"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date4"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        class="full-width datepicker"
+                        :model-value="date4 != null ? date2Thai(date4) : null"
+                        label="ลงวันที่"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <q-separator v-show="routeName == 'probationWorkAdd'" />
-      <div
-        v-show="routeName == 'probationWorkAdd'"
-        class="flex justify-end q-pa-sm q-gutter-sm"
-      >
-        <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
-      </div>
-    </q-card>
-  </div>
+        <q-separator v-show="routeName == 'probationWorkAdd'" />
+        <div
+          v-show="routeName == 'probationWorkAdd'"
+          class="flex justify-end q-pa-sm q-gutter-sm"
+        >
+          <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
+        </div>
+      </q-card>
+    </div>
+  </q-form>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { ref, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-// import type { QForm } from "quasar";
+import { useQuasar } from "quasar";
+
+
+const $q = useQuasar();
 const val1 = ref([
   {
     id: 1,
@@ -1168,17 +1249,18 @@ const val1 = ref([
     checked: false,
   },
 ]);
-const val3 = ref(false);
+
 const router = useRouter();
-const test = ref<string>("");
-const ruleNote = ref<string>("");
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, notifyError } = mixin;
 const dateExam = ref<Date | null>(null);
 const dateExam2 = ref<Date | null>(null);
+const checkValidate = ref<boolean>(false);
+const myForm = ref<any>(null);
 
 const id = ref<number>();
 const personal_id = ref<string>();
+const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
 const date_start = ref<Date>();
@@ -1198,30 +1280,14 @@ const clearDateExam = () => {
 const clearDateExam2 = () => {
   dateExam2.value = null;
 };
-
-const routeName = router.currentRoute.value.name;
-const handleDateExamChange = (value: Date | null) => {
-  if (value) {
-    const newDate = new Date(value);
-    newDate.setMonth(newDate.getMonth() + 6);
-    dateExam2.value = newDate;
-  } else {
-    dateExam2.value = null;
-  }
-};
-watch(dateExam, (newDate, oldDate) => {
-  if (newDate && newDate !== oldDate) {
-    const newDate2 = new Date(newDate);
-    newDate2.setMonth(newDate2.getMonth() + 6);
-    dateExam2.value = newDate2;
-  }
+const isDatePicker2Readonly = computed(() => {
+  return dateExam.value === null;
 });
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-
-const caretakerCount = ref<number>(2);
-const caretakerMax = ref<number>(6);
+const routeName = router.currentRoute.value.name;
+const name = ref<string>("");
+const position = ref<string>("");
 
+const monthSelect = ref<number>();
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
@@ -1232,27 +1298,18 @@ const OPcaretaker = [
   "test3",
   "test4",
 ];
-const addCaretaker = () => {
-  caretakerCount.value++;
-};
-const getOptions = (item: number) => {
-  return OPcaretaker;
-};
-const resetCaretakers = () => {
-  caretakerCount.value = 2;
-  caretakers.value = Array(caretakerCount.value).fill("");
-};
+const monthOp = [{ value: "6", label: "6 เดือน" }];
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
-const activities = ref<string[]>(Array(activityCount.value).fill(""));
-const goals = ref<string[]>(Array(activityCount.value).fill(""));
+const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
+const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
 
 const addActivity = () => {
   activityCount.value++;
 };
 const deleteactivity = (item: number) => {
-  activities.value.splice(item, 1);
-  goals.value.splice(item, 1);
+  activity_desc.value.splice(item, 1);
+  goal_desc.value.splice(item, 1);
   if (activityCount.value > 2) {
     activityCount.value--;
   }
@@ -1262,8 +1319,8 @@ const activityArray = computed(() => {
 });
 const resetActivity = () => {
   activityCount.value = 2;
-  activities.value = Array(activityCount.value).fill("");
-  goals.value = Array(activityCount.value).fill("");
+  activity_desc.value = Array(activityCount.value).fill("");
+  goal_desc.value = Array(activityCount.value).fill("");
 };
 //-----------------(3.2)-----------//
 const knowledgeCount = ref<number>(3);
@@ -1280,6 +1337,7 @@ const knowledgeArray = computed(() => {
 const getOpknowledge = (index: number) => {
   return OPknowledge;
 };
+
 const deleteknowledge = (item: number) => {
   knowledge.value.splice(item, 1);
   if (knowledgeCount.value > 3) {
@@ -1300,11 +1358,7 @@ const deleteProductivitys = (item: number) => {
 const addProductivity = () => {
   productivityCount.value++;
 };
-const resetProductivity = () => {
-  productivityCount.value = 1;
-  Productivitys.value = Array(productivityCount.value).fill("");
-  goals1.value = Array(productivityCount.value).fill("");
-};
+
 const checkList21 = ref([
   {
     id: 1,
@@ -1475,19 +1529,58 @@ interface CheckboxItem {
   text: string;
   checked: boolean;
 }
-const saveData = () => {
-  // สร้าง Object ที่เก็บข้อมูล Checkbox
-  const checkboxData: Record<string, CheckboxItem[]> = {
-    val1: val1.value.filter((item) => item.checked),
-    checkList21: checkList21.value.filter((item) => item.checked),
-    checkList22: checkList22.value.filter((item) => item.checked),
-    checkList23: checkList23.value.filter((item) => item.checked),
-    checkList24: checkList24.value.filter((item) => item.checked),
-  };
 
-  // แสดงข้อมูลใน Console
-  console.log("3.2 ข้อมูลติ๊ก", checkboxData);
-  
+// const nameRef = ref()
+// const positionRef = ref()
+// const monthRef = ref()
+// const startDateRef = ref()
+
+// const caregiverRef1 = ref()
+// const caregiverRef2 = ref()
+
+// const workInfopRef = ref()
+
+const saveData = async () => {
+  // myForm.value.resetValidation();
+  // nameRef.value.validate();
+  // positionRef.value.validate();
+  // monthRef.value.validate();
+  // startDateRef.value.validate();
+  // caregiverRef1.value.validate();
+  // caregiverRef2.value.validate();
+  // workInfopRef.value.validate();
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // showLoader();
+
+      // แสดงข้อมูลใน Console
+
+      $q.dialog({
+        title: "บันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          const: "negative",
+        },
+      })
+        .onOk(async () => {
+          const checkboxData: Record<string, CheckboxItem[]> = {
+            val1: val1.value.filter((item) => item.checked),
+            checkList21: checkList21.value.filter((item) => item.checked),
+            checkList22: checkList22.value.filter((item) => item.checked),
+            checkList23: checkList23.value.filter((item) => item.checked),
+            checkList24: checkList24.value.filter((item) => item.checked),
+          };
+          console.log("3.2 ข้อมูลติ๊ก", checkboxData);
+        })
+        .onCancel(() => {})
+        .onDismiss(() => {});
+    } else {
+      // Validation ไม่ผ่าน
+      notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+    }
+  });
+  // สร้าง Object ที่เก็บข้อมูล Checkbox
 };
 const OtherLaw = ref<string>("");
 
@@ -1513,10 +1606,10 @@ const Other = ref<string>("");
 
 const commander = ref<string>("");
 
-const date1 = ref<Date>(new Date());
-const date2 = ref<Date>(new Date());
-const date3 = ref<Date>(new Date());
-const date4 = ref<Date>(new Date());
+const date1 = ref<Date>();
+const date2 = ref<Date>();
+const date3 = ref<Date>();
+const date4 = ref<Date>();
 </script>
 <style lang="scss" scoped>
 .border_y {