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

src/modules/06_retirement/components/01_retirement/AddList.vue

@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import type { PersonData } from "@/modules/06_retirement/interface/index/Main";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** Use */
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const {
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  findOrgName,
+} = mixin;
+const route = useRoute();
+const retireld_params = route.params.id;
+
+/** props*/
+const props = defineProps({
+  retireld: String,
+  profileId: String,
+  dataProfile: Object,
+  UpdateListId: {
+    type: Function,
+    default: () => console.log("UpdateListId"),
+  },
+});
+
+const modal = ref<boolean>(false);
+const retireld = ref<any>();
+const type = ref<any>();
+
+/** คอลัมน์ */
+const columns = ref<any["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+  },
+  {
+    name: "fullname",
+    required: true,
+    label: "ชื่อ-นามสกุล",
+    field: "fullname",
+    align: "left",
+  },
+  {
+    name: "position",
+    required: true,
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    align: "left",
+  },
+  {
+    name: "level",
+    required: true,
+    label: "ประเภทตำแหน่ง",
+    field: "level",
+    align: "left",
+  },
+  {
+    name: "organizationOrganization",
+    required: true,
+    label: "สังกัด",
+    field: "organizationOrganization",
+    align: "left",
+  },
+]);
+const rows = ref<PersonData[]>([]);
+
+function findOrgChildName(obj: any) {
+  if (obj) {
+    let name =
+      obj.orgChild4Name != null && obj.orgChild3Name != null
+        ? obj.orgChild4Name + "/"
+        : obj.orgChild4Name != null
+        ? obj.orgChild4Name
+        : "";
+
+    name +=
+      obj.orgChild3Name != null && obj.orgChild2Name != null
+        ? obj.orgChild3Name + "/"
+        : obj.orgChild3Name !== null
+        ? obj.orgChild3Name
+        : "";
+
+    name +=
+      obj.orgChild2Name != null && obj.orgChild1Name != null
+        ? obj.orgChild2Name + "/"
+        : obj.orgChild2Name != null
+        ? obj.orgChild2Name
+        : "";
+
+    name +=
+      obj.orgChild1Name != null && obj.orgRootName != null
+        ? obj.orgChild1Name + "/"
+        : obj.orgChild1Name != null
+        ? obj.orgChild1Name
+        : "";
+    name += obj.orgRootName != null ? obj.orgRootName : "";
+    return name == "" ? "-" : name;
+  } else {
+    return "";
+  }
+}
+
+const formPagePersonList = reactive({ keyword: "", pageSize: 10, page: 1 });
+const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
+
+// fecth profile
+async function fecthProfile() {
+  showLoader();
+  if (props?.dataProfile?.type === "OFFICER") {
+    formPagePersonList.keyword =
+      formPagePersonList.keyword === null ? "" : formPagePersonList.keyword;
+    await http
+      .post(config.API.orgProfileRetire, formPagePersonList)
+      .then((res) => {
+        maxPage.value = Math.ceil(
+          res.data.result.total / formPagePersonList.pageSize
+        );
+        totalList.value = res.data.result.total;
+        rows.value = res.data.result.data.map((e: any) => ({
+          id: e.id,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          fullname: e.prefix + e.firstName + " " + e.lastName,
+          position: e.position,
+          level:
+            e.posTypeName && e.posLevelName
+              ? e.posTypeName + " (" + e.posLevelName + ")"
+              : "-",
+          organizationOrganization: findOrgChildName(e),
+        }));
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    let queryParams: any = {
+      page: formPagePersonList.page,
+      pageSize: formPagePersonList.pageSize,
+      searchKeyword: formPagePersonList.keyword,
+      searchField: "fullName",
+      type: "perm",
+    };
+    http
+      .get(config.API.registryNew("-employee"), { params: queryParams })
+      .then((res) => {
+        maxPage.value = Math.ceil(
+          res.data.result.total / formPagePersonList.pageSize
+        );
+        totalList.value = res.data.result.total;
+        rows.value = res.data.result.data.map((e: any) => ({
+          id: e.id,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          fullname: e.prefix + e.firstName + " " + e.lastName,
+          position: e.position,
+          level:
+            e.posType && e.posLevel ? e.posType + " (" + e.posLevel + ")" : "-",
+          organizationOrganization: findOrgName(e),
+        }));
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+// ยืนยันการเพิ่มราชชื่อ
+function clickAdd(props: any) {
+  if (retireld.value == undefined) {
+    retireld.value = retireld_params;
+  }
+  let data: any = props.row.id;
+  dialogConfirm(
+    $q,
+    async () => {
+      await http
+        .put(config.API.profileRetire(retireld.value), { profileId: data })
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+          updateListData(retireld.value, data);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          modal.value = false;
+        });
+    },
+    "ยืนยันการเพิ่มข้อมูล",
+    "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่ ?"
+  );
+}
+
+// update retireld
+function updateListData(retireld: string, pId: string) {
+  props.UpdateListId(retireld, pId);
+}
+
+function updatePageSize(newPagination: any) {
+  formPagePersonList.page = 1;
+  formPagePersonList.pageSize = newPagination.rowsPerPage;
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => formPagePersonList.pageSize,
+  () => {
+    fecthProfile();
+  }
+);
+
+watch(modal, () => {
+  if (modal.value === true) {
+    retireld.value = props.retireld;
+    formPagePersonList.page = 1;
+    formPagePersonList.keyword = "";
+    if (props.dataProfile) {
+      if (props.dataProfile.type === "OFFICER") {
+        type.value = "officer";
+      } else type.value = "all";
+    }
+
+    fecthProfile();
+  }
+});
+</script>
+
+<template>
+  <q-btn flat round class="primary" icon="mdi-plus" @click="modal = true">
+    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
+  >
+
+  <q-dialog v-model="modal" Persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader :tittle="'เพิ่มรายชื่อ'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              outlined
+              dense
+              clearable
+              v-model="formPagePersonList.keyword"
+              placeholder="ค้นหา"
+              @keyup.enter="(formPagePersonList.page = 1), fecthProfile()"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :rows="rows"
+              :columns="columns"
+              row-key="name"
+              class="custom-header-table"
+              :rows-per-page-options="[10, 20, 50, 100]"
+              @update:pagination="updatePageSize"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th v-for="col in props.cols" :key="col.name" :props="props"
+                    ><div>
+                      <span class="row text-black">{{ col.label }}</span>
+                    </div>
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>{{
+                    (formPagePersonList.page - 1) *
+                      Number(formPagePersonList.pageSize) +
+                    props.rowIndex +
+                    1
+                  }}</q-td>
+                  <q-td key="fullname" :props="props">
+                    {{ props.row.prefix ? props.row.prefix : ""
+                    }}{{ props.row.firstName ? props.row.firstName : "" }}
+                    {{ props.row.lastName ? props.row.lastName : "" }}
+                  </q-td>
+                  <q-td key="position" :props="props">
+                    {{ props.row.position ? props.row.position : "-" }}
+                  </q-td>
+                  <q-td key="level" :props="props">{{ props.row.level }}</q-td>
+                  <q-td
+                    key="organizationOrganization"
+                    :props="props"
+                    class="table_ellipsis"
+                  >
+                    {{ props.row.organizationOrganization }}
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      :props="props"
+                      label="เพิ่ม"
+                      class="text-teal-5"
+                      @click="clickAdd(props)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ totalList }} รายการ
+                <q-pagination
+                  v-model="formPagePersonList.page"
+                  color="primary"
+                  :max="maxPage"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="fecthProfile"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style 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>

src/modules/06_retirement/components/01_retirement/DialogAddListRetirement.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref } from "vue";
+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 type { RoundData } from "@/modules/06_retirement/interface/index/Main";
+
+/** Use */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError } = mixin;
+const router = useRouter();
+
+/** Prop */
+const props = defineProps({
+  type: {
+    type: String,
+  },
+  year: {
+    type: Number,
+  },
+  rows: {
+    type: Object,
+  },
+  actionOptio: {
+    type: Object,
+  },
+  checkjson: {
+    type: Boolean,
+  },
+});
+
+const modal = ref<boolean>(false);
+const radio = ref<string>("");
+const actionOption = ref<RoundData[]>([]);
+const action = ref<string>("");
+
+// เพิ่มประกาศเกษียณอายุราชการ
+function clickAdd() {
+  if (props.rows) {
+    // ครั้งแรกจะเพิ่มเลย
+    if (props.rows.length == 0) {
+      dialogConfirm(
+        $q,
+        async () => {
+          let data = { type: props.type, year: props.year };
+          await cerateRetirement(data);
+        },
+        "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+        "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+      );
+    } else {
+      modal.value = true;
+      action.value = "";
+      radio.value = "";
+      if (props.actionOptio) {
+        props.actionOptio;
+        let list = props.actionOptio.map((e: any) => ({
+          id: e.id,
+          round: `รอบ ${e.round}  (ประกาศ ณ วันที่ ${e.signDate})`,
+        }));
+        actionOption.value = list;
+        console.log("🚀 ~ clickAdd ~ actionOption.value:", actionOption.value);
+      }
+    }
+  }
+}
+
+// เลือกรายการเพิ่ม
+async function clickSelect(action: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      let data = {
+        type: props.type,
+        year: props.year,
+        retireHistoryId: action,
+        option: radio.value,
+      };
+
+      await cerateRetirement(data);
+    },
+    "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+  );
+}
+
+// เพิ่มรอบประกาศเกษียณอายุราชการ API
+async function cerateRetirement(data: object) {
+  await http
+    .post(config.API.createProfile(), data)
+    .then((res) => {
+      let response = res.data.result;
+      let retirementId = response.id;
+      router.push(`/retirement/${retirementId}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+</script>
+<template>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="add"
+    icon="mdi-plus"
+    @click="clickAdd"
+    :disable="checkjson"
+  >
+    <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+  </q-btn>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 450px; max-width: 80vw">
+      <q-card-section>
+        <h6 class="q-ma-none">เพิ่มประกาศ</h6>
+        <p class="q-mb-none">เลือกประกาศที่ต้องการเพิ่มข้อมูล</p>
+      </q-card-section>
+
+      <q-separator />
+      <div class="q-pa-md">
+        <q-list>
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="ADD"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศเพิ่มผู้เกษียณ</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="EDIT"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศแก้ไขข้อมูลผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'EDIT'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกรอบ']"
+                />
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="REMOVE"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศยกเลิกผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'REMOVE'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกรอบ']"
+              /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+        <q-btn
+          unelevated
+          color="teal"
+          label="ตกลง"
+          @click="clickSelect(action)"
+          :disable="radio === '' || (action === '' && radio !== 'ADD')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/06_retirement/components/01_retirement/RetirementDetail.vue

@@ -0,0 +1,846 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+
+import { useQuasar, QForm } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { RetirementList } from "@/modules/06_retirement/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import AddList from "@/modules/06_retirement/components/01_retirement/AddList.vue";
+
+/** Use */
+const route = useRoute();
+const checkRoutePermisson = ref<boolean>(route.name == "retirementidDetail");
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogConfirm,
+  dialogRemove,
+  date2Thai,
+  dateToISO,
+  findOrgName,
+} = mixin;
+const myForm = ref<QForm | null>(null);
+
+/** ตัวแปร  */
+const retireld_params = route.params.retirementId;
+const retireld = ref<string>(retireld_params.toString());
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+const modalNote = ref<boolean>(false);
+const note = ref<string>("");
+const retireProfileId = ref<string>("");
+const profileId = ref<string>("");
+const filter = ref<string>("");
+const statusUpload = ref<boolean>();
+const modalEdit = ref<boolean>(false);
+const textReport = ref<string>("");
+const employeeType = ref<string>("OFFICER");
+const action = ref<string>("");
+const fileUpload = ref<any>(null);
+const round = ref<number>();
+const typeReport = ref<string>("");
+const statusReport = ref<boolean>();
+const dataProfile = ref<Object>([]);
+
+/** คอลัมน์ที่แสดง */
+const columns = ref<any["columns"]>([
+  {
+    name: "order",
+    label: "ลำดับ",
+    title: "ลำดับ",
+    field: "order",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    title: "ชื่อ-นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    title: "ตำแหน่ง",
+    subtitle: employeeType.value == "OFFICER" ? "ในสายงาน" : "",
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่ง",
+    title: "ตำแหน่ง",
+    subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "กลุ่มงาน",
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "positionNumber",
+    align: "left",
+    label: "ตำแหน่ง (เลขที่) ",
+    title: "ตำแหน่ง",
+    subtitle: "เลขที่",
+    field: "positionNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    title: "สังกัด",
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val: any, row: any) {
+      return findOrgName(row);
+    },
+  },
+]);
+const rows = ref<RetirementList[]>([]);
+const visibleColumns = ref<string[]>([
+  "order",
+  "name",
+  "organizationOrganization",
+  "position",
+  "positionType",
+  "positionNumber",
+  "govGroup",
+  "govOffice",
+  "organization",
+]);
+
+/**
+ * ฟังก์ชั่นปิด Dialog
+ */
+function closeDialog() {
+  modalNote.value = false;
+  modalUpload.value = false;
+}
+
+// fecthlist
+async function fetchlistprofile(id: string) {
+  showLoader();
+  await http
+    .get(config.API.listRetire(id))
+    .then(async (res) => {
+      const data = await res.data.result;
+
+      dataProfile.value = data;
+      round.value = data.round;
+      statusReport.value = data.json;
+      typeReport.value = data.typeReport;
+      textReport.value = data.detail;
+      employeeType.value = data.type;
+
+      // รายชื่อผู้เกษียณอายุราชการ
+      if (data.profile !== null) {
+        rows.value = data.profile.map((e: any) => ({
+          id: e.id,
+          profileId: e.profileId,
+          order: e.order,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          name: e.prefix + e.firstName + " " + e.lastName,
+          organization: e.root,
+          position: e.position,
+          positionNumber: e.posNo,
+          positionType: e.posTypeName,
+          positionLevel: e.posLevelName,
+          reason: e.reason,
+          remove: e.remove,
+          root: e.root,
+          rootId: e.rootId,
+          child1: e.child1,
+          child1Id: e.child1Id,
+          child2: e.child2,
+          child2Id: e.child2Id,
+          child3: e.child3,
+          child3Id: e.child3Id,
+          child4: e.child4,
+          child4Id: e.child4Id,
+        }));
+      }
+
+      if (statusReport.value == false) {
+        await fecthCheck(retireld.value);
+      } else statusUpload.value = true;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// เช็คสถานะการอัพโหลด
+async function fecthCheck(id: string) {
+  await http
+    .get(config.API.checkfileupload(id))
+    .then((res) => {
+      statusUpload.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+// DelProfile
+function clickDelete() {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.removeProfile(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
+        .then(async () => {
+          retireld.value = retireld_params.toString();
+          await fetchlistprofile(retireld.value);
+          modalNote.value = false;
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่ ?"
+  );
+}
+
+// แก้ไข้ข้อมูล
+function saveNote() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.createnote(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
+        .then(async () => {
+          retireld.value = retireld_params.toString();
+          await fetchlistprofile(retireld.value);
+          modalNote.value = false;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?"
+  );
+}
+
+//อัพเดท ListId
+function UpdateListId(retireld: string, pId: string) {
+  profileId.value = pId;
+  fetchlistprofile(retireld);
+}
+
+// กลับหน้าเดิม
+function backHistory() {
+  window.history.back();
+}
+
+const visibleNote = computed(() => {
+  if (note.value === "" || note.value === undefined) {
+    return true;
+  }
+});
+
+// อัปโหลดไฟล์
+const modalUpload = ref<boolean>(false);
+const signDate = ref<Date | null>(null);
+async function uploadFile(event: any, signDate: any) {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((successmyForm) => {
+      if (successmyForm) {
+        dialogConfirm(
+          $q,
+          async () => {
+            showLoader();
+            const selectedFile = event;
+            const formdata = new FormData();
+            formdata.append("file", selectedFile);
+            if (signDate != null)
+              formdata.append("signDate", dateToISO(signDate));
+            await http
+              .put(
+                config.API.fileRetirement(retireld.value.toString()),
+                formdata
+              )
+              .then(async (res) => {
+                await fetchlistprofile(retireld.value);
+                modalUpload.value = false;
+                success($q, "เพิ่มไฟล์สำเร็จ");
+                fileUpload.value = null;
+                signDate.value = null;
+              })
+              .catch((err) => {
+                messageError($q, err);
+              })
+              .finally(() => {
+                hideLoader();
+              });
+          },
+          "ยืนยันการอัปโหลดเอกสาร",
+          "ต้องการยืนยันการอัปโหลดเอกสารนี้หรือไม่ ?"
+        );
+      }
+    });
+  }
+}
+
+/**
+ * ดาวห์โหลด ไฟล์
+ * @param type pdf/docx
+ * @param id
+ */
+async function downloadAttachment(type: string, id: string) {
+  showLoader();
+  await http
+    .get(config.API.reportRetireList(type, id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, `รายชื่อผู้เกษียณอายุราชการ`, type);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// ยืนยันการแก้ไขข้อมูล
+function saveEdiitReport(reason: string) {
+  const formdata = new FormData();
+  formdata.append("Detail", reason);
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.editDetail(retireld.value), formdata)
+        .then(() => {
+          fetchlistprofile(retireld.value);
+          modalEdit.value = false;
+          success($q, "แก้ไขข้อความสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการแก้ไขข้อมูล",
+    "ต้องการยืนยันการแก้ไขข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+// เปิด popup เหตุผล
+function openmodalEditReport() {
+  modalEdit.value = true;
+}
+
+/** Setting Pagination */
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "order",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+function paginationLabel(start: number, end: number, total: number) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+/**
+ * ดูข้อมูลในทะเบียนประวัติ
+ * @param id บุคคล
+ */
+function onclickViewinfo(id: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+}
+
+/** ทะเบียนประวัติ */
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
+/** Hook */
+onMounted(async () => {
+  retireld.value = retireld_params.toString();
+  await fetchlistprofile(retireld.value);
+});
+</script>
+
+<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="backHistory"
+    />
+    รายชื่อผู้เกษียณอายุราชการ
+  </div>
+  <div>
+    <q-card class="col-12 q-pa-md">
+      <div class="row col-12 q-pb-sm">
+        <div class="row">
+          <AddList
+            :dataProfile="dataProfile"
+            :retireld="retireld"
+            :profile-id="profileId"
+            :UpdateListId="UpdateListId"
+            v-if="
+              !checkRoutePermisson &&
+              !statusReport &&
+              (typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
+              !statusUpload
+            "
+          />
+          <q-btn color="primary" flat round icon="mdi-dots-vertical">
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="
+                    (modalUpload = true), (signDate = null), (fileUpload = null)
+                  "
+                  target="_blank"
+                  v-if="!statusUpload && !checkRoutePermisson"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="attach_file"
+                  /></q-item-section>
+                  <q-item-section>อัปโหลดไฟล์ </q-item-section>
+                </q-item>
+                <q-item
+                  v-if="!checkRoutePermisson"
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="openmodalEditReport()"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="primary" name="mdi-pencil"
+                  /></q-item-section>
+                  <q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
+                </q-item>
+                <q-separator v-if="!checkRoutePermisson" />
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('pdf', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .pdf</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('docx', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+        <div class="row">
+          <q-tabs shrink>
+            <q-input
+              borderless
+              outlined
+              dense
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              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"
+              class="gt-xs q-ml-sm"
+            >
+            </q-select>
+          </q-tabs>
+        </div>
+      </div>
+
+      <div>
+        <d-table
+          flat
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          :filter="filter.trim()"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          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">
+                <div class="text-grey-7 text-weight-medium">
+                  <span class="row">{{ col.title }}</span>
+                  <span class="row" style="font-size: 12px">{{
+                    col.subtitle
+                  }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            >
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="mdi-eye"
+                  color="info"
+                  @click.stop="onclickViewinfo(props.row.profileId)"
+                >
+                  <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    (props.row.remove === 'EDIT' ||
+                      props.row.remove === 'REMOVE') &&
+                    statusUpload
+                  "
+                  flat
+                  round
+                  :color="props.row.remove === 'EDIT' ? 'edit' : 'red-14'"
+                  icon="info"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.reason),
+                      (retireProfileId = props.row.id)
+                  "
+                  ><q-tooltip>ดูเหตุผล</q-tooltip></q-btn
+                >
+                <q-btn
+                  v-if="
+                    (!checkRoutePermisson || props.row.remove === 'EDIT') &&
+                    (typeReport === 'EDIT' ||
+                      typeReport === null ||
+                      typeReport === '') &&
+                    !statusReport &&
+                    !statusUpload
+                  "
+                  flat
+                  round
+                  color="edit"
+                  :icon="props.row.remove === 'EDIT' ? 'info' : 'mdi-pencil'"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.id)
+                  "
+                >
+                  <q-tooltip>กรอกเหตุผล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    (!checkRoutePermisson || props.row.remove === 'REMOVE') &&
+                    (typeReport === 'REMOVE' ||
+                      typeReport === null ||
+                      typeReport === '') &&
+                    !statusReport &&
+                    statusUpload !== true
+                  "
+                  flat
+                  round
+                  color="red"
+                  :icon="props.row.remove === 'REMOVE' ? 'info' : 'mdi-delete'"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.reason),
+                      (retireProfileId = props.row.id)
+                  "
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
+              </q-td>
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
+              <q-td key="name" :props="props"
+                >{{ props.row.prefix ? props.row.prefix : ""
+                }}{{ props.row.firstName ? props.row.firstName : "" }}
+                {{ props.row.lastName ? props.row.lastName : "" }}</q-td
+              >
+
+              <q-td key="position" :props="props">{{
+                props.row.position ? props.row.position : "-"
+              }}</q-td>
+              <q-td key="positionType" :props="props"
+                >{{ props.row.positionType ? props.row.positionType : "-" }}
+                {{
+                  props.row.positionLevel
+                    ? " (" + props.row.positionLevel + ")"
+                    : ""
+                }}
+              </q-td>
+
+              <q-td key="positionNumber" :props="props">{{
+                props.row.positionNumber ? props.row.positionNumber : "-"
+              }}</q-td>
+
+              <q-td class="table_ellipsis" key="organization" :props="props">{{
+                props.row.organization ? props.row.organization : "-"
+              }}</q-td>
+            </q-tr>
+          </template>
+          <!-- <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template> -->
+        </d-table>
+      </div>
+    </q-card>
+  </div>
+
+  <!-- note -->
+  <q-dialog v-model="modalNote" persistent>
+    <q-card style="width: 50vw">
+      <DialogHeader
+        :tittle="checkRoutePermisson ? 'เหตุผล' : 'กรอกเหตุผล'"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              v-model="note"
+              :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+              :readonly="statusUpload || checkRoutePermisson"
+            />
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator v-if="!checkRoutePermisson" />
+
+      <q-card-actions
+        align="right"
+        v-if="!statusUpload && !checkRoutePermisson"
+      >
+        <q-btn
+          v-if="action === 'delete'"
+          unelevated
+          label="บันทึก"
+          color="secondary"
+          :disable="visibleNote"
+          @click="clickDelete"
+        />
+        <q-btn
+          v-else
+          unelevated
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <!-- อัปโหลดไฟล์ -->
+  <q-dialog v-model="modalUpload" persistent>
+    <q-card style="width: 50vw">
+      <DialogHeader tittle="อัปโหลดเอกสาร" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-form ref="myForm">
+          <div class="row q-gutter-md">
+            <div class="col-12 q-pr-md">
+              <q-file
+                hide-bottom-space
+                bg-color="white"
+                clearable
+                outlined
+                dense
+                v-model="fileUpload"
+                accept=".pdf"
+                label="อัปโหลดเอกสาร"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกเอกสารอัปโหลด'}`]"
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon color="light-blue" name="attach_file" />
+                  <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+                </template>
+              </q-file>
+            </div>
+            <div class="col-12 q-pr-md">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="signDate"
+                :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
+                    dense
+                    outlined
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    :model-value="
+                      signDate !== null ? date2Thai(signDate) : null
+                    "
+                    hide-bottom-space
+                    :label="`${'ประกาศ ณ วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer text-primary">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-form>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="uploadFile(fileUpload, signDate)"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogPopupReason
+    v-model:modal="modalEdit"
+    title="แก้ไขมติ อ.ก.ก."
+    label="มติ อ.ก.ก."
+    :savaForm="saveEdiitReport"
+    :textReport="textReport"
+  />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+    v-model:is-employee="employeeType"
+  />
+</template>
+
+<style lang="scss" scope>
+.q-btn-dropdown__arrow {
+  display: none;
+}
+</style>