Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

src/api/05_placement/api.placement.ts

@@ -48,4 +48,6 @@ export default {
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
   putPosition: (id:any) => `${placement}/position/${id}`,
+  // clear Position
+  clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };

src/api/registry/api.profile.ts

@@ -156,6 +156,7 @@ export default {
     `${profile}address/history/${profileId}`,
   searchProfileByOcId: (OcId: string, type: string) =>
     `${profile}search/new/oc/${OcId}/${type}`,
+  searchProfileTemp: (type: string) => `${profile}search/new/oc/${type}`,
 
   profileAvatarId: (profileId: string) => `${profile}avatar/${profileId}`,
   profileAvatarHistoryId: (profileId: string) =>

src/modules/04_registry/components/Profile.vue

@@ -383,38 +383,104 @@
   </q-dialog>
   <!-- Dialog แนบใบมรณบัตร -->
   <q-dialog v-model="dialogPassaway" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
+    <div class="col-12">
-      <q-card-section class="q-py-sm row">
+      <q-card style="width: 100vw; max-width: 60vw">
-        <div class="text-h6">แนบใบมรณบัตร</div>
+        <q-form ref="myForm">
-        <q-space />
+          <q-card-section class="q-py-sm row">
-        <q-btn
+            <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
-          icon="close"
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-          unelevated
+              <q-file
-          round
+                class="col-12 col-sm-6 col-md-5"
-          dense
+                outlined
-          @click="closePassaway"
+                dense
-          style="color: #ff8080; background-color: #ffdede"
+                v-model="filePassaway"
-        >
+                label="แนบใบมรณบัตร"
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
+                hide-bottom-space
-        </q-btn>
+                lazy-rules
-      </q-card-section>
+              >
-      <q-separator />
+                <q-separator />
-      <q-card-actions align="right">
+                <template v-slot:prepend>
-        <q-file
+                  <q-icon name="attach_file" />
-          class="col-xs-12 col-sm-12"
+                </template>
-          outlined
+              </q-file>
-          dense
+              <q-input
-          v-model="filePassaway"
+                class="col-12 col-sm-6 col-md-7"
-          label="แนบใบมรณบัตร"
+                dense
-          hide-bottom-space
+                outlined
-          lazy-rules
+                v-model="deathCertificateNo"
-        >
+                label="เลขที่ใบมรณบัตร"
-          <template v-slot:prepend>
+              />
-            <q-icon name="attach_file" />
+
-          </template>
+              <datepicker
-        </q-file>
+                class="col-12 col-sm-6 col-md-5"
-      </q-card-actions>
+                menu-class-name="modalfix"
-    </q-card>
+                v-model="dateDeath"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      dateDeath != null ? date2Thai(dateDeath) : null
+                    "
+                    :label="`${'วันที่เสียชีวิต'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร"
+              />
+              <q-separator />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                v-model="reasonDeath"
+                label="เหตุผลการเสีบชีวิต"
+                type="textarea"
+              />
+            </div>
+            <q-space />
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            :save="clickSave"
+            :validate="validateData"
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+          />
+        </q-form>
+      </q-card>
+    </div>
   </q-dialog>
   <!-- Dialog เลือก เกษียณ -->
   <q-dialog v-model="dialogLeave" persistent>
@@ -579,8 +645,10 @@ import { ref, onMounted } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
@@ -608,6 +676,9 @@ import config from "@/app.config";
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
+const reasonDeath = ref("");
+const deathCertificateNo = ref("");
+const placeDeathCertificate = ref("");
 const mixin = useCounterMixin();
 const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
 const route = useRoute();
@@ -616,12 +687,7 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
+const dateDeath = ref<Date>(new Date());
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -632,6 +698,11 @@ const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
 const filePassaway = ref(null);
 const images = ref<any>([]);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
 const employeeClass = ref<string>("temp");
@@ -918,6 +989,99 @@ const clickKp7 = async () => {
   //     });
 };
 
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .put(config.API.getPositionMasterId(positionMasterId.value), {
+  //       positionMasterId: positionMasterId.value,
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .post(config.API.getPositionMaster, {
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 const downloadFilePDF = async (res: string, fileName: string) => {
   const link = document.createElement("a");
   //   link.href = window.URL.createObjectURL(new Blob([res]));

src/modules/04_registry/components/profileType.ts

@@ -14,7 +14,7 @@ interface Information {
   prefixId: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date;
+  birthDate: Date | null;
   genderId: string | null;
   bloodId: string | null;
   nationality: string | null;
@@ -135,7 +135,7 @@ const defaultInformation: Information = {
   prefixId: null,
   firstname: null,
   lastname: null,
-  birthDate: new Date(),
+  birthDate: null,
   genderId: null,
   bloodId: null,
   nationality: null,

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -95,6 +95,8 @@ const fetchplacementPosition = async () => {
   await http
     .get(config.API.placementPosition())
     .then((res: any) => {
+      console.log("1221111111");
+
       placementPosition.value = res.data.result;
     })
     .catch((e: any) => {
@@ -277,7 +279,7 @@ const positionLevelOptions = ref<Object[]>([
 ]);
 
 const selectedPosition = async (data: any) => {
-  console.log("selecteds", data);
+  // console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
     // console.log("selecteds", data);
 
@@ -361,7 +363,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-  console.log("dataForm", dataForm);
+  // console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
@@ -374,6 +376,7 @@ const expanded = ref<string[]>([]);
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
+  fetchplacementPosition();
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
       personal.value = data;
@@ -382,15 +385,19 @@ watch(props, () => {
   }
   // console.log("draft===>", personal.value.draft);
 
-  if (personal.value && personal.value.draft === false) {
+  if (
+    personal.value &&
+    personal.value.draft === false &&
+    personal.value.positionNumber !== null
+  ) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-      console.log(findData);
+      // console.log(findData);
 
       if (findData != null) {
-        console.log("findData===>", findData);
+        // console.log("findData===>", findData);
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));
@@ -423,6 +430,34 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+const clearPosition = () => {
+  console.log(personal.value);
+  $q.dialog({
+    title: "ยืนยันการคืนตำแหน่ง",
+    message: "ต้องการยืนยันการคืนตำแหน่งนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      const: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .post(config.API.clearPosition(personal.value.personalId), {})
+        .then((res: Object) => success($q, "คืนตำแหน่งสำเร็จ"))
+
+        .catch((e: Object) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          hideLoader();
+          await closeAndClear();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -707,6 +742,20 @@ function findByPerson(element: any): any {
                         map-options
                       />
                     </div>
+                    <div
+                      class="col-xs-12 col-sm-12 col-md-12 q-pa-lg"
+                      v-if="personal.positionNumber"
+                    >
+                      <div class="row">
+                        <div class="col-md-4 offset-md-4">
+                          <q-btn
+                            color="grey"
+                            label="คืนตำแหน่ง"
+                            @click="clearPosition"
+                          ></q-btn>
+                        </div>
+                      </div>
+                    </div>
                     <!-- <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </div> -->

src/modules/05_placement/components/PersonalList/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive, computed } from "vue";
+import { ref, onMounted, watch, reactive, computed, watchEffect } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -209,7 +209,7 @@ const getTable = async () => {
   await http
     .get(config.API.personalList(examIdString))
     .then(async (res: any) => {
-      console.log(res);
+      // console.log(res);
       dataRes.value = res.data.result;
       rowsAll.value = [];
       (rowsFilter.value = []),
@@ -252,7 +252,12 @@ const getTable = async () => {
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
-      rowsFilter.value = rows.value.filter((e: any) => e.draft == "รอส่งตัว");
+      rowsFilter.value = rows.value.filter(
+        (e: any) =>
+          e.draft == "รอส่งตัว" &&
+          e.positionNumber !== null &&
+          e.statusName == " เตรียมบรรจุ"
+      );
       console.log(rowsFilter.value);
     })
     .catch((e) => {
@@ -433,6 +438,7 @@ const openAppointModal = (pid: string) => {
 const clickCloseModalTree = async () => {
   await getTable();
   appointModal.value = false;
+  props.statCard();
 };
 
 const validateData = async () => {
@@ -492,6 +498,11 @@ onMounted(async () => {
   }
   await getTable();
 });
+watchEffect(() => {
+  if (getTable()) {
+    props.statCard();
+  }
+});
 
 const containStatus = ref<boolean>(false);
 watch(containStatus, () => {
@@ -532,6 +543,7 @@ const savelist = () => {
         })
         .finally(async () => {
           await getTable();
+
           hideLoader();
         });
     });
@@ -694,7 +706,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-item
                     v-if="
                       (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
-                      props.row.draft === 'รอส่งตัว'
+                      props.row.draft === 'รอส่งตัว' && props.row.statusId !== 'DISCLAIM'
                     "
                     clickable
                     v-close-popup

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -93,6 +93,7 @@ watch(props, () => {
   }
 });
 
+
 const validateData = () => {
   const selectedIds = personalForm.value.isProperty;
 
@@ -105,24 +106,24 @@ const validateData = () => {
   );
 };
 
-const ClickSave = () => {
+// const ClickSave = () => {
-  const isValid = validateData();
+//   const isValid = validateData();
 
-  if (isValid) {
+//   if (isValid) {
-    // props.close();
+//     // props.close();
-    // props.validate();
+//     // props.validate();
-    // putpersonalForm();
+//     // putpersonalForm();
-    modalConfirm(
+//     modalConfirm(
-      $q,
+//       $q,
-      "การยืนยัน",
+//       "การยืนยัน",
-      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+//       "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
-      putpersonalForm
+//       putpersonalForm
-    );
+//     );
-  } else {
+//   } else {
-    success($q, "กรอกให้ครบ");
+//     success($q, "กรอกให้ครบ");
-    console.log();
+//     console.log();
-  }
+//   }
-};
+// };
 const fetchData = async () => {
   showLoader();
   await http
@@ -134,7 +135,7 @@ const fetchData = async () => {
           university: e.name,
           degree: e.degree,
           major: e.field,
-          graduation: e.finishDate,
+          graduation: date2Thai(e.finishDate),
         });
       });
     })
@@ -145,6 +146,7 @@ const fetchData = async () => {
       hideLoader();
     });
 };
+
 const formBmaofficer = (val: string) => {
   switch (val) {
     case "OFFICER":
@@ -345,7 +347,7 @@ const putpersonalForm = async () => {
             </q-card>
           </div>
         </div>
-        <q-separator />
+        <!-- <q-separator />
         <div>
           <DialogFooter
             @click="ClickSave"
@@ -353,7 +355,7 @@ const putpersonalForm = async () => {
             :editvisible="save"
             :validate="validateData"
           />
-        </div>
+        </div> -->
       </q-form>
     </q-card>
   </q-dialog>

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

@@ -71,7 +71,6 @@
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
                   />
-                  <div v-if="monthSelect !== null">{{ monthSelect }} เดือน</div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
@@ -96,7 +95,7 @@
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam != null ? date2Thai(dateExam) : null
+                          date_start != null ? date2Thai(date_start) : null
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
@@ -129,7 +128,7 @@
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam2 != null ? date2Thai(dateExam2) : null
+                          date_finish != null ? date2Thai(date_finish) : null
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -1253,8 +1252,7 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-const dateExam = ref<Date | null>(null);
+
-const dateExam2 = ref<Date | null>(null);
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 
@@ -1263,8 +1261,8 @@ const personal_id = ref<string>();
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date>();
+const date_start = ref<Date | null>(null);
-const date_finish = ref<Date>();
+const date_finish = ref<Date | null>(null);
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1275,13 +1273,13 @@ const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
 
 const clearDateExam = () => {
-  dateExam.value = null;
+  date_start.value = null;
 };
 const clearDateExam2 = () => {
-  dateExam2.value = null;
+  date_finish.value = null;
 };
 const isDatePicker2Readonly = computed(() => {
-  return dateExam.value === null;
+  return date_start.value === null;
 });
 const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
@@ -1303,7 +1301,7 @@ const monthOp = [{ value: "6", label: "6 เดือน" }];
 const activityCount = ref<number>(2);
 const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
-
+  const activityDataArray = ref<any[]>([]);
 const addActivity = () => {
   activityCount.value++;
 };
@@ -1331,6 +1329,7 @@ const addKnowledge = () => {
     knowledgeCount.value++;
   }
 };
+
 const knowledgeArray = computed(() => {
   return Array(knowledgeCount.value).fill("");
 });
@@ -1539,6 +1538,21 @@ interface CheckboxItem {
 // const caregiverRef2 = ref()
 
 // const workInfopRef = ref()
+const putData = () =>{
+  const data = {
+    fullname:fullname.value,
+    position:position.value,
+    monthSelect:monthSelect.value,
+    date_start:date_start.value,
+    date_finish:date_finish.value,
+    caretaker1:caretaker1.value,
+    caretaker2:caretaker2.value,
+    activity_desc:activity_desc.value,
+    goal_desc:goal_desc.value,
+    knowledge:knowledge.value,
+  }
+  console.log("test",data)
+}
 
 const saveData = async () => {
   // myForm.value.resetValidation();
@@ -1551,7 +1565,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // showLoader();
 
       // แสดงข้อมูลใน Console
 
@@ -1576,6 +1589,17 @@ const saveData = async () => {
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
+      putData()
+    // ลองดูlog
+      activityDataArray.value = activity_desc.value.map((activity, index) => ({
+        id: index + 1,
+        activity_desc: activity,
+        goal_desc: goal_desc.value[index],
+      }));
+      // showLoader();
+      console.log("activity_desc:", activity_desc.value);
+  console.log("goal_desc:", goal_desc.value);
+  console.log(activityDataArray.value);
       // Validation ไม่ผ่าน
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
@@ -1600,7 +1624,7 @@ const OPmain = [""];
 const group = ref<string>("");
 const group2 = ref<string>("");
 const group3 = ref<string>("");
-const OPgroup = [""];
+const OPgroup = ["test"];
 
 const Other = ref<string>("");
 

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

@@ -448,7 +448,13 @@ const putformData = () => {
               <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"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -658,7 +664,12 @@ const putformData = () => {
         <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" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -60,9 +60,6 @@ const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 // part 1
-const knowledge_level = ref<number>(0);
-const skill_level = ref<number>(0);
-const competency_level = ref<number>(0);
 const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
@@ -74,39 +71,94 @@ const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>([{ text: "", level: 0 }]);
-const behavio_strength_desc = ref<string>("");
+
-const behavio_inprove_desc = ref<string>("");
 // part 3
-const orientation = ref<num>(null);
+const orientation = ref<number>(null);
-const self_learning = ref<any>(null);
+const self_learning = ref<number>(null);
-const training_seminar = ref<any>(null);
+const training_seminar = ref<number>(null);
-const other_training = ref<any>(null);
+const other_training = ref<number>(null);
-//rules
+// footer
-const behavio_strengthRef = ref<any>(null);
+const Autherise = ref<any>(null);
-const behavio_strengthRules = [
+const dateAutherise = ref<any>(new Date());
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
-];
+
-const behavio_inproveRef = ref<any>(null);
+// score
-const behavio_inproveRules = [
+const score1 = computed(() => {
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+  if (
-];
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return (
+      learn_level.value +
+      apply_level.value +
+      success_level.value +
+      achievement_other.value.level
+    );
+  }
+  return learn_level.value + apply_level.value + success_level.value;
+});
+const score2 = computed(() => {
+  let sum_conduct = conduct_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_moral = moral_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_discipline = discipline_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return (
+      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
+    );
+  } else return sum_conduct + sum_moral + sum_discipline;
+});
+const percent_score1: number = computed(() => {
+  let num = 0;
+  if (etc.value === true) {
+    num = 20;
+  } else num = 15;
+  let percent1 = (score1.value / num) * 100;
+  return percent1.toFixed(2);
+});
+const percent_score2: number = computed(() => {
+  let num = 0;
+  if (etc2.value === true) {
+    num = 65;
+  } else num = 60;
+  let percent2 = (score2.value / num) * 100;
+  return percent2.toFixed(2);
+});
+const percent_sum: any = computed(() => {
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  return sum.toFixed(2);
+});
+const score4 = computed(() => {
+  return (
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    Number(other_training.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
-  behavio_strengthRef.value.validate();
-  behavio_inproveRef.value.validate();
   if (
-    knowledge_level.value === 0 ||
-    skill_level.value === 0 ||
-    competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
     success_level.value === 0 ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -133,9 +185,6 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    knowledge_level: knowledge_level.value,
-    skill_level: skill_level.value,
-    competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -153,12 +202,12 @@ const putformData = () => {
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    total_experiment: Number(score1.value),
+    total_behavior: Number(score2.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -331,7 +380,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.4 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -387,6 +442,24 @@ const putformData = () => {
           </q-item>
         </q-list>
       </q-card>
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-field dense>
+                <template v-slot:control>
+                  <div class="self-center full-width no-outline">
+                    {{ score1 }}
+                  </div>
+                </template>
+              </q-field>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
     </div>
 
     <!-- Part 2 -->
@@ -541,7 +614,12 @@ const putformData = () => {
         <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" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
@@ -598,22 +676,195 @@ const putformData = () => {
           </q-list>
         </q-card>
       </div>
+      <div class="col-12 row">
+        <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label> คะแนนรวมพฤติกรรมการปฎิบัติราชการ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-field dense>
+                  <template v-slot:control>
+                    <div class="self-center full-width no-outline">
+                      {{ score2 }}
+                    </div>
+                  </template>
+                </q-field>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
     </div>
 
-    <!-- Part 3 -->
+    <!-- ผลการประเมิน -->
-    <!-- <Part3 /> -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row justify-center">
         <div class="col-12 text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 }}</div>
+                  <div class="col">{{ percent_score1 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score1 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score2 }}</div>
+                  <div class="col">{{ percent_score2 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score2 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> ผลคะแนนรวม</q-item-label>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 + score2 }}</div>
+                  <div class="col">{{ percent_sum }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_sum > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <!-- Part 4 -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
           การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
+        <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+          <div class="row q-gutter-md">
+            <div class="col-8"></div>
+            <div class="col">คะแนน</div>
+            <div class="col">ร้อยละ</div>
+          </div>
+        </div>
         <q-card
           flat
           bordered
           class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
         >
-          <q-list dense>
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input dense type="number" v-model="orientation" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input dense type="number" v-model="self_learning" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input dense type="number" v-model="training_seminar" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="other_training" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <!-- <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>1. การปฐมนิเทศ</q-item-label>
@@ -711,13 +962,177 @@ const putformData = () => {
                 </div>
               </q-item-section>
             </q-item>
-          </q-list>
+          </q-list> -->
+        </q-card>
+        <q-card class="text-top0 col-12">
+          <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+            <div class="row q-gutter-md">
+              <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
+              <div class="col">{{ score4 }}</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </div>
 
     <!-- Footer -->
     <!-- <Footer /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชาผู้มอบหมายงาน
+        </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="ผู้บังคับบัญชา"
+          />
+          <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"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ 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 || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div 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="ผู้บังคับบัญชา"
+          />
+          <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"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ 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 || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div 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="ผู้บังคับบัญชา"
+          />
+          <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"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ 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 || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <q-toolbar class="text-primary">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
@@ -726,6 +1141,11 @@ const putformData = () => {
 </template>
 
 <style lang="scss" scoped>
+.align-center {
+  display: flex;
+
+  align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
+}
 .text-top2 {
   font-weight: 500;
   padding-bottom: 8px;

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

@@ -1,348 +1,248 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { QForm, useQuasar } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
-
 const $q = useQuasar();
-const probationStore = useProbationDataStore();
+const myForm = ref<QForm>();
-const { ratingColors } = probationStore;
+const edit = ref<boolean>(false);
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, notifyError } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
+const develop = ref<number>();
-const dateEnd = ref<Date>(new Date("12-10-2023"));
+const result = ref<number>();
-const period = ref<number>(1);
+
+// part new
+const date_start = ref<Date>(new Date("10-10-2023"));
+const date_finish = ref<Date>();
+const reson = ref<string>("");
+
+const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
+const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+
+const director_id = ref<any>(null);
+const director_dated = ref<any>();
+const director_id2 = ref<any>(null);
+const director_dated2 = ref<any>();
+const director_id3 = ref<any>(null);
+const director_dated3 = ref<any>();
+const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+const savaForm = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(async () => {
+          postData();
+
+        })
+        .onCancel(() => { })
+        .onDismiss(() => { });
+    }
+  });
+
+};
+
+const postData = async () => {
+  const data = await {
+    date_start: date_start.value,
+    date_finish: date_finish.value,
+    director_id: director_id.value,
+    director_dated: director_dated.value,
+    director_id2: director_id2.value,
+    director_dated2: director_dated2.value,
+    director_id3: director_id3.value,
+    director_dated3: director_dated3.value,
+  }
+
+  console.log("postData===>", data)
+};
 </script>
 
 <template>
-  <div class="row col-12 q-gutter-lg no-margin">
+  <div class="row col-12 q-mr-md">
+    <q-form ref="myForm">
 
-    <div class="col-12 row">
+      <div class="row col-12">
-      <div class="col-12 text-top0 row items-center">
+        <div class="col-12 row q-col-gutter-md">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          <div class="col-xs-12 col-sm-6">
-        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+              :enableTimePicker="false" week-start="0">
-        ถึงวันที
+              <template #year="{ year }">
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
+                  " :label="`${'ระหว่างวันที่'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+  ]">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
+              :enableTimePicker="false" week-start="0">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
+                  " :label="`${'ถึงวันที่'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
+  ]">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
       </div>
-      <div class="col-12 text-top0 row items-center">
+
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+      <div class="col-12 row q-mt-xs">
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <div class="col-xs-12 col-sm-6">
-        ระหว่างวันที่
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
-        ถึงวันที่
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        </div>
       </div>
-      <div class="col-12 q-pt-md">
+      <div class="col-12 row q-mt-lg">
+        <div class="col-xs-12 col-sm-6">
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
+            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+
+        </div>
+      </div>
+
+      <div class="col-12 row q-mt-lg">
+        <div class="col-12">
+          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
+            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+        </div>
+      </div>
+
+      <div class="col-12 q-mt-lg">
         <q-separator size="3px" color="grey-2" />
       </div>
-    </div>
 
-    <div class="col-12 row">
+      <div class="row col-12 q-gutter-lg q-mt-sm">
-      <div class="col-12 text-top0 items-center">
+        <div class="col-12 row">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          <div class="col-12 text-top2 row items-center">
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            ประธานคณะกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
+              label="เลือกประธานคณะกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="col-12 row no-margin">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+      <q-toolbar class="text-primary">
-        <q-list dense>
+        <q-space />
-          <q-item dense tag="label" v-ripple>
+        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
-            <q-item-section>
+      </q-toolbar>
-              <q-item-label>
+    </q-form>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <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" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm 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="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-
-    <!-- Part 2 -->
-    <Part2 />
-
-    <!-- Part 3 -->
-    <Part3 />
-
-    <!-- Footer -->
-    <Footer />
   </div>
 </template>
 
@@ -366,4 +266,4 @@ const period = ref<number>(1);
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
+</style>

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

@@ -636,7 +636,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -887,7 +893,12 @@ const putformData = () => {
         <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" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"

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

@@ -27,7 +27,7 @@ watch(tabHead, () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-tab name="save1" label="ครั้งที่ 1" />
           <q-btn
             size="12px"
             flat
@@ -55,7 +55,7 @@ watch(tabHead, () => {
             </q-menu>
           </q-btn>
 
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-tab name="save2" label="ครั้งที่ 2" />
           <q-btn
             size="12px"
             flat
@@ -82,7 +82,7 @@ watch(tabHead, () => {
               </q-list>
             </q-menu>
           </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+          <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
@@ -104,7 +104,7 @@ watch(tabHead, () => {
         </q-tabs>
         <div>
           <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+            <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
       </div>

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

@@ -21,9 +21,9 @@ const FormEvaluateScore = defineAsyncComponent(
         <FormEvaluateScore />
       </q-tab-panel>
 
-      <q-tab-panel name="save2">
+      <!-- <q-tab-panel name="save2">
         <FormEvaluateScore />
-      </q-tab-panel>
+      </q-tab-panel> -->
     </q-tab-panels>
   </q-page-container>
 </template>

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

@@ -14,17 +14,7 @@ const FormReport = defineAsyncComponent(
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <div class="col-12 q-ma-lg">
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
         <FormReport />
-      </q-tab-panel>
+  </div>
-
-      <q-tab-panel name="save2">
-        <FormReport />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
 </template>

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

@@ -1,87 +1,96 @@
 <template>
-    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
+  <div class="toptitle text-dark col-12 row items-center">
-		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
-			<div class="row q-col-gutter-sm">
+  </div>
-				<div class="row col-12 q-col-gutter-sm">
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-					<div>
+    <div class="row q-col-gutter-sm">
-						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
+      <div class="row col-12 q-col-gutter-sm">
-							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+        <div>
-						</q-btn>
+          <q-btn
-					</div>
+            @click="modal = true"
-					<q-space />
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
 
-					<q-input
+        <q-input
-						class="col-xs-12 col-sm-3 col-md-2"
+          class="col-xs-12 col-sm-3 col-md-2"
-						standout
+          standout
-						dense
+          dense
-						v-model="filterKeyword"
+          v-model="filterKeyword"
-						ref="filterRef"
+          ref="filterRef"
-						outlined
+          outlined
-						debounce="300"
+          debounce="300"
-						placeholder="ค้นหา"
+          placeholder="ค้นหา"
-					>
+        >
-						<template v-slot:append>
+          <template v-slot:append>
-							<q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon v-if="filterKeyword == ''" name="search" />
-							<q-icon
+            <q-icon
-								v-if="filterKeyword !== ''"
+              v-if="filterKeyword !== ''"
-								name="clear"
+              name="clear"
-								class="cursor-pointer"
+              class="cursor-pointer"
-								@click="resetFilter"
+              @click="resetFilter"
-							/>
+            />
-						</template>
+          </template>
-					</q-input>
+        </q-input>
 
-					<q-select
+        <q-select
-						v-model="visibleColumns"
+          v-model="visibleColumns"
-						multiple
+          multiple
-						outlined
+          outlined
-						dense
+          dense
-						options-dense
+          options-dense
-						:display-value="$q.lang.table.columns"
+          :display-value="$q.lang.table.columns"
-						emit-value
+          emit-value
-						map-options
+          map-options
-						:options="columns"
+          :options="columns"
-						option-value="name"
+          option-value="name"
-						options-cover
+          options-cover
-						style="min-width: 150px"
+          style="min-width: 150px"
-						class="col-xs-12 col-sm-3 col-md-2"
+          class="col-xs-12 col-sm-3 col-md-2"
-					/>
+        />
-				</div>
+      </div>
-				<div class="col-12">
+      <div class="col-12">
-					<q-table
+        <q-table
-						ref="table"
+          ref="table"
-						:columns="columns"
+          :columns="columns"
-						:rows="rows"
+          :rows="rows"
-						:filter="filterKeyword"
+          :filter="filterKeyword"
-						row-key="Order"
+          row-key="Order"
-						flat
+          flat
-						bordered
+          bordered
-						:paging="true"
+          :paging="true"
-						dense
+          dense
-						class="custom-header-table"
+          class="custom-header-table"
-						v-bind="attrs"
+          v-bind="attrs"
-						:visible-columns="visibleColumns"
+          :visible-columns="visibleColumns"
-						:pagination-label="paginationLabel"
+          :pagination-label="paginationLabel"
-						v-model:pagination="pagination"
+          v-model:pagination="pagination"
-					>
+        >
-						<template v-slot:header="props">
+          <template v-slot:header="props">
-							<q-tr :props="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>
+                <span class="text-weight-medium">{{ col.label }}</span>
-								</q-th>
+              </q-th>
-							</q-tr>
+            </q-tr>
-						</template>
+          </template>
-						<template v-slot:body="props">
+          <template v-slot:body="props">
-							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)">
+            <q-tr
-								<q-td
+              :props="props"
-									v-for="col in props.cols"
+              class="cursor-pointer"
-									:key="col.name"
+              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
-									:props="props"
+            >
-								>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-									<div v-if="col.name == 'no'">
+                <div v-if="col.name == 'no'">
-										{{ props.rowIndex + 1 }}
+                  {{ props.rowIndex + 1 }}
-									</div>
+                </div>
-									<!-- <div v-else-if="col.name == 'status'">
+                <!-- <div v-else-if="col.name == 'status'">
 										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
 											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
 										</q-icon>
@@ -92,136 +101,151 @@
 											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
 										</q-icon>
 									</div> -->
-									<div v-else>
+                <div v-else>
-										{{ col.value }}
+                  {{ col.value }}
-									</div>
+                </div>
-								</q-td>
+              </q-td>
-							</q-tr>
+            </q-tr>
-						</template>
+          </template>
-						<template v-slot:pagination="scope">
+          <template v-slot:pagination="scope">
-							<q-pagination
+            <q-pagination
-								v-model="pagination.page"
+              v-model="pagination.page"
-								active-color="primary"
+              active-color="primary"
-								color="dark"
+              color="dark"
-								:max="scope.pagesNumber"
+              :max="scope.pagesNumber"
-								:max-pages="5"
+              :max-pages="5"
-								size="sm"
+              size="sm"
-								boundary-links
+              boundary-links
-								direction-links
+              direction-links
-							></q-pagination>
+            ></q-pagination>
-						</template>
+          </template>
-					</q-table>
+        </q-table>
-				</div>
+      </div>
-			</div>
+    </div>
-    </q-card>
+  </q-card>
 
-		<q-dialog v-model="modal" persistent>
+  <q-dialog v-model="modal" persistent>
-			<q-card style="width: 900px; max-width: 80vw;">
+    <q-card style="width: 900px; max-width: 80vw">
-				<q-form ref="myForm">
+      <q-form ref="myForm">
-					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
-					<q-separator />
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
-					<q-card-section class="q-pa-md q-col-gutter-sm">
+          :close="clickClose"
-						<q-input
+        />
-							class="col-12"
+        <q-separator />
-							standout
+        <q-card-section class="q-pa-md q-col-gutter-sm">
-							dense
+          <q-input
-							v-model="filterKeyword2"
+            class="col-12"
-							ref="filterRef2"
+            standout
-							outlined
+            dense
-							debounce="300"
+            v-model="filterKeyword2"
-							placeholder="ค้นหา"
+            ref="filterRef2"
-						>
+            outlined
-							<template v-slot:append>
+            debounce="300"
-								<q-icon v-if="filterKeyword2 == ''" name="search" />
+            placeholder="ค้นหา"
-								<q-icon
+          >
-									v-if="filterKeyword2 !== ''"
+            <template v-slot:append>
-									name="clear"
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
-									class="cursor-pointer"
+              <q-icon
-									@click="resetFilter2"
+                v-if="filterKeyword2 !== ''"
-								/>
+                name="clear"
-							</template>
+                class="cursor-pointer"
-						</q-input>
+                @click="resetFilter2"
-						<div class="col-12">
+              />
-							<q-table
+            </template>
-								ref="table2"
+          </q-input>
-								:columns="columns2"
+          <div class="col-12">
-								:rows="rows2"
+            <q-table
-								:filter="filterKeyword2"
+              ref="table2"
-								row-key="Order"
+              :columns="columns2"
-								flat
+              :rows="rows2"
-								bordered
+              :filter="filterKeyword2"
-								:paging="true"
+              row-key="Order"
-								dense
+              flat
-								class="custom-header-table"
+              bordered
-								v-bind="attrs"
+              :paging="true"
-								:visible-columns="visibleColumns2"
+              dense
-								:pagination-label="paginationLabel"
+              class="custom-header-table"
-								v-model:pagination="pagination"
+              v-bind="attrs"
-							>
+              :pagination-label="paginationLabel"
-								<template v-slot:header="props">
+              v-model:pagination="pagination"
-									<q-tr :props="props">
+            >
-										<q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <template v-slot:header="props">
-											<span class="text-weight-medium">{{ col.label }}</span>
+                <q-tr :props="props">
-										</q-th>
+                  <q-th
-										<q-th auto-width />
+                    v-for="col in props.cols"
-									</q-tr>
+                    :key="col.name"
-								</template>
+                    :props="props"
-								<template v-slot:body="props">
+                  >
-									<q-tr :props="props" class="cursor-pointer">
+                    <span class="text-weight-medium">{{ col.label }}</span>
-										<q-td
+                  </q-th>
-											v-for="col in props.cols"
+                  <q-th auto-width />
-											:key="col.name"
+                </q-tr>
-											:props="props"
+              </template>
-										>
+              <template v-slot:body="props">
-											<div v-if="col.name == 'no'">
+                <q-tr :props="props" class="cursor-pointer">
-												{{ props.rowIndex + 1 }}
+                  <q-td
-											</div>
+                    v-for="col in props.cols"
-											<div v-else>
+                    :key="col.name"
-												{{ col.value }}
+                    :props="props"
-											</div>
+                  >
-										</q-td>
+                    <div v-if="col.name == 'no'">
-										<q-td auto-width>
+                      {{ props.rowIndex + 1 }}
-											<q-btn
+                    </div>
-												dense
+                    <div v-else>
-												class="q-px-md"
+                      {{ col.value }}
-												outline
+                    </div>
-												color="primary"
+                  </q-td>
-												v-close-popup
+                  <q-td auto-width>
-												label="เพิ่ม"
+                    <q-btn
-											>
+                      dense
-											</q-btn>
+                      class="q-px-md"
-										</q-td>
+                      outline
-									</q-tr>
+                      color="primary"
-								</template>
+                      label="เพิ่ม"
-								<template v-slot:pagination="scope">
+                      @click="clickAdd(props.row.id)"
-									<q-pagination
+                    >
-										v-model="pagination.page"
+                    </q-btn>
-										active-color="primary"
+                  </q-td>
-										color="dark"
+                </q-tr>
-										:max="scope.pagesNumber"
+              </template>
-										:max-pages="5"
+              <template v-slot:pagination="scope">
-										size="sm"
+                <q-pagination
-										boundary-links
+                  v-model="pagination.page"
-										direction-links
+                  active-color="primary"
-									></q-pagination>
+                  color="dark"
-								</template>
+                  :max="scope.pagesNumber"
-							</q-table>
+                  :max-pages="5"
-						</div>
+                  size="sm"
-					</q-card-section>        
+                  boundary-links
-				</q-form>
+                  direction-links
-			</q-card>
+                ></q-pagination>
-  	</q-dialog>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+} from "@/modules/05_placement/interface/request/Main";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
+
 const modal = ref<boolean>(false);
 const pagination = ref({
   sortBy: "desc",
@@ -233,7 +257,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-	"position",
+  "position",
   "level",
   "institution",
   "time",
@@ -261,7 +285,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -270,7 +294,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -279,7 +303,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "institution",
     align: "left",
     label: "สังกัด",
@@ -288,7 +312,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "time",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
@@ -297,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "orderNum",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
@@ -314,69 +338,61 @@ const columns = ref<QTableProps["columns"]>([
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormMainProbation[]>([
-	{
+  {
-		no:"1",
+    no: "1",
-		name: "นายสมคิด ยอดใจ ",
+    name: "นายสมคิด ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
+    position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
+    level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
+    time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
+    status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
+    orderNum: "11/2566",
-	},
+  },
-	{
+  {
-		no:"2",
+    no: "2",
-		name: "นายเกียรติศักดิ์ บัณฑิต",
+    name: "นายเกียรติศักดิ์ บัณฑิต",
-		position: "นักวิชาการพัสดุ",
+    position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
+    level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
+    time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
+    status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
+    orderNum: "11/2566",
-	},
+  },
-	{
+  {
-		no:"3",
+    no: "3",
-		name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
+    position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+    level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
+    institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
+    time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
+    status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
+    orderNum: "11/2566",
-	},
+  },
-	{
+  {
-		no:"4",
+    no: "4",
-		name: "นางสาวเมขลา กระจ่างมนตรี",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
+    position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+    level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
+    institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
+    time: "1",
-		status: "ไม่ผ่านการทดลอง",
+    status: "ไม่ผ่านการทดลอง",
-		orderNum: "11/2566",
+    orderNum: "11/2566",
-	},
+  },
-	{
+  {
-		no:"5",
+    no: "5",
-		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
+    position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+    level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
+    institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
+    time: "1",
-		status: "ผ่านการทดลองงาน",
+    status: "ผ่านการทดลองงาน",
-		orderNum: "11/2566",
+    orderNum: "11/2566",
-	}
+  },
-]);
-
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "name",
-	"position",
-  "level",
-  "institution"
 ]);
 
 // หัวตาราง2
@@ -388,18 +404,18 @@ const columns2 = ref<QTableProps["columns"]>([
     sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px"
+    style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullname",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "name",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -408,7 +424,7 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -417,56 +433,104 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
-    name: "institution",
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows2 = ref<FormMainProbation2[]>([
-  {
+  //   {
-		no:"1",
+  //     no: "1",
-    name: "นายใจดี ยอดใจ ",
+  //     name: "นายใจดี ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
+  //     position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
+  //     level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
+  //   },
-	{
+  //   {
-		no:"2",
+  //     no: "2",
-    name: "นายจักกริน บัณฑิต",
+  //     name: "นายจักกริน บัณฑิต",
-		position: "นักวิชาการพัสดุ",
+  //     position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
+  //     level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
+  //   },
-	{
+  //   {
-		no:"3",
+  //     no: "3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+  //     name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
+  //     position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+  //     level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
-  },
+  //   },
-	{
+  //   {
-		no:"4",
+  //     no: "4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
+  //     name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
+  //     position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+  //     level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
-  },
+  //   },
-	{
+  //   {
-		no:"5",
+  //     no: "5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+  //     name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
+  //     position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
+  //     level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
-  }
+  //   },
 ]);
 
+onMounted(async () => {});
+
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthOrganiz();
+  }
+});
+
+const fecthOrganiz = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      console.log(res);
+      let id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [
+    { criteriaType: "is_retire", criteriaValue: "false" },
+    { criteriaType: "is_probation", criteriaValue: "true" },
+  ];
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, "all"), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log("res:", res);
+      rows2.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    });
+};
+
 const clickDelete = (id: string) => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
@@ -476,17 +540,29 @@ const clickDelete = (id: string) => {
       color: "negative",
     },
     persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
   })
     .onOk(async () => {
+      console.log("เพิ่ม:", id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
 
-
-const clickAdd = () => {
-	modal.value = true
-};
 const clickClose = async () => {
   modal.value = false;
 };
@@ -513,7 +589,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 </script>
 
 <style lang="scss" scope>
@@ -563,4 +638,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
+</style>

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -34,15 +34,15 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
- /*  {
+  /*  {
-    name: "fixname",
+     name: "fixname",
-    align: "left",
+     align: "left",
-    label: "คำนำหน้านาม",
+     label: "คำนำหน้านาม",
-    title: "คำนำหน้านาม",
+     title: "คำนำหน้านาม",
-    field: "fixname",
+     field: "fixname",
-    headerStyle: "font-size: 14px",
+     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+     style: "font-size: 14px",
-  }, */
+   }, */
   {
     name: "name",
     align: "left",
@@ -253,8 +253,8 @@ const clickDelete = (prop: any) => {
           } else await fecthlist(retireld_params);
         });
     })
-    .onCancel(() => {})
+    .onCancel(() => { })
-    .onDismiss(() => {});
+    .onDismiss(() => { });
 };
 // note
 const fetchReason = async (prop: string) => {
@@ -269,6 +269,7 @@ const fetchReason = async (prop: string) => {
       messageError($q, e);
     });
 };
+
 const saveNote = () => {
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
@@ -297,8 +298,8 @@ const saveNote = () => {
           modalNote.value = false;
         });
     })
-    .onCancel(() => {})
+    .onCancel(() => { })
-    .onDismiss(() => {});
+    .onDismiss(() => { });
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
@@ -361,26 +362,13 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList
+        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
-          :retireld="retireld"
-          :profile-id="profileId"
-          :UpdateListId="UpdateListId"
-        />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -409,35 +397,15 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input
+          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
-            borderless
+            class="q-ml-sm">
-            outlined
-            dense
-            debounce="300"
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
             <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
-          <q-select
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            v-model="visibleColumns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            multiple
+            class="gt-xs q-ml-sm">
-            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="gt-xs q-ml-sm"
-          >
             <!-- <template v-slot:option="{ opt }">
               <div>{{ opt.label }}</div>
               <div class="sublabel">{{ opt.sublabel }}</div>
@@ -447,20 +415,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table
+        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
-          flat
+          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
-          dense
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
-          bordered
-          :rows="rows"
-          :columns="columns"
-          row-key="order"
-          class="custom-header-table"
-          :filter="filter"
-          :visible-columns="visibleColumns"
-          no-data-label="ไม่มีข้อมูล"
-          :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">
@@ -476,11 +433,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
-              :props="props"
+              @click="
-              class="cursor-pointer"
+                fetchReason(props.row.id), (modalNote = true), (note = '')
-              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+                ">
-            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
               <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
@@ -521,40 +477,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn
+                <q-btn flat round color="blue" dense icon="mdi-file-account"
-                  flat
+                  @click="router.push(`/registry/${props.row.profileId}`)">
-                  round
-                  color="blue"
-                  dense
-                  icon="mdi-file-account"
-                  @click="router.push(`/registry/${props.row.profileId}`)"
-                >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
+                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
-                  flat
+                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
-                  round
-                  class="text-red-14"
-                  icon="mdi-delete"
-                  dense
-                  @click="clickDelete(props.row)"
-                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-                >
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
+            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-              v-model="pagination.page"
+              boundary-links direction-links></q-pagination>
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -566,38 +502,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder"
+          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
-            >กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn
+          <q-btn icon="close" unelevated round dense @click="modalNote = false"
-            icon="close"
+            style="color: #ff8080; background-color: #ffdede" />
-            unelevated
-            round
-            dense
-            @click="modalNote = false"
-            style="color: #ff8080; background-color: #ffdede"
-          />
         </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
-        <q-input
+        <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          outlined
+          :label="`${'กรอกเหตุผล'}`" type="textarea" />
-          dense
-          lazy-rules
-          v-model="note"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          :label="`${'กรอกเหตุผล'}`"
-          type="textarea"
-        />
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
+        <q-btn label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
-          label="บักทึก"
-          color="secondary"
-          @click="saveNote"
-          :disable="visibleNote"
-        />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -623,13 +540,16 @@ const paginationLabel = (start: number, end: number, total: number) => {
     position: sticky;
     z-index: 1;
   }
+
   .q-table thead tr:last-child th {
     top: 48px;
   }
+
   .q-table thead tr:first-child th {
     top: 0;
   }
 }
+
 .q-btn-dropdown__arrow {
   display: none;
 }

src/modules/06_retirement/views/Main.vue

@@ -369,9 +369,9 @@ const clickAdd = () => {
       model: 'opt1',
       // inline: true
       items: [
-        { label: 'ประกาศแก้ไข (เพิ่มคนเกษียณ)', value: 'opt1'},
+        { label: 'ประกาศเพิ่มผู้เกษียณ', value: 'ADD'},
-        { label: 'ประกาศแก้ไข (เฉพาะราย)', value: 'opt2' },
+        { label: 'ประกาศแก้ไขข้อมูลผู้เกษียน', value: 'EDIT' },
-        { label: 'ประกาศยกเลิก', value: 'opt3' }
+        { label: 'ประกาศยกเลิกผู้เกษียณ', value: 'REMOVE' }
       ]
     },
     cancel: {
@@ -380,6 +380,7 @@ const clickAdd = () => {
     },
     persistent: true,
     }).onOk(data => {
+      console.log("option===>", data)
       router.push(`/retirement/list/${type.value}/${currentYear}`);
     }).onCancel(() => {
     }).onDismiss(() => {

src/modules/08_registryEmployee/router.ts

@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/edit/:Id",
+    path: "/registryEmployee/edit/:id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {

src/modules/08_registryEmployee/views/EditDetail.vue

@@ -137,11 +137,9 @@
         <div class="row items-center text-dark q-ml-md">
           <div class="column">
             <div class="text-bold q-pb-xs text-name">
-              {{ "แก้ไข้ข้อมูลทะเบียนประวัติลูกจ้างชั่วคราว" }}
+              {{ fullname }}{{ leaveReason }}
-            </div>
-            <div class="text-bold q-pb-xs text-sub">
-              {{ "ลูกจ้างชั่วคราว" }}
             </div>
+            <div>{{ position }}</div>
           </div>
         </div>
         <q-space />

src/modules/08_registryEmployee/views/Main.vue

@@ -231,7 +231,7 @@
                     <q-item
                       clickable
                       v-close-popup
-                      @click="clickDelete('test')"
+                      @click="clickDelete(props.row.id)"
                     >
                       <q-item-section
                         style="min-width: 0px"
@@ -1354,8 +1354,8 @@ const clickAdd = () => {
 };
 
 // ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (profileId?: string) => {
+const redirectToPage = (id?: string) => {
-  router.push(`/registryEmployee/edit/${profileId}`);
+  router.push(`/registryEmployee/edit/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);
@@ -1429,7 +1429,7 @@ const showEmployeeTemp = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {
@@ -1489,7 +1489,7 @@ const showEmployeeTempOrder = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {

src/modules/08_registryEmployee/views/information.vue

@@ -117,7 +117,11 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="
+                  informaData.birthDate == null
+                    ? null
+                    : date2Thai(informaData.birthDate)
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -692,7 +696,7 @@ const defaultAdd = () => {
     prefixId: null,
     firstname: null,
     lastname: null,
-    birthDate: new Date(),
+    birthDate: null,
     genderId: null,
     bloodId: null,
     nationality: null,