หน้า view แบบ มอบหมายงาน

src/modules/05_placement/components/probation/FormAssign.vue

@@ -82,6 +82,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -92,6 +93,9 @@
                     <template #trigger>
                       <q-input
                         dense
+                        borderless
+                        :readonly="routeName != 'probationWorkAdd'"
+                        :outlined="routeName == 'probationWorkAdd'"
                         :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
@@ -100,7 +104,6 @@
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
-                        outlined
                         @clear="clearDateExam"
                       >
                       </q-input>
@@ -114,7 +117,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
-                    :readonly="isDatePicker2Readonly"
+                    :readonly="isDatePicker2Readonly|| routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -127,11 +130,14 @@
                     <template #trigger>
                       <q-input
                         dense
-                        outlined
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          date_finish != null ? date2Thai(date_finish) : undefined
+                          date_finish != null
+                            ? date2Thai(date_finish)
+                            : undefined
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -258,6 +264,7 @@
                         color="red"
                         icon="mdi-trash-can-outline"
                         @click="deleteactivity(index)"
+                        v-if="routeName === 'probationWorkAdd'"
                       />
                     </div>
                   </div>
@@ -293,10 +300,9 @@
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
-                          :option-label="
+                          :option-label="(item) => `${item.title}-${item.description}`"
-                            (item) => `${item.title}-${item.description}`
+                          option-value="id"
-                          "
+                          map-options
-                          :option-value="(level) => level.level_id"
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
@@ -316,15 +322,17 @@
                         />
                       </div>
                       <div
+                      v-if="index > 2"
                         class="col-xs-12 col-sm-1 flex justify-center items-center"
                       >
                         <q-btn
-                          v-if="index > 2"
+                        v-if="routeName == 'probationWorkAdd'"
                           flat
                           round
                           color="red"
                           icon="mdi-trash-can-outline"
                           @click="deleteknowledge(index)"
+                          
                         />
                       </div>
                     </div>
@@ -363,11 +371,13 @@
                                 v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
+                                
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index === 0" class="col-11">
+                            <div v-if="index === 0" class="col-11" >
                               {{ item.description }}
+                              
                             </div>
                           </div>
                         </div>
@@ -554,6 +564,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
@@ -574,6 +585,7 @@
                               `${item.title} - ${item.level_description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
@@ -610,6 +622,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
@@ -638,6 +651,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
@@ -682,6 +696,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
@@ -709,6 +724,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
@@ -735,6 +751,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
@@ -763,6 +780,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
@@ -790,6 +808,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
@@ -823,6 +842,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
@@ -850,6 +870,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
@@ -868,6 +889,7 @@
                             (item) => `${item.title} - ${item.description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
@@ -889,6 +911,7 @@
                           </template></q-select
                         >
                       </div>
+                      
                     </div>
                   </div>
                 </div>
@@ -1005,6 +1028,7 @@
               <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"
@@ -1048,6 +1072,7 @@
                     >
                       <q-btn
                         flat
+                        v-if="routeName == 'probationWorkAdd'"
                         round
                         color="red"
                         icon="mdi-trash-can-outline"
@@ -1122,8 +1147,10 @@
                       <li>
                         อื่นๆ (ถ้ามี)
                         <q-input
+                        :readonly="routeName != 'probationWorkAdd'"
                           dense
-                          outlined
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
                           v-model="Other5"
                           label="กรอกอื่นๆ"
                         />
@@ -1234,6 +1261,7 @@
                     v-model="date1"
                     :locale="'th'"
                     autoApply
+                    :readonly="routeName !== 'probationWorkAdd'"
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
@@ -1296,6 +1324,7 @@
                     autoApply
                     borderless
                     :enableTimePicker="false"
+                    :readonly="routeName !== 'probationWorkAdd'"
                     week-start="0"
                   >
                     <template #year="{ year }">
@@ -1349,6 +1378,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -1408,6 +1438,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
+                    :readonly="routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -1496,7 +1527,10 @@ const filterData = (options: any[], excludedGroups: any[]) => {
 };
 const filtermantor = (options: any[], excludedGroups: any[]) => {
   return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.personal_id === item.personal_id)
+    (item) =>
+      !excludedGroups.some(
+        (group) => group && group.personal_id === item.personal_id
+      )
   );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
@@ -1535,7 +1569,7 @@ const main2 = ref<any>();
 const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
-
+const assignId = ref<string>(route.params.form as string);
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1636,13 +1670,10 @@ const OPknowledge = ref<
   Array<{
     id: number;
     title: number;
-    options: Array<Option>;
+    description:string;
+    level: string;
   }>
 >([]);
-interface Option {
-  level_id: number;
-  level_desc: string;
-}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1700,8 +1731,8 @@ const getAssignNew = async (id: string) => {
     monthSelect.value = `${data.assign_month} เดือน`;
     OPcaretaker.value = data.mentors;
     OPcommander.value = [data.commander];
-    fullname.value = data.person.name
+    fullname.value = data.person.name;
-    position.value = data.person.OrganizationOrganization
+    position.value = data.person.OrganizationOrganization;
   });
 };
 const getcompetency = async (id: string) => {
@@ -1745,6 +1776,7 @@ const getSkill = async (id: string) => {
 const getLaw = async (id: string) => {
   await http.get(config.API.lawOptions(id)).then((res: any) => {
     checkRule.value = res.data.data;
+
   });
 };
 
@@ -1756,7 +1788,7 @@ const postDateTime = async () => {
     })
     .then(async (res) => {
       const result = res.data;
-       date_finish.value = result.finish_date;
+      date_finish.value = result.finish_date;
     })
     .catch((e) => {})
     .finally(async () => {
@@ -1839,8 +1871,14 @@ const putData = (id: string) => {
     position: position.value,
     monthSelect:
       monthSelect.value !== null ? parseInt(monthSelect.value) : null,
-      date_start: date_start.value instanceof Date ? dateToISO(date_start.value) : new Date(),
+    date_start:
-    date_finish: date_finish.value  instanceof Date ?  dateToISO(date_finish.value) : dateToISO(new Date(date_finish.value)),
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
     // caretaker_1: caretaker1.value,
     // caretaker_2: caretaker2.value,
     assign_knowledges: know_ledge,
@@ -1868,7 +1906,7 @@ const putData = (id: string) => {
         checked: item.checked,
       })),
   };
-  return data
+  return data;
 };
 
 const saveData = (id: string) => {
@@ -1939,14 +1977,72 @@ const OPresourse = ref<
     level_description: string;
   }>
 >([]);
+const skillIds = [1, 2, 3, 4];
 
-onMounted(async () => {
+const getAssign = async () => {
+  await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
+    const data = res.data.data;
+    console.log("ASSIGN-list ==>", data);
+    fullname.value = data.profile.name
+    position.value = data.profile.OrganizationOrganization
+    date_start.value = data.assign.date_start
+    date_finish.value = data.assign.date_finish
+    date1.value = data.assign.experimenter_dated
+    date2.value = data.mentors[0].dated
+    date3.value = data.mentors[1].dated
+    date4.value = data.commander.dated
+    activity_desc.value = data.jobs.map((job:any) => job.activity_desc);
+    goal_desc.value = data.jobs.map((job:any) => job.goal_desc);
+    activityCount.value = data.jobs.length
+    caretaker1.value = data.mentors[0];
+    caretaker2.value = data.mentors[1];
+    
+    commander.value = data.commander.name
+    knowledge.value = data.knowledges.map((id:any)=> id.id)
+    knowledgeCount.value = data.knowledges.length
+    other_desc.value = data.assign.other_desc
+    other4_desc.value = data.assign.other4_desc
+    other5_no1_desc.value = data.assign.other5_no1_desc
+    const skills = data.skills.map((skills: any) => ({
+      id: skills.id,
+      title: skills.title,
+      level: skills.level,
+      level_description: skills.description,
+    }));
+  [skill.value, skill2.value, skill3.value, skill4.value] = skills;
+
+    main.value = data.competencys[0]
+    main2.value = data.competencys[1]
+    main3.value = data.competencys[2]
+    main4.value = data.competencys[3]
+    main5.value = data.competencys[4]
+
+    group.value = data.competency_groups[0]
+    group2.value = data.competency_groups[1]
+    group3.value = data.competency_groups[2]
+
+    output_desc.value = data.outputs.map((output: any) => output.output_desc);
+    indicator_desc.value = data.outputs.map((output: any) => output.indicator_desc);
+    productivityCount.value = data.outputs.length;
+
+    checkRule.value = data.laws.map((law: any) => ({
+  id: law.law_id,
+  checked: law.selected,
+  description: law.description,
+  status_select: law.status_select,
+  
+}));
+  console.log("🚀 ~ file: FormAssign.vue:2009 ~ awaithttp.get ~ checkRule:", checkRule.value)
+  })
+};
+onMounted(async() => {
   await getLaw(personalId);
   await getcompetency(personalId);
   await getCompetencyGroup(personalId);
   await getSkill(personalId);
   await getKnowledge(personalId);
   await getAssignNew(personalId);
+  await getAssign();
 });
 watch(
   () => [monthSelect.value, date_start.value],

src/modules/05_placement/components/probation/MainProbation.vue

@@ -6,28 +6,73 @@
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div>
-          <q-btn @click="modal = true" size="12px" flat round color="add" icon="mdi-plus">
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
             <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+        <q-input
-          debounce="300" placeholder="ค้นหา">
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+        <q-select
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          v-model="visibleColumns"
-          class="col-xs-12 col-sm-3 col-md-2" />
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
       </div>
       <div class="col-12">
-        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
+        <q-table
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          ref="table"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -36,23 +81,52 @@
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
+            <q-tr
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <!-- <div v-else-if="col.name == 'status'">
+                <div v-else-if="col.name === 'probation_status'">
-										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
+                  <q-icon
-											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
+                    size="20px"
-										</q-icon>
+                    v-if="props.row.probation_status === 'PENDING'"
-										<q-icon size="20px" v-else-if="props.row.status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red">
+                    name="mdi-timer-sand"
-											<q-tooltip>ไม่ผ่านการทดลอง</q-tooltip>
+                    color="deep-orange"
-										</q-icon>
+                  />
-										<q-icon size="20px" v-else name="mdi-check" color="teal">
+                  <q-icon
-											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
+                    size="20px"
-										</q-icon>
+                    v-else-if="props.row.probation_status === 'PROCESS'"
-									</div> -->
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PASS'"
+                    name="mdi-check"
+                    color="teal"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'NO-PASS'"
+                    name="mdi-close"
+                    color="red"
+                  />
+                  {{
+                    props.row.probation_status === "PENDING"
+                      ? "รอมอบหมายงาน"
+                      : props.row.probation_status === "PROCESS"
+                      ? "อยู่ระหว่างทดลองงาน"
+                      : props.row.probation_status === "PASS"
+                      ? "ผ่านการทดลองงาน"
+                      : props.row.probation_status === "NO-PASS"
+                      ? "ไม่ผ่านการทดลองงาน"
+                      : ""
+                  }}
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -60,8 +134,16 @@
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+            <q-pagination
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -71,23 +153,55 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
+          <q-input
-            placeholder="ค้นหา">
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
+            <q-table
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel"
+              ref="table2"
-              v-model:pagination="pagination">
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
                   <q-th auto-width />
@@ -95,7 +209,11 @@
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
@@ -104,14 +222,29 @@
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                <q-pagination
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>
@@ -355,7 +488,7 @@ const getpersonalList = async () => {
       }));
       console.log("(data)", data);
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -410,9 +543,9 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => { })
+    .onOk(async () => {})
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const clickAdd = (id: string) => {
@@ -426,23 +559,27 @@ const clickAdd = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader()
+      showLoader();
       const postData = {
         personal_id: id,
       };
       // console.log("postData:", postData);
-      await http.post(config.API.personalAdd(), postData).then((res) => {
+      await http
-        // console.log("res:", res);
+        .post(config.API.personalAdd(), postData)
-        getpersonalList();
+        .then((res) => {
-      }).catch((e) => {
+          // console.log("res:", res);
-        messageError($q, e);
+          getpersonalList();
-      }).finally(() => {
+        })
-        clickClose()
+        .catch((e) => {
-        hideLoader()
+          messageError($q, e);
-      });
+        })
+        .finally(() => {
+          clickClose();
+          hideLoader();
+        });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const clickClose = async () => {

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -55,19 +55,39 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="probation_status == 'PENDING'"
+                v-if="probation_status === 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status === 'NO-PASS'"
                 name="mdi-close"
                 color="red"
               />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PROCESS'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PASS'"
+                name="mdi-check"
+                color="teal"
+              />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
               {{
-                probation_status == "PENDING" ? "อยู่ในระหว่างการทดลองงาน" : ""
+                probation_status === "PENDING"
+                  ? "รอมอบหมายงาน"
+                  : probation_status === "NO-PASS"
+                  ? "ไม่ผ่านการทดลองงาน"
+                  : probation_status === "PROCESS"
+                  ? "อยู่ในระหว่างการทดลองงาน"
+                  : probation_status === "PASS"
+                  ? "ผ่านการทดลองงาน"
+                  : ""
               }}
             </div>
           </div>
@@ -204,7 +224,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader,date2Thai } = mixin;
+const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
@@ -311,7 +331,7 @@ const getAssignList = async () => {
       console.log("LIST ===>", res.data.data);
       const data = res.data.data;
       rows.value = data.map((item: FormProbationDetail) => ({
-        id:item.id,
+        id: item.id,
         round_no: item.round_no,
         date_start: date2Thai(new Date(item.date_start)),
         date_finish: date2Thai(new Date(item.date_finish)),

src/modules/05_placement/router.ts

@@ -147,7 +147,7 @@ export default [
     },
   },
   {
-    path: "/probation/detail/:id/:form",
+    path: "/probation/detail/:personalId/:form",
     name: "probationForm",
     component: probationFormEvaluation,
     meta: {