From 257bb32247e687ad7c8f40bc85f40adbb70a26cf Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 28 Aug 2023 15:51:40 +0700
Subject: [PATCH] =?UTF-8?q?dowload=20show=20report=20=E0=B9=80=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |   2 +-
 .../components/Receive/FormAdd.vue            | 465 +------------
 .../components/Receive/information.vue        | 527 ++++-----------
 .../07_insignia/components/2_Manage/Tab1.vue  |  39 +-
 .../components/2_Manage/listManage.vue        |   2 +
 .../components/report/Report_01.vue           | 179 +++--
 .../components/report/Report_02.vue           | 173 ++++-
 .../08_registryEmployee/views/Detail.vue      | 622 +-----------------
 .../08_registryEmployee/views/information.vue | 156 ++++-
 9 files changed, 576 insertions(+), 1589 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 75a81e324..0ca44d447 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -3,7 +3,7 @@
  */
 import env from "../index";
 const insignia = `${env.API_URI}/insignia`;
-const report = `${env.API_URI}/report`;
+const report = `${env.API_REPORT2_URI}/report`;
 const Organization = `${env.API_URI}/Organization`;
 export default {
   getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
diff --git a/src/modules/05_placement/components/Receive/FormAdd.vue b/src/modules/05_placement/components/Receive/FormAdd.vue
index 68af26787..9d3026ed8 100644
--- a/src/modules/05_placement/components/Receive/FormAdd.vue
+++ b/src/modules/05_placement/components/Receive/FormAdd.vue
@@ -2,476 +2,13 @@
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
       <div id="information" name="1" class="row col-12 information q-mt-sm">
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-          :statusAdd="true"
-        />
+        <Information :statusAdd="true" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
-        </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <q-icon name="mdi-camera" size="18px" color="blue">
-              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-            </q-icon>
-
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
-          </div>
-        </q-avatar>
-        <q-avatar v-else size="65px" rounded class="containerimage">
-          <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <q-icon name="mdi-camera" size="18px" color="blue">
-              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-            </q-icon>
-
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
-          </div>
-        </q-avatar>
-        <div class="row items-center text-dark q-ml-md">
-          <div class="column">
-            <div class="text-bold q-pb-xs text-name">
-              เพิ่มข้อมูลทะเบียนประวัติ
-            </div>
-            <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
-          </div>
-        </div>
-        <q-space />
-      </div>
-    </q-page-sticky>
   </div>
-  <q-dialog v-model="dialog" persistent>
-    <q-card style="width: 90vw; max-width: 80vw">
-      <q-card-section class="row items-center q-pb-xs col-12">
-        <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-card-section class="q-p-sm"> </q-card-section>
-    </q-card>
-  </q-dialog>
-
-  <!-- Dialog เลือก Image -->
-  <q-dialog v-model="dialogImage" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">เลือกรูปภาพ</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
-          <div class="col-3" @click="addNewImage">
-            <div
-              style="
-                height: 160px;
-                max-width: 15vw;
-                display: flex !important;
-                justify-content: center;
-                align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
-              <q-icon name="add" size="60px" color="white" />
-              <strong>อัปโหลดรูปภาพ</strong>
-            </div>
-          </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
-            <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
-                  {{ date2Thai(n.createdDate) }}
-
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
-                </div>
-              </q-img>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
-          <q-tooltip>เลือกรูปภาพ</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
 import Information from "@/modules/05_placement/components/Receive/information.vue";
-import type { DataOption } from "@/modules/04_registry/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const store = useDataStore();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  messageError,
-  dialogMessage,
-  success,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-} = mixin;
-const route = useRoute();
-const router = useRouter();
-const imageUrl = ref<any>(null);
-const inputImage = ref<any>(null);
-const fullname = ref<string>("");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const dialog = ref<boolean>(false);
-const dialogImage = ref<boolean>(false);
-const statusEdit = ref<boolean>(false);
-const activeImage = ref<any | null>(null);
-const images = ref<any>([]);
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-// const profileId = ref<string>("");
-const profileType = ref<string>("");
-const reasonStatus = ref<boolean>(false);
-const leaveReason = ref<string>("");
-const reasonOptions = ref<DataOption[]>([
-  {
-    id: "retire",
-    name: "เกษียณอายุราชการ",
-  },
-  {
-    id: "resign",
-    name: "ลาออก",
-  },
-  {
-    id: "transfer",
-    name: "ให้โอน",
-  },
-  {
-    id: "death",
-    name: "ถึงแก่กรรม",
-  },
-  {
-    id: "layoff",
-    name: "ให้ออก",
-  },
-  {
-    id: "discharge",
-    name: "ปลดออก",
-  },
-  {
-    id: "dismiss",
-    name: "ไล่ออก",
-  },
-  //   {
-  //     id: "change",
-  //     name: "เปลี่ยนประเภทข้าราชการ",
-  //   },
-  {
-    id: "other",
-    name: "อื่นๆ",
-  },
-]);
-
-onMounted(async () => {
-  await checkProfileData();
-  await fetchData();
-  //   await changeTab("information");
-});
-
-const fetchData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-
-        fullname.value = data.fullname;
-        imageUrl.value = data.avatar;
-        position.value = data.position;
-        profileType.value = data.profileType;
-        const reason = reasonOptions.value.filter(
-          (r: DataOption) => r.id == data.leaveReason
-        );
-        if (reason.length > 0) {
-          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
-        } else {
-          leaveReason.value = "";
-        }
-        reasonStatus.value = reason.length > 0 ? true : false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const checkProfileData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileCheckId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        if (data == false) router.push("/registry");
-      })
-      .catch((e) => {
-        router.push("/registry");
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchAvatarHistory = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarHistoryId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        images.value = [];
-        data.map((e: any) => {
-          images.value.push({
-            id: e.id,
-            avatar: e.avatar,
-            avatarId: e.avatarId,
-            createdDate: new Date(e.createdDate),
-            isActive: e.isActive,
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const uploadImage = async (e: any) => {
-  if (profileId.value !== "") {
-    let input = e.target.files;
-    if (input.length > 0) {
-      const formData = new FormData();
-      formData.append("FileData", input[0]);
-      showLoader();
-      await http
-        .post(config.API.profileAvatarId(profileId.value), formData)
-        .then((res) => {})
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          dialogImage.value = false;
-        });
-      return;
-    }
-  }
-};
-
-const fetchDataDelete = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {
-      success($q, "ลบรูปภาพสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      await clickImage();
-      //   dialogImage.value = false;
-    });
-};
-
-const deletePhoto = async (id: string) => {
-  dialogRemove($q, () => fetchDataDelete(id));
-};
-
-const selectAvatarHistory = async () => {
-  if (activeImage.value == null) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถเปลี่ยนรูปได้",
-      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .put(config.API.profileAvatarId(profileId.value), {
-        avatar: activeImage.value.avatarId,
-      })
-      .then((res) => {
-        dialogImage.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-const imageActive = (n: any) => {
-  activeImage.value = n;
-};
-
-const imageClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders bg-grey-2 image-size-default": val,
-    "rounded-borders bg-grey-2 image-size-full": !val,
-  };
-};
-
-const getClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
-};
-
-const addNewImage = async () => {
-  inputImage.value.click();
-  await imageActive(null);
-};
-
-const clickImage = async () => {
-  await fetchAvatarHistory();
-  dialogImage.value = true;
-};
-
-const closeImage = () => {
-  dialogImage.value = false;
-};
-
-const closeKp7 = () => {
-  dialog.value = false;
-};
 </script>
 <style>
 .image-size-default {
diff --git a/src/modules/05_placement/components/Receive/information.vue b/src/modules/05_placement/components/Receive/information.vue
index 92166e018..ce3573224 100644
--- a/src/modules/05_placement/components/Receive/information.vue
+++ b/src/modules/05_placement/components/Receive/information.vue
@@ -1,4 +1,58 @@
 <template>
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.go(-1)"
+      >
+      </q-btn>
+      <q-avatar size="65px" rounded class="containerimage">
+        <img
+          v-if="image == null"
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
+        <img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="addNewImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            เพิ่มข้อมูลทะเบียนประวัติ
+          </div>
+          <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
+        </div>
+      </div>
+      <q-space />
+    </div>
+  </q-page-sticky>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop
       v-model:edit="edit"
@@ -6,11 +60,9 @@
       icon="mdi-account"
       :save="saveData"
       :history="!statusAdd()"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
       :addEmployee="statusAdd()"
     />
+    <!-- :disable="statusEdit" -->
     <q-separator />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -288,6 +340,12 @@
             v-model="informaData.tel"
             :label="`${'เบอร์โทร'}`"
             mask="##########"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+              (val:string) =>
+                val.length >= 10 ||
+                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
+            ]"
           />
         </div>
         <div
@@ -350,32 +408,6 @@
       </div>
     </q-form>
 
-    <HistoryTable
-      :rows="rowsHistory"
-      :columns="columnsHistory"
-      :filter="filterHistory"
-      :visible-columns="visibleColumnsHistory"
-      v-model:modal="modalHistory"
-      v-model:inputfilter="filterHistory"
-      v-model:inputvisible="visibleColumnsHistory"
-      v-model:tittle="tittleHistory"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div
-              v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-              class="table_ellipsis"
-            >
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </HistoryTable>
     <div class="row col-12 q-pa-sm">
       <q-space />
       <q-btn
@@ -400,35 +432,23 @@ import type {
   DataOption,
 } from "@/modules/04_registry/components/profileType";
 import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
 import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute, useRouter } from "vue-router";
 import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import type { QTableColumn, QForm } from "quasar";
+import type { QForm } from "quasar";
 
 const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  fetchDataProfile: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
   statusAdd: {
     type: Boolean,
     default: false,
   },
 });
-const emit = defineEmits(["update:statusEdit"]);
 
 const router = useRouter();
 const route = useRoute();
@@ -446,16 +466,16 @@ const {
 
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
+
+const inputImage = ref<any>(null);
+const image = ref<any>(null);
+const fileData = ref<any>(null);
 const edit = ref<boolean>(false);
 const defaultCitizenData = ref<string>("");
 const informaData = ref<Information>(defaultInformation);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+
 const myform = ref<QForm | null>(null);
 const dateBefore = ref<Date>(new Date());
-const same = ref<string>("0");
 const Ops = ref<InformationOps>({
   prefixOps: [],
   prefixOldOps: [],
@@ -488,206 +508,10 @@ const OpsFilter = ref<InformationOps>({
     { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
   ],
 });
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขบัตรประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    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: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
 
 onMounted(async () => {
   await fetchPerson();
-  emit("update:statusEdit", false);
+  //   emit("update:statusEdit", false);
   defaultAdd();
 });
 
@@ -718,11 +542,38 @@ const defaultAdd = () => {
   //   }
 };
 
-const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
+const addNewImage = async () => {
+  inputImage.value.click();
+};
+
+const uploadImage = async (e: any) => {
+  const input = e.target.files;
+  if (input.length > 0) {
+    const url = URL.createObjectURL(input[0]);
+    image.value = url;
+    fileData.value = input[0];
   }
-  await fetchData();
+
+  //   if (profileId.value !== "") {
+  //     let input = e.target.files;
+  //     if (input.length > 0) {
+  //       console.log(typeof input[0]);
+  //       const formData = new FormData();
+  //       formData.append("FileData", input[0]);
+  //       showLoader();
+  //       await http
+  //         .post(config.API.profileAvatarId(profileId.value), formData)
+  //         .then((res) => {})
+  //         .catch((e) => {
+  //           messageError($q, e);
+  //         })
+  //         .finally(async () => {
+  //           await fetchData();
+  //           dialogImage.value = false;
+  //         });
+  //       return;
+  //     }
+  //   }
 };
 
 /**
@@ -833,52 +684,6 @@ const checkCitizen = async (id: string) => {
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 
 const filterSelector = (val: any, update: Function, refData: string) => {
   switch (refData) {
@@ -942,11 +747,6 @@ const handleDate = async (modelData: Date) => {
   await calRetire(modelData);
 };
 
-const fetchDataComponent = async (modelData: Date) => {
-  await props.fetchDataProfile();
-  await fetchData();
-};
-
 const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
@@ -963,9 +763,11 @@ const calRetire = async (birth: Date) => {
       })
       .catch((e: any) => {
         messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        changeRetireText(date2Thai(retire));
+        // const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = null;
+        informaData.value.age = "";
+        // dateBefore.value;
+        // changeRetireText(null);
       })
       .finally(() => {
         hideLoader();
@@ -973,93 +775,6 @@ const calRetire = async (birth: Date) => {
   }
 };
 
-const fetchData = async () => {
-  if (route.params.id) {
-    showLoader();
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId = data.genderId;
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId = data.relationshipId;
-        informaData.value.religionId = data.religionId;
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   hideLoader();
-        await props.fetchDataProfile();
-      });
-  }
-};
-
-const editData = async () => {
-  showLoader();
-
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-
-  await http
-    .put(config.API.profileInforId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-      hideLoader();
-    });
-};
-
 const addData = async () => {
   showLoader();
 
@@ -1079,30 +794,34 @@ const addData = async () => {
   // };
 
   const formData = new FormData();
+  //   if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
   if (informaData.value.cardid != undefined)
-  formData.append("CitizenId", informaData.value.cardid);
+    formData.append("CitizenId", informaData.value.cardid);
   if (informaData.value.prefixId != undefined)
-  formData.append("Prefix", informaData.value.prefixId);
+    formData.append("Prefix", informaData.value.prefixId);
   if (informaData.value.firstname != undefined)
-  formData.append("Firstname", informaData.value.firstname);
+    formData.append("Firstname", informaData.value.firstname);
   if (informaData.value.lastname != undefined)
-  formData.append("Lastname", informaData.value.lastname);
+    formData.append("Lastname", informaData.value.lastname);
   if (informaData.value.genderId != undefined)
-  formData.append("Gender", informaData.value.genderId);
+    formData.append("Gender", informaData.value.genderId);
   if (informaData.value.nationality != undefined)
-  formData.append("Nationality", informaData.value.nationality);
+    formData.append("Nationality", informaData.value.nationality);
   if (informaData.value.ethnicity != undefined)
-  formData.append("Race", informaData.value.ethnicity);
+    formData.append("Race", informaData.value.ethnicity);
   if (informaData.value.religionId != undefined)
-  formData.append("Religion", informaData.value.religionId);
+    formData.append("Religion", informaData.value.religionId);
   if (informaData.value.birthDate != undefined)
-  formData.append("DateOfBirth", dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()));
+    formData.append(
+      "DateOfBirth",
+      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
+    );
   if (informaData.value.bloodId != undefined)
-  formData.append("BloodGroup", informaData.value.bloodId);
+    formData.append("BloodGroup", informaData.value.bloodId);
   if (informaData.value.statusId != undefined)
-  formData.append("Relationship", informaData.value.statusId);
+    formData.append("Relationship", informaData.value.statusId);
   if (informaData.value.tel != undefined)
-  formData.append("TelephoneNumber", informaData.value.tel);
+    formData.append("TelephoneNumber", informaData.value.tel);
 
   await http
     .post(config.API.receiveData(), formData)
@@ -1123,7 +842,7 @@ const saveData = async () => {
   if (myform.value != null) {
     await myform.value.validate().then(async (saveDataTest: Boolean) => {
       if (saveDataTest) {
-       addData();
+        addData();
       }
     });
   }
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 1d0a8fc92..a2f19c094 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -196,6 +196,9 @@ const props = defineProps({
   roleUser: {
     type: String,
   },
+  roundName: {
+    type: String,
+  },
   requestStatus: {
     type: String,
   },
@@ -359,13 +362,13 @@ const downloadFile = (response: any, filename: string) => {
 const downloadReport = async (type: string = "pdf") => {
   showLoader();
   await http
-    .get(config.API.reportInsignia("45", type, fileId.value), {
+    .get(config.API.reportInsignia("45", type, props.roundId!), {
       responseType: "blob",
     })
     .then(async (res) => {
       downloadFile(
         res,
-        `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
+        `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
       );
     })
     .catch((e) => {
@@ -595,15 +598,31 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
           @update:model-value="DataStore.searchFilterTable"
         />
         <div>
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="downloadReport('pdf')"
-          >
+          <q-btn size="md" icon="mdi-download" flat round color="primary">
+            <!-- @click="downloadReport('pdf')" -->
             <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup @click="downloadReport('pdf')">
+                  <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 @click="downloadReport('docx')">
+                  <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-item clickable v-close-popup @click="downloadReport('xlsx')">
+                  <q-item-section avatar
+                    ><q-icon color="green" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .xlsx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
           </q-btn>
           <q-btn
             size="12px"
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 6c27b1bc3..a60e63098 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -74,6 +74,7 @@ const fecthlistRound = async () => {
       // const lastIndex = optionRound.value.length;
       const lastValue = optionRound.value[0];
       round.value = lastValue.id.toString();
+      roundName.value = lastValue.name;
       fecthStat(round.value);
     })
     .catch((err) => {
@@ -405,6 +406,7 @@ const requestSendNote = async () => {
         <tab1
           :tab="tab"
           :roundId="round"
+          :roundName="roundName"
           :fecthInsigniaByOc="fecthInsigniaByOc"
           :role-user="roleUser"
           :request-status="requestStatus"
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
index a5d1f2130..92e6946ce 100644
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -7,6 +7,8 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QForm } from "quasar";
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -18,20 +20,22 @@ const {
 } = mixin;
 const $q = useQuasar();
 
+const myForm = ref<QForm>();
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const dialog = ref<boolean>(false);
 onMounted(async () => {
-  const pdfData = usePDF(
-    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-  );
+  await fecthlistRound();
+  //   const pdfData = usePDF(
+  //     "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  //   );
 
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-  console.log(pdfData);
+  //   setTimeout(() => {
+  //     pdfSrc.value = pdfData.pdf.value;
+  //     numOfPages.value = pdfData.pages.value;
+  //   }, 1000);
+  //   console.log(pdfData);
 });
 
 const splitterModel = ref(14);
@@ -43,11 +47,9 @@ const optionsReport = ref<any>([
   { id: 41, name: "รายงานขร.3" },
   { id: 42, name: "รายงานขร.4" },
 ]);
-const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
-const optionsList = ref<any>([
-  { id: 1, name: "list 1" },
-  { id: 2, name: "list 2" },
-]);
+const selectList = ref<any>();
+const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+
 const nextPage = () => {
   if (page.value < numOfPages.value) {
     page.value++;
@@ -63,6 +65,44 @@ const backHistory = () => {
   window.history.back();
 };
 
+const fecthlistRound = async () => {
+  await http
+    .get(config.API.listRoundInsignia())
+    .then((res: any) => {
+      optionsList.value = res.data.result.map((e: any) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: e.period_name,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    });
+};
+
+const conditionDocument = (type: string) => {
+  myForm.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (type == "show") {
+        await downloadReport("pdf", false);
+      } else {
+        await downloadReport("pdf", false);
+        await downloadReport(type, true);
+      }
+    }
+  });
+};
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
   var fileName = filename;
@@ -73,21 +113,34 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
-const downloadReport = async (type: string = "pdf") => {
+const downloadReport = async (
+  type: string = "pdf",
+  download: boolean = true
+) => {
   showLoader();
   await http
     .get(
       config.API.reportInsignia(
         selectReport.value.id.toString(),
         type,
-        fileId.value
+        selectList.value.id
       ),
       {
         responseType: "blob",
       }
     )
     .then(async (res) => {
-      downloadFile(res, `${selectReport.value.name}.${type}`);
+      if (download) {
+        downloadFile(
+          res,
+          `${selectReport.value.name} ${selectList.value.name}.${type}`
+        );
+      } else {
+        const url = URL.createObjectURL(new Blob([res.data]));
+        // pdfSrc.value = "";
+        // numOfPages.value = 0;
+        showDocument(url);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -116,39 +169,81 @@ const downloadReport = async (type: string = "pdf") => {
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0">
-          <q-select
-            class="q-mr-sm"
-            dense
-            outlined
-            v-model="selectReport"
-            :options="optionsReport"
-            :label="optionsReport.name"
-            option-value="id"
-            option-label="name"
-          />
-          <q-select
-            dense
-            outlined
-            v-model="selectList"
-            :options="optionsList"
-            :label="optionsList.name"
-            option-value="id"
-            option-label="name"
-          />
+          <q-form ref="myForm" class="row items-center">
+            <q-select
+              use-input
+              fill-input
+              hide-selected
+              class="q-mr-sm"
+              dense
+              outlined
+              v-model="selectReport"
+              :options="optionsReport"
+              :label="optionsReport.name"
+              option-value="id"
+              option-label="name"
+              style="width: 150px"
+            />
+            <q-select
+              class="q-pa-none"
+              use-input
+              fill-input
+              hide-selected
+              dense
+              outlined
+              v-model="selectList"
+              :options="optionsList"
+              label="เลือกรอบ"
+              option-value="id"
+              option-label="name"
+              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+            />
+          </q-form>
+          <!-- style="width: 200px" -->
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn
-              outline
-              color="primary"
-              icon="download"
-              label="ดาวน์โหลด"
-              @click="downloadReport('pdf')"
-            />
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('pdf')"
+                  >
+                    <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
+                    @click="conditionDocument('docx')"
+                  >
+                    <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-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('xlsx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="green" name="mdi-file-excel"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .xlsx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
             <q-btn
               unelevated
               icon="mdi-eye"
               color="primary"
               label="แสดงรายงาน"
+              @click="conditionDocument('show')"
             />
             <q-btn
               unelevated
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/Report_02.vue
index d1de37b05..c53a06eff 100644
--- a/src/modules/07_insignia/components/report/Report_02.vue
+++ b/src/modules/07_insignia/components/report/Report_02.vue
@@ -2,37 +2,57 @@
 import { ref, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useCounterMixin } from "@/stores/mixin";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useQuasar } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QForm } from "quasar";
+
 const store = useInsigniaDataStore();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
 const { typeReport, titleReport } = store;
-
 const $q = useQuasar();
 
+const myForm = ref<QForm>();
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const dialog = ref<boolean>(false);
-onMounted(async () => {
-  const pdfData = usePDF(
-    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-  );
 
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-  console.log(pdfData);
+onMounted(async () => {
+  await fecthlistRound();
+  //   const pdfData = usePDF(
+  //     "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  //   );
+
+  //   setTimeout(() => {
+  //     pdfSrc.value = pdfData.pdf.value;
+  //     numOfPages.value = pdfData.pages.value;
+  //   }, 1000);
+  //   console.log(pdfData);
 });
 
 const splitterModel = ref(14);
 const fileId = ref<string>("");
+const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
+const optionsReport = ref<any>([
+  { id: 39, name: "รายงานขร.1" },
+  { id: 40, name: "รายงานขร.2" },
+  { id: 41, name: "รายงานขร.3" },
+  { id: 42, name: "รายงานขร.4" },
+]);
+const selectList = ref<any>();
+const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
 
 const nextPage = () => {
   if (page.value < numOfPages.value) {
@@ -49,6 +69,44 @@ const backHistory = () => {
   window.history.back();
 };
 
+const fecthlistRound = async () => {
+  await http
+    .get(config.API.listRoundInsignia())
+    .then((res: any) => {
+      optionsList.value = res.data.result.map((e: any) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: e.period_name,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    });
+};
+
+const conditionDocument = (type: string) => {
+  myForm.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (type == "show") {
+        await downloadReport("pdf", false);
+      } else {
+        await downloadReport("pdf", false);
+        await downloadReport(type, true);
+      }
+    }
+  });
+};
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
   var fileName = filename;
@@ -59,14 +117,24 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
-const downloadReport = async (type: string = "pdf") => {
+const downloadReport = async (
+  type: string = "pdf",
+  download: boolean = true
+) => {
   showLoader();
   await http
-    .get(config.API.reportInsignia(typeReport, type, fileId.value), {
+    .get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
       responseType: "blob",
     })
     .then(async (res) => {
-      downloadFile(res, ` ${titleReport}.${type}`);
+      if (download) {
+        downloadFile(res, `${titleReport} ${selectList.value.name}.${type}`);
+      } else {
+        const url = URL.createObjectURL(new Blob([res.data]));
+        // pdfSrc.value = "";
+        // numOfPages.value = 0;
+        showDocument(url);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -95,20 +163,81 @@ const downloadReport = async (type: string = "pdf") => {
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0">
+          <q-form ref="myForm" class="row items-center">
+            <!-- <q-select
+              use-input
+              fill-input
+              hide-selected
+              class="q-mr-sm"
+              dense
+              outlined
+              v-model="selectReport"
+              :options="optionsReport"
+              :label="optionsReport.name"
+              option-value="id"
+              option-label="name"
+              style="width: 150px"
+            /> -->
+            <q-select
+              class="q-pa-none"
+              use-input
+              fill-input
+              hide-selected
+              dense
+              outlined
+              v-model="selectList"
+              :options="optionsList"
+              label="เลือกรอบ"
+              option-value="id"
+              option-label="name"
+              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+            />
+          </q-form>
+          <!-- style="width: 200px" -->
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn
-              outline
-              color="primary"
-              icon="download"
-              label="ดาวน์โหลด"
-              @click="downloadReport('pdf')"
-            />
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('pdf')"
+                  >
+                    <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
+                    @click="conditionDocument('docx')"
+                  >
+                    <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-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('xlsx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="green" name="mdi-file-excel"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .xlsx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
             <q-btn
               unelevated
               icon="mdi-eye"
               color="primary"
               label="แสดงรายงาน"
+              @click="conditionDocument('show')"
             />
             <q-btn
               unelevated
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
index 6d63b4166..8991ae991 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -6,633 +6,13 @@
             v-model:statusEdit="statusEdit"
             :profileType="profileType"
           /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-          :statusAdd="true"
-        />
+        <Information :statusAdd="true" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
-        </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <q-icon name="mdi-camera" size="18px" color="blue">
-              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-            </q-icon>
-
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
-          </div>
-        </q-avatar>
-        <q-avatar v-else size="65px" rounded class="containerimage">
-          <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
-            <q-icon name="mdi-camera" size="18px" color="blue">
-              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-            </q-icon>
-
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
-          </div>
-        </q-avatar>
-        <div class="row items-center text-dark q-ml-md">
-          <div class="column">
-            <div class="text-bold q-pb-xs text-name">
-              เพิ่มข้อมูลทะเบียนประวัติ
-            </div>
-            <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
-          </div>
-        </div>
-        <q-space />
-        <!-- <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
-          <q-tooltip>{{
-            reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
-          }}</q-tooltip>
-        </q-btn> -->
-
-        <!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-          <q-menu>
-            <q-list style="min-width: 100px">
-              <q-item clickable v-close-popup @click="clickKp7()">
-                <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn> -->
-      </div>
-    </q-page-sticky>
   </div>
-  <q-dialog v-model="dialog" persistent>
-    <q-card style="width: 90vw; max-width: 80vw">
-      <q-card-section class="row items-center q-pb-xs col-12">
-        <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-card-section class="q-p-sm">
-        <!-- <viewpdf
-            :src="pdfSrc"
-            :currentpage="pdfCurrentPage"
-            :totalpage="pdfTotalPage"
-          ></viewpdf> -->
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-  <q-dialog v-model="dialogShort" persistent>
-    <q-card style="width: 90vw; max-width: 80vw">
-      <q-card-section class="row items-center q-pb-xs col-12">
-        <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-card-section class="q-p-sm">
-        <!-- <viewpdf
-            :src="pdfSrcShort"
-            :currentpage="pdfCurrentPageShort"
-            :totalpage="pdfTotalPageShort"
-          ></viewpdf> -->
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-  <!-- Dialog เลือก Image -->
-  <q-dialog v-model="dialogImage" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">เลือกรูปภาพ</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
-          <div class="col-3" @click="addNewImage">
-            <div
-              style="
-                height: 160px;
-                max-width: 15vw;
-                display: flex !important;
-                justify-content: center;
-                align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
-              <q-icon name="add" size="60px" color="white" />
-              <strong>อัปโหลดรูปภาพ</strong>
-            </div>
-          </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
-            <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
-                <!-- <div
-                    class="absolute-top bg-transparent cursor-pointer text-right"
-                    style="padding: 5px"
-                  >
-                    <q-btn
-                      icon="delete"
-                      unelevated
-                      round
-                      dense
-                      @click="deletePhoto"
-                      style="color: #ff8080"
-                    />
-                  </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
-                  {{ date2Thai(n.createdDate) }}
-
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
-                </div>
-              </q-img>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <!-- <q-btn
-            flat
-            round
-            color="red"
-            @click="() => {}"
-            icon="mdi-delete-outline"
-          >
-            <q-tooltip>ลบรูปภาพ</q-tooltip>
-          </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
-          <q-tooltip>เลือกรูปภาพ</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
 import Information from "@/modules/08_registryEmployee/views/information.vue";
-import type { DataOption } from "@/modules/04_registry/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const store = useDataStore();
-const { changeTab } = store;
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  dialogMessage,
-  success,
-  showLoader,
-  hideLoader,
-} = mixin;
-const route = useRoute();
-const router = useRouter();
-const imageUrl = ref<any>(null);
-const inputImage = ref<any>(null);
-const fullname = ref<string>("");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const dialog = ref<boolean>(false);
-const dialogShort = ref<boolean>(false);
-const dialogLeave = ref<boolean>(false);
-const dialogImage = ref<boolean>(false);
-const loader = ref<boolean>(false); //รอโหลด
-const statusEdit = ref<boolean>(false);
-const activeImage = ref<any | null>(null);
-const images = ref<any>([]);
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-// const profileId = ref<string>("");
-const profileType = ref<string>("");
-const leaveDate = ref<Date>(new Date());
-const leaveDetail = ref<string>("");
-const leaveNumberOrder = ref<string>("");
-const leaveDateOrder = ref<Date>(new Date());
-const reason = ref<string>("");
-const reasonStatus = ref<boolean>(false);
-const leaveReason = ref<string>("");
-const reasonOptions = ref<DataOption[]>([
-  {
-    id: "retire",
-    name: "เกษียณอายุราชการ",
-  },
-  {
-    id: "resign",
-    name: "ลาออก",
-  },
-  {
-    id: "transfer",
-    name: "ให้โอน",
-  },
-  {
-    id: "death",
-    name: "ถึงแก่กรรม",
-  },
-  {
-    id: "layoff",
-    name: "ให้ออก",
-  },
-  {
-    id: "discharge",
-    name: "ปลดออก",
-  },
-  {
-    id: "dismiss",
-    name: "ไล่ออก",
-  },
-  //   {
-  //     id: "change",
-  //     name: "เปลี่ยนประเภทข้าราชการ",
-  //   },
-  {
-    id: "other",
-    name: "อื่นๆ",
-  },
-]);
-
-onMounted(async () => {
-  await checkProfileData();
-  await fetchData();
-  //   await changeTab("information");
-});
-
-const fetchData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-
-        fullname.value = data.fullname;
-        imageUrl.value = data.avatar;
-        position.value = data.position;
-        profileType.value = data.profileType;
-        const reason = reasonOptions.value.filter(
-          (r: DataOption) => r.id == data.leaveReason
-        );
-        if (reason.length > 0) {
-          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
-        } else {
-          leaveReason.value = "";
-        }
-        reasonStatus.value = reason.length > 0 ? true : false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const checkProfileData = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileCheckId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        if (data == false) router.push("/registry");
-      })
-      .catch((e) => {
-        router.push("/registry");
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const fetchAvatarHistory = async () => {
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .get(config.API.profileAvatarHistoryId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        images.value = [];
-        data.map((e: any) => {
-          images.value.push({
-            id: e.id,
-            avatar: e.avatar,
-            avatarId: e.avatarId,
-            createdDate: new Date(e.createdDate),
-            isActive: e.isActive,
-          });
-        });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const uploadImage = async (e: any) => {
-  if (profileId.value !== "") {
-    let input = e.target.files;
-    if (input.length > 0) {
-      const formData = new FormData();
-      formData.append("FileData", input[0]);
-      showLoader();
-      await http
-        .post(config.API.profileAvatarId(profileId.value), formData)
-        .then((res) => {})
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-          dialogImage.value = false;
-        });
-      return;
-    }
-  }
-};
-
-const fetchDataDelete = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {
-      success($q, "ลบรูปภาพสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      await clickImage();
-      //   dialogImage.value = false;
-    });
-};
-
-const deletePhoto = async (id: string) => {
-  dialogMessage(
-    $q,
-    "ลบข้อมูล",
-    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-    "delete",
-    undefined,
-    "red",
-    () => fetchDataDelete(id),
-    undefined,
-    false
-  );
-};
-
-const selectAvatarHistory = async () => {
-  if (activeImage.value == null) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถเปลี่ยนรูปได้",
-      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  if (profileId.value !== "") {
-    showLoader();
-    await http
-      .put(config.API.profileAvatarId(profileId.value), {
-        avatar: activeImage.value.avatarId,
-      })
-      .then((res) => {
-        dialogImage.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
-};
-
-const imageActive = (n: any) => {
-  activeImage.value = n;
-};
-
-const imageClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders bg-grey-2 image-size-default": val,
-    "rounded-borders bg-grey-2 image-size-full": !val,
-  };
-};
-
-const getClass = (n: any) => {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
-};
-
-const addNewImage = async () => {
-  inputImage.value.click();
-  await imageActive(null);
-};
-
-const clickImage = async () => {
-  await fetchAvatarHistory();
-  dialogImage.value = true;
-};
-
-const closeImage = () => {
-  dialogImage.value = false;
-};
-
-const closeLeave = () => {
-  dialogLeave.value = false;
-};
-
-const closeKp7 = () => {
-  dialog.value = false;
-};
-
-const closeKp7Short = () => {
-  dialogShort.value = false;
-};
-
-const downloadKP7 = () => {};
-
-const downloadKP7Short = () => {};
-
-const clickKp7 = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileReportId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileReportId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrc.value = "data:application/pdf;base64," + res.data;
-  //         pdfCurrentPage.value = 1;
-  //         pdfTotalPage.value = 7;
-  //         dialog.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
-
-const clickKp7Short = async () => {
-  if (profileId.value !== "") {
-    window.open(config.API.profileKp7ShortId(profileId.value));
-  }
-  //   showLoader();
-  //   await http
-  //     .get(config.API.profileKp7ShortId(profileId.value))
-  //     .then((res) => {
-  //       if (res.data) {
-  //         pdfSrcShort.value = "g==";
-  //         pdfCurrentPageShort.value = 1;
-  //         pdfTotalPageShort.value = 7;
-  //         dialogShort.value = true;
-  //       }
-  //     })
-  //     .catch((e) => {messageError($q, e);})
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
 </script>
 <style>
 .image-size-default {
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index 0f5fa37a8..ce2f3c9ed 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -392,6 +392,60 @@
       />
     </div>
   </q-card>
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.go(-1)"
+      >
+      </q-btn>
+      <q-avatar size="65px" rounded class="containerimage">
+        <img
+          v-if="image == null"
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
+        <img :src="image" class="bg-grey-3" style="object-fit: cover" />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="addNewImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            เพิ่มข้อมูลทะเบียนประวัติ
+          </div>
+          <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
+        </div>
+      </div>
+      <q-space />
+    </div>
+  </q-page-sticky>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -688,6 +742,9 @@ const visibleColumnsHistory = ref<String[]>([
   "createdFullName",
   "createdAt",
 ]);
+const inputImage = ref<any>(null);
+const image = ref<any>(null);
+const fileData = ref<any>(null);
 
 onMounted(async () => {
   await fetchPerson();
@@ -729,6 +786,19 @@ const onCancel = async () => {
   await fetchData();
 };
 
+const uploadImage = async (e: any) => {
+  const input = e.target.files;
+  if (input.length > 0) {
+    const url = URL.createObjectURL(input[0]);
+    image.value = url;
+    fileData.value = input[0];
+  }
+};
+
+const addNewImage = async () => {
+  inputImage.value.click();
+};
+
 /**
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
@@ -967,9 +1037,11 @@ const calRetire = async (birth: Date) => {
       })
       .catch((e: any) => {
         messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        changeRetireText(date2Thai(retire));
+        // const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        // informaData.value.birthDate = dateBefore.value;
+        // changeRetireText(date2Thai(retire));
+        informaData.value.birthDate = null;
+        informaData.value.age = "";
       })
       .finally(() => {
         hideLoader();
@@ -1063,29 +1135,63 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  const body = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
+  //   const formData = {
+  //     citizenId: informaData.value.cardid,
+  //     prefixId: informaData.value.prefixId,
+  //     firstName: informaData.value.firstname,
+  //     lastName: informaData.value.lastname,
+  //     genderId: informaData.value.genderId,
+  //     nationality: informaData.value.nationality,
+  //     race: informaData.value.ethnicity,
+  //     religionId: informaData.value.religionId,
+  //     birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+  //     bloodGroupId: informaData.value.bloodId,
+  //     relationshipId: informaData.value.statusId,
+  //     telephoneNumber: informaData.value.tel,
+  //     createdAt: new Date(),
+  //     age: null,
+  //     employeeType: informaData.value.employeeType,
+  //     employeeClass: informaData.value.employeeClass,
+  //     profileType: informaData.value.profileType,
+  //     createdFullName: "-",
+  //   };
+  const formData = new FormData();
+  if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
+  if (informaData.value.cardid != undefined)
+    formData.append("citizenId", informaData.value.cardid);
+  if (informaData.value.prefixId != undefined)
+    formData.append("prefixId", informaData.value.prefixId);
+  if (informaData.value.firstname != undefined)
+    formData.append("firstName", informaData.value.firstname);
+  if (informaData.value.lastname != undefined)
+    formData.append("lastName", informaData.value.lastname);
+  if (informaData.value.genderId != undefined)
+    formData.append("genderId", informaData.value.genderId);
+  if (informaData.value.nationality != undefined)
+    formData.append("nationality", informaData.value.nationality);
+  if (informaData.value.ethnicity != undefined)
+    formData.append("race", informaData.value.ethnicity);
+  if (informaData.value.religionId != undefined)
+    formData.append("religionId", informaData.value.religionId);
+  if (informaData.value.birthDate != undefined)
+    formData.append(
+      "birthDate",
+      dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
+    );
+  if (informaData.value.bloodId != undefined)
+    formData.append("bloodGroupId", informaData.value.bloodId);
+  if (informaData.value.statusId != undefined)
+    formData.append("relationshipId", informaData.value.statusId);
+  if (informaData.value.tel != undefined)
+    formData.append("telephoneNumber", informaData.value.tel);
+  if (informaData.value.employeeType != undefined)
+    formData.append("employeeType", informaData.value.employeeType);
+  if (informaData.value.employeeClass != undefined)
+    formData.append("employeeClass", informaData.value.employeeClass);
+
   showLoader();
   await http
-    .post(config.API.profileEmployeeIn, body)
+    .post(config.API.profileEmployeeIn, formData)
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -1100,7 +1206,7 @@ const addData = async () => {
       await clickBack();
       hideLoader();
     });
-  console.log(body);
+  //   console.log(body);
   hideLoader();
 };