ผูก API ระบบลาออก

src/api/06_retirement/api.retirement.ts

@@ -14,6 +14,12 @@ export default {
 
     //RetirementDeceased ถึงแก่กรรม
     listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`
+    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
+
+    // RetirementResign ระบบลาออก
+    listResign: () => `${retirement}/resign`,
+    resingByid: (id: string) => `${retirement}/resign/${id}`,
+    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
 };

src/modules/06_retirement/components/resign/Resign.vue

@@ -1,34 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-const router = useRouter();
+import { useCounterMixin } from "@/stores/mixin";
-const pagination = ref({
+import http from "@/plugins/http";
-    sortBy: "desc",
+import config from "@/app.config";
-    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;
-  };
-const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc", "status",]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
 
-// const nextPage = (id:string) => {
+const router = useRouter();
-//   router.push("/retirement/resign/"+id);
+const mixin = useCounterMixin();
-// };
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
-const rows = ref<any>([
+const $q = useQuasar(); //ใช้ noti quasar
-  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร", status: "ยื่นลาออก",},
+
-  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร", status: "ยื่นลาออก",},
+const rows = ref<any>([]);
-]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -103,6 +87,72 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "fullname",
+  "positionType",
+  "position",
+  "positionLevel",
+  "positionExecutive",
+  "oc",
+  "status",
+]);
+
+onMounted(async () => {
+  await fecthlist();
+});
+
+const fecthlist = async () => {
+  showLoader();
+  await http
+    .get(config.API.listResign())
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        personalId: e.id,
+        profileId: e.profileId,
+        prefix: e.prefix,
+        fullname: e.firstName + "   " + e.lastName,
+        positionType: e.positionType,
+        position: e.positionLine,
+        positionLevel: e.positionLevel,
+        positionExecutive: e.positionExecutive,
+        oc: e.organizationOrganization,
+        status: e.status,
+      }));
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -111,25 +161,6 @@ const columns = ref<QTableProps["columns"]>([
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
-          <!-- <q-select
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-            @update:model-value="searchFilterTable"
-          /> -->
-
           <q-space />
 
           <q-input
@@ -185,17 +216,21 @@ const columns = ref<QTableProps["columns"]>([
             :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">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="
+                  router.push(`/retirement/resign/${props.row.personalId}`)
+                "
+              >
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->
@@ -220,10 +255,22 @@ const columns = ref<QTableProps["columns"]>([
                 <q-td key="oc" :props="props">
                   {{ props.row.oc }}
                 </q-td>
-                <q-td key="status" :props="props">
-                  {{ props.row.status }}
-                </q-td>
 
+                <q-td key="status" :props="props">
+                  <q-icon
+                    size="20px"
+                    v-if="props.row.status == 'PENDING'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  >
+                    <q-tooltip>รอดำเนินการ</q-tooltip>
+                  </q-icon>
+                  <q-icon size="20px" v-else name="mdi-check" color="teal">
+                    <q-tooltip>เสร็จสิ้น</q-tooltip>
+                  </q-icon>
+
+                  <!-- {{ props.row.status }} -->
+                </q-td>
               </q-tr>
             </template>
             <template v-slot:pagination="scope">

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -10,14 +10,24 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-        รายละเอียดการลาออกของ {{ name }}
+    รายละเอียดการลาออกของ
-				
+    {{ dataDetail.firstName + "  " + dataDetail.lastName }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+      </div>
       <q-space />
-				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="redirectToRegistry(dataDetail.profileId)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -28,29 +38,41 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
             <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-							<div class="col-12 text-detail">{{position}}</div>
+            <div class="col-12 text-detail">{{ dataDetail.positionLine }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-							<div class="col-12 text-detail">{{level}}</div>
+            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สังกัด</div>
-							<div class="col-12 text-detail">{{institution}}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.organizationOrganization }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
-								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
+              <q-icon
-								<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
+                size="20px"
-								<q-icon size="20px" v-else name="mdi-check" color="teal" />
+                v-if="dataDetail.status == 'PENDING'"
-								{{ status }}
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="dataDetail.status == 'APPROVE'"
+                name="mdi-check"
+                color="teal"
+              />
+              <q-icon size="20px" v-else name="mdi-close" color="red" />
+              {{ statusName(dataDetail.status) }}
             </div>
           </div>
         </div>
@@ -62,12 +84,26 @@
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
       <q-space />
-				<div class="q-gutter-x-sm">
+      <div class="q-gutter-x-sm" v-if="dataDetail.status === 'PENDING'">
-					<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
+        <q-btn
-					<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>
+          outline
-
+          color="primary"
+          dense
+          icon-right="check"
+          class="q-px-sm"
+          label="อนุมัติ"
+          @click="popUp('pass')"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          icon-right="close"
+          class="q-px-sm"
+          label="ยับยั้ง"
+          @click="popUp('passNot')"
+        />
       </div>
-				
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -75,32 +111,36 @@
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{location}}</div>
+            <div class="col-12 text-detail">{{ dataDetail.location }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{filingDate}}</div>
+            <div class="col-12 text-detail">
+              {{ date2Thai(dataDetail.sendDate) }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{reason}}</div>
+            <div class="col-12 text-detail">{{ dataDetail.reason }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{requestDate}}</div>
+            <div class="col-12 text-detail">
+              {{ date2Thai(dataDetail.activeDate) }}
+            </div>
           </div>
         </div>
       </div>
     </div>
   </q-card>
 
-	<q-dialog v-model="modalPass" persistent>
+  <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <DialogHeader
@@ -159,189 +199,160 @@
         />
       </q-form>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useQuasar, QForm } from "quasar";
-import { ref, useAttrs } from "vue";
+import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const router = useRouter();
-const userNote = ref<string>("");
+const route = useRoute();
-const name = ref<string>('นายสมคิด ยอดใจ')
+const mixin = useCounterMixin();
-const position = ref<string>('นักจัดการงานทั่วไป')
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการพิจารณา')
-const edit = ref<boolean>(true)
-const location = ref<string>('ที่ทำงาน') 
-const filingDate = ref<string>('21 ก.ค. 2566')
-const reason = ref<string>('เพราะxxx') 
-const requestDate = ref<string>('21 ธ.ค. 2566')
 const $q = useQuasar();
-const modalPass = ref<boolean>(false);
+const id = ref<string>(route.params.id.toString());
-const modalPassNot = ref<boolean>(false);
+
-const pagination = ref({
+const dataDetail = ref<any>([]);
-  sortBy: "desc",
+
-  descending: false,
+// const modalPass = ref<boolean>(false);
-  page: 1,
+// const modalPassNot = ref<boolean>(false);
-  rowsPerPage: 10,
+onMounted(() => {
+  fetchData(id.value);
+});
+const fetchData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      dataDetail.value = res.data.result;
+      // console.log(dataDetail.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
     });
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "startDate",
-	"endDete",
-  "intendant",
-  "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่วันที่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "endDete",
-    align: "left",
-    label: "ถึงวันที่",
-    sortable: true,
-    field: "endDete",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "intendant",
-    align: "left",
-    label: "ผู้ดูแล",
-    sortable: true,
-    field: "intendant",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "commander",
-    align: "left",
-    label: "ผู้บังคับบัญชา",
-    sortable: true,
-    field: "commander",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormProbationDetail[]>([
-  {
-		no: "1",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวรัชภรณ์ ภักดี",
-  	commander: "นายนภัทร  วันดี"
-	},
-	{
-		no: "2",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นางพิศ โพธิ์ดำ"
-	},
-	{
-		no: "3",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นายนภัทร  วันดี"
-	},
-]);
-
-const clickAdd = () => {
-};
-
-// ค้นหาในตาราง
-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;
 };
 const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
-    modalPass.value = true;
+    $q.dialog({
+      title: "ยืนยันการอนุมัติการลาออก",
+      message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      confirmpopUp();
+    });
   } else if (action === "passNot") {
-    modalPassNot.value = true;
+    $q.dialog({
+      title: "ยืนยันการยับยั้งการลาออก",
+      message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      rejectpopUp();
+    });
   }
 };
-const clickClose = () =>{
+const confirmpopUp = async () => {
-  userNote.value = ""
+  await http
-	modalPass.value = false
+    .get(config.API.resignConfirm(id.value))
-	modalPassNot.value = false
+    .then(() => {
-}
+      console.log("ยืนยัน");
-const savePass = () =>{
+      success($q, "บันทึกสำเร็จ");
-
-	$q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
     })
-        .onOk(() => {
+    .catch((e) => {
-          modalPass.value = false
+      console.log(e);
-          console.log('----MSG---- :',userNote.value)
+      messageError($q, e);
-          console.log('passSave (close)')
-          userNote.value = ""
-        }).onCancel(() => {})
-        .onDismiss(() => {});
-}
-
-const savePassNot = () => {
-  $q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
     })
-        .onOk(() => {
+    .finally(() => {
-          modalPass.value = false
+      fetchData(id.value);
-          console.log('----MSG---- :',userNote.value)
+    });
-          console.log('passSaveNot (close)')
+};
-          userNote.value = ""
+const rejectpopUp = async () => {
-        }).onCancel(() => {})
+  console.log("ยกเลิก");
-        .onDismiss(() => {});
+  await http
+    .get(config.API.resignReject(id.value))
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fetchData(id.value);
+    });
+};
+const redirectToRegistry = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+const statusName = (val: string) => {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ยับยั้ง";
   }
-
+};
+// const clickClose = () => {
+//   userNote.value = "";
+//   modalPass.value = false;
+//   modalPassNot.value = false;
+// };
+// const savePass = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSave (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
+// const savePassNot = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSaveNot (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -355,7 +366,6 @@ const savePassNot = () => {
 }
 .text-detail {
   font-weight: 500;
-
 }
 .custom-header-table {
   max-height: 64vh;