update ขอโอนรับโอน

src/api/05_placement/api.placement.ts

@@ -2,6 +2,7 @@ import env from "../index";
 const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
+const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -60,4 +61,8 @@ export default {
   deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
+
+  receiveData: () => `${receive}`,
+  receiveDataId: (id: string) => `${receive}/${id}`,
+  receivePosition: (id: string) => `${receive}/position/${id}`,
 };

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

@@ -0,0 +1,545 @@
+<template>
+  <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"
+        />
+      </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,
+} = 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) => {
+  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 closeKp7 = () => {
+  dialog.value = false;
+};
+</script>
+<style>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.3em;
+  overflow: hidden;
+}
+
+.text-sub {
+  font-size: 1.2em;
+  overflow: hidden;
+  color: var(--q-primary);
+}
+</style>

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

@@ -6,6 +6,17 @@ import { useRouter } from "vue-router";
 import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { config } from "@fullcalendar/core/internal";
+import http from "@/plugins/http";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { 
+  showLoader,
+  hideLoader,
+  dateText,
+  success,
+  messageError
+} = mixin;
 
 const selected = ref([]);
 const checkSelected = computed(() => {
@@ -13,6 +24,11 @@ const checkSelected = computed(() => {
     return true;
   }
 });
+
+const add = () => {
+  router.push(`/receive/add`);
+};
+
 const clickClose = () => {
   modal.value = false;
 };
@@ -29,21 +45,18 @@ const personal = ref<any[]>([]);
 const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
-  "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationName",
+  "birthday"
 ]);
+
 const visibleColumns2 = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
-  "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationName",
+  "birthday"
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -60,95 +73,49 @@ const resetFilter = () => {
 const rows = ref<any>([
   {
     personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    citizenId: "1234444332222",
     fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1989-09-03"))
   },
   {
     personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    citizenId: "0000222333333",
     fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1990-09-03")),
   },
 ]);
 const rows2 = ref<any>([
-  {
-    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
-    fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
-  },
   {
     personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
+    citizenId: "1234444332222",
+    fullname: "นางสาวอย พชช",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1989-09-03")),
   },
   {
     personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    citizenId: "0000222333333",
     fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1990-09-03")),
   },
 ]);
 const columns = ref<QTableProps["columns"]>([
@@ -161,6 +128,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "fullname",
     align: "left",
@@ -171,47 +147,22 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
+    name: "organizationName",
     align: "left",
     label: "หน่วยงานที่รับโอน",
     sortable: true,
-    field: "agency",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "birthday",
     align: "left",
-    label: "สถานะ",
+    label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "status",
+    field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -226,6 +177,15 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "fullname",
     align: "left",
@@ -236,47 +196,22 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "organizationName",
     align: "left",
-    label: "ตำแหน่งในสายงาน",
+    label: "หน่วยงานที่รับโอน",
     sortable: true,
-    field: "position",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "birthday",
     align: "left",
-    label: "ระดับ",
+    label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
-    align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
-    sortable: true,
-    field: "agency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
+    field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -288,6 +223,33 @@ const openModalTree = (id: string) => {
   modalTree.value = true;
 };
 
+const openDelete = (id: string) => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.receiveData(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {
+      
+    });
+};
+
 const closeModalTree = async () => {
   //   await getTable();
   modalTree.value = false;
@@ -306,64 +268,31 @@ const nextPage = (row: any) => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn
-            @click="popup()"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
+          <q-btn flat round color="primary" @click="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
 
           <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+            debounce="300" placeholder="ค้นหา">
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </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"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
+          <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" options-cover style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="fullname"
-            :visible-columns="visibleColumns"
-          >
+          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="fullname"
+            :visible-columns="visibleColumns">
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -377,69 +306,63 @@ const nextPage = (row: any) => {
                 <q-td key="no" :props="props" @click="nextPage(props.row)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
+                <q-td key="citizenId" :props="props" @click="nextPage(props.row)">
+                  {{ props.row.citizenId }}
+                </q-td>
+                <q-td key="fullname" :props="props" @click="nextPage(props.row)">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.position }}
+                <q-td key="organizationName" :props="props" @click="nextPage(props.row)">
+                  <div v-if="props.row.orgName !== null || props.row.positionPath !== null
+                    ">
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                        {{
+                          props.row.organizationShortName !== null
+                          ? `(${props.row.organizationShortName})`
+                          : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.positionPath !== null
+                          ? props.row.positionPath
+                          : "-"
+                        }}
+                        {{
+                          props.row.positionNumber !== null
+                          ? `(${props.row.positionNumber})`
+                          : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div class="col-4">
+                      <div class="text-weight-medium">-</div>
+                    </div>
+                  </div>
                 </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="oc" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.oc }}
-                </q-td>
-                <q-td key="agency" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.agency }}
-                </q-td>
-                <q-td key="status" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.status }}
+                <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                  {{ props.row.birthday }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
+                  <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+                    <q-menu transition-show="jump-down" transition-hide="jump-up">
                       <q-list dense style="min-width: 100px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openModalTree(props.row.personalId)"
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              color="primary"
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
+                        <q-item clickable v-close-popup @click="openModalTree(props.row.personalId)">
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                            <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
                           </q-item-section>
-                          <q-item-section
-                            >เลือกหน่วยงานที่รับโอน</q-item-section
-                          >
+                          <q-item-section>เลือกหน่วยงานที่รับโอน</q-item-section>
+                        </q-item>
+                        <q-item clickable v-close-popup @click="openDelete(props.row.personalId)">
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
                         </q-item>
                       </q-list>
                     </q-menu>
@@ -461,61 +384,24 @@ const nextPage = (row: any) => {
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
+              <q-input borderless outlined dense debounce="300" v-model="filterKeyword2" placeholder="ค้นหา"
+                style="width: 850px; max-width: auto">
                 <template v-slot:append>
                   <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
+                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
                 </template>
               </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
+              <q-select v-model="visibleColumns2" multiple outlined dense options-dense
+                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name"
+                options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
             </q-toolbar>
           </div>
         </div>
 
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="personalId"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
+        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="personalId" flat
+          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected">
           <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
           </template>
           <!-- <template v-slot:body-selection="scope">
             <q-checkbox
@@ -528,33 +414,51 @@ const nextPage = (row: any) => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
+                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
               </q-td>
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
-              <q-td key="fullname" :props="props">
+              <q-td key="citizenId" :props="props" @click="nextPage(props.row)">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="fullname" :props="props" @click="nextPage(props.row)">
                 {{ props.row.fullname }}
               </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
+              <q-td key="organizationName" :props="props" @click="nextPage(props.row)">
+                <div v-if="props.row.orgName !== null || props.row.positionPath !== null
+                  ">
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{
+                        props.row.organizationShortName !== null
+                        ? `(${props.row.organizationShortName})`
+                        : ""
+                      }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{
+                        props.row.positionPath !== null
+                        ? props.row.positionPath
+                        : "-"
+                      }}
+                      {{
+                        props.row.positionNumber !== null
+                        ? `(${props.row.positionNumber})`
+                        : ""
+                      }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
               </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
-              </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
-              </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                {{ props.row.birthday }}
               </q-td>
             </q-tr>
           </template>
@@ -562,21 +466,11 @@ const nextPage = (row: any) => {
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          @click=""
-          :disable="checkSelected"
-          color="public"
-        />
+        <q-btn label="บันทึก" @click="" :disable="checkSelected" color="public" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogOrgTree
-    v-model:modal="modalTree"
-    :personalId="personalId"
-    :close="closeModalTree"
-    :personal="personal"
-  />
+  <DialogOrgTree v-model:modal="modalTree" :personalId="personalId" :close="closeModalTree" :personal="personal" />
 </template>
 <style scoped lang="scss"></style>

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

@@ -59,6 +59,7 @@
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
       <q-btn
+      v-if="!roleAdmin"
         outline
         color="primary"
         dense
@@ -66,6 +67,15 @@
         class="q-px-sm"
         label="ส่งคำร้องไปยัง สกจ."
       />
+      <q-btn
+      v-else
+        outline
+        color="primary"
+        dense
+        icon-right="download"
+        class="q-px-sm"
+        label="ดาวน์โหลด"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -78,7 +88,7 @@
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
+            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
             <div class="col-12 text-detail">{{ reason }}</div>
           </div>
         </div>
@@ -133,8 +143,11 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import keycloak from "@/plugins/keycloak";
+
+let roleAdmin = ref<boolean>(false);
 
 const router = useRouter();
 const name = ref<string>("นายสมคิด ยอดใจ");
@@ -183,6 +196,13 @@ const columns = [
     style: "font-size: 14px",
   },
 ];
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+      roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+      console.log("roleAdmin===>", roleAdmin.value);
+    }
+  });
 </script>
 <style lang="scss" scope>
 .q-img {

src/modules/05_placement/router.ts

@@ -50,8 +50,10 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-const receiveDetail = () =>
+  const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
+  const ReceiveAdd = () =>
+  import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 export default [
   {
@@ -234,6 +236,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/receive/add",
+    name: "receiveAdd",
+    component: ReceiveAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "registryEmployee",
+    },
+  },
   {
     path: "/receive/:id",
     name: "receiveDetail",