Merge branch 'warunee-dev' into develop

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

@@ -12,7 +12,6 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const {
   date2Thai,
-  notifyError,
   messageError,
   success,
   showLoader,
@@ -35,6 +34,8 @@ const develop = ref<number>();
 const result = ref<number>();
 const expand_month = ref<string>();
 const reson = ref<string>("");
+const reson52 = ref<string>("");
+
 const chairman_dated = ref<Date>();
 const director1_dated = ref<any>("");
 const director2_dated = ref<any>("");
@@ -43,21 +44,25 @@ const director_id = ref<any>(null);
 const director_id2 = ref<any>(null);
 const director_id3 = ref<any>(null);
 const optionDirector = ref<any>([]);
-const saveEdit = async (id: string) => {
+const person = ref<any>([]);
-  await myForm.value.validate().then((result: boolean) => {
+
-    if (result) {
+// const saveEdit = async (id: string) => {
-      dialogConfirm($q, async () => await postData("put"));
+//   await myForm.value.validate().then((result: boolean) => {
-    }else {
+//     if (result) {
-      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+//       dialogConfirm($q, async () => await postData("put"));
-    }
+//     }else {
-  });
+//       dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
-};
+//     }
+//   });
+// };
 
 const fecthAssign = async (id: string) => {
   showLoader();
   await http
     .get(config.API.evaluateReportcreate(id))
     .then((res) => {
+      assign.value = res.data.data.assign
+      person.value = res.data.data.person
       mentors.value = res.data.data.mentors;
       date_start.value = res.data.data.assign.date_start;
       date_finish.value = res.data.data.assign.date_finish;
@@ -99,9 +104,10 @@ const fecthResult = async (id: string) => {
         status.value = false;
         action.value = "edit";
         expand_month.value = data.expand_month;
+        changeReson52(Number(data.pass_result))
       }
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 
 // part new
@@ -125,7 +131,7 @@ const savaForm = async () => {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
       dialogConfirm($q, async () => await postData("post"));
-    }else {
+    } else {
       dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
@@ -177,6 +183,9 @@ const postData = async (action: string) => {
       })
       .catch((e: any) => {
         messageError($q, e);
+      }).finally(()=>{
+        status.value = false;
+        fecthResult(assignId.value);
       });
   } else if (action === "put") {
     await http
@@ -198,8 +207,27 @@ const selectRuslt = () => {
   if (result.value !== 3) {
     expand_month.value = "";
   }
+
+  changeReson52(Number(result.value))
 };
 
+function changeReson52(val: number) {
+  switch (val) {
+    case 1:
+      reson52.value = "เห็นควรให้รับราชการต่อไป"
+      break;
+    case 2:
+      reson52.value = "เห็นควรให้ออกจากราชการ"
+      break;
+    case 3:
+      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`
+      break;
+
+    default:
+      break;
+  }
+}
+
 onMounted(() => {
   fecthAssign(assignId.value);
   fecthResult(assignId.value);
@@ -210,47 +238,67 @@ onMounted(() => {
   <div class="row col-12">
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบรายงานการประเมินฯ</div>
-      <q-btn
+      <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
-        v-if="!status"
-        size="12px"
-        flat
-        dense
-        icon="mdi-download"
-        color="primary"
-      >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
             <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
-              <q-item-section avatar
+              <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                ><q-icon color="red" name="mdi-file-pdf"
-              /></q-item-section>
               <q-item-section>ไฟล์ .PDF</q-item-section>
             </q-item>
             <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
-              <q-item-section avatar
+              <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
-                ><q-icon color="blue" name="mdi-file-word"
-              /></q-item-section>
               <q-item-section>ไฟล์ .docx</q-item-section>
             </q-item>
           </q-list>
         </q-menu>
       </q-btn>
     </div>
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <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>
+      <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">
+          ครั้งที่ 1
+        </span>
+      </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>
+      </div>
+    </div>
+
     <q-form ref="myForm">
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker
+            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              menu-class-name="modalfix"
+              :readonly="!status" :enableTimePicker="false" week-start="0">
-              v-model="date_start"
-              :locale="'th'"
-              autoApply
-              borderless
-              :readonly="!status"
-              :enableTimePicker="false"
-              week-start="0"
-            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -258,23 +306,10 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input
+                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  outlined
+                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
-                  dense
-                  :disable="!status"
-                  class="full-width datepicker"
-                  :model-value="
-                    date_start != null ? date2Thai(date_start) : null
-                  "
-                  :label="`${'ระหว่างวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                >
                   <template v-slot:prepend>
-                    <q-icon
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -282,16 +317,8 @@ onMounted(() => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker
+            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply :readonly="!status"
-              menu-class-name="modalfix"
+              borderless :enableTimePicker="false" week-start="0">
-              v-model="date_finish"
-              :locale="'th'"
-              autoApply
-              :readonly="!status"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -299,23 +326,10 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input
+                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  outlined
+                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
-                  dense
-                  :disable="!status"
-                  class="full-width datepicker"
-                  :model-value="
-                    date_finish != null ? date2Thai(date_finish) : null
-                  "
-                  :label="`${'ถึงวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                >
                   <template v-slot:prepend>
-                    <q-icon
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -328,80 +342,44 @@ onMounted(() => {
       <div class="col-12 row q-mt-xs">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-select
+            <q-select :rules="[
-              :rules="[
+              (val) =>
-                (val) =>
+                !!val ||
-                  !!val ||
+                'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless :disable="!status"
-              ]"
+              emit-value map-options option-label="label" option-value="value" outlined v-model="develop"
-              hide-bottom-space
+              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
-              :options="options"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              :disable="!status"
-              emit-value
-              map-options
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="develop"
-              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
-            />
           </div>
           <div class="col-xs-12 col-sm-6">
             <div class="row">
-              <q-select
+              <q-select class="col-sm-12" :rules="[
-                class="col-sm-12"
+                (val) =>
-                :rules="[
+                  !!val ||
-                  (val) =>
+                  'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-                    !!val ||
+              ]" hide-bottom-space :options="optionsResult" :disable="!status" dense borderless emit-value map-options
-                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                option-label="label" option-value="value" outlined v-model="result"
-                ]"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" @update:model-value="selectRuslt" />
-                hide-bottom-space
-                :options="optionsResult"
-                :disable="!status"
-                dense
-                borderless
-                emit-value
-                map-options
-                option-label="label"
-                option-value="value"
-                outlined
-                v-model="result"
-                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
-                @update:model-value="selectRuslt"
-              />
             </div>
             <div class="row q-mt-xs" v-if="result === 3">
-              <q-input
+              <q-input outlined dense v-model="expand_month" label="จำนวนเดือน"
-                outlined
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']" type="number" />
-                dense
-                v-model="expand_month"
-                label="จำนวนเดือน"
-                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
-                type="number"
-              />
             </div>
           </div>
         </div>
       </div>
-      <div class="col-12 row q-mt-lg">
-        <div class="col-12">
 
-          <q-input
+      <div class="col-12 row q-mt-md">
-            hide-bottom-space
+        <div class="col-12 row q-col-gutter-md">
-            dense
+          <div class="col-xs-12 col-sm-6">
-            borderless
+            <q-input hide-bottom-space dense borderless outlined :disable="!status" class="bg-white" type="textarea"
-            outlined
+              v-model="reson" lazy-rules label="เหตุผล"
-            :disable="!status"
+              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
-            class="bg-white"
+          </div>
-            type="textarea"
+          <div class="col-xs-12 col-sm-6">
-            v-model="reson"
+            <q-input hide-bottom-space dense borderless outlined disable class="bg-white" type="textarea"
-            lazy-rules
+              v-model="reson52" lazy-rules label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
-            label="เหตุผล"
+              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
-            :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']"
+          </div>
-          />
         </div>
       </div>
 
@@ -412,30 +390,14 @@ onMounted(() => {
       <div class="row col-12 q-gutter-lg q-mt-none">
         <div class="col-12 row">
           <div class="col-12 text-top2 row items-center">
-            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
+            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander"
-              class="col-xs-12 col-sm-8"
+              label="ชื่อ-นามสกุล" option-label="name" disable />
-              dense
-              v-model="director_id"
-              outlined
-              :options="commander"
-              label="ชื่อ-นามสกุล"
-              option-label="name"
-              disable
-            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker
+              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" :readonly="!status" autoApply
-                menu-class-name="modalfix"
+                borderless :enableTimePicker="false" week-start="0">
-                v-model="chairman_dated"
-                :locale="'th'"
-                :readonly="!status"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -443,23 +405,10 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
+                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
-                    outlined
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
-                    dense
-                    :disable="!status"
-                    class="full-width datepicker col-3"
-                    :model-value="
-                      chairman_dated != null ? date2Thai(chairman_dated) : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -475,27 +424,11 @@ onMounted(() => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล" disable
-              class="col-xs-12 col-sm-8"
+              :options="optionDirector" option-label="name" />
-              dense
-              v-model="director_id2"
-              outlined
-              label="ชื่อ-นามสกุล"
-              disable
-              :options="optionDirector"
-              option-label="name"
-            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker
+              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                menu-class-name="modalfix"
+                :readonly="!status" :enableTimePicker="false" week-start="0">
-                v-model="director1_dated"
-                :locale="'th'"
-                autoApply
-                borderless
-                :readonly="!status"
-                :enableTimePicker="false"
-                week-start="0"
-              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -503,25 +436,12 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
+                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
-                    outlined
+                    ? date2Thai(director1_dated)
-                    dense
+                    : null
-                    :disable="!status"
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
-                    class="full-width datepicker col-3"
-                    :model-value="
-                      director1_dated != null
-                        ? date2Thai(director1_dated)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -537,27 +457,11 @@ onMounted(() => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล"
-              class="col-xs-12 col-sm-8"
+              :options="optionDirector" disable option-label="name" />
-              dense
-              v-model="director_id3"
-              outlined
-              label="ชื่อ-นามสกุล"
-              :options="optionDirector"
-              disable
-              option-label="name"
-            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker
+              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
-                menu-class-name="modalfix"
+                :readonly="!status" borderless :enableTimePicker="false" week-start="0">
-                v-model="director2_dated"
-                :locale="'th'"
-                autoApply
-                :readonly="!status"
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -565,25 +469,12 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
+                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
-                    outlined
+                    ? date2Thai(director2_dated)
-                    dense
+                    : null
-                    :disable="!status"
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
-                    class="full-width datepicker col-3"
-                    :model-value="
-                      director2_dated != null
-                        ? date2Thai(director2_dated)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
                       </q-icon>
                     </template>
                   </q-input>