diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 3d0f966c2..21e000567 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -70,16 +70,16 @@ const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const checkRule = ref<CheckboxItem[]>([]);
 
-const OPmain = ref< Array<{ id: number; title: string; description: string; level: number; }> >([]);
-const OPgroup = ref< Array<{ id: number; title: string; description: string; level: number; }> >([]);
-const OPcomputer = ref< Array<{ id: number; title: string; level: number; level_description: string; }> >([]);
-const OPenglish = ref< Array<{ id: number; title: string; level: number; level_description: string; }> >([]);
-const OPinfomation = ref< Array<{ id: number; title: string; level: number; level_description: string; }> >([]);
-const OPresourse = ref< Array<{ id: number; title: string; level: number; level_description: string; }> >([]);
-const OPknowledge = ref< Array<{ id: number; title: number; description: string; level: string; }> >([]);
-const OPcaretaker = ref< Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; }>[] >([]);
-const OPcommander = ref< Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; }>[] >([]);
-const OPchairman = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; }>[] >([]);
+const OPmain = ref<Array<{ id: number; title: string; description: string; level: number; }>>([]);
+const OPgroup = ref<Array<{ id: number; title: string; description: string; level: number; }>>([]);
+const OPcomputer = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
+const OPenglish = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
+const OPinfomation = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
+const OPresourse = ref<Array<{ id: number; title: string; level: number; level_description: string; }>>([]);
+const OPknowledge = ref<Array<{ id: number; title: number; description: string; level: string; }>>([]);
+const OPcaretaker = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
+const OPcommander = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
+const OPchairman = ref<Array<{ id: string; prefix: string; firstName: string; lastName: string; name: string; citizenId: number; isDirector: boolean; position: string; positionLevel: string }>[]>([]);
 
 const dataEdit = async (id: string) => {
   await myForm.value.validate().then((result: boolean) => {
@@ -88,8 +88,8 @@ const dataEdit = async (id: string) => {
       const data = putDataEdit(id);
       http
         .put(config.API.saveEditAssign(id), data)
-        .then(() => {})
-        .catch(() => {})
+        .then(() => { })
+        .catch(() => { })
         .finally(async () => {
           status.value = false;
           getAssign();
@@ -205,27 +205,35 @@ const getUser = async () => {
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: item.prefix + "" + item.firstName + " " + item.lastName,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
+      positionLevel: item.positionLevel,
+      position: item.position
     }));
+
     OPcommander.value = data.commander.map((item: any) => ({
       id: item.id,
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: item.prefix + "" + item.firstName + " " + item.lastName,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
+      positionLevel: item.positionLevel,
+      position: item.position
     }));
+
     OPchairman.value = data.chairman.map((item: any) => ({
       id: item.id,
       prefix: item.prefix,
       firstName: item.firstName,
       lastName: item.lastName,
-      name: item.prefix + "" + item.firstName + " " + item.lastName,
+      name: `${item.prefix} ${item.firstName} ${item.lastName} (${item.position} ${item.positionLevel && item.positionLevel != '' ? ', ' + item.positionLevel : ''})`,
       citizenId: item.citizenId,
       isDirector: item.isDirector,
+      positionLevel: item.positionLevel,
+      position: item.position
     }));
   });
 };
@@ -295,7 +303,7 @@ const postDateTime = async () => {
       const result = res.data;
       date_finish.value = result.finish_date;
     })
-    .catch((e) => {})
+    .catch((e) => { })
     .finally(async () => {
       hideLoader();
     });
@@ -703,51 +711,24 @@ onMounted(async () => {
   <q-form ref="myForm">
     <div class="q-pa-sm">
       <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'"
-        />
+        <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 class="col-12 row q-gutter-md">
           <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
-          <q-btn
-            v-if="!status"
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            color="primary"
-          >
+          <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
               <q-list style="min-width: 150px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="clickdownloadFile('pdf')"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf" />
+                <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
+                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" />
                   </q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="clickdownloadFile('docx')"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
+                <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
+                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
@@ -755,37 +736,16 @@ onMounted(async () => {
           </q-btn>
 
           <div v-if="!status">
-            <q-btn
-              dense
-              flat
-              round
-              color="primary"
-              @click="edit()"
-              icon="mdi-pencil-outline"
-            >
+            <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
           </div>
           <div v-else>
-            <q-btn
-              dense
-              flat
-              round
-              color="red"
-              @click="cancel()"
-              icon="mdi-undo"
-            >
+            <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
               <q-tooltip>ยกเลิก</q-tooltip>
             </q-btn>
-            <q-btn
-              dense
-              flat
-              class="q-ml-md"
-              round
-              color="public"
-              @click="saveEdit(assignId)"
-              icon="mdi-content-save-outline"
-            >
+            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)"
+              icon="mdi-content-save-outline">
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
           </div>
@@ -801,28 +761,12 @@ onMounted(async () => {
               </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
-                    dense
-                    borderless
-                    outlined
-                    v-model="fullname"
-                    label="ชื่อ-สกุล"
-                  />
+                  <q-input :rules="[(val) => !!val || 'กรุณากรอกชื่อ']" hide-bottom-space readonly dense borderless
+                    outlined v-model="fullname" label="ชื่อ-สกุล" />
                 </div>
                 <div class="col-xs-12 col-sm-6">
-                  <q-input
-                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
-                    hide-bottom-space
-                    readonly
-                    dense
-                    borderless
-                    outlined
-                    v-model="position"
-                    label="ตำแหน่ง"
-                  />
+                  <q-input :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']" hide-bottom-space readonly dense borderless
+                    outlined v-model="position" label="ตำแหน่ง" />
                 </div>
                 <div class="col-12 row">
                   <div class="col-12 text-top0 items-center">
@@ -830,32 +774,14 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 row q-col-gutter-md">
                     <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="status != true"
-                        dense
-                        borderless
-                        option-label="label"
-                        option-value="value"
-                        :outlined="status == true"
-                        v-model="monthSelect"
-                        :label="`ระยะเวลา (เดือน)`"
-                      />
+                      <q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
+                        class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
+                        option-value="value" :outlined="status == true" v-model="monthSelect"
+                        :label="`ระยะเวลา (เดือน)`" />
                     </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"
-                        :readonly="status != true"
-                      >
+                      <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
+                        :enableTimePicker="false" week-start="0" :readonly="status != true">
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -863,38 +789,19 @@ onMounted(async () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input
-                            dense
-                            borderless
-                            :readonly="status != true"
-                            :outlined="status == true"
-                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                            hide-bottom-space
-                            class="full-width datepicker"
-                            :model-value="
-                              date_start != null
+                          <q-input dense borderless :readonly="status != true" :outlined="status == true"
+                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
+                            class="full-width datepicker" :model-value="date_start != null
                                 ? date2Thai(date_start)
                                 : undefined
-                            "
-                            :label="`${'ตั้งเเต่วันที่'}`"
-                            clearable
-                            @clear="clearDateExam"
-                          >
+                              " :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 || status != true"
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
+                      <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
+                        :readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -902,22 +809,11 @@ onMounted(async () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input
-                            hide-bottom-space
-                            dense
-                            borderless
-                            :outlined="status == true"
-                            readonly
-                            class="full-width datepicker"
-                            :model-value="
-                              date_finish != null
+                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly
+                            class="full-width datepicker" :model-value="date_finish != null
                                 ? date2Thai(date_finish)
                                 : undefined
-                            "
-                            :label="`${'ถึงวันที่'}`"
-                            clearable
-                            @clear="clearDateExam2"
-                          >
+                              " :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
                           </q-input>
                         </template>
                       </datepicker>
@@ -935,64 +831,22 @@ onMounted(async () => {
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
               </div>
               <div v-if="status == true" class="col-12 row q-col-gutter-md">
-                <q-select
-                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
-                  option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])"
-                  class="col-xs-12 col-sm-6"
-                  :readonly="status != true"
-                  dense
-                  hide-bottom-space
-                  borderless
-                  :outlined="status == true"
-                  v-model="caretaker1"
-                  :label="`ผู้ดูแลคนที่ 1`"
-                  option-label="name"
-                />
-                <q-select
-                  clearable
-                  :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id"
-                  option-label="name"
-                  hide-bottom-space
-                  class="col-xs-12 col-sm-6"
-                  :readonly="status != true"
-                  dense
-                  borderless
-                  :outlined="status == true"
-                  v-model="caretaker2"
-                  :label="`ผู้ดูแลคนที่ 2`"
-                />
+                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
+                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
+                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
+                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
+                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
               </div>
               <div v-else class="col-12 row q-col-gutter-md">
-                <q-select
-                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
-                  option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])"
-                  class="col-xs-12 col-sm-6"
-                  :readonly="!status"
-                  dense
-                  hide-bottom-space
-                  borderless
-                  :outlined="status"
-                  v-model="caretaker1"
-                  :label="`ผู้ดูแลคนที่ 1`"
-                  option-label="name"
-                />
-                <q-select
-                  clearable
-                  :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id"
-                  option-label="name"
-                  hide-bottom-space
-                  class="col-xs-12 col-sm-6"
-                  :readonly="!status"
-                  dense
-                  borderless
-                  :outlined="status"
-                  v-model="caretaker2"
-                  :label="`ผู้ดูแลคนที่ 2`"
-                />
+                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
+                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="!status" dense
+                  hide-bottom-space borderless :outlined="status" v-model="caretaker1" :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name" />
+                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="!status" dense borderless
+                  :outlined="status" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
               </div>
             </div>
             <div class="col-12">
@@ -1007,71 +861,29 @@ onMounted(async () => {
               <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="status == true"
-                  round
-                  color="primary"
-                  dense
-                  icon="mdi-plus"
-                  flat
-                  class="q-ml-sm"
-                  @click="addActivity"
-                />
+                <q-btn v-if="status == true" 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"
-                >
+                <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="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        class="bg-white"
-                        type="textarea"
-                        v-model="activity_desc[index]"
-                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
-                      />
+                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
+                        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="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        class="bg-white"
-                        type="textarea"
-                        v-model="goal_desc[index]"
-                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
-                      />
+                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
+                        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
-                        flat
-                        round
-                        color="red"
-                        icon="mdi-trash-can-outline"
-                        @click="deleteactivity(index)"
-                        v-if="status == true"
-                      />
+                    <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)"
+                        v-if="status == true" />
                     </div>
                   </div>
                 </q-card>
@@ -1088,59 +900,22 @@ onMounted(async () => {
                   <div class="col-12 row">
                     <div class="col-12 text-top2 row items-center">
                       ความรู้ความสามารถในการปฏิบัติงาน
-                      <q-btn
-                        v-if="status == true"
-                        round
-                        color="primary"
-                        dense
-                        icon="mdi-plus"
-                        flat
-                        class="q-ml-sm"
-                        @click="addKnowledge"
-                      />
+                      <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
+                        @click="addKnowledge" />
                     </div>
-                    <div
-                      v-for="(item, index) in knowledgeArray"
-                      :key="index"
-                      class="col-12 row q-col-gutter-sm"
-                    >
+                    <div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
                       <div class="col-11 q-my-xs">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title}-${item.description}`
-                          "
-                          option-value="id"
-                          map-options
-                          :rules="
-                            index < 3
-                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
-                              : []
-                          "
-                          hide-bottom-space
-                          :options="OPknowledge"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          :outlined="status == true"
-                          v-model="knowledge[index]"
-                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
-                            index + 1
-                          }`"
-                        />
+                        <q-select :option-label="(item) => `${item.title}-${item.description}`
+                          " option-value="id" map-options :rules="index < 3
+      ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
+      : []
+    " hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
+                          borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
+                            }`" />
                       </div>
-                      <div
-                        v-if="index > 2"
-                        class="col-xs-12 col-sm-1 flex justify-center items-center"
-                      >
-                        <q-btn
-                          v-if="status == true"
-                          flat
-                          round
-                          color="red"
-                          icon="mdi-trash-can-outline"
-                          @click="deleteknowledge(index)"
-                        />
+                      <div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
+                        <q-btn v-if="status == true" flat round color="red" icon="mdi-trash-can-outline"
+                          @click="deleteknowledge(index)" />
                       </div>
                     </div>
                   </div>
@@ -1148,28 +923,13 @@ onMounted(async () => {
                     <div class="col-12 text-top2 row items-center">
                       ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                     </div>
-                    <q-card
-                      flat
-                      bordered
-                      class="col-12 q-pa-md q-mt-sm"
-                      style="max-height: 500px; overflow-y: scroll"
-                    >
+                    <q-card flat bordered class="col-12 q-pa-md q-mt-sm" style="max-height: 500px; overflow-y: scroll">
                       <div class="example-row-column-width">
                         <div class="bg-grey-3 q-py-xs">
-                          <div
-                            class="row"
-                            v-for="(item, index) in checkRule"
-                            :key="item.id"
-                          >
+                          <div class="row" v-for="(item, index) in checkRule" :key="item.id">
                             <div v-if="index === 0" class="col-1 text-center">
-                              <q-checkbox
-                                :true-value="1"
-                                :false-value="0"
-                                v-if="item.status_select === 1"
-                                v-model="item.checked"
-                                dense
-                                :disable="status != true"
-                              />
+                              <q-checkbox :true-value="1" :false-value="0" v-if="item.status_select === 1"
+                                v-model="item.checked" dense :disable="status != true" />
                             </div>
                             <div v-if="index === 0" class="col-11">
                               {{ item.description }}
@@ -1177,10 +937,7 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div
-                            v-if="index === 1"
-                            class="row bg-grey-2 q-py-xs borderCheck"
-                          >
+                          <div v-if="index === 1" class="row bg-grey-2 q-py-xs borderCheck">
                             <div class="col-1"></div>
                             <div class="col-10">
                               {{ item.description }}
@@ -1188,27 +945,16 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div
-                            v-if="index === 2"
-                            class="row bg-grey-2 q-py-xs borderCheck"
-                          >
+                          <div v-if="index === 2" class="row bg-grey-2 q-py-xs borderCheck">
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div
-                            v-else-if="index > 2 && index < 9"
-                            class="row borderCheck border_y q-py-xs"
-                          >
+                          <div v-else-if="index > 2 && index < 9" class="row borderCheck border_y q-py-xs">
                             <div class="col-1 text-center">
-                              <q-checkbox
-                                :true-value="1"
-                                :false-value="0"
-                                v-model="item.checked"
-                                dense
-                                :disable="status != true"
-                              />
+                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
+                                :disable="status != true" />
                             </div>
 
                             <div class="col-9 q-pl-xl">
@@ -1217,27 +963,16 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div
-                            v-if="index === 9"
-                            class="row bg-grey-2 q-py-xs borderCheck"
-                          >
+                          <div v-if="index === 9" class="row bg-grey-2 q-py-xs borderCheck">
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div
-                            v-else-if="index > 9 && index < 16"
-                            class="row borderCheck border_y q-py-xs"
-                          >
+                          <div v-else-if="index > 9 && index < 16" class="row borderCheck border_y q-py-xs">
                             <div class="col-1 text-center">
-                              <q-checkbox
-                                :true-value="1"
-                                :false-value="0"
-                                v-model="item.checked"
-                                dense
-                                :disable="status != true"
-                              />
+                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
+                                :disable="status != true" />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1245,27 +980,16 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div
-                            v-if="index === 16"
-                            class="row bg-grey-2 q-py-xs borderCheck"
-                          >
+                          <div v-if="index === 16" class="row bg-grey-2 q-py-xs borderCheck">
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div
-                            v-else-if="index > 16 && index < 19"
-                            class="row borderCheck border_y q-py-xs"
-                          >
+                          <div v-else-if="index > 16 && index < 19" class="row borderCheck border_y q-py-xs">
                             <div class="col-1 text-center">
-                              <q-checkbox
-                                :true-value="1"
-                                :false-value="0"
-                                v-model="item.checked"
-                                dense
-                                :disable="status != true"
-                              />
+                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
+                                :disable="status != true" />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1273,27 +997,16 @@ onMounted(async () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div
-                            v-if="index === 19"
-                            class="row bg-grey-2 q-py-xs borderCheck"
-                          >
+                          <div v-if="index === 19" class="row bg-grey-2 q-py-xs borderCheck">
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div
-                            v-else-if="index > 19 && index < 30"
-                            class="row borderCheck border_y q-py-xs"
-                          >
+                          <div v-else-if="index > 19 && index < 30" class="row borderCheck border_y q-py-xs">
                             <div class="col-1 text-center">
-                              <q-checkbox
-                                :true-value="1"
-                                :false-value="0"
-                                v-model="item.checked"
-                                dense
-                                :disable="status != true"
-                              />
+                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
+                                :disable="status != true" />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1309,15 +1022,8 @@ onMounted(async () => {
                     </div>
                     <div class="col-12 row q-col-gutter-md">
                       <div class="col-12">
-                        <q-input
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          :outlined="status == true"
-                          v-model="OtherLaw"
-                          type="textarea"
-                        />
+                        <q-input class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
+                          v-model="OtherLaw" type="textarea" />
                       </div>
                     </div>
                   </div>
@@ -1325,121 +1031,60 @@ onMounted(async () => {
                     <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
-                          :option-label="
-                            (item) =>
-                              `${item.title} - ${item.level_description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-                          ]"
-                          :options="OPcomputer"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="skill"
-                          label="ด้านที่ 1"
-                        >
+                        <q-select :option-label="(item) =>
+                            `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+  ]" :options="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
+                          map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          ellipsis-2-lines
-                          :option-label="
-                            (item) =>
-                              `${item.title} - ${item.level_description}`
-                          "
-                          option-value="id"
-                          map-options
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-                          ]"
-                          :options="OPenglish"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          :outlined="status == true"
-                          v-model="skill2"
-                          label="ด้านที่ 2"
-                        >
+                        <q-select ellipsis-2-lines :option-label="(item) =>
+                            `${item.title} - ${item.level_description}`
+                          " option-value="id" map-options hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+  ]" :options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
+                          :outlined="status == true" v-model="skill2" label="ด้านที่ 2">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) =>
-                              `${item.title} - ${item.level_description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-                          ]"
-                          :options="OPinfomation"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          map-options
-                          borderless
-                          :outlined="status == true"
-                          v-model="skill3"
-                          label="ด้านที่ 3"
-                        >
+                        <q-select :option-label="(item) =>
+                            `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+  ]" :options="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
+                          borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) =>
-                              `${item.title} - ${item.level_description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
-                          ]"
-                          :options="OPresourse"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          map-options
-                          borderless
-                          :outlined="status == true"
-                          v-model="skill4"
-                          label="ด้านที่ 4"
-                        >
+                        <q-select :option-label="(item) =>
+                            `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+  ]" :options="OPresourse" class="bg-white" :readonly="status != true" dense map-options
+                          borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                     </div>
                   </div>
@@ -1458,145 +1103,69 @@ onMounted(async () => {
                     <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
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="
-                            filterMain(OPmain, [main2, main3, main4, main5])
-                          "
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="main"
-                          label="ตัวที่ 1"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="filterMain(OPmain, [main2, main3, main4, main5])
+                            " class="bg-white" :readonly="status != true" dense borderless map-options
+                          :outlined="status == true" v-model="main" label="ตัวที่ 1">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="
-                            filterMain(OPmain, [main, main3, main4, main5])
-                          "
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="main2"
-                          label="ตัวที่ 2"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="filterMain(OPmain, [main, main3, main4, main5])
+                            " class="bg-white" :readonly="status != true" dense borderless map-options
+                          :outlined="status == true" v-model="main2" label="ตัวที่ 2">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="
-                            filterMain(OPmain, [main, main2, main4, main5])
-                          "
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          map-options
-                          borderless
-                          :outlined="status == true"
-                          v-model="main3"
-                          label="ตัวที่ 3"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="filterMain(OPmain, [main, main2, main4, main5])
+                            " class="bg-white" :readonly="status != true" dense map-options borderless
+                          :outlined="status == true" v-model="main3" label="ตัวที่ 3">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="
-                            filterMain(OPmain, [main, main2, main3, main5])
-                          "
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="main4"
-                          label="ตัวที่ 4"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="filterMain(OPmain, [main, main2, main3, main5])
+                            " class="bg-white" :readonly="status != true" dense borderless map-options
+                          :outlined="status == true" v-model="main4" label="ตัวที่ 4">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="
-                            filterMain(OPmain, [main, main2, main3, main4])
-                          "
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          map-options
-                          borderless
-                          :outlined="status == true"
-                          v-model="main5"
-                          label="ตัวที่ 5"
-                        >
+                        <q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
+                          " :option-label="(item) => `${item.title} - ${item.description}`
+    " option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
+                          :outlined="status == true" v-model="main5" label="ตัวที่ 5">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                     </div>
                   </div>
@@ -1604,88 +1173,46 @@ onMounted(async () => {
                     <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
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-                          ]"
-                          :options="filterData(OPgroup, [group2, group3])"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="group"
-                          label="ตัวที่ 1"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+  ]" :options="filterData(OPgroup, [group2, group3])" class="bg-white"
+                          :readonly="status != true" dense borderless map-options :outlined="status == true"
+                          v-model="group" label="ตัวที่ 1">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-                          ]"
-                          :options="filterData(OPgroup, [group, group3])"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          map-options
-                          :outlined="status == true"
-                          v-model="group2"
-                          label="ตัวที่ 2"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+  ]" :options="filterData(OPgroup, [group, group3])" class="bg-white"
+                          :readonly="status != true" dense borderless map-options :outlined="status == true"
+                          v-model="group2" label="ตัวที่ 2">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select
-                          :option-label="
-                            (item) => `${item.title} - ${item.description}`
-                          "
-                          option-value="id"
-                          map-options
-                          hide-bottom-space
-                          :rules="[
-                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
-                          ]"
-                          :options="filterData(OPgroup, [group, group2])"
-                          class="bg-white"
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          :outlined="status == true"
-                          v-model="group3"
-                          label="ตัวที่ 3"
-                        >
+                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
+                          " option-value="id" map-options hide-bottom-space :rules="[
+    (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+  ]" :options="filterData(OPgroup, [group, group2])" class="bg-white"
+                          :readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
+                          label="ตัวที่ 3">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select
-                        >
+                          </template></q-select>
                       </div>
                     </div>
                   </div>
@@ -1696,12 +1223,9 @@ onMounted(async () => {
             <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"
-                >
+                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm">
                   ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
-                  )</span
-                >
+                  )</span>
               </div>
               <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                 <div class="row col-12 q-gutter-lg">
@@ -1775,13 +1299,7 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-12">
-                  <q-input
-                    :readonly="status != true"
-                    dense
-                    borderless
-                    :outlined="status == true"
-                    v-model="Other"
-                  />
+                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other" />
                 </div>
               </div>
             </div>
@@ -1789,70 +1307,28 @@ onMounted(async () => {
               <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="status == true"
-                  round
-                  color="primary"
-                  dense
-                  icon="mdi-plus"
-                  flat
-                  class="q-ml-sm"
-                  @click="addProductivity"
-                />
+                <q-btn v-if="status == true" 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 ProductivityArray"
-                  :key="index"
-                  flat
-                  bordered
-                  class="col-12 q-pa-sm bg-grey-1"
-                >
+                <q-card v-for="(item, index) in ProductivityArray" :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
-                        hide-bottom-space
-                        :rules="
-                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        "
-                        class="bg-white"
-                        type="textarea"
-                        :readonly="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        v-model="output_desc[index]"
-                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
-                      />
+                      <q-input hide-bottom-space :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        " class="bg-white" type="textarea" :readonly="status != true" dense borderless
+                        :outlined="status == true" v-model="output_desc[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="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        v-model="indicator_desc[index]"
-                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
-                      />
+                      <q-input :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        " hide-bottom-space class="bg-white" type="textarea" :readonly="status != true" dense
+                        borderless :outlined="status == true" v-model="indicator_desc[index]"
+                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
                     </div>
-                    <div
-                      v-if="index > 0"
-                      class="col-xs-12 col-sm-1 flex justify-center items-center"
-                    >
-                      <q-btn
-                        flat
-                        v-if="status == true"
-                        round
-                        color="red"
-                        icon="mdi-trash-can-outline"
-                        @click="deleteProductivitys(index)"
-                      />
+                    <div v-if="index > 0" class="col-xs-12 col-sm-1 flex justify-center items-center">
+                      <q-btn flat v-if="status == true" round color="red" icon="mdi-trash-can-outline"
+                        @click="deleteProductivitys(index)" />
                     </div>
                   </div>
                 </q-card>
@@ -1921,14 +1397,8 @@ onMounted(async () => {
                       <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                       <li>
                         อื่นๆ (ถ้ามี)
-                        <q-input
-                          :readonly="status != true"
-                          dense
-                          borderless
-                          :outlined="status == true"
-                          v-model="Other5"
-                          label="กรอกอื่นๆ"
-                        />
+                        <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other5"
+                          label="กรอกอื่นๆ" />
                       </li>
                     </div>
                   </div>
@@ -2011,36 +1481,16 @@ onMounted(async () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-4">
-                  <q-input
-                    :readonly="status != true"
-                    dense
-                    borderless
-                    :outlined="status == true"
-                    v-model="fullname"
-                    label="ชื่อ-สกุล"
-                  />
+                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="fullname"
+                    label="ชื่อ-สกุล" />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <q-input
-                    :readonly="status != true"
-                    dense
-                    borderless
-                    :outlined="status == true"
-                    v-model="position"
-                    label="ตำแหน่ง"
-                  />
+                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="position"
+                    label="ตำแหน่ง" />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="date1"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="status != true"
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
+                  <datepicker menu-class-name="modalfix" v-model="date1" :locale="'th'" autoApply
+                    :readonly="status != true" borderless :enableTimePicker="false" week-start="0">
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -2048,23 +1498,12 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        class="full-width datepicker"
-                        :model-value="date1 != null ? date2Thai(date1) : null"
-                        label="ลงวันที่"
-                      >
+                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true" dense borderless :outlined="status == true"
+                        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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                           </q-icon>
                         </template>
                       </q-input>
@@ -2079,43 +1518,15 @@ onMounted(async () => {
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select
-                  v-if="status == true"
-                  :options="filtermantor(OPcaretaker, [caretaker2])"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="status != true"
-                  dense
-                  borderless
-                  :outlined="status == true"
-                  v-model="caretaker1"
-                  label="ผู้ดูแลคนที่ 1"
-                />
-                <q-select
-                  v-else
-                  :options="filtermantor(OPcaretaker, [caretaker2])"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="!status"
-                  dense
-                  borderless
-                  :outlined="status"
-                  v-model="caretaker1"
-                  label="ผู้ดูแลคนที่ 1"
-                />
+                <q-select v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id"
+                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
+                  :outlined="status == true" v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
+                <q-select v-else :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id" option-label="name"
+                  class="col-xs-12 col-sm-8" :readonly="!status" dense borderless :outlined="status" v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1" />
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="date2"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    :readonly="status != true"
-                    week-start="0"
-                  >
+                  <datepicker menu-class-name="modalfix" v-model="date2" :locale="'th'" autoApply borderless
+                    :enableTimePicker="false" :readonly="status != true" week-start="0">
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -2123,68 +1534,27 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        class="full-width datepicker"
-                        :model-value="date2 != null ? date2Thai(date2) : null"
-                        label="ลงวันที่"
-                      >
+                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true" dense borderless :outlined="status == true"
+                        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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                           </q-icon>
                         </template>
                       </q-input>
                     </template>
                   </datepicker>
                 </div>
-                <q-select
-                  clearable
-                  v-if="status == true"
-                  :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="status != true"
-                  dense
-                  borderless
-                  :outlined="status == true"
-                  v-model="caretaker2"
-                  label="ผู้ดูแลคนที่ 2"
-                />
-                <q-select
-                  clearable
-                  v-else
-                  :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="!status"
-                  dense
-                  borderless
-                  :outlined="status"
-                  v-model="caretaker2"
-                  label="ผู้ดูแลคนที่ 2"
-                />
+                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id" option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense
+                  borderless :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                  option-label="name" class="col-xs-12 col-sm-8" :readonly="!status" dense borderless :outlined="status"
+                  v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                 <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"
-                    :readonly="status != true || !caretaker2"
-                  >
+                  <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
+                    :enableTimePicker="false" week-start="0" :readonly="status != true || !caretaker2">
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -2192,30 +1562,13 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input
-                        hide-bottom-space
-                        :disable="!caretaker2"
-                        :readonly="status != true"
-                        dense
-                        :rules="
-                          caretaker2
-                            ? [(val) => !!val || 'กรุณาเลือกวันที่']
-                            : []
-                        "
-                        borderless
-                        :outlined="status == true"
-                        class="full-width datepicker"
-                        :model-value="
-                          caretaker2 != null ? date2Thai(date3) : null
-                        "
-                        label="ลงวันที่"
-                      >
+                      <q-input hide-bottom-space :disable="!caretaker2" :readonly="status != true" dense :rules="caretaker2
+                          ? [(val) => !!val || 'กรุณาเลือกวันที่']
+                          : []
+                        " borderless :outlined="status == true" class="full-width datepicker" :model-value="caretaker2 != null ? date2Thai(date3) : null
+    " label="ลงวันที่">
                         <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
+                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                           </q-icon>
                         </template>
                       </q-input>
@@ -2230,45 +1583,16 @@ onMounted(async () => {
                 ผู้บังคับบัญชาผู้มอบหมายงาน
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select
-                  v-if="status == true"
-                  :options="OPcommander"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="status != true"
-                  dense
-                  borderless
-                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
-                  :outlined="status == true"
-                  v-model="commander"
-                  label="ผู้บังคับบัญชา"
-                />
-                <q-select
-                  v-else
-                  :options="OPcommander"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="!status"
-                  dense
-                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
-                  borderless
-                  :outlined="status"
-                  v-model="commander"
-                  label="ผู้บังคับบัญชา"
-                />
+                <q-select v-if="status == true" :options="OPcommander" option-value="id" option-label="name"
+                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']" :outlined="status == true" v-model="commander"
+                  label="ผู้บังคับบัญชา" />
+                <q-select v-else :options="OPcommander" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
+                  :readonly="!status" dense :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']" borderless
+                  :outlined="status" v-model="commander" label="ผู้บังคับบัญชา" />
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="date4"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :readonly="status != true"
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
+                  <datepicker menu-class-name="modalfix" v-model="date4" :locale="'th'" autoApply borderless
+                    :readonly="status != true" :enableTimePicker="false" week-start="0">
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -2276,23 +1600,12 @@ onMounted(async () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true"
-                        dense
-                        borderless
-                        :outlined="status == true"
-                        class="full-width datepicker"
-                        :model-value="date4 != null ? date2Thai(date4) : null"
-                        label="ลงวันที่"
-                      >
+                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true" dense borderless :outlined="status == true"
+                        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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                           </q-icon>
                         </template>
                       </q-input>
@@ -2307,49 +1620,19 @@ onMounted(async () => {
                 ประธานกรรมการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select
-                  v-if="status == true"
-                  :options="OPchairman"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="status != true"
-                  dense
-                  borderless
-                  :outlined="status == true"
-                  v-model="chairman"
-                  label="ประธานกรรมการ"
-                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
-                />
-                <q-select
-                  v-else
-                  :options="OPchairman"
-                  option-value="id"
-                  option-label="name"
-                  class="col-xs-12 col-sm-8"
-                  :readonly="!status"
-                  dense
-                  borderless
-                  :outlined="status"
-                  v-model="chairman"
-                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
-                  label="ประธานกรรมการ"
-                />
+                <q-select v-if="status == true" :options="OPchairman" option-value="id" option-label="name"
+                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
+                  v-model="chairman" label="ประธานกรรมการ" :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']" />
+                <q-select v-else :options="OPchairman" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
+                  :readonly="!status" dense borderless :outlined="status" v-model="chairman"
+                  :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']" label="ประธานกรรมการ" />
               </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(personalId)"
-          />
+        <div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
+          <q-btn unelevated label="บันทึก" color="public" @click="saveData(personalId)" />
         </div>
       </div>
     </div>
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index bfc27cf7f..511a9c20d 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -75,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "statusRoyal",
     align: "center",
-    label: "สถานะราชกิจจานุเบกษา",
+    label: "สถานะ",
     sortable: false,
     field: "statusRoyal",
     headerStyle: "font-size: 14px",
@@ -108,6 +108,7 @@ const fetchData = async () => {
         period_isActive: e.period_isActive,
         period_doc: e.period_doc,
         period_status: e.period_status.result,
+        statusRoyal: 'กำลังดำเนินการ'
       }));
     })
     .catch((e) => {
@@ -311,6 +312,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
               >
                 {{ props.row.period_end }}
               </q-td>
+              <q-td
+                key="statusRoyal"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
+                {{ props.row.statusRoyal }}
+              </q-td>
               <q-td
                 key="period_isActive"
                 :props="props"
@@ -331,22 +339,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   @click="clickEdit(props.row)"
                 />
               </q-td>
-              <q-td key="statusRoyal" :props="props">
-                <q-icon
-                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
-                  name="mdi-timer-sand"
-                  color="orange"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-              </q-td>
               <q-td auto-width>
                 <q-btn
                   dense
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index d77f4b02f..a3f248e7b 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -46,7 +46,7 @@ const checkboxData = ref<any>([
   { id: 1, name: "มีโทษทางวินัย", val: true },
   {
     id: 2,
-    name: "ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้นเงินเดือน เนื่องจากลาเกิน",
+    name: "ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้น เนื่องจากลาเกิน",
     val: false,
   },
   {
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 5796828a2..281ab3377 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -31,7 +31,7 @@ const tab = ref<string>("main");
 const order = ref<string>("");
 const code = ref<string>("");
 const years = ref<number>(new Date().getDate());
-const date = ref<Date>(new Date());
+const date = ref<Date | null>(null);
 const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
@@ -161,8 +161,8 @@ const fetchAttachment = async (orderId: string) => {
       let response = res.data.result;
       order.value = response.orderNo;
       years.value = Number(response.orderYear);
-      if (response.date !== undefined) {
-        date.value = response.date;
+      if (response.signDate !== undefined && response.signDate != "") {
+        date.value = response.signDate;
       }
       if (response.orderFileUrl !== null) {
         OrderPDFUpload.value = response.orderFileUrl;