ปรับระบบพ้นจากราชการ

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

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive, watch } from "vue";
-import type { QTableProps } from "quasar";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreRetirement } from "@/modules/06_retirement/store/storeRetirement";
 import { checkPermission } from "@/utils/permissions";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
 
-import popupAdd from "@/modules/06_retirement/components/ListRetirement/popupAdd.vue";
+import popupAdd from "@/modules/06_retirement/components/01_retirement/DialogAddListRetirement.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
@@ -29,8 +29,6 @@ const yearOptionsFilter = ref<any>({
 });
 const actionOption = ref<resMain[]>([]);
 
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "",
   descending: false,
@@ -95,8 +93,6 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const yearOptions = ref<any>([{ id: "", year: "ทั้งหมด" }]);
 
-// หาปีปัจจุบัน
-
 // ประกาศเกษียณอายุราชการ
 async function fetchRetirement(type: string, year: any) {
   showLoader();
@@ -251,14 +247,14 @@ onMounted(async () => {
       </q-tabs>
     </div>
     <q-separator />
-    <q-tab-panels v-model="tab" animated
-      ><q-tab-panel
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
         v-for="item in useStoreRetire.taboption"
         :key="item.name"
         :name="item.name"
         class="q-pa-none"
       >
-        <div class="col-12 row q-pa-md">
+        <div class="col-12 row q-pa-md q-col-gutter-sm">
           <div class="row col-12">
             <div class="row col-12 q-col-gutter-sm">
               <q-select
@@ -304,7 +300,6 @@ onMounted(async () => {
               <q-space />
 
               <q-input
-                class="col-xs-12 col-sm-3 col-md-2"
                 standout
                 dense
                 v-model="filterKeyword"
@@ -314,13 +309,7 @@ onMounted(async () => {
                 placeholder="ค้นหา"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filterKeyword == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
 
@@ -336,100 +325,89 @@ onMounted(async () => {
                 :options="columns"
                 option-value="name"
                 style="min-width: 140px"
-                class="col-xs-12 col-sm-3 col-md-2"
               />
             </div>
-            <div class="col-12 q-pt-sm">
-              <q-table
-                ref="table"
-                :columns="columns"
-                :rows="rows"
-                :filter="filterKeyword"
-                row-key="name"
-                flat
-                bordered
-                :paging="true"
-                dense
-                class="custom-header-table"
-                v-bind="attrs"
-                :visible-columns="visibleColumns"
-                v-model:pagination="pagination"
-              >
-                <template v-slot:header="props">
-                  <q-tr :props="props">
-                    <q-th auto-width> </q-th>
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
-                      :props="props"
+          </div>
+
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              :filter="filterKeyword.trim()"
+              row-key="name"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :visible-columns="visibleColumns"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th auto-width> </q-th>
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-width>
+                    <q-btn
+                      v-if="checkPermission($route)?.attrIsGet"
+                      flat
+                      round
+                      dense
+                      icon="mdi-eye"
+                      color="info"
+                      @click="nextPageDetail(props.row)"
                     >
-                      <span class="text-weight-medium">{{ col.label }}</span>
-                    </q-th>
-                  </q-tr>
-                </template>
-                <template v-slot:body="props">
-                  <q-tr :props="props">
-                    <q-td auto-width>
-                      <q-btn
-                        v-if="checkPermission($route)?.attrIsGet"
-                        flat
-                        round
-                        dense
-                        icon="mdi-eye"
-                        color="info"
-                        @click="nextPageDetail(props.row)"
-                      >
-                        <q-tooltip>รายละเอียด</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        v-if="
-                          checkPermission($route)?.attrIsGet &&
-                          checkPermission($route)?.attrIsUpdate &&
-                          !props.row.document
-                        "
-                        flat
-                        round
-                        dense
-                        icon="edit"
-                        color="edit"
-                        @click="nextPage(props.row)"
-                      >
-                        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                      </q-btn>
-                    </q-td>
-                    <q-td key="no" :props="props">
-                      {{ props.rowIndex + 1 }}
-                    </q-td>
-                    <q-td key="signDate" :props="props">
-                      {{ props.row.signDate ? props.row.signDate : "-" }}
-                    </q-td>
-                    <q-td key="Date" :props="props">
-                      {{ props.row.Date }}
-                    </q-td>
-                    <q-td key="retireNumber" :props="props">
-                      {{ props.row.total }}
-                    </q-td>
-                    <q-td key="typeReport" :props="props">
-                      {{ props.row.typeReport }}
-                    </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>
-            </div>
-          </div></div></q-tab-panel
-    ></q-tab-panels>
+                      <q-tooltip>รายละเอียด</q-tooltip>
+                    </q-btn>
+
+                    <q-btn
+                      v-if="
+                        checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsUpdate
+                      "
+                      flat
+                      round
+                      dense
+                      icon="edit"
+                      :disable="props.row.document"
+                      :color="!props.row.document ? 'edit' : 'grey-5'"
+                      @click="nextPage(props.row)"
+                    >
+                      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                  <q-td key="no" :props="props">
+                    {{ props.rowIndex + 1 }}
+                  </q-td>
+                  <q-td key="signDate" :props="props">
+                    {{ props.row.signDate ? props.row.signDate : "-" }}
+                  </q-td>
+                  <q-td key="Date" :props="props">
+                    {{ props.row.Date }}
+                  </q-td>
+                  <q-td key="retireNumber" :props="props">
+                    {{ props.row.total }}
+                  </q-td>
+                  <q-td key="typeReport" :props="props">
+                    {{ props.row.typeReport }}
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-tab-panel>
+    </q-tab-panels>
   </q-card>
 </template>
 
@@ -452,35 +430,4 @@ onMounted(async () => {
 .icon-color {
   color: #4154b3;
 }
-
-.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/views/02_resign.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useDataStore } from "@/modules/06_retirement/store/resignMain";
+
+import Table from "@/modules/06_retirement/components/02_resign/Table.vue";
+
+const stroe = useDataStore();
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
+  <div>
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="stroe.mainTabs"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="1" label="ขอลาออก" />
+        <q-tab name="2" label="ขอยกเลิกลาออก" />
+      </q-tabs>
+      <q-separator />
+      <div>
+        <q-tab-panels v-model="stroe.mainTabs" animated>
+          <q-tab-panel name="1"> <Table /> </q-tab-panel>
+
+          <q-tab-panel name="2"> <Table /> </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/06_retirement/views/03_resignEmp.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useDataStore } from "@/modules/06_retirement/store/resignMain";
+
+import Table from "@/modules/06_retirement/components/03_resignEmp/Table.vue";
+
+const stroe = useDataStore();
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการลาออกลูกจ้าง
+  </div>
+  <div>
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="stroe.mainTabsEMP"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="1" label="ขอลาออก" />
+        <q-tab name="2" label="ขอยกเลิกลาออก" />
+      </q-tabs>
+      <q-separator />
+      <div>
+        <q-tab-panels v-model="stroe.mainTabsEMP" animated>
+          <q-tab-panel name="1"> <Table /> </q-tab-panel>
+
+          <q-tab-panel name="2"> <Table /> </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/06_retirement/views/04_exitInterview.vue

@@ -0,0 +1,518 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/exitInterview";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** use */
+const $q = useQuasar(); //ใช้ noti quasar
+const router = useRouter();
+const mixin = useCounterMixin();
+const myForm = ref<QForm>();
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+/** คอลัมน์ */
+const rows = ref<ResponseItems[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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: "realReason",
+    align: "left",
+    label: "สาเหตุที่ลาออก",
+    sortable: true,
+    field: "realReason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "notExitFactor",
+    align: "left",
+    label: "ปัจจัยที่ช่วยเปลี่ยนใจไม่อยากลาออก",
+    sortable: true,
+    field: "notExitFactor",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "futureWork",
+    align: "left",
+    label: "อนาคตกลับจะมาร่วมงานหรือไม่",
+    sortable: true,
+    field: "futureWork",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "futureWorkReason",
+    align: "left",
+    label: "เหตุผลที่อยากกลับมาร่วมงาน",
+    sortable: true,
+    field: "futureWorkReason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "havejob",
+    align: "left",
+    label: "มีงานใหม่หรือไม่",
+    sortable: true,
+    field: "havejob",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "havejobReason",
+    align: "left",
+    label: "เหตุผลที่มีงานใหม่",
+    sortable: true,
+    field: "havejobReason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "appointDate",
+    align: "left",
+    label: "วันนัดหมายเพื่อสัมภาษณ์",
+    sortable: true,
+    field: "appointDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "datetext",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "datetext",
+    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[]>([]);
+
+/**
+ * ตัวแปร
+ */
+const dateBreak = ref<Date | null>(null);
+const daterow = ref<string | null>("");
+const id = ref<string>("");
+const filters = ref<ResponseItems[]>([]);
+const modal = ref<boolean>(false);
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+//นำข้อมูลจาก API มาแสดง
+async function fecthlist() {
+  showLoader();
+  await http
+    .get(config.API.listExitInterview())
+    .then(async (res) => {
+      const data = await res.data.result;
+      let list: ResponseItems[] = [];
+      data.map((r: ResponseItems) => {
+        list.push({
+          datetext: r.createdAt !== null ? date2Thai(r.createdAt) : "-",
+          fullname: r.fullname ?? "",
+          createdAt: new Date(r.createdAt),
+          futureWork: !!r.futureWork,
+          futureWorkReason: r.futureWorkReason ?? "-",
+          havejob: !!r.havejob,
+          havejobReason: r.havejobReason ?? "-",
+          id: r.id ?? "",
+          lastUpdatedAt: new Date(r.lastUpdatedAt),
+          notExitFactor: r.notExitFactor ?? "-",
+          realReason: r.realReason ? r.realReason : "-",
+          suggestFriends: !!r.suggestFriends,
+          suggestFriendsReason: r.suggestFriendsReason ?? "-",
+          suggestion: r.suggestion ?? "-",
+          status: r.status ?? "-",
+          appointDate: date2Thai(r.appointDate),
+        });
+      });
+      rows.value = list;
+      console.log(rows.value);
+
+      filters.value = list;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+//กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก
+async function saveAppoint() {
+  await myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      dialogConfirm($q, async () => {
+        const body = {
+          appointDate: dateBreak.value,
+        };
+        showLoader();
+        await http
+          .put(config.API.AppointInterview(id.value), body)
+          .then(async () => {
+            await fecthlist();
+            success($q, "วันนัดหมายเพื่อทําการสัมภาษณ์การลาออกสำเร็จ");
+            closeModal();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            hideLoader();
+          });
+      });
+    }
+  });
+}
+
+/**
+ * ฟังก์ชั่น validate DATE ไทย
+ * @param thaiDate วันที่ไทย
+ */
+function validationDate(thaiDate: string | null) {
+  if (thaiDate && daterow.value) {
+    let a = convertThaiDateToNumeric(thaiDate);
+    let b = daterow.value;
+    if (a) {
+      return a > b;
+    }
+  }
+}
+
+//แปลงเดือนจากตัวเลขเป็นภาษาอ่าน
+function convertThaiDateToNumeric(thaiDate: string) {
+  const parts = thaiDate.split(" ");
+  if (parts.length !== 3) return null;
+  const [day, month, year] = parts;
+  const monthMap: any = {
+    "ม.ค.": "01",
+    "ก.พ.": "02",
+    "มี.ค.": "03",
+    "เม.ย.": "04",
+    "พ.ค.": "05",
+    "มิ.ย.": "06",
+    "ก.ค.": "07",
+    "ส.ค.": "08",
+    "ก.ย.": "09",
+    "ต.ค.": "10",
+    "พ.ย.": "11",
+    "ธ.ค.": "12",
+  };
+  if (!(month in monthMap)) return null;
+  const numericDate = `${year}${monthMap[month]}${day}`;
+  return numericDate;
+}
+/**
+ * modal Setting
+ */
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+function resetFilter() {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+}
+
+function openModalCalendar(rows: any) {
+  openModal();
+  dateBreak.value = null;
+  id.value = rows.id;
+  daterow.value = convertThaiDateToNumeric(rows.datetext);
+}
+
+/** HOOK */
+onMounted(async () => {
+  await fecthlist();
+  if (columns.value) {
+    visibleColumns.value = columns.value.map((r: any) => r.name);
+  }
+});
+</script>
+<template v-slot:body="props">
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการ Exit interview
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="row col-12">
+          <div>
+            <q-btn
+              v-if="
+                checkPermission($route)?.attrIsGet &&
+                checkPermission($route)?.attrIsUpdate
+              "
+              color="blue-9"
+              icon="mdi-square-edit-outline"
+              outline
+              @click="$router.push('/retirement/exit-interview/edit-question')"
+              ><span class="q-pl-sm">แก้ไขคำถาม</span></q-btn
+            >
+          </div>
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+
+        <div class="col-12">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword.trim()"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    flat
+                    dense
+                    round
+                    v-if="checkPermission($route)?.attrIsGet"
+                    color="info"
+                    icon="mdi-eye"
+                    @click="
+                      router.push(
+                        `/retirement/exit-interview/questionnair-detail/${props.row.id}`
+                      )
+                    "
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    flat
+                    dense
+                    round
+                    color="edit"
+                    icon="edit"
+                    @click="
+                      router.push(
+                        `/retirement/exit-interview/questionnair/${props.row.id}`
+                      )
+                    "
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    icon="mdi-calendar"
+                    :color="!props.row.appointDate ? 'blue-7' : 'grey-5'"
+                    :disable="props.row.appointDate !== ''"
+                    flat
+                    round
+                    dense
+                    @click="openModalCalendar(props.row)"
+                  >
+                    <q-tooltip>วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="fullname" :props="props">
+                  {{ props.row.fullname ? props.row.fullname : "-" }}
+                </q-td>
+                <q-td key="realReason" :props="props">
+                  {{ props.row.realReason ? props.row.realReason : "-" }}
+                </q-td>
+                <q-td key="notExitFactor" :props="props">
+                  {{ props.row.notExitFactor ? props.row.notExitFactor : "-" }}
+                </q-td>
+                <q-td key="futureWork" :props="props">
+                  {{ props.row.futureWork ? "ใช่" : "ไม่" }}
+                </q-td>
+                <q-td key="futureWorkReason" :props="props">
+                  {{
+                    props.row.futureWorkReason
+                      ? props.row.futureWorkReason
+                      : "-"
+                  }}
+                </q-td>
+                <q-td key="havejob" :props="props">
+                  {{ props.row.havejob ? "ใช่" : "ไม่" }}
+                </q-td>
+
+                <q-td key="havejobReason" :props="props">
+                  <div class="table_ellipsis">
+                    {{
+                      props.row.havejobReason ? props.row.havejobReason : "-"
+                    }}
+                  </div>
+                </q-td>
+                <q-td key="appointDate" :props="props">
+                  {{ props.row.appointDate ? props.row.appointDate : "-" }}
+                </q-td>
+                <q-td key="datetext" :props="props">
+                  {{ props.row.datetext ? props.row.datetext : "-" }}
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- dialog กำหนดวันหนัดหมายสัมภาษณ์ -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="'กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'"
+          :close="closeModal"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm q-gutter-md">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateBreak"
+              :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
+                  outlined
+                  dense
+                  class="inputgreen"
+                  :model-value="
+                    dateBreak !== null ? date2Thai(dateBreak) : null
+                  "
+                  hide-bottom-space
+                  :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
+                  :rules="[
+                    (val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`,
+                    (val:string) =>
+                      validationDate(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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter :editvisible="true" :save="saveAppoint" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>

src/modules/06_retirement/views/05_deceased.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
+/** Use */
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, findOrgName } = mixin;
+
+/** คอลัมน์ */
+const rows = ref<any[]>([]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix ?? ""}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+]);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "positionType",
+  "position",
+  "positionLevel",
+  "positionExecutive",
+  "org",
+  "createdAt",
+]);
+
+/**เรียกข้อมูลจาก APi */
+async function fectListDecased() {
+  showLoader();
+  await http
+    .get(config.API.listDeceased())
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+
+/** Setting Pagination */
+function nextPage(id: string) {
+  router.push("/retirement/deceased/" + id);
+}
+
+/**Hook */
+onMounted(() => {
+  fectListDecased();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการบันทึกเวียนแจ้งการถึงแก่กรรม
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="row col-12">
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+        <div class="col-12">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword.trim()"
+            row-key="fullname"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width></q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="nextPage(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="col.name === 'org' ? 'table_ellipsis' : ''"
+                  >
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
+
+import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue";
+
+/** use */
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+
+  dialogRemove,
+} = mixin;
+const { statusText } = transferStore;
+const modal = ref<boolean>(false);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "positionLevel",
+  "organizationPositionOld",
+  "createdAt",
+  "status",
+]);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.positionTypeOld && row.positionLevelOld) {
+        name = `${row.positionTypeOld} (${row.positionLevelOld})`;
+      } else if (row.positionTypeOld) {
+        name = `${row.positionTypeOld}`;
+      } else if (row.positionLevelOld) {
+        name = `(${row.positionLevelOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "ตำแหน่ง/สังกัดเดิม",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+function openModalOrder() {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      (r.status == "WAITTING" ||
+        r.status == "PENDING" ||
+        r.status == "APPROVE") &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.organization &&
+      r.date
+  );
+  rows2.value = row;
+}
+
+//นำข้อมูลมาแสดง
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.retirementOut)
+    .then((res: any) => {
+      const data = res.data.result;
+      rows.value = data;
+      filters.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.outByid(id))
+      .then(async () => {
+        await getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
+}
+
+function openModal() {
+  modal.value = true;
+}
+
+function closeModal() {
+  modal.value = false;
+}
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการให้ออก</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งให้ออก</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword.trim()"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click="
+                      router.push(
+                        `/retirement/dismiss-order-detail/${props.row.id}`
+                      )
+                    "
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    flat
+                    dense
+                    round
+                    color="edit"
+                    icon="edit"
+                    @click="
+                      router.push(`/retirement/dismiss-order/${props.row.id}`)
+                    "
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsDelete"
+                    dense
+                    flat
+                    round
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld'
+                        ? 'table_ellipsis2'
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogSendToCommand
+    v-model:modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="getData"
+  />
+</template>
+<style scoped lang="scss"></style>