KPI => รายงาน

src/modules/14_KPI/views/report.vue

@@ -7,9 +7,13 @@ import http from "@/plugins/http";
 import axios from "axios";
 import genReport from "@/plugins/genreport";
 
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 
 const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
@@ -24,49 +28,43 @@ const organizationOps = ref<DataOption[]>([]);
 const typeReport = ref<string>("");
 const listReportMain = ref<DataOption[]>([
   {
-    id: "1",
+    id: "KPI1",
     name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงจำนวนผู้มีผลการประเมินระดับต่างๆ ในแต่ละรอบการประเมินรายหน่วยงาน/ส่วนราชการ",
   },
   {
-    id: "2",
+    id: "KPI2",
     name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผู้มีผลการประเมินระดับต่างๆ รายหน่วยงาน/ส่วนราชการ ",
   },
   {
-    id: "3",
+    id: "KPI3",
     name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผลการประเมินของผู้ใต้บังคับบัญชา",
   },
   {
-    id: "4",
+    id: "KPI4",
     name: "แบบสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล (รายบุคคล)",
   },
   {
-    id: "5",
+    id: "KPI5",
     name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๕ ปี",
   },
   {
-    id: "6",
+    id: "KPI6",
     name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๓ ปี",
   },
   {
-    id: "7",
+    id: "KPI7",
     name: "รายงานสรุปแผนพัฒนาการปฏิบัติราชการรายบุคคล",
   },
   {
-    id: "8",
+    id: "KPI8",
     name: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
   },
   {
-    id: "9",
+    id: "KPI9",
     name: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
   },
 ]);
 const listReport = ref<DataOption[]>([]);
-const searchField = ref<string>("fullName");
-const search = ref<string>("");
-const typeFilter = ref<DataOption[]>([
-  { id: "fullName", name: "ชื่อ-นามสกุล" },
-  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-]);
 
 function fetchRoundOption() {
   http
@@ -134,24 +132,24 @@ function fetchListOrg(id: string) {
 }
 
 function fetchReport() {
-  if (round.value !== "" && organization.value !== "") {
+  showLoader();
-    showLoader();
+  const body = {
-    const body = {
+    type: typeReport.value,
-      periodId: round.value,
+    periodId: round.value,
-      root: organization.value,
+    root: organization.value,
-    };
+    // persanalId: persanalId.value,
-    http
+  };
-      .post(config.API.kpiReport(), body)
+  http
-      .then((res) => {
+    .post(config.API.kpiReport(), body)
-        dataDownload.value = res.data.result;
+    .then((res) => {
-        page.value = 1;
+      dataDownload.value = res.data.result;
-        genPDf(res.data.result);
+      page.value = 1;
-      })
+      genPDf(res.data.result);
-      .catch((err) => {
+    })
-        messageError($q, err);
+    .catch((err) => {
-        hideLoader();
+      messageError($q, err);
-      });
+      hideLoader();
-  }
+    });
 }
 
 /**
@@ -186,8 +184,22 @@ function genPDf(data: any) {
     });
 }
 
-function changOption() {
+function changOption(val: string) {
-  fetchReport();
+  if (
+    val === "KPI1" ||
+    val === "KPI2" ||
+    val === "KPI3" ||
+    val === "KPI7" ||
+    val === "KPI9"
+  ) {
+    persanalId.value = "";
+    if (round.value !== "" && organization.value !== "") {
+      fetchReport();
+    }
+  } else {
+    round.value = "";
+    organization.value = "";
+  }
 }
 
 function filterSelector(val: string, update: Function, type: string) {
@@ -239,6 +251,93 @@ function backPage() {
   }
 }
 
+/*******/
+const modal = ref<boolean>(false);
+const persanalId = ref<string>("");
+const filter = ref<string>("");
+const rowsPerson = ref<any[]>([
+  {
+    id: "1",
+    citizenId: "12345678910123",
+    name: "tset,",
+    posNo: "1",
+    position: "ตำแหน่งในสายงาน",
+    posType: "ตำแหน่งประเภท",
+    posLevel: "ระดับ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: false,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "name",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: false,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: false,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onClickModal() {
+  modal.value = !modal.value;
+  if ((modal.value = true)) {
+    fetchListPerson();
+  }
+}
+
+function fetchListPerson() {}
+
+function onSelectPerson(id: string) {
+  persanalId.value = id;
+  modal.value = false;
+  fetchReport();
+}
+
 onMounted(() => {
   fetchRoundOption();
   fetchActiveId();
@@ -252,7 +351,6 @@ onMounted(() => {
       <q-toolbar style="padding: 0">
         <div class="row q-gutter-sm">
           <q-select
-            :disable="roundOp.length === 0"
             style="min-width: 100px"
             dense
             hide-bottom-space
@@ -265,6 +363,7 @@ onMounted(() => {
             :options="listReport"
             label="รายงาน"
             use-input
+            @update:model-value="changOption"
             @filter="(inputValue: string,
             doneFn: Function) => filterSelector(inputValue, doneFn ,'typereport')"
           />
@@ -314,11 +413,11 @@ onMounted(() => {
         <div
           class="row q-gutter-sm"
           v-if="
-            typeReport === '1' ||
+            typeReport === 'KPI1' ||
-            typeReport === '2' ||
+            typeReport === 'KPI2' ||
-            typeReport === '3' ||
+            typeReport === 'KPI3' ||
-            typeReport === '7' ||
+            typeReport === 'KPI7' ||
-            typeReport === '9'
+            typeReport === 'KPI9'
           "
         >
           <datepicker
@@ -368,7 +467,7 @@ onMounted(() => {
             emit-value
             map-options
             :disable="roundOp.length === 0"
-            @update:model-value="changOption"
+            @update:model-value="changOption(typeReport)"
           />
           <q-select
             class="bg-white"
@@ -385,15 +484,17 @@ onMounted(() => {
             :options="organizationOps"
             label="หน่วยงาน"
             use-input
-            @update:model-value="changOption"
+            @update:model-value="changOption(typeReport)"
             @filter="(inputValue: string,
             
             doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
           />
         </div>
 
-        <div class="row q-gutter-sm" v-else>
+        <div class="q-pa-sm" v-else>
-          <q-select
+          <q-btn color="primary" label="เลือกรายชื่อ" @click="onClickModal" />
+
+          <!-- <q-select
             class="bg-white"
             style="width: 200px"
             dense
@@ -424,10 +525,11 @@ onMounted(() => {
                 icon="search"
                 label="ค้นหา"
                 class="full-width q-py-sm q-px-md"
+                @click="fetchReport"
               >
               </q-btn>
             </template>
-          </q-input>
+          </q-input> -->
         </div>
       </q-toolbar>
 
@@ -519,6 +621,73 @@ onMounted(() => {
       </q-splitter>
     </q-card-section>
   </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader :tittle="'เลือกราชชื่อ'" :close="onClickModal" />
+      <q-separator />
+      <q-card-section class="q-col-gutter-sm">
+        <div class="col-12">
+          <q-input outlined dense v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-12">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rowsPerson"
+            :paging="true"
+            row-key="id"
+            flat
+            bordered
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <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 auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+                <q-td>
+                  <q-btn
+                    outline
+                    color="primary"
+                    label="เลือก"
+                    @click="onSelectPerson(props.row.id)"
+                  />
+                </q-td>
+              </q-tr>
+            </template>
+            <!-- <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="reqMaster.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="totalPage"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template> -->
+          </d-table>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>