- rename folder personal list

- add filter status contain ของหน่วยงาน

src/modules/05_placement/components/PersonalList/Detail.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { defineAsyncComponent } from "@vue/runtime-core";
+import { useRouter, useRoute } from "vue-router";
+import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+
+const DataStore = usePlacementDataStore();
+
+const $q = useQuasar
+const mixin = useCounterMixin()
+const { messageError, showLoader, hideLoader } = mixin
+let roleAdmin = ref<boolean>(false);
+const router = useRouter();
+const route = useRoute();
+const examId = route.params.examId;
+const year = ref<string>("");
+const round = ref<string>("");
+const title = ref<string>("");
+const examData = ref<any>();
+const AddTablePosition = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/PersonalList/Table.vue")
+);
+const stat = ref<any>({
+  total: 0,
+  unContain: 0,
+  prepareContain: 0,
+  contain: 0,
+  disclaim: 0,
+});
+
+const getStat = async () => {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+  await http
+    .get(config.API.getStatCard(examIdString))
+    .then((res) => {
+      const statCard = res.data.result;
+      // อัปเดตค่าในตัวแปร stat
+      stat.value = {
+        total: statCard.total,
+        unContain: statCard.unContain,
+        prepareContain: statCard.prepareContain,
+        contain: statCard.contain,
+        disclaim: statCard.disclaim,
+      };
+
+      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+};
+
+onMounted(async () => {
+  if (DataStore.DataMainOrig.length == 0) {
+    await fetchPlacementData();
+  }
+
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  }
+
+  await getStat()
+
+  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
+
+  title.value = examData.value.examRound;
+  round.value = examData.value.examOrder;
+  year.value = examData.value.fiscalYear;
+
+});
+
+const fetchPlacementData = async () => {
+  showLoader();
+  http
+    .get(config.API.MainDetail(0))
+    .then(async (res) => {
+      DataStore.DataMainOrig = res.data.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
+    <div class="toptitle">
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
+    </div>
+    <q-card bordered class="q-py-sm row col-12">
+      <div class="col-12 row bg-white">
+        <div class="fit q-px-md q-py-sm">
+          <div class="row col-12 q-col-gutter-md fit">
+            <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
+            <cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
+            <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
+            <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
+            <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+    <div>
+      <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
+    </div>
+  </q-card>
+</template>
+
+<style lang="scss">
+.cardNum {
+  border-radius: 5px;
+  padding-left: 8px;
+}
+</style>

src/modules/05_placement/components/PersonalList/DialogFooter.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+// const cancel = async () => {
+//   props.cancel();
+// };
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+
+};
+</script>
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn 
+      v-if="!editvisible" 
+      outline
+      :disabled="editvisible" 
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" 
+      ><!-- icon="mdi-pencil-outline"
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+    </q-btn>
+    <div v-else>
+      <q-btn 
+        unelevated
+        label="บันทึก"
+        :disabled="!editvisible" 
+        :color="!editvisible ? 'grey-7' : 'public'" 
+        @click="checkSave"
+      >
+      </q-btn><!-- icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip> -->
+    </div>
+  </q-card-actions>
+</template>

src/modules/05_placement/components/PersonalList/DialogHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("")
+
+// Set form field
+let dataForm = reactive({
+    personalId: "",
+    containDate: new Date(),
+    posNoId: "",
+    positionId: "",
+    positionLevelId: "",
+    positionLineId: "",
+    positionPathSideId: "",
+    positionTypeId: "",
+    salaryAmount: null,
+    mouthSalaryAmount: null,
+    positionSalaryAmount: null,
+});
+
+onMounted(() => {
+    loadTreeData();
+})
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+    await http
+        .get(config.API.orgTree)
+        .then((res: any) => {
+            treeData.value = res.data;
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(() => {
+            hideLoader();
+        });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null)
+const resetFilter = () => {
+    search.value = "";
+    filterRef.value.focus();
+};
+
+const props = defineProps({
+    personalId: String,
+    modal: Boolean,
+    close: {
+        type: Function,
+        default: () => console.log('close modal'),
+    },
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+    const filt = filter;
+
+    return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+        (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+        (node.positionName && node.positionName.indexOf(filt) > -1) ||
+        (node.governmentCode &&
+            node.governmentCode.toString().indexOf(filt) > -1) ||
+        (node.agency && node.agency.indexOf(filt) > -1) ||
+        (node.government && node.government.indexOf(filt) > -1) ||
+        (node.department && node.department.indexOf(filt) > -1) ||
+        (node.pile && node.pile.indexOf(filt) > -1) ||
+        (node.organizationShortName &&
+            node.organizationShortName.indexOf(filt) > -1) ||
+        (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+        (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+        (node.executivePositionSide &&
+            node.executivePositionSide.indexOf(filt) > -1) ||
+        (node.positionLevel && node.positionLevel.indexOf(filt) > -1))
+}
+
+const validateData = async () => {
+    checkValidate.value = true;
+    await myFormPosition.value.validate().then((result: boolean) => {
+        if (result == false) {
+            checkValidate.value = false;
+        }
+    });
+};
+
+const saveAppoint = async () => {
+    myFormPosition.value.validate().then(async (result: boolean) => {
+        if (result) {
+            const dataAppoint = await {
+                personalId: props.personalId,
+                containDate: dataForm.containDate,
+                posNoId: dataForm.posNoId,
+                positionId: dataForm.positionId,
+                positionLevelId: dataForm.positionLevelId,
+                positionLineId: dataForm.positionLineId,
+                positionPathSideId: dataForm.positionPathSideId,
+                positionTypeId: dataForm.positionTypeId,
+                salaryAmount: dataForm.salaryAmount,
+                mouthSalaryAmount: dataForm.mouthSalaryAmount,
+                positionSalaryAmount: dataForm.positionSalaryAmount,
+            };
+            // console.log("save appoint===>", dataAppoint);
+
+            showLoader();
+            await http
+                .post(config.API.placementPass(), dataAppoint)
+                .then((res) => {
+                    console.log("respone=>", res)
+                    success($q, "บันทึกสำเร็จ");
+                })
+                .catch((e) => {
+                    messageError($q, e);
+                })
+                .finally(async () => {
+                    await closeAndClear()
+                    await resetFilter()
+                    hideLoader()
+                });
+        }
+    });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+    editDataStatus.value = true;
+};
+
+const closeModal = () => {
+    if (editDataStatus.value == true) {
+        $q.dialog({
+            title: `ข้อมูลมีการแก้ไข`,
+            message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+            cancel: "ยกเลิก",
+            ok: "ยืนยัน",
+            persistent: true,
+        }).onOk(() => {
+            editDataStatus.value = false;
+            closeAndClear()
+        });
+    } else {
+        closeAndClear()
+    }
+}
+
+const closeAndClear = async () => {
+    await props.close();
+    editDataStatus.value = false;
+    selected.value = ""
+    dataForm.personalId = '';
+    dataForm.containDate = new Date()
+    dataForm.posNoId = ""
+    dataForm.positionId = ""
+    dataForm.positionLevelId = ""
+    dataForm.positionLineId = ""
+    dataForm.positionPathSideId = ""
+    dataForm.positionTypeId = ""
+    dataForm.salaryAmount = null
+    dataForm.mouthSalaryAmount = null;
+    dataForm.positionSalaryAmount = null
+}
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+
+const selectedPosition = async (data: any) => {
+
+    if (data.name == null && selected.value != data.keyId) {
+        console.log("selecteds", data)
+
+        editDataStatus.value = true;
+        selected.value = data.keyId
+
+        // posNo Options
+        posNoOptions.value = [{
+            label: data.positionNum,
+            value: data.positionNumId,
+        }]
+        dataForm.posNoId = data.positionNumId;
+
+        // position Options
+        positionOptions.value = [{
+            label: data.positionName,
+            value: data.positionNameId,
+        }]
+        dataForm.positionId = data.positionNameId;
+
+        // positionPathSide Options
+        let positionPathSideArr: any = [];
+        if (data.positionSideNameObj != null) {
+            data.positionSideNameObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionPathSideOptions.value = positionPathSideArr;
+            dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
+        }
+
+        // positionType Options
+        positionTypeOptions.value = [{
+            label: data.positionType,
+            value: data.positionTypeId,
+        }]
+        dataForm.positionTypeId = data.positionTypeId;
+
+        // positionLine Options
+        positionLineOptions.value = [{
+            label: data.positionLine,
+            value: data.positionLineId,
+        }]
+        dataForm.positionLineId = data.positionLineId;
+
+
+        // positionLevel Options
+        let positionLevelsArr: any = [];
+        if (data.positionLevelObj != null) {
+            data.positionLevelObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionLevelOptions.value = positionLevelsArr;
+            dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+        }
+
+    } else if (selected.value == data.keyId) {
+        selected.value = '';
+        dataForm.posNoId = "";
+        dataForm.positionId = "";
+        dataForm.positionLevelId = "";
+        dataForm.positionLineId = "";
+        dataForm.positionPathSideId = "";
+        dataForm.positionTypeId = "";
+    }
+}
+</script>
+
+<template>
+    <q-dialog v-model="props.modal" persistent full-width>
+        <q-card>
+            <q-form ref="myFormPosition">
+                <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+                <q-separator />
+                <q-card-section class="q-pa-sm bg-grey-1">
+                    <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-xs-12 col-sm-6 row">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา"
+                                        class="q-mb-sm">
+                                        <template v-slot:append>
+                                            <q-icon name="mdi-magnify" />
+                                        </template>
+                                    </q-input>
+                                    <div class="q-pa-sm q-gutter-sm">
+                                        <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
+                                            :no-results-label="notFound" :no-nodes-label="noData"
+                                            :filter-method="myFilterMethod">
+
+                                            <template v-slot:header-organization="prop">
+                                                <div class="col">
+                                                    <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                                                        <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                                                        <div class="text-weight-medium">
+                                                            {{ prop.node.organizationName }}
+                                                        </div>
+
+                                                        <!--แสดง Total Count PositionNum-->
+                                                        <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                                                        <q-badge v-if="prop.node.totalPositionVacant > 0" rounded
+                                                            color="red" outline :label="prop.node.totalPositionVacant" />
+
+                                                        <q-space />
+                                                    </div>
+                                                    <div class="col items-center q-px-xs q-pt-xs">
+                                                        <div class="text-weight-medium text-grey-7">
+                                                            {{ prop.node.governmentCode }}
+                                                            {{ prop.node.organizationShortName }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+
+                                            <template v-slot:header-person="prop">
+                                                <q-item clickable :active="selected == prop.node.keyId"
+                                                    @click="selectedPosition(prop.node)" :disable="prop.node.name != null"
+                                                    active-class="my-list-link text-primary text-weight-medium"
+                                                    class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
+                                                    <img v-if="prop.node.avatar == '' ||
+                                                        prop.node.avatar ==
+                                                        'https://cdn.quasar.dev/img/boy-avatar.png'
+                                                        " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
+                                                        style="width: 28px; height: 28px; border-radius: 50%" />
+                                                    <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
+                                                        style="width: 28px; height: 28px; border-radius: 50%" />
+                                                    <!--=====ตำแหน่งว่าง สีแดง=====-->
+                                                    <div v-if="prop.node.name == null
+                                                        " class="q-px-sm text-weight-medium text-red">
+                                                        ว่าง
+                                                    </div>
+                                                    <!--=====หัวหน้า สีเขียว=====-->
+                                                    <div v-else-if="prop.node.positionLeaderFlag">
+                                                        <div class="q-px-sm text-weight-medium text-primary">
+                                                            {{ prop.node.name }}
+                                                        </div>
+                                                    </div>
+                                                    <!--=====ลูกน้อง สีปกติ=====-->
+                                                    <div v-else>
+                                                        <div class="q-px-sm text-weight-medium">
+                                                            {{ prop.node.name }}
+                                                        </div>
+                                                    </div>
+                                                    <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionName }}
+                                                    </div>
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionNum }}
+                                                    </div>
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionLevel }}
+                                                    </div>
+                                                    <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px"
+                                                        color="primary" name="mdi-bookmark"></q-icon>
+
+                                                    <q-space />
+                                                </q-item>
+                                            </template>
+
+                                        </q-tree>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                        <div class="col-xs-12 col-sm-6">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <div class="row col-12 q-col-gutter-xs">
+                                        <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <datepicker menu-class-name="modalfix" v-model="dataForm.containDate"
+                                                :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
+                                                <template #year="{ year }">{{ year + 543 }}</template>
+                                                <template #year-overlay-value="{ value }">{{
+                                                    parseInt(value + 543)
+                                                }}</template>
+                                                <template #trigger>
+                                                    <q-input class="full-width inputgreen cursor-pointer" outlined dense
+                                                        lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
+                                                                " :rules="[
+            (val: string) =>
+                !!val ||
+                `${'วันที่รายงานตัว'}`,
+        ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                                                        <template v-slot:prepend>
+                                                            <q-icon name="event" class="cursor-pointer"
+                                                                style="color: var(--q-primary)">
+                                                            </q-icon>
+                                                        </template>
+                                                    </q-input>
+                                                </template>
+                                            </datepicker>
+                                        </div>
+                                        <q-space />
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select class="full-width inputgreen cursor-pointer custom-input" outlined
+                                                standout dense hide-bottom-space lazy-rules :options="posNoOptions"
+                                                v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionOptions"
+                                                v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules
+                                                :options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
+                                                :label="`${'ด้าน/สาขา'}`" map-options />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
+                                                v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
+                                                map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
+                                                v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense lazy-rules :options="positionLevelOptions"
+                                                v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
+                                                :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
+                                                map-options />
+                                        </div>
+                                        <div class="col-sx-12 col-sm-12 col-md-12">
+                                            <q-separator inset size="2px" class="q-my-md" />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
+                                                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                                                :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
+                                                hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
+                                                :rules="[
+                                                    (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                                                ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
+                                                (val) =>
+                                                    !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                                            ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                    </div>
+                </q-card-section>
+
+                <q-separator />
+                <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
+                    v-model:modalEdit="editDataStatus" />
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+    padding: 0px;
+    margin-top: 0px;
+    border-radius: 4px;
+    outline: 0;
+}
+
+.my-list-link {
+    color: rgb(118, 168, 222);
+    border-radius: 5px;
+    background: #a3d3fb48 !important;
+    font-weight: 600;
+    border: 1px solid rgba(175, 185, 196, 0.217);
+    /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>

src/modules/05_placement/components/PersonalList/StatCard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const sizeCard = (val: number) => {
+  if (val === 5) {
+    return "width:15%;";
+  }
+};
+const props = defineProps({
+  color: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  amount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+<template>
+  <div
+    :style="$q.screen.lt.md ? '' : sizeCard(5)"
+    :class="$q.screen.lt.sm ? 'col-4' : ''"
+  >
+    <div
+      class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
+    >
+      <div class="col-12 row items-center q-pa-sm">
+        <div
+          class="col-12 text-h5 text-weight-bold"
+          :style="{ color: props.color }"
+        >
+          {{ props.amount }}
+        </div>
+        <div class="col-12 text-dark ellipsis">
+          {{ props.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/modules/05_placement/components/PersonalList/Table.vue

@@ -0,0 +1,602 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, reactive } from "vue";
+import { useQuasar, QForm } from "quasar";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
+import DialogCard from "@/modules/05_placement/components/PersonalList/TableDetail.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
+import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTree.vue";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+import router from "@/router";
+
+let roleAdmin = ref<boolean>(false);
+
+const props = defineProps({
+  statCard: {
+    type: Function,
+    default: () => console.log("getStat"),
+  },
+});
+const edit = ref<boolean>(true);
+const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const editvisible = ref<boolean>(true);
+const modalDefermentDisclaim = ref<boolean>(false); //modal add detail
+const checkValidate = ref<boolean>(false);
+const modalwaitInfo = ref<boolean>(false); //modal add detail
+
+const userNote = ref<string>("");
+const filter = ref<string>("");
+const Name = ref<string>();
+const rowsAll = ref<any>([]);
+const rows = ref<any>([]);
+const myForm = ref<any>();
+const files = ref<any>(null);
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const $q = useQuasar(); // show dialog
+
+const { messageError, showLoader, hideLoader, dateText, success } = mixin;
+
+const route = useRoute();
+const examId = route.params.examId;
+const examIdString = Array.isArray(examId) ? examId[0] : examId;
+const personalId = ref<string>("");
+
+const visibleColumns = ref<any[]>([
+  "position",
+  "fullName",
+  "number",
+  "idCard",
+  "positionNumber",
+  "organizationName",
+  "reportingDate",
+  "bmaOfficer",
+  "statusName",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "position",
+    align: "center",
+    label: "ลำดับ",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "number",
+    align: "center",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "number",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reportingDate",
+    align: "left",
+    label: "วันที่รายงานตัว",
+    sortable: true,
+    field: "reportingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bmaOfficer",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "bmaOfficer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusName",
+    align: "left",
+    label: "สถานะการบรรจุ",
+    sortable: true,
+    field: "statusName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const getTable = async () => {
+  showLoader();
+  await http
+    .get(config.API.personalList(examIdString))
+    .then(async (res: any) => {
+      rowsAll.value = [];
+      res.data.result.map((data: any) => {
+        const rowData = {
+          personalId: data.personalId,
+          idCard: data.idCard,
+          fullName: data.fullName + ' ' + data.idCard,
+          name: data.fullName,
+          profilePhoto: data.profilePhoto,
+          organizationName: data.organizationName + ' ' + data.organizationShortName + ' ' + data.positionNumber + ' ' + data.positionPath,
+          orgName: data.organizationName,
+          organizationShortName: data.organizationShortName,
+          positionNumber: data.positionNumber,
+          positionPath: data.positionPath,
+          reportingDate: dateText(new Date(data.reportingDate)),
+          number: data.number,
+          bmaOfficer:
+            data.bmaOfficer == "OFFICER"
+              ? "ขรก.กทม. สามัญ"
+              : data.bmaOfficer == "EMPLOYEE_PERM"
+                ? "ลูกจ้างประจำ"
+                : data.bmaOfficer == "EMPLOYEE_TEMP"
+                  ? "ลูกจ้างชั่วคราว"
+                  : data.bmaOfficer == null
+                    ? "บุคคลภายนอก"
+                    : "-",
+          statusId: data.statusId,
+          statusName:
+            data.statusId == "UN-CONTAIN"
+              ? "ยังไม่บรรจุ"
+              : data.statusId == "PREPARE-CONTAIN"
+                ? "เตรียมบรรจุ"
+                : data.statusId == "CONTAIN"
+                  ? "บรรจุแล้ว"
+                  : data.statusId == "DISCLAIM"
+                    ? "สละสิทธิ์"
+                    : "-",
+          deferment: data.deferment,
+        };
+
+        rowsAll.value.push(rowData);
+      });
+
+      rows.value = roleAdmin ? rowsAll.value : rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const appointModal = ref<boolean>(false);
+
+const saveDeferment = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      showLoader();
+      const formData = new FormData();
+      formData.append("personalId", personalId.value);
+      formData.append("note", userNote.value);
+      formData.append("files", files.value[0]);
+
+      await http
+        .post(config.API.deferment(), formData)
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          await getTable();
+          props.statCard();
+          userNote.value = "";
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const saveDisclaim = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      showLoader();
+      const dataPost = {
+        note: userNote.value,
+        personId: personalId.value,
+      };
+
+      // console.log("save disclaim===>", dataPost);
+
+      await http
+        .post(config.API.disclaimF(), {
+          note: dataPost.note,
+          personalId: dataPost.personId,
+        })
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .finally(async () => {
+          await getTable();
+          props.statCard();
+          userNote.value = "";
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer ": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const selectData = (pid: string) => {
+  if (roleAdmin.value === true) {
+    personalId.value = pid;
+    modal.value = true;
+  } else {
+    router.push("/placement/detail/" + pid);
+  }
+};
+
+const getNumFile = ref(0);
+const dataInfo = reactive({
+  reason: "",
+  reliefDoc: "",
+});
+
+const editDetail = (
+  props: PartialTableName,
+  action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
+) => {
+  Name.value = props.fullName;
+  personalId.value = props.personalId;
+  editRow.value = false;
+  edit.value = true;
+
+  if (action === "disclaim") {
+    getNumFile.value = 0;
+    modalDisclaim.value = true;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "deferment") {
+    getNumFile.value = 1;
+    modalDisclaim.value = false;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "defermentInfo") {
+    http
+      .get(config.API.placementDefermentInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.reliefReason;
+        dataInfo.reliefDoc = res.data.result.reliefDoc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = false;
+        modalwaitInfo.value = true;
+      });
+  } else if (action === "disclaimInfo") {
+    http
+      .get(config.API.placementDisclaimInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.rejectReason;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = true;
+        modalwaitInfo.value = true;
+      });
+  }
+};
+
+const openAppointModal = (pid: string) => {
+  appointModal.value = true;
+  personalId.value = pid;
+};
+
+const clickCloseModalTree = async () => {
+  await getTable();
+  appointModal.value = false;
+};
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+const clickClose = async () => {
+  userNote.value = "";
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modalDefermentDisclaim.value = false;
+      modalwaitInfo.value = false;
+      modal.value = false;
+      files.value = null;
+    });
+  } else {
+    modalDefermentDisclaim.value = false;
+    modalwaitInfo.value = false;
+    modal.value = false;
+  }
+};
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin);
+  }
+  await getTable();
+});
+
+const containStatus = ref<boolean>(false);
+watch(containStatus, () => {
+  // console.log("containStatus===>", containStatus.value);
+  if (containStatus.value) {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId != 'CONTAIN');
+  } else {
+    rows.value = rowsAll.value.filter((x: any) => x.statusId == 'CONTAIN');
+  }
+});
+
+</script>
+
+<template>
+  <q-form ref="myForm">
+    <Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
+      :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+      v-model:editvisible="editvisible" v-model:containfilter="containStatus" :history="true" :boss="true"
+      :saveNoDraft="true" :role-admin="roleAdmin">
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
+            class="cursor-pointer">
+            <template v-if="col.name === 'position'">
+              {{ props.rowIndex + 1 }}
+            </template>
+            <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
+              <div class="row col-12 text-no-wrap items-center">
+                <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+                <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                <div class="col-4">
+                  <div class="text-weight-medium">{{ props.row.name }}</div>
+                  <div class="text-weight-light">{{ props.row.idCard }}</div>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="col.name === 'number'">
+              <div class="text-weight-medium">
+                {{ props.row.number !== null ? props.row.number : "-" }}
+              </div>
+            </template>
+
+            <template v-else-if="col.name === 'organizationName'">
+              <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>
+            </template>
+            <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
+              <div class="text-weight-medium">
+                {{ props.row.reportingDate }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'bmaOfficer'">
+              <div class="text-weight-medium">
+                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'statusName'">
+              <div class="text-weight-medium">
+                {{ props.row.statusName }}
+              </div>
+            </template>
+          </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-list dense style="min-width: 100px">
+                  <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                    @click="openAppointModal(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>
+                  <q-separator />
+                  <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                    @click="editDetail(props.row, 'deferment')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                    </q-item-section>
+                    <q-item-section>ขอผ่อนผัน</q-item-section>
+                  </q-item>
+                  <q-item v-else-if="props.row.deferment === true &&
+                    props.row.statusId != 'DISCLAIM'
+                    " clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                    </q-item-section>
+                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
+                    props.row.statusId === 'PREPARE-CONTAIN'
+                    " clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                    </q-item-section>
+                    <q-item-section>สละสิทธิ์</q-item-section>
+                  </q-item>
+                  <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
+                    @click="editDetail(props.row, 'disclaimInfo')">
+                    <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                      <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                    </q-item-section>
+                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
+
+  <!-- เลือกหน่วยงานที่บรรจุ -->
+  <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
+
+  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+  <q-form ref="myForm">
+    <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
+  </q-form>
+  <q-dialog v-model="modalDefermentDisclaim" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
+              :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
+            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+              @update:model-value="clickEditRow" class="q-py-sm">
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+  <q-dialog v-model="modalwaitInfo" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-form ref="myForm">
+        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row">
+            <div class="col-3 text-grey-7">เหตุผล</div>
+            <div class="col-4">{{ dataInfo.reason }}</div>
+          </div>
+          <div v-if="!modalDisclaim" class="row q-pt-md">
+            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+            <div class="col-2 q-mt-sm">
+              <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
+                target="_blank" />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.custom-input {
+  font-size: 16px;
+}
+
+.my-list-link {
+  border-radius: 5px;
+
+  font-weight: 600;
+  border: 1px solid #00aa86;
+}
+
+.q-table p {
+  margin-bottom: 0;
+  color: #818181;
+}
+
+.img-info {
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+}
+</style>

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -0,0 +1,418 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
+const save = ref<boolean>(true);
+
+const props = defineProps({
+  Modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  personalId: {
+    type: String,
+    default: ""
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const rows = ref<any[]>([
+]);
+//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
+// const graduationDate = new Date(graduationExample);
+// rows.value[0].graduation = date2Thai(graduationDate, false, false);
+
+//--------------------------------------------------------------------//
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "university",
+    align: "center",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "university",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "degree",
+    align: "center",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "major",
+    align: "center",
+    label: "สาขาวิชาเอก",
+    sortable: true,
+    field: "major",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "graduation",
+    align: "center",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "graduation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const myForm = ref<any>([]);
+const personalForm = ref<any>([]);
+const selection = ref<any>([]);
+
+
+const $q = useQuasar();
+
+function isRequired(val: any): boolean | string {
+  return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
+}
+
+watch(props, () => {
+  if (props.Modal === true) {
+    // console.log(props.getdetail);
+    fetchData();
+  }
+});
+
+const validateData = () => {
+  const selectedIds = personalForm.value.isProperty;
+
+  const selectedItems = personalForm.value.isProperty.filter(
+    (item: any) => item.value === true
+    // selectedIds.includes(item.value)
+  );
+  return (
+    selectedItems.length > 0 || selectedItems.length === selectedIds.length
+  );
+};
+
+const ClickSave = () => {
+  const isValid = validateData();
+
+  if (isValid) {
+    // props.close();
+    // props.validate();
+    // putpersonalForm();
+    modalConfirm(
+      $q,
+      "การยืนยัน",
+      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+      putpersonalForm
+    );
+  } else {
+    success($q, "กรอกให้ครบ");
+    console.log();
+  }
+};
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getDatapersonal(props.personalId))
+    .then((res) => {
+      personalForm.value = res.data.result;
+      personalForm.value.education.map((e: any) => {
+        rows.value.push({
+          university: e.name,
+          degree: e.degree,
+          major: e.field,
+          graduation: e.finishDate,
+        });
+      });
+    })
+    .catch((e) => {
+      console.log("e", e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const formBmaofficer = (val: string) => {
+  switch (val) {
+    case "officer":
+      return "ขรก.กทม. สามัญ";
+      break;
+    case "employee_perm":
+      return "ลูกจ้างประจำ";
+      break;
+    case "employee_temp":
+      return "ลูกจ้างชั่วคราว";
+      break;
+    default:
+      "";
+  }
+};
+const close = async () => {
+  props.close();
+  selection.value = [];
+  rows.value = [];
+};
+const putpersonalForm = async () => {
+  await http
+    .put(
+      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+      personalForm.value.isProperty
+    )
+    .then((res) => {
+      success($q, res.data.message);
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      props.close();
+      props.validate();
+    });
+};
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="max-width: 100%; width: 80%">
+      <q-form ref="myForm">
+        <div class="row">
+          <DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
+        </div>
+        <q-separator />
+
+        <div class="contanier-box-main">
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">
+                ข้อมูลทั่วไป
+                <span class="check-officer"><q-icon name="mdi-check" v-if="personalForm.bmaofficer !== null && ''" />{{
+                  formBmaofficer(personalForm.bmaofficer) }}</span>
+              </div>
+              <div class="row q-pa-xs">
+                <div class="col-3 header-sub-text">
+                  <div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
+                  <div>วัน/เดือน/ปีเกิด</div>
+                </div>
+                <div class="col-4 sub-text">
+                  <div class="q-pb-md">
+                    {{ personalForm.idCard }}
+                  </div>
+                  <div>
+                    {{ date2Thai(personalForm.dateOfBirth) }}
+                  </div>
+                </div>
+                <div class="col-2 header-sub-text">
+                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
+                  <div>เพศ</div>
+                </div>
+                <div class="col-3 sub-text">
+                  <div class="q-pb-md">
+                    {{ personalForm.fullName }}
+                  </div>
+                  <div>
+                    {{ personalForm.gender }}
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
+              <div class="row q-pa-xs">
+                <div class="col-3 header-sub-text">ที่อยู่</div>
+                <div class="col-9 sub-text">
+                  {{ personalForm.address }}
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
+              <q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
+                virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
+              </q-table>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">การสอบ</div>
+              <div class="row q-pa-xs">
+                <div class="col-6">
+                  <q-card class="card-exam q-pa-sm">
+                    <div class="row">
+                      <div class="col-4 q-pa-xs header-sub-text-exam">
+                        <div>ประเภท</div>
+                        <div>ภาค ก</div>
+                        <div>ภาค ข</div>
+                        <div>ภาค ค</div>
+                        <div>รวมทั้งหมด</div>
+                      </div>
+                      <div class="col-4 q-pa-xs">
+                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointTotalA }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointTotalB }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointTotalC }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointTotal }}
+                        </div>
+                      </div>
+                      <div class="col-4 q-pa-xs header-sub-text-exam-2">
+                        <div class="header-sub-text-exam-2">ผลการสอบ</div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointA }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointB }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.pointC }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ personalForm.point }}
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-1"></div>
+                <div class="col-5 q-pt-sm q-pl-lg">
+                  <div class="row">
+                    <div class="col-7 header-sub-text">
+                      <div class="q-pb-sm">ผลการสอบ</div>
+                      <div class="q-pb-sm">ลำดับที่สอบได้</div>
+                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
+                    </div>
+                    <div class="col-5 sub-text-exam">
+                      <div class="q-pb-sm">
+                        {{ personalForm.pass }}
+                      </div>
+                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="col-12 row items-center q-pa-sm header-text">
+                การคัดกรองคุณสมบัติ
+              </div>
+              <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
+                <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
+                  :rules="[isRequired]" class="checkbox-group" />
+                <q-separator />
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <q-separator />
+        <div>
+          <DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<style lang="scss" scoped>
+.icon-officer {
+  color: #00aa86;
+  padding-left: 20px;
+}
+
+.check-officer {
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 26px;
+  color: #00aa86;
+  padding-left: 20px;
+}
+
+.contanier-box-main {
+  padding: 10px 21px 10px 21px;
+}
+
+.contanier-box-mini {
+  padding: 10px 0px 10px 0px;
+}
+
+.card-panding {
+  padding: 15px 21px 15px 21px;
+}
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #4f4f4f;
+}
+
+.header-sub-text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 150%;
+  color: #818181;
+}
+
+.sub-text {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.0025em;
+  color: #35373c;
+}
+
+.card-exam {
+  border-radius: 5px;
+  background: #fafafa;
+}
+
+.header-sub-text-exam {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #818181;
+}
+
+.header-sub-text-exam-2 {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #00aa86;
+}
+
+.sub-text-exam {
+  font-size: 15px;
+  font-weight: 500;
+  color: #000000;
+}
+
+.checkbox-group {
+  font-size: 16px;
+  font-weight: 400;
+  color: #35373c;
+}
+</style>

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="q-px-md q-pb-md">
+    <div class="col-12 row q-py-sm">
+            <q-toggle v-if="roleAdmin === false" class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+                                      :model-value="containStatus" color="blue" label="แสดงสถานะบรรจุแล้ว" @update:model-value="updateContain" />
+
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
+                    debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
+                    <template v-slot:append>
+                      <q-icon v-if="inputfilter == ''" name="search" />
+                      <q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+                    </template>
+                  </q-input>
+                  <!-- แสดง table ใน คอลัมน์ -->
+                  <q-select :model-value="inputvisible" @update:model-value="updateVisible" :display-value="$q.lang.table.columns"
+                    multiple outlined dense :options="attrs.columns" options-dense option-value="name" map-options emit-value
+                    style="min-width: 150px" class="gt-xs q-ml-sm" />
+                </div>
+              </div>
+
+              <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
+                :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
+                <template v-slot:pagination="scope">
+                  <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+                    boundary-links direction-links></q-pagination>
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                    <q-th auto-width v-if="history == true" />
+                  </q-tr>
+                </template>
+                <template #body="props">
+                  <slot v-bind="props" name="columns"></slot>
+                </template>
+              </q-table>
+            </div>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  inputvisibleFilter: String,
+  editvisible: Boolean,
+  titleText: String,
+  optionsFilter: {
+    type: Array,
+    defualt: [],
+  },
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false,
+  },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  refreshBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  publish: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  refresh: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  containStatus: Boolean,
+  roleAdmin: Boolean
+});
+const pagination = ref({
+  sortBy: "number",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const refresh = () => props.refresh();
+const initialPagination = ref<any>({
+  //   descending: false,
+  rowsPerPage: props.paging == true ? 25 : 0,
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:titleText",
+  "update:inputvisibleFilter",
+  "update:containfilter"
+]);
+
+const updateInput = (value: any) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: any) => {
+  emit("update:inputvisible", value);
+};
+
+const updateContain = (value: any) => {
+  emit("update:containfilter", value);
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>