แก้ไขการลา

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการรับโอนของ {{ title.fullname }}
+  </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">
+        {{ title.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${paramsId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <!-- <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          /> -->
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <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">
+              {{ title.positionTypeOld }}
+            </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">
+              {{ title.positionLevelOld }}
+            </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">
+              {{ title.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveDataId(paramsId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -489,9 +489,9 @@ const getData = async () => {
       responseData.value.salary = data.salary !== null ? data.salary : 0;
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.prefix ?? "-"} ${
-        data.firstName ?? "-"
-      } ${data.lastName ?? "-"}`;
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
 
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";

src/modules/05_placement/interface/response/Receive.ts

@@ -0,0 +1,10 @@
+import { type } from "os";
+
+interface ResponseTitle {
+  fullname: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionTypeOld: string;
+}
+
+export type { ResponseTitle };

src/modules/05_placement/router.ts

@@ -38,9 +38,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const receiveDetail2 = () =>
+  import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 export default [
@@ -197,7 +199,7 @@ export default [
   {
     path: "/receive/:id",
     name: "receiveDetail",
-    component: receiveDetail,
+    component: receiveDetail2,
     meta: {
       Auth: true,
       Key: [6.3],

src/modules/05_placement/store.ts

@@ -316,17 +316,17 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
-        return "รออนุมัติ";
+        return "รอดำเนินการ";
       case "PENDING":
-        return "รออนุมัติ";
+        return "เลือกตำแหน่งแล้ว";
       case "APPROVE":
-        return "ผ่านการอนุมัติ";
+        return "อนุมัติ";
       case "REJECT":
-        return "ไม่ผ่านการอนุมัติ";
+        return "ไม่อนุมัติ";
       case "REPORT":
-        return "ส่งไปออกคำสั่ง";
+        return "ส่งรายชื่อไปออกคำสั่ง";
       case "DONE":
-        return "ออกคำสั่งสำเร็จ";
+        return "ออกคำสั่งเสร็จแล้ว";
 
       default:
         return "-";

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

@@ -1,19 +1,37 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+
+const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
+const RetirementData = useRetirementDataStore();
 
-const rows = ref<any>([]);
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const { statusText } = RetirementData;
+
+const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "prefix",
     align: "left",
@@ -22,6 +40,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "prefix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -31,73 +51,211 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
+    name: "positionTypeOld",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "positionTypeOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "positionLevelOld",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "positionLevel",
+    field: "positionLevelOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionExecutive",
+    name: "positionNumberOld",
     align: "left",
-    label: "ตำแหน่งทางการบริหาร",
+    label: "เลขที่",
     sortable: true,
-    field: "positionExecutive",
+    field: "positionNumberOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "no",
   "prefix",
   "fullname",
-  "positionType",
-  "position",
-  "positionLevel",
-  "positionExecutive",
-  "oc",
-  "status",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
 ]);
 
+const filters = ref<ResponseItems[]>([]);
+const rows2 = ref<ResponseItems[]>([]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "prefix",
+  "fullname",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const selected = ref<ResponseItems[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseItems) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
 onMounted(async () => {
   await fecthlist();
 });
@@ -107,23 +265,37 @@ const fecthlist = async () => {
   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,
-      }));
+      const data = res.data.result;
+      let list: ResponseItems[] = [];
+
+      data.map((r: ResponseItems) => {
+        list.push({
+          activeDate: new Date(),
+          createdAt: new Date(),
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          location: r.location ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          profileId: r.profileId ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          sendDate: new Date(),
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+
+      rows.value = list;
+      filters.value = list;
     })
     .catch((e: any) => {
-      console.log(e);
       messageError($q, e);
     })
     .finally(() => {
@@ -131,28 +303,29 @@ const fecthlist = async () => {
     });
 };
 
-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 saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
+  showLoader();
+  await http
+    .post(config.API.resignReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlist();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -161,6 +334,17 @@ const resetFilter = () => {
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
+          </q-btn>
+
           <q-space />
 
           <q-input
@@ -201,20 +385,12 @@ const resetFilter = () => {
           />
         </div>
         <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -227,107 +403,158 @@ const resetFilter = () => {
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="
-                  router.push(`/retirement/resign/${props.row.personalId}`)
-                "
+                @click="router.push(`/retirement/resign/${props.row.id}`)"
               >
-                <!-- <q-td key="no" :props="props">
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
-                </q-td> -->
+                </q-td>
                 <q-td key="prefix" :props="props">
                   {{ props.row.prefix }}
                 </q-td>
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="positionType" :props="props">
-                  {{ props.row.positionType }}
+                <q-td key="positionTypeOld" :props="props">
+                  {{ props.row.positionTypeOld }}
                 </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
+                <q-td key="positionLevelOld" :props="props">
+                  {{ props.row.positionLevelOld }}
                 </q-td>
-                <q-td key="positionLevel" :props="props">
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="positionExecutive" :props="props">
-                  {{ props.row.positionExecutive }}
-                </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
+                <q-td key="positionNumberOld" :props="props">
+                  {{ props.row.positionNumberOld }}
                 </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-if="props.row.status == 'APPROVE'"
-                    name="mdi-check"
-                    color="teal"
-                  >
-                    <q-tooltip>เสร็จสิ้น</q-tooltip>
-                  </q-icon>
-                  <q-icon size="20px" v-else name="mdi-close" color="red">
-                    <q-tooltip>ยับยั้ง</q-tooltip>
-                  </q-icon>
-
-                  <!-- {{ props.row.status }} -->
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </d-table>
         </div>
       </div>
     </div>
   </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="prefix" :props="props">
+                {{ props.row.prefix }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="positionTypeOld" :props="props">
+                {{ props.row.positionTypeOld }}
+              </q-td>
+              <q-td key="positionLevelOld" :props="props">
+                {{ props.row.positionLevelOld }}
+              </q-td>
+              <q-td key="positionNumberOld" :props="props">
+                {{ props.row.positionNumberOld }}
+              </q-td>
+
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
-<style scoped lang="scss">
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

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

@@ -38,20 +38,24 @@
         <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">{{ dataDetail.positionLine }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.positionTypeOld }}
+            </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">{{ dataDetail.positionLevel }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.positionLevelOld }}
+            </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">
-              {{ dataDetail.organizationOrganization }}
+              {{ dataDetail.organizationPositionOld }}
             </div>
           </div>
         </div>
@@ -59,20 +63,7 @@
           <div class="col-12">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
-              <q-icon
-                size="20px"
-                v-if="dataDetail.status == 'PENDING'"
-                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) }}
+              {{ statusText(dataDetail.status) }}
             </div>
           </div>
         </div>
@@ -140,6 +131,268 @@
     </div>
   </q-card>
 
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <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-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="location"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'สถานที่ยื่นขอลาออกจากราชการ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateLeave"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      dateLeave !== null ? date2Thai(dateLeave) : null
+                    "
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือก วันที่ขอลาออกจากราชการ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${' วันที่ขอลาออกจากราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ '}`,
+              ]"
+              hide-bottom-space
+              :label="`${'เหตุผลที่ลาออกจากราชการ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+
   <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
@@ -208,30 +461,87 @@ import { ref, onMounted } from "vue";
 // import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 // import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const router = useRouter();
-const route = useRoute();
-const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
-const $q = useQuasar();
-const id = ref<string>(route.params.id.toString());
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
-const dataDetail = ref<any>([]);
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const RetirementData = useRetirementDataStore();
+
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+const { statusText } = RetirementData;
+
+const id = ref<string>(route.params.id.toString());
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const dataDetail = ref<ResponseItems>({
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const date = ref<Date | null>(null);
+const dateLeave = ref<Date | null>(null);
+const reason = ref<string>("");
+const location = ref<string>("");
 
 // const modalPass = ref<boolean>(false);
 // const modalPassNot = ref<boolean>(false);
 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);
+      const data = res.data.result;
+      dataDetail.value = data;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ? data.salary : 0;
+      date.value = data.sendDate ? new Date(data.sendDate) : null;
+      dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+      reason.value = data.reason ?? "";
+      location.value = data.location ?? "";
     })
     .catch((e) => {
       console.log(e);
@@ -241,6 +551,7 @@ const fetchData = async (id: string) => {
       hideLoader();
     });
 };
+
 const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
     $q.dialog({
@@ -268,6 +579,7 @@ const popUp = (action: "pass" | "passNot") => {
     });
   }
 };
+
 const confirmpopUp = async () => {
   await http
     .get(config.API.resignConfirm(id.value))
@@ -283,6 +595,7 @@ const confirmpopUp = async () => {
       fetchData(id.value);
     });
 };
+
 const rejectpopUp = async () => {
   console.log("ยกเลิก");
   await http
@@ -300,16 +613,59 @@ const rejectpopUp = async () => {
 const redirectToRegistry = (id: string) => {
   router.push(`/registry/${id}`);
 };
-const statusName = (val: string) => {
-  switch (val) {
-    case "PENDING":
-      return "รอดำเนินการ";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ยับยั้ง";
+
+const conditionSave = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลรายละเอียดการลาออก",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
   }
 };
+
+const saveData = async () => {
+  const formData = new FormData();
+  const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+  const activeDate =
+    dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
+  formData.append("Location", location.value);
+  formData.append("SendDate", send);
+  formData.append("ActiveDate", activeDate);
+  formData.append("Reason", reason.value);
+  formData.append("OrganizationPositionOld", organizationPositionOld.value);
+  formData.append("PositionTypeOld", positionTypeOld.value);
+  formData.append("PositionLevelOld", positionLevelOld.value);
+  formData.append("PositionNumberOld", posNo.value);
+  formData.append("AmountOld", salary.value.toString());
+  salary;
+  showLoader();
+  await http
+    .put(config.API.resingByid(id.value), formData)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData(id.value);
+      hideLoader();
+    });
+};
+
 // const clickClose = () => {
 //   userNote.value = "";
 //   modalPass.value = false;
@@ -353,6 +709,13 @@ const statusName = (val: string) => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -367,34 +730,4 @@ const statusName = (val: string) => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>

src/modules/06_retirement/interface/response/Main.ts

@@ -1,9 +1,32 @@
 interface resMain {
-    id: string;
-    createdAt: Date;
-    year: string;
-    round: number;
-    total: number;
-    typeReport: String;
+  id: string;
+  createdAt: Date;
+  year: string;
+  round: number;
+  total: number;
+  typeReport: String;
 }
-export type { resMain };
+
+interface ResponseItems {
+  activeDate: Date;
+  createdAt: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  location: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  salary: number;
+  sendDate: Date;
+  status: string;
+  statustext: string;
+  fullname: string;
+}
+
+export type { resMain, ResponseItems };

src/modules/06_retirement/store.ts

@@ -1,5 +1,27 @@
 import { defineStore } from "pinia";
 
 export const useRetirementDataStore = defineStore("retirement", () => {
-  return {};
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
 });