From e911a913eab6565ebcb25f8c7fdcdf2abdd7f48c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 21 Jan 2025 17:16:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20tab=20=E0=B8=9C=E0=B8=A5=E0=B8=AA=E0=B8=B3=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=84=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=94=E0=B9=80=E0=B8=AB=E0=B9=87=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |   1 +
 .../components/probation/MainSurvey.vue       | 277 ++++++++++++++++++
 .../components/probation/MainTabs.vue         |   6 +
 .../05_placement/interface/index/Survey.ts    |  14 +
 4 files changed, 298 insertions(+)
 create mode 100644 src/modules/05_placement/components/probation/MainSurvey.vue
 create mode 100644 src/modules/05_placement/interface/index/Survey.ts

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 7deae216f..93cb904a9 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -97,4 +97,5 @@ export default {
 
   //รายงาน
   probationReport: `${report}`,
+  probationSurvey: `${probation}/survey/admin`,
 };
diff --git a/src/modules/05_placement/components/probation/MainSurvey.vue b/src/modules/05_placement/components/probation/MainSurvey.vue
new file mode 100644
index 000000000..37d219ebe
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainSurvey.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
+import type { MainData } from "@/modules/05_placement/interface/index/Survey";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
+
+const rows = ref<MainData[]>([]);
+const filterKeyword = ref<string>("");
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 10,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "answer1",
+  "answer2",
+  "answer3",
+  "createdAt",
+]);
+/** หัวตาราง */
+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",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "answer1",
+    align: "left",
+    label: "ความคิดเห็น",
+    sortable: true,
+    field: "answer1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "answer2",
+    align: "left",
+    label: "ปัญหาและอุปสรรค",
+    sortable: true,
+    field: "answer2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "answer3",
+    align: "left",
+    label: "ความพึงพอใจ",
+    sortable: true,
+    field: "answer3",
+    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, row) {
+      return date2Thai(row.createdAt, false, true);
+    },
+  },
+]);
+
+async function getData() {
+  showLoader();
+  let query = {
+    year: year.value,
+    keyword: filterKeyword.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
+  };
+  await http
+    .get(config.API.probationSurvey, { params: query })
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+
+      rows.value = data;
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getData();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <q-card flat class="q-pa-sm">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div>
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              style="width: 150px"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="getData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  hide-bottom-space
+                  :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
+                  :label="`${'ปีพ.ศ.'}`"
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา ชื่อ-นามสกุลผู้ทดลองฯ /ตำแหน่ง"
+            @keydown.enter.prevent="getData()"
+            style="width: 350px"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            style="min-width: 140px"
+          />
+        </div>
+      </div>
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="personal_id"
+          flat
+          :visible-columns="visibleColumns"
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @update:pagination="updatePagination"
+        >
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total }} รายการ
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(totalList)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="getData()"
+            ></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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    (pagination.page - 1) * pagination.rowsPerPage +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/05_placement/components/probation/MainTabs.vue b/src/modules/05_placement/components/probation/MainTabs.vue
index 5356d8b04..b516fbd59 100644
--- a/src/modules/05_placement/components/probation/MainTabs.vue
+++ b/src/modules/05_placement/components/probation/MainTabs.vue
@@ -7,12 +7,14 @@ import type { ItemTabs } from "@/modules/05_placement/interface/request/Main";
 
 import ProbationPage from "@/modules/05_placement/components/probation/MainProbation.vue";
 import AppointPage from "@/modules/05_placement/components/probation/MainAppoint.vue";
+import SurveyPage from "@/modules/05_placement/components/probation/MainSurvey.vue";
 
 const store = usePlacementDataStore();
 
 const tabsManu = ref<ItemTabs[]>([
   { label: "รายการผู้ทดลองปฏิบัติหน้าที่ราชการ", name: "probation" },
   { label: "แต่งตั้งคณะกรรมการฯ", name: "appoint" },
+  { label: "ผลสํารวจความคิดเห็น", name: "survey" },
 ]);
 </script>
 <template>
@@ -46,6 +48,10 @@ const tabsManu = ref<ItemTabs[]>([
         <!-- แต่งตั้งคณะกรรมการฯ -->
         <AppointPage />
       </q-tab-panel>
+      <q-tab-panel name="survey" class="q-pa-sm">
+        <!-- ผลสํารวจความคิดเห็น -->
+        <SurveyPage />
+      </q-tab-panel>
     </q-tab-panels>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/interface/index/Survey.ts b/src/modules/05_placement/interface/index/Survey.ts
new file mode 100644
index 000000000..ae5097f36
--- /dev/null
+++ b/src/modules/05_placement/interface/index/Survey.ts
@@ -0,0 +1,14 @@
+interface MainData {
+  createdAt: Date;
+  personal_id: string;
+  assign_id: string;
+  answer1: string;
+  answer2: string;
+  answer3: string;
+  fullname: string;
+  position: string;
+}
+
+export type{
+    MainData
+}
\ No newline at end of file