เพิ่มแสดงผลทดลองงาน

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -90,15 +90,17 @@ const fecthFormdata = async () => {
       await fecthAssignoutput(res.data.data);
       await fectFormfull();
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       if (props.action == "edit") {
         fecthFormRound();
       }
     });
 };
+
 const fectFormfull = async () => {
-  Autherise.value = probationStore.director.name;
+  Autherise.value = probationStore.director.name + ` (${probationStore.director.PositionLineName}, ${probationStore.director.PositionLevelName}, ${probationStore.director.Oc})`;
+
   list1_1.value = probationStore.assignOutput;
   evaluate_expenct_level.value = await probationStore.assignOutput.map(
     (e: any) => ({
@@ -112,6 +114,7 @@ const fectFormfull = async () => {
   checkArray.value = list1_1.value.length;
   fecthFormRound();
 };
+
 const fecthFormRound = async () => {
   try {
     let data = await dataArr.value;
@@ -332,14 +335,7 @@ onMounted(async () => {
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบบันทึกผล (ผู้ดูเเล)</div>
       <div v-if="status == false">
-        <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>
@@ -347,24 +343,32 @@ onMounted(async () => {
         <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
           <q-tooltip>ยกเลิก</q-tooltip>
         </q-btn>
-        <q-btn
-          dense
-          flat
-          round
-          class="q-ml-md"
-          color="public"
-          @click="savaForm()"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn dense flat round class="q-ml-md" color="public" @click="savaForm()" icon="mdi-content-save-outline">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
       </div>
     </div>
     <div class="col-12 row q-gutter-lg">
       <div class="col-12 row">
+        <div class="col-12 row text-top0">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
+        </div>
+
+        <div class="col-12 q-pl-md q-pb-md">
+          <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+          <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span> {{
+            probationStore.person.PositionLineName }}</div>
+          <div class="col-12"><span class="text-top0 q-pl-sm">ระดับ</span> {{ probationStore.person.PositionLevelName }}
+          </div>
+          <div class="col-12"><span class="text-top0 q-pl-sm">สังกัด</span> {{ probationStore.person.Oc }}</div>
+        </div>
+
         <div class="col-12 text-top0 row items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          วันเริ่มทดลองปฏิบัติหน้าที่ราชการ ตั้งแต่วันที่
+          การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+                "ครั้งที่ " + assign.round_no
+              }}</span> ตั้งแต่วันที่
           <span class="text-black q-px-sm">
             {{ date2Thai(assign.date_start) }}
           </span>
@@ -375,7 +379,7 @@ onMounted(async () => {
         </div>
         <div class="col-12 text-top0 row items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          <span class="text-primary q-pr-sm">
+          บันทึกผล<span class="text-primary q-pr-sm">
             {{ "ครั้งที่ " + evaluate_no }}
           </span>
           ระหว่างวันที่
@@ -408,27 +412,15 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
           ผลผลิตของงานที่คาดหวัง
         </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-        >
+        <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
           <q-list dense v-for="(list, i) in list1_1" :key="i">
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>{{ list.output_desc }}</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_expenct_level[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="evaluate_expenct_level[i].level" :val="list.id" max="5" size="sm" color="grey"
+                  :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -455,37 +447,16 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
           ผลผลิตของงานที่เกิดขึ้นจริง
         </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-        >
+        <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
           <q-list dense v-for="(list, i) in list1_2" :key="i">
             <q-item dense tag="label" v-ripple v-if="i < checkArray">
               <q-item-section>
-                <q-input
-                  outlined
-                  dense
-                  v-model="evaluate_ouptut[i].text"
-                  lazy-rules
-                  autogrow
-                  hide-bottom-space
-                  :row="1"
-                  :rules="evaluate_ouptutRules"
-                  :disable="!status"
-                />
+                <q-input outlined dense v-model="evaluate_ouptut[i].text" lazy-rules autogrow hide-bottom-space :row="1"
+                  :rules="evaluate_ouptutRules" :disable="!status" />
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_ouptut[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="evaluate_ouptut[i].level" :val="list.id" max="5" size="sm" color="grey"
+                  :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -515,19 +486,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.2. ความรู้ความสามารถ</q-item-label
-                >
+                  1.2. ความรู้ความสามารถ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="knowledge_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="knowledge_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -555,19 +518,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.3. ทักษะ</q-item-label
-                >
+                  1.3. ทักษะ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="skill_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="skill_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -595,19 +550,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.4. สมมรถนะ</q-item-label
-                >
+                  1.4. สมมรถนะ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="competency_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="competency_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -635,19 +582,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.5. ความสามารถในการเรียนรู้งาน</q-item-label
-                >
+                  1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="learn_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="learn_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -676,19 +615,11 @@ onMounted(async () => {
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   1.6.
-                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
-                >
+                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="apply_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="apply_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -716,55 +647,29 @@ onMounted(async () => {
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   1.7 อื่นๆ
-                  <q-checkbox
-                    class="q-ml-sm"
-                    dense
-                    v-model="etc"
-                    @click="
-                      (achievement_other.text = ''),
-                        (achievement_other.level = 0)
-                    "
-                    :disable="!status"
-                /></q-item-label>
+                  <q-checkbox class="q-ml-sm" dense v-model="etc" @click="
+                    (achievement_other.text = ''),
+                    (achievement_other.level = 0)
+                    " :disable="!status" /></q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
         </q-card>
 
-        <q-card
-          v-if="etc"
-          class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
-        >
+        <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
           <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section class="q-ml-md">
                 <q-item-label>
-                  <q-input
-                    v-model="achievement_other.text"
-                    label="กรอกอื่นๆ"
-                    dense
-                    lazy-rules
-                    autogrow
-                    hide-bottom-space
-                    outlined
-                    class="bg-white"
-                    :rules="[
+                  <q-input v-model="achievement_other.text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space
+                    outlined class="bg-white" :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                    ]"
-                    :disable="!status"
-                  />
+                    ]" :disable="!status" />
                 </q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="achievement_other.level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="achievement_other.level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -793,39 +698,18 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             จุดเด่น (ไม่เกิน 5 บรรทัด)
           </div>
-          <q-input
-            outlined
-            dense
-            v-model="achievement_strength_desc"
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-            lazy-rules
-            type="textarea"
-            label="กรอกจุดเด่น"
-            hide-bottom-space
-            :row="5"
-            :rules="achievement_strengthRules"
-            ref="achievement_strengthRef"
-            :disable="!status"
-          />
+          <q-input outlined dense v-model="achievement_strength_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5" :rules="achievement_strengthRules"
+            ref="achievement_strengthRef" :disable="!status" />
         </div>
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
           </div>
-          <q-input
-            outlined
-            dense
-            v-model="achievement_improve_desc"
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-            lazy-rules
-            type="textarea"
-            hide-bottom-space
-            label="กรอกสิ่งที่ควรปรับปรุง"
-            :row="5"
-            ref="achievement_inproveRef"
-            :disable="!status"
-          />
+          <q-input outlined dense v-model="achievement_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+            ref="achievement_inproveRef" :disable="!status" />
         </div>
       </div>
       <div class="row col-12 q-gutter-lg no-margin">
@@ -838,27 +722,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.1 ความประพฤติ
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_1" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="conduct_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="conduct_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -886,27 +758,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.2 ความมีคุณธรรมจริยธรรม
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_2" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="moral_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="moral_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -934,27 +794,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.3 การรักษาวินัย
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_3" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="discipline_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="discipline_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -981,50 +829,23 @@ onMounted(async () => {
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.4 อื่นๆ
-            <q-checkbox
-              class="q-ml-sm"
-              dense
-              v-model="etc2"
-              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
-              :disable="!status"
-            />
+            <q-checkbox class="q-ml-sm" dense v-model="etc2"
+              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)" :disable="!status" />
           </div>
-          <q-card
-            v-if="etc2"
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card v-if="etc2" flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense>
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>
-                    <q-input
-                      v-model="behavio_orther.text"
-                      label="กรอกอื่นๆ"
-                      dense
-                      lazy-rules
-                      autogrow
-                      hide-bottom-space
-                      outlined
-                      class="bg-white"
-                      :rules="[
+                    <q-input v-model="behavio_orther.text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space
+                      outlined class="bg-white" :rules="[
                         (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                      ]"
-                      :disable="!status"
-                    />
+                      ]" :disable="!status" />
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="behavio_orther.level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="behavio_orther.level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                    label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -1052,39 +873,18 @@ onMounted(async () => {
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               จุดเด่น (ไม่เกิน 5 บรรทัด)
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavior_strength_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              label="กรอกจุดเด่น"
-              hide-bottom-space
-              :row="5"
-              :rules="behavio_strengthRules"
-              ref="behavio_strengthRef"
-              :disable="!status"
-            />
+            <q-input outlined dense v-model="behavior_strength_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5" :rules="behavio_strengthRules"
+              ref="behavio_strengthRef" :disable="!status" />
           </div>
           <div class="col-12 row">
             <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavior_improve_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              hide-bottom-space
-              label="กรอกสิ่งที่ควรปรับปรุง"
-              :row="5"
-              ref="behavio_inproveRef"
-              :disable="!status"
-            />
+            <q-input outlined dense v-model="behavior_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+              ref="behavio_inproveRef" :disable="!status" />
           </div>
         </div>
       </div>
@@ -1094,11 +894,7 @@ onMounted(async () => {
             <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
             การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
             <q-list dense>
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
@@ -1106,22 +902,10 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="orientation"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="orientation"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="orientation" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="orientation" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1132,22 +916,10 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="self_learning"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="self_learning"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="self_learning" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="self_learning" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1158,50 +930,24 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="training_seminar"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="training_seminar"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="training_seminar" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="training_seminar" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" />
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
-                  <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
-                  >
+                  <q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="other_training"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="other_training"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="other_training" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="other_training" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1215,27 +961,11 @@ onMounted(async () => {
             ผู้บังคับบัญชา/ผู้มอบหมายงาน
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select
-              class="col-xs-12 col-sm-8"
-              dense
-              v-model="Autherise"
-              outlined
-              :options="option"
-              label="ผู้บังคับบัญชา"
-              option-label="name"
-              disable
-            />
+            <q-select class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
+              label="ผู้บังคับบัญชา" option-label="name" disable />
             <div class="col-xs-12 col-sm-4">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateAutherise"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-                :readonly="!status"
-              >
+              <datepicker menu-class-name="modalfix" v-model="dateAutherise" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0" :readonly="!status">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -1243,23 +973,11 @@ onMounted(async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker col-3"
-                    :model-value="
-                      dateAutherise != null ? date2Thai(dateAutherise) : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                    :disable="!status"
-                  >
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                    :disable="!status">
                     <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>
@@ -1269,10 +987,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-      <q-toolbar
-        class="text-primary"
-        v-if="routeName == 'probationFormAddresult'"
-      >
+      <q-toolbar class="text-primary" v-if="routeName == 'probationFormAddresult'">
         <q-space />
         <q-btn label="บันทึก" color="secondary" @click="savaForm" />
       </q-toolbar>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue

@@ -97,7 +97,7 @@ const fecthFormdata = async (id: string) => {
       person.value = res.data.data.person;
       assign.value = res.data.data.assign;
       option.value.push(res.data.data.director);
-      Autherise.value = res.data.data.director.name;
+      Autherise.value = res.data.data.director.name + ` (${res.data.data.director.PositionLineName}, ${res.data.data.director.PositionLevelName}, ${res.data.data.director.Oc})`;
 
       list1_1.value = res.data.data.assign_output;
       res.data.data.assign_output.forEach((e: any) => {
@@ -370,9 +370,23 @@ onMounted(async () => {
       <div class="row col-12 no-margin q-px-md q-pt-md">
         <div class="row col-12 q-gutter-lg">
           <div class="col-12 row">
+            <div class="col-12 row text-top0">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ {{person.name}}
+            </div>
+
+            <div class="col-12 q-pl-md q-pb-md">
+              <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+              <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span> {{ person.PositionLineName }}</div>
+              <div class="col-12"><span class="text-top0 q-pl-sm">ระดับ</span> {{ person.PositionLevelName }} </div>
+              <div class="col-12"><span class="text-top0 q-pl-sm">สังกัด</span> {{ person.Oc }}</div>
+            </div>
+
             <div class="col-12 text-top0 row items-center">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+                "ครั้งที่ " + assign.round_no
+              }}</span> ตั้งแต่วันที่
               <span class="text-black q-px-sm">{{
                 date2Thai(assign.date_start)
               }}</span>
@@ -383,7 +397,7 @@ onMounted(async () => {
             </div>
             <div class="col-12 text-top0 row items-center">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              <span class="text-primary q-pr-sm">{{
+              บันทึกผล<span class="text-primary q-pr-sm">{{
                 "ครั้งที่ " + round
               }}</span>
               ระหว่างวันที่

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue

@@ -41,12 +41,12 @@ const evaluate_no = ref<number>(1);
 const dataArr = ref<any>();
 
 const checkArray = ref<number>(0);
-  const list1_1 = ref<any>([]);
+const list1_1 = ref<any>([]);
 const option = ref<any>([]);
 
 // part 1
-const evaluate_expenct_level = ref<any>([ { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 } ]);
-const evaluate_ouptut = ref<any>([ { level: 0, text: "" } ]);
+const evaluate_expenct_level = ref<any>([{ id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 }]);
+const evaluate_ouptut = ref<any>([{ level: 0, text: "" }]);
 const knowledge_level = ref<number>(0);
 const skill_level = ref<number>(0);
 const competency_level = ref<number>(0);
@@ -102,7 +102,7 @@ const fecthFormdata = async () => {
       await fecthAssignoutput(res.data.data);
       await fectFormfull();
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       if (props.action == "edit") {
         fecthFormRound();
@@ -110,7 +110,7 @@ const fecthFormdata = async () => {
     });
 };
 const fectFormfull = async () => {
-  Autherise.value = probationStore.director.name;
+  Autherise.value = probationStore.director.name + ` (${probationStore.director.PositionLineName}, ${probationStore.director.PositionLevelName}, ${probationStore.director.Oc})`;
   list1_1.value = probationStore.assignOutput;
   evaluate_expenct_level.value = await probationStore.assignOutput.map(
     (e: any) => ({
@@ -341,14 +341,7 @@ onMounted(async () => {
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
       <div v-if="status == false">
-        <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>
@@ -356,24 +349,33 @@ onMounted(async () => {
         <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
           <q-tooltip>ยกเลิก</q-tooltip>
         </q-btn>
-        <q-btn
-          dense
-          flat
-          round
-          class="q-ml-md"
-          color="public"
-          @click="savaForm()"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn dense flat round class="q-ml-md" color="public" @click="savaForm()" icon="mdi-content-save-outline">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn>
       </div>
     </div>
     <div class="col-12 row q-gutter-lg">
       <div class="col-12 row">
+
+        <div class="col-12 row text-top0">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
+        </div>
+
+        <div class="col-12 q-pl-md q-pb-md">
+          <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+          <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span> {{
+            probationStore.person.PositionLineName }}</div>
+          <div class="col-12"><span class="text-top0 q-pl-sm">ระดับ</span> {{ probationStore.person.PositionLevelName }}
+          </div>
+          <div class="col-12"><span class="text-top0 q-pl-sm">สังกัด</span> {{ probationStore.person.Oc }}</div>
+        </div>
+
         <div class="col-12 text-top0 row items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          วันเริ่มทดลองปฏิบัติหน้าที่ราชการ ตั้งแต่วันที่
+          การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+            "ครั้งที่ " + assign.round_no
+          }}</span> ตั้งแต่วันที่
           <span class="text-black q-px-sm">{{
             date2Thai(assign.date_start)
           }}</span>
@@ -384,7 +386,7 @@ onMounted(async () => {
         </div>
         <div class="col-12 text-top0 row items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          <span class="text-primary q-pr-sm">{{
+          บันทึกผล<span class="text-primary q-pr-sm">{{
             "ครั้งที่ " + evaluate_no
           }}</span>
           ระหว่างวันที่
@@ -413,27 +415,15 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
           ผลผลิตของงานที่คาดหวัง
         </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-        >
+        <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
           <q-list dense v-for="(list, i) in list1_1" :key="i">
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>{{ list.output_desc }}</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_expenct_level[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="evaluate_expenct_level[i].level" :val="list.id" max="5" size="sm" color="grey"
+                  :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -460,37 +450,16 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
           ผลผลิตของงานที่เกิดขึ้นจริง
         </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-        >
+        <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
           <q-list dense v-for="(list, i) in list1_2" :key="i">
             <q-item dense tag="label" v-ripple v-if="i < checkArray">
               <q-item-section>
-                <q-input
-                  outlined
-                  dense
-                  v-model="evaluate_ouptut[i].text"
-                  lazy-rules
-                  autogrow
-                  hide-bottom-space
-                  :row="1"
-                  :rules="evaluate_ouptutRules"
-                  :disable="!status"
-                />
+                <q-input outlined dense v-model="evaluate_ouptut[i].text" lazy-rules autogrow hide-bottom-space :row="1"
+                  :rules="evaluate_ouptutRules" :disable="!status" />
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_ouptut[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="evaluate_ouptut[i].level" :val="list.id" max="5" size="sm" color="grey"
+                  :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -520,19 +489,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.2. ความรู้ความสามารถ</q-item-label
-                >
+                  1.2. ความรู้ความสามารถ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="knowledge_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="knowledge_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -560,19 +521,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.3. ทักษะ</q-item-label
-                >
+                  1.3. ทักษะ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="skill_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="skill_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -600,19 +553,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.4. สมมรถนะ</q-item-label
-                >
+                  1.4. สมมรถนะ</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="competency_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="competency_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -640,19 +585,11 @@ onMounted(async () => {
               <q-item-section>
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.5. ความสามารถในการเรียนรู้งาน</q-item-label
-                >
+                  1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="learn_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="learn_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -681,19 +618,11 @@ onMounted(async () => {
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   1.6.
-                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
-                >
+                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="apply_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="apply_level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -721,55 +650,29 @@ onMounted(async () => {
                 <q-item-label>
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   1.7 อื่นๆ
-                  <q-checkbox
-                    class="q-ml-sm"
-                    dense
-                    v-model="etc"
-                    @click="
-                      (achievement_other.text = ''),
-                        (achievement_other.level = 0)
-                    "
-                    :disable="!status"
-                /></q-item-label>
+                  <q-checkbox class="q-ml-sm" dense v-model="etc" @click="
+                    (achievement_other.text = ''),
+                    (achievement_other.level = 0)
+                    " :disable="!status" /></q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
         </q-card>
 
-        <q-card
-          v-if="etc"
-          class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
-        >
+        <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
           <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section class="q-ml-md">
                 <q-item-label>
-                  <q-input
-                    v-model="achievement_other.text"
-                    label="กรอกอื่นๆ"
-                    dense
-                    lazy-rules
-                    autogrow
-                    hide-bottom-space
-                    outlined
-                    class="bg-white"
-                    :rules="[
+                  <q-input v-model="achievement_other.text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space
+                    outlined class="bg-white" :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                    ]"
-                    :disable="!status"
-                  />
+                    ]" :disable="!status" />
                 </q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="achievement_other.level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
+                <q-rating v-model="achievement_other.level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม" :disable="!status">
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
@@ -798,39 +701,18 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             จุดเด่น (ไม่เกิน 5 บรรทัด)
           </div>
-          <q-input
-            outlined
-            dense
-            v-model="achievement_strength_desc"
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-            lazy-rules
-            type="textarea"
-            label="กรอกจุดเด่น"
-            hide-bottom-space
-            :row="5"
-            :rules="achievement_strengthRules"
-            ref="achievement_strengthRef"
-            :disable="!status"
-          />
+          <q-input outlined dense v-model="achievement_strength_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5" :rules="achievement_strengthRules"
+            ref="achievement_strengthRef" :disable="!status" />
         </div>
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
           </div>
-          <q-input
-            outlined
-            dense
-            v-model="achievement_improve_desc"
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-            lazy-rules
-            type="textarea"
-            hide-bottom-space
-            label="กรอกสิ่งที่ควรปรับปรุง"
-            :row="5"
-            ref="achievement_inproveRef"
-            :disable="!status"
-          />
+          <q-input outlined dense v-model="achievement_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+            ref="achievement_inproveRef" :disable="!status" />
         </div>
       </div>
 
@@ -846,27 +728,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.1 ความประพฤติ
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_1" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="conduct_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="conduct_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -894,27 +764,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.2 ความมีคุณธรรมจริยธรรม
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_2" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="moral_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="moral_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -942,27 +800,15 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.3 การรักษาวินัย
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense v-for="(list, i) in list2_3" :key="i">
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="discipline_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="discipline_level[i]" :val="list.id" max="5" size="sm" color="grey"
+                    :color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -989,50 +835,23 @@ onMounted(async () => {
           <div class="col-12 text-top0 row items-center q-pl-lg">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.4 อื่นๆ
-            <q-checkbox
-              class="q-ml-sm"
-              dense
-              v-model="etc2"
-              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
-              :disable="!status"
-            />
+            <q-checkbox class="q-ml-sm" dense v-model="etc2"
+              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)" :disable="!status" />
           </div>
-          <q-card
-            v-if="etc2"
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
+          <q-card v-if="etc2" flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
             <q-list dense>
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
                   <q-item-label>
-                    <q-input
-                      v-model="behavio_orther.text"
-                      label="กรอกอื่นๆ"
-                      dense
-                      lazy-rules
-                      autogrow
-                      hide-bottom-space
-                      outlined
-                      class="bg-white"
-                      :rules="[
+                    <q-input v-model="behavio_orther.text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space
+                      outlined class="bg-white" :rules="[
                         (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                      ]"
-                      :disable="!status"
-                    />
+                      ]" :disable="!status" />
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="behavio_orther.level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
+                  <q-rating v-model="behavio_orther.level" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                    label="ระดับการประเมินพฤติกรรม" :disable="!status">
                     <template v-slot:tip-1>
                       <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                     </template>
@@ -1061,39 +880,18 @@ onMounted(async () => {
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               จุดเด่น (ไม่เกิน 5 บรรทัด)
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavior_strength_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              label="กรอกจุดเด่น"
-              hide-bottom-space
-              :row="5"
-              :rules="behavio_strengthRules"
-              ref="behavio_strengthRef"
-              :disable="!status"
-            />
+            <q-input outlined dense v-model="behavior_strength_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5" :rules="behavio_strengthRules"
+              ref="behavio_strengthRef" :disable="!status" />
           </div>
           <div class="col-12 row">
             <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavior_improve_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              hide-bottom-space
-              label="กรอกสิ่งที่ควรปรับปรุง"
-              :row="5"
-              ref="behavio_inproveRef"
-              :disable="!status"
-            />
+            <q-input outlined dense v-model="behavior_improve_desc" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+              ref="behavio_inproveRef" :disable="!status" />
           </div>
         </div>
       </div>
@@ -1106,11 +904,7 @@ onMounted(async () => {
             <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
             การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
           </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-          >
+          <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
             <q-list dense>
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
@@ -1118,22 +912,10 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="orientation"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="orientation"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="orientation" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="orientation" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1144,22 +926,10 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="self_learning"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="self_learning"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="self_learning" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="self_learning" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1170,50 +940,24 @@ onMounted(async () => {
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="training_seminar"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="training_seminar"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="training_seminar" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="training_seminar" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" />
               <q-item dense tag="label" v-ripple>
                 <q-item-section>
-                  <q-item-label
-                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
-                  >
+                  <q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
                 </q-item-section>
                 <q-item-section side>
                   <div class="row">
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="other_training"
-                      val="1"
-                      label="ดำเนินการเเล้ว"
-                      :disable="!status"
-                    />
-                    <q-radio
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      v-model="other_training"
-                      val="0"
-                      label=" ยังไม่ได้ดำเนินการ"
-                      :disable="!status"
-                    />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="other_training" val="1"
+                      label="ดำเนินการเเล้ว" :disable="!status" />
+                    <q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye" v-model="other_training" val="0"
+                      label=" ยังไม่ได้ดำเนินการ" :disable="!status" />
                   </div>
                 </q-item-section>
               </q-item>
@@ -1230,27 +974,11 @@ onMounted(async () => {
             ผู้บังคับบัญชา/ผู้มอบหมายงาน
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select
-              class="col-xs-12 col-sm-8"
-              dense
-              v-model="Autherise"
-              outlined
-              :options="option"
-              label="ผู้บังคับบัญชา"
-              option-label="name"
-              disable
-            />
+            <q-select class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
+              label="ผู้บังคับบัญชา" option-label="name" disable />
             <div class="col-xs-12 col-sm-4">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateAutherise"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-                :readonly="!status"
-              >
+              <datepicker menu-class-name="modalfix" v-model="dateAutherise" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0" :readonly="!status">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -1258,23 +986,11 @@ onMounted(async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker col-3"
-                    :model-value="
-                      dateAutherise != null ? date2Thai(dateAutherise) : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                    :disable="!status"
-                  >
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                    :disable="!status">
                     <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>
@@ -1284,10 +1000,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-      <q-toolbar
-        class="text-primary"
-        v-if="routeName == 'probationFormAddresult'"
-      >
+      <q-toolbar class="text-primary" v-if="routeName == 'probationFormAddresult'">
         <q-space />
         <q-btn label="บันทึก" color="secondary" @click="savaForm" />
       </q-toolbar>

src/modules/05_placement/storeProbation.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 export const useProbationDataStore = defineStore("probationStore", () => {
   const assign = ref<any>([])
@@ -9,6 +9,7 @@ export const useProbationDataStore = defineStore("probationStore", () => {
 
   const assignOutput = ref<any>([])
   const director = ref<any>([])
+  const person = ref<any>([])
 
   const fecthdataAssign = async (data: any) => {
     assign.value = await data.assign
@@ -18,6 +19,7 @@ export const useProbationDataStore = defineStore("probationStore", () => {
   const fecthAssignoutput = (data: any) => {
     assignOutput.value = data.assign_output
     director.value = data.director
+    person.value = data.person
   }
 
   const ratingColors = ref<string[]>([
@@ -88,6 +90,7 @@ export const useProbationDataStore = defineStore("probationStore", () => {
     tabs,
     assignOutput,
     director,
+    person,
     mainTab,
     ratingColors,
     orderId,