ปรับ ทดลองงาน

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

@@ -11,22 +11,24 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+} = mixin;
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
+
 const name = ref<string>("");
 const position_line = ref<string>("");
 const position_level = ref<string>("");
 const organization = ref<string>("");
 const probation_status = ref<string>("");
-
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
+const probation_statusold = ref<string>("");
 
 const visibleColumns = ref<string[]>([
   "no",
@@ -34,9 +36,7 @@ const visibleColumns = ref<string[]>([
   "date_finish",
   "mentors",
   "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -84,31 +84,39 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
-// ข้อมูลตาราง (จำลอง)
 const rows = ref<FormProbationDetail[]>([]);
 
-const clickAdd = () => {};
+const probation_statusOP = ref<any>([
+  {
+    id: "1",
+    label: "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "2",
+    label: "พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "4",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง",
+  },
+  {
+    id: "5",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก",
+  },
+  {
+    id: "5",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม",
+  },
+]);
 
-const clickSelect = (id: string) => {
-  router.push(`${route.fullPath}/${id}`);
-};
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+onMounted(async () => {
+  await getpersonalList();
+  await getAssignList();
+});
 const getAssignList = async () => {
   showLoader();
   await http
@@ -141,17 +149,65 @@ const getpersonalList = async () => {
       position_level.value = data.position_level;
       organization.value = data.organization;
       probation_status.value = data.probation_status;
+      probation_statusold.value = data.probation_status;
     })
     .catch(() => {})
     .finally(() => {
       hideLoader();
     });
 };
+const selectStatus = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.changestatusProbations(personalId.value), {
+          status: probation_status.value,
+        })
+        .then((res) => {
+          success($q, "แก้ไขสถานะสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+          probation_status.value = probation_statusold.value;
+        })
+        .finally(() => {
+          hideLoader();
+          getpersonalList();
+        });
+    },
+    "ยืนยันการเปลี่ยนสถานะทดลองงาน",
+    "ต้องการเปลี่ยนสถานะทดลองงานข้อมูลนี้หรือไม่ ?",
+    () => {
+      probation_status.value = probation_statusold.value;
+    }
+  );
+};
+const clickSelect = (id: string) => {
+  router.push(`${route.fullPath}/${id}`);
+};
 
-onMounted(async () => {
-  await getpersonalList();
-  await getAssignList();
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -210,7 +266,18 @@ onMounted(async () => {
           <div class="col-12">
             <div class="col-12 text-top">สถานะการทดลองงาน</div>
             <div class="col-12 text-detail">
-              <q-icon
+              <q-select
+                dense
+                borderless
+                v-model="probation_status"
+                :options="probation_statusOP"
+                option-label="label"
+                option-value="id"
+                @update:model-value="selectStatus"
+                emit-value
+                map-options
+              />
+              <!-- <q-icon
                 size="20px"
                 v-if="probation_status === 'PENDING'"
                 name="mdi-timer-sand"
@@ -245,7 +312,7 @@ onMounted(async () => {
                   : probation_status === "PASS"
                   ? "ผ่านการทดลองงาน"
                   : ""
-              }}
+              }} -->
             </div>
           </div>
         </div>