"Refactoring code module 05_placement 01_Main,02_transferMain,03_receiveMain

src/modules/05_placement/views/01_Main.vue

@@ -0,0 +1,656 @@
+<script setup lang="ts">
+import { onMounted, ref, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import type { QTableProps } from "quasar";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
+
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const DataStore = usePlacementDataStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const searchYear = ref();
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const dataPlacement = ref<any>([]);
+const yearOptionsFn = ref<any>([]);
+
+/**ข้อมูลตาราง (จำลอง)*/
+const rows = ref<QTableProps["rows"]>([]);
+
+/** ค้นหาในตาราง */
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+/**ครั้งที่สอบ */
+const examTime = ref<number | string>("");
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTimeValues: Set<number> = new Set();
+
+/** ประเภทการสอบ */
+const examType = ref<string | null>("");
+const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTypeValues: Set<string> = new Set();
+
+/** บัญชีหมดอายุ */
+const expiredAccount = ref<boolean>(false);
+const examTimeOP2 = ref<any[]>([]);
+const examTypeOP2 = ref<any[]>([]);
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "accountStartDate",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** ส่วนเเสดงผล ตาราง */
+const visibleColumns = ref([
+  "id",
+  "examRound",
+  "examOrder",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
+]);
+
+/**หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "id",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "id",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examRound",
+    align: "left",
+    label: "รอบการสอบ",
+    sortable: true,
+    field: "examRound",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "examOrder",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "examOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "numberOfCandidates",
+    align: "left",
+    label: "จำนวนผู้สอบได้",
+    sortable: true,
+    field: "numberOfCandidates",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examTypeName",
+    align: "left",
+    label: "ประเภทการสอบ",
+    sortable: true,
+    field: "examTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "accountStartDate",
+    align: "left",
+    label: "วันที่บัญชีใช้ได้ตั้งแต่",
+    sortable: true,
+    field: "accountStartDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "accountExpirationDate",
+    align: "left",
+    label: "วันที่บัญชีใช้ได้ถึง",
+    sortable: true,
+    field: "accountExpirationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * ฟังชั่นดึงข้อมูรายการสอบแข่งขัน / คัดเลือกตามปี
+ * @param val ปี ค.ส. โดยที่ทั้งหมดเป็น เลข 0
+ */
+async function fetchPlacementData(val: number) {
+  showLoader();
+  rows.value = [];
+  await http
+    .get(config.API.MainDetail(val))
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataPlacement.value = data;
+      DataStore.DataMainOrig = dataPlacement.value;
+      rows.value = DataStore.DataMainOrig.map((e: any) => ({
+        id: e.id,
+        examRound: e.examRound,
+        examOrder: e.examOrder,
+        examTypeName: e.examTypeName,
+        examTypeValue: e.examTypeValue,
+        accountEndDate: date2Thai(e.accountEndDate),
+        accountExpirationDate: date2Thai(e.accountExpirationDate),
+        accountStartDate: date2Thai(e.accountStartDate),
+        fiscalYear: e.fiscalYear,
+        numberOfCandidates: e.numberOfCandidates,
+      }));
+      filterKeyword.value = "";
+      examTime.value = "ทั้งหมด";
+      examType.value = "ทั้งหมด";
+      expiredAccount.value = false;
+
+      await Promise.all([
+        examTypeFilter(),
+        examTimeFilter(),
+        expiredAccountFilter(),
+      ]);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั่นดึงข้อมูล ปี ค.ส.
+ */
+async function fetchYearOptions() {
+  showLoader();
+  await http
+    .get(config.API.yearOptions())
+    .then(async (res) => {
+      const response = res.data.result;
+      yearOptions.push(...response);
+      const maxNumber = yearOptions.reduce((max: any, e: any) => {
+        return e.id > max ? e.id : max;
+      }, "");
+      searchYear.value = maxNumber;
+      DataStore.DataMainYearSet(searchYear.value);
+      yearOptionsFn.value = yearOptions;
+      searchYear.value && (await fetchPlacementData(searchYear.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั่นเช็ค ค่า Null
+ * เมื่อ != null เอาค่าส่งไปฟังชั่น get data
+ */
+function filterYear() {
+  if (searchYear.value !== null) {
+    fetchPlacementData(searchYear.value);
+  }
+}
+
+/**
+ * ดูรายการสอบแข่งขัน หน้าต่อไป
+ * @param examId id ระบุ รอบการสอบ
+ */
+function redirectToPage(examId?: number) {
+  router.push(`/placement/personal-list/${examId}`);
+}
+
+/**
+ * ฟิลเตอร์หาครั้งที่สอบ ตาม ปี
+ */
+async function examTimeFilter() {
+  for (const data of dataPlacement.value) {
+    const examOrder = data.examOrder;
+    if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
+      examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
+      addedExamTimeValues.add(examOrder);
+    }
+  }
+  examTimeOP.sort((a, b) => {
+    if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
+    if (b.id === "all") return 1;
+    return Number(a.id) - Number(b.id);
+  }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
+}
+
+function examTypeFilter() {
+  dataPlacement.value.forEach((item: any) => {
+    const examTypeName = item.examTypeName;
+    const examTypeValue = item.examTypeValue;
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
+      examTypeOP.value.push({
+        id: examTypeValue,
+        name: examTypeName,
+      });
+      addedExamTypeValues.add(examTypeName);
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูล ายการสอบแข่งขัน / คัดเลือก
+ */
+async function searchFilterTable() {
+  rows.value = [];
+  if (examType.value !== undefined && examType.value !== null) {
+    await DataStore.DataUpdateMain(
+      examTime.value == "ทั้งหมด" ? "all" : examTime.value,
+      examType.value == "ทั้งหมด" ? "all" : examType.value,
+      expiredAccount.value
+    );
+    const dataArr: any = [];
+    await DataStore.DataMainUpdate.map((e: any) => {
+      dataArr.push({
+        id: e.id,
+        examRound: e.examRound,
+        examOrder: e.examOrder,
+        examTypeName: e.examTypeName,
+        examTypeValue: e.examTypeValue,
+        accountEndDate: date2Thai(e.accountEndDate),
+        accountExpirationDate: date2Thai(e.accountExpirationDate),
+        accountStartDate: date2Thai(e.accountStartDate),
+        fiscalYear: e.fiscalYear,
+        numberOfCandidates: e.numberOfCandidates,
+      });
+    });
+    rows.value = dataArr;
+  }
+}
+
+/**
+ * บัญชีหมดอายุ
+ */
+async function expiredAccountFilter() {
+  const updatedRows = dataPlacement.value.map((data: any) => {
+    let isExpired = data.isExpired == expiredAccount;
+    return { ...data, isExpired };
+  });
+  await DataStore.DataMain(updatedRows);
+}
+
+/** filter ใน dropdown ครั้งที่ */
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
+function filterFnexamTime(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTimeOP2.value = examTimeOP;
+    });
+  } else {
+    update(() => {
+      examTimeOP2.value = examTimeOP.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
+function filterFnExamtype(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value;
+    });
+  } else {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
+ * @param val ค่าที่กรอก
+ * @param update afterFn ของ quasar
+ */
+function filterFnYear(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      yearOptionsFn.value = yearOptions;
+    });
+  } else {
+    update(() => {
+      yearOptionsFn.value = yearOptions.filter(
+        (e: any) => e.name.toString().search(val) !== -1
+      );
+    });
+  }
+}
+
+function paginationLabel(start: number, end: number, total: number) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+/** เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้ */
+onMounted(async () => {
+  await fetchYearOptions();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการสอบแข่งขัน / คัดเลือก
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <q-select
+          class="col-xs-12 col-sm-3 col-md-2"
+          v-model="searchYear"
+          label="ปีงบประมาณ"
+          dense
+          emit-value
+          map-options
+          :options="yearOptionsFn"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          @update:model-value="filterYear"
+          use-input
+          @filter="filterFnYear"
+          ><template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+
+        <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="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          class="col-xs-12 col-sm-3 col-md-2"
+          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
+        />
+      </div>
+
+      <div class="col-12">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select
+              class="col-xs-12 col-sm-3 col-md-2"
+              v-model="examTime"
+              label="ครั้งที่"
+              dense
+              emit-value
+              map-options
+              :options="examTimeOP2"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="searchFilterTable"
+              @filter="filterFnexamTime"
+              use-input
+              input-debounce="0"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+
+            <q-select
+              class="col-xs-12 col-sm-3 col-md-3"
+              v-model="examType"
+              label="ประเภทการสอบ"
+              dense
+              emit-value
+              map-options
+              option-label="name"
+              :options="examTypeOP2"
+              option-value="id"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="searchFilterTable"
+              @filter="filterFnExamtype"
+              use-input
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+
+            <q-toggle
+              class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+              v-model="expiredAccount"
+              color="blue"
+              label="แสดงบัญชีหมดอายุ"
+              @update:model-value="searchFilterTable"
+            />
+          </div>
+        </q-card>
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :rows="rows"
+          :columns="columns"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :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 auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                {{ col.label }}
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-icon
+                  v-if="checkPermission($route)?.attrIsList"
+                  name="mdi-eye"
+                  size="sm"
+                  color="info"
+                  class="cursor-pointer"
+                  @click="() => redirectToPage(props.row.id)"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-icon>
+              </q-td>
+              <q-td key="id" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="examRound" :props="props">
+                {{ props.row.examRound }}
+              </q-td>
+              <q-td key="examOrder" :props="props">
+                {{ props.row.examOrder }}
+              </q-td>
+              <q-td key="fiscalYear" :props="props">
+                {{ props.row.fiscalYear }}
+              </q-td>
+              <q-td key="numberOfCandidates" :props="props">
+                {{ props.row.numberOfCandidates }}
+              </q-td>
+              <q-td key="examTypeName" :props="props">
+                {{ props.row.examTypeName }}
+              </q-td>
+              <q-td key="accountStartDate" :props="props">
+                {{ props.row.accountStartDate }}
+              </q-td>
+              <q-td key="accountExpirationDate" :props="props">
+                {{ props.row.accountExpirationDate }}
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/05_placement/views/02_transferMain.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
+import DialogOrders from "@/modules/05_placement/components/Transfer/DialogOrders.vue"; //ส่งไปออกคำสั่งขอโอน
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { statusText } = useTransferDataStore();
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
+const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
+const rowsOrder = ref<ResponseData[]>([]);
+const filterOrder = ref<string>("");
+
+const filterMain = ref<string>(""); //คำค้นหารายการข้อโอน
+const rows = ref<ResponseData[]>([]);
+const dataTransfer = ref<ResponseData[]>([]);
+
+//Table
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+    },
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.positionTypeOld
+        ? `${row.positionTypeOld}${
+            row.positionLevelOld ? `(${row.positionLevelOld})` : ""
+          }`
+        : "";
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "ตำแหน่ง/สังกัดเดิม",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      return date2Thai(val);
+    },
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "posType",
+  "organizationPositionOld",
+  "organization",
+  "status",
+  "createdAt",
+]);
+
+/**
+ * ฟังก์ชันดึงข้อมูรายการขอโอน
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.transfer)
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+      dataTransfer.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันส่งไปออกคำสั่ง
+ *
+ * ค้นหารายชื่อออกคำสั่งตามสถานะ อนุมัติ (APPROVE)
+ */
+function openModalOrder() {
+  const row = dataTransfer.value.filter(
+    (r: ResponseData) =>
+      r.status == "APPROVE" &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.salary !== null &&
+      r.organization &&
+      r.date
+  );
+  rowsOrder.value = row;
+  modal.value = true;
+}
+
+/**
+ * ฟังก์ชันปิด popup ส่งไปออกคำสั่ง
+ *
+ */
+function closeModal() {
+  modal.value = false;
+  filterOrder.value = "";
+}
+
+/**
+ * ฟังก์ชันคืนค่าตัวแปรค้นหา
+ *
+ * กำหนด filterMain และ filterOrder เป็นค่าว่าง
+ */
+function resetFilter() {
+  filterMain.value = "";
+  filterOrder.value = "";
+}
+
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * จะเรียกใช้ fetchData เพื่อดึงข้อมูลรายการขอโอน
+ */
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="openModalOrder"
+            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="filterMain"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterMain == ''" name="search" />
+              <q-icon
+                v-if="filterMain !== ''"
+                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"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterMain"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="
+                      router.push(`/placement/transfer/${props.row.id}`)
+                    "
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div v-else>
+                    {{}}
+                    {{
+                      col.value == null ? "" : col.value == "" ? "-" : col.value
+                    }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogOrders
+    v-bind:modal="modal"
+    v-model:filter-order="filterOrder"
+    :fetch-data="fetchData"
+    :close-modal="closeModal"
+    :rows="rowsOrder"
+  />
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/views/03_receiveMain.vue

@@ -0,0 +1,614 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  ResponseData,
+  ResponseRow,
+} from "@/modules/05_placement/interface/response/Receive";
+
+import Dialogbody from "@/modules/05_placement/components/Receive/Dialogbody.vue";
+import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+} = mixin;
+
+const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
+
+const dataRows = ref<any[]>([]);
+const rows2 = ref<ResponseRow[]>([]);
+const modal = ref<boolean>(false);
+const modalupload = ref<boolean>(false);
+const modalTree = ref<boolean>(false);
+const myForm = ref<any>();
+const personal = ref<ResponseData[]>([]);
+const personalId = ref<string>("");
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const files = ref<any>();
+const filters = ref<ResponseRow[]>([]);
+const rows = ref<ResponseRow[]>([]);
+const posType = ref<string>("");
+const posLevel = ref<string>("");
+const position = ref<string>("");
+const type = ref<string | null>(null);
+
+//Table
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "dateOfBirth",
+  "createdAt",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "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: "dateOfBirth",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "dateOfBirth",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+async function fecthlistRecevice() {
+  showLoader();
+  await http
+    .get(config.API.receiveData())
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataRecevice.value = data;
+      rows.value = data;
+      filters.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ไปหน้าเพิ่มข้อมูลรายการรับโอน
+ */
+function onAddReceive() {
+  router.push(`/placement/receive/add`);
+}
+
+/**
+ * ฟังก์ชันบันทึกการอัปโหลดเอกสาร
+ */
+function onSubmitDoc() {
+  const formData = new FormData();
+  formData.append("File", files.value);
+  showLoader();
+  http
+    .put(config.API.receiveFile(personalId.value), formData)
+    .then(async () => {
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      clickCloseUpload();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// รีเซ็ตค่าในฟิลเตอร์
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// ปิดโมเดล
+const clickClose = () => {
+  modal.value = false;
+  filterKeyword2.value = "";
+};
+// ปิดโมเดลอัปเดตไฟล์
+const clickCloseUpload = () => {
+  modalupload.value = false;
+  files.value = null;
+};
+// ปิดโมเดลโครงสร้าง
+const openModalTree = (id: string, data: any) => {
+  personalId.value = id;
+  personal.value = dataRecevice.value.filter((e: ResponseData) => e.id === id);
+  dataRows.value = data;
+
+  modalTree.value = true;
+  type.value = null;
+  dataRows.value = data;
+  // console.log("data===>", data);
+
+  posType.value = data.posTypeOldId;
+  posLevel.value = data.posLevelOldId;
+  position.value = data.positionOld;
+};
+// เปิดโมเดลไฟล์
+const openUpload = (id: string) => {
+  personalId.value = id;
+  modalupload.value = true;
+};
+// ยินยันลบข้อมูล
+const openDelete = (id: string) => {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.receiveDataId(id))
+      .then(async () => {
+        await fecthlistRecevice();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      });
+  });
+};
+
+// ไปหน้ารายละเอียด
+const nextPage = (id: string) => {
+  router.push({
+    path: `/placement/receive/${id}`,
+  });
+};
+
+const popup = () => {
+  const row = filters.value.filter(
+    (r: any) =>
+      (r.status == "WAITTING" ||
+        r.status == "PENDING" ||
+        r.status == "APPROVE") &&
+      r.posMasterNo != null &&
+      r.educationOld &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.amountOld !== null
+  );
+
+  rows2.value = row;
+  modal.value = true;
+};
+
+function onSave(data: any) {
+  console.log("not save", data);
+  const dataAppoint = {
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+    typeCommand: data.typeCommand,
+  };
+
+  showLoader();
+  http
+    .put(config.API.receivePosition(personalId.value), dataAppoint)
+    .then(async () => {
+      await fecthlistRecevice();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      modalTree.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fecthlistRecevice();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsCreate"
+            flat
+            round
+            color="primary"
+            @click="onAddReceive"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+            @click="popup()"
+          >
+            <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="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <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"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
+                    flat
+                    round
+                    dense
+                    v-if="
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
+                    "
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 100px">
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.id, props.row)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับโอน
+                          </q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openUpload(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon size="xs" name="attach_file" color="blue" />
+                          </q-item-section>
+                          <q-item-section>อัปโหลดเอกสาร</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-tooltip>รายละเอียด</q-tooltip>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsDelete &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openDelete(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <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>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'fullname'">
+                    {{
+                      props.row.firstName
+                        ? `${props.row.prefix ?? ""}${
+                            props.row.firstName ?? ""
+                          } ${props.row.lastName ?? ""}`
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'dateOfBirth'">
+                    {{
+                      props.row.dateOfBirth
+                        ? date2Thai(props.row.dateOfBirth)
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'createdAt'">
+                    {{
+                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'organizationName'">
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
+                        {{
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
+                        }}
+                        {{
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                            : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- ออกคำสั่ง -->
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="fecthlistRecevice"
+    :nextPage="nextPage"
+  />
+
+  <!-- อัปโหลดเอกสาร -->
+  <q-dialog v-model="modalupload">
+    <q-card style="width: 600px">
+      <q-form greedy @submit.prevent @validation-success="onSubmitDoc">
+        <DialogHeader title="อัปโหลดเอกสาร" :close="clickCloseUpload" />
+        <q-separator />
+        <q-card-section class="q-py-sm">
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-file
+                ref="myForm"
+                outlined
+                dense
+                v-model="files"
+                label="อัปโหลดเอกสาร"
+                lazy-rules
+                :rules="[
+                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                ]"
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="row q-pa-sm">
+          <q-space />
+          <q-btn label="บันทึก" color="secondary" type="submit">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- เลือกหน่วยงานที่รับโอน -->
+  <DialogOrgSelect
+    :title="`เลือกหน่วยงานที่รับโอน`"
+    v-model:modal="modalTree"
+    v-model:type="type"
+    :pos-type="posType"
+    :pos-level="posLevel"
+    :position="position"
+    :data-rows="dataRows"
+    :onSubmit="onSave"
+  />
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/views/Main.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการสอบแข่งขัน / คัดเลือก
-  </div>
-</template>