หน้ารายการผู้ประเมิน => เพิ่ม tab

src/components/TableD.vue

@@ -0,0 +1,90 @@
+<template>
+  <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">
+      ทั้งหมด {{ attrs.rows.length }} รายการ
+      <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-for="(_, slot) in slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots } from "vue";
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .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/main.ts

@@ -1,38 +1,43 @@
-import { createApp, defineAsyncComponent } from "vue"
+import { createApp, defineAsyncComponent } from "vue";
-import App from "./App.vue"
+import App from "./App.vue";
-import router from "./router"
+import router from "./router";
-import { Dialog, Notify, Quasar } from "quasar"
+import { Dialog, Notify, Quasar } from "quasar";
-import th from "quasar/lang/th"
+import th from "quasar/lang/th";
-import quasarUserOptions from "./quasar-user-options"
+import quasarUserOptions from "./quasar-user-options";
-import { createPinia } from "pinia"
+import { createPinia } from "pinia";
-import "@vuepic/vue-datepicker/dist/main.css"
+import "@vuepic/vue-datepicker/dist/main.css";
 
-import "quasar/src/css/index.sass"
+import "quasar/src/css/index.sass";
-import http from "./plugins/http"
+import http from "./plugins/http";
 // import OpenLayersMap from "vue3-openlayers";
 
 // import './assets/main.css'
 
-const app = createApp(App)
+const app = createApp(App);
-const pinia = createPinia()
+const pinia = createPinia();
 
-app.use(router)
+app.use(router);
-app.use(pinia)
+app.use(pinia);
 
 app.use(Quasar, {
-	plugins: {
+  plugins: {
-		Notify,
+    Notify,
-		Dialog,
+    Dialog,
-	},
+  },
-	lang: th,
+  lang: th,
-})
+});
 // app.use(OpenLayersMap /* options */);
 
 app.component(
-	"datepicker",
+  "datepicker",
-	defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
+  defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
-)
+);
 
-app.config.globalProperties.$http = http
+app.component(
+  "d-table",
+  defineAsyncComponent(() => import("@/components/TableD.vue"))
+);
 
-app.mount("#app")
+app.config.globalProperties.$http = http;
+
+app.mount("#app");

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import type { QTableProps } from "quasar";
+const router = useRouter();
+const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const columns = defineModel<QTableProps["columns"]>("columns", {});
+const rows = defineModel<any[]>("rows", {});
+const formQuery = defineModel<any>("formQuery", {});
+const total = defineModel<number>("total", {});
+const maxPage = defineModel<number>("maxPage", {});
+
+const props = defineProps({
+  updatePagination: { type: Function },
+  fetchList: { type: Function },
+});
+
+function redirectViewDetail(id: string) {
+  router.push(`/KPI-evaluator/${id}`);
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-table2"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      v-model:pagination="pagination"
+      @update:pagination="props.updatePagination"
+    >
+      <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" class="cursor-pointer">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.id"
+            @click="redirectViewDetail(props.row.id)"
+          >
+            <div v-if="col.name === 'name'">
+              {{
+                `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="props.fetchList"
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+import type { QTableProps } from "quasar";
+const router = useRouter();
+const visibleColumns = defineModel<string[]>("visibleColumns", {});
+const columns = defineModel<QTableProps["columns"]>("columns", {});
+const rows = defineModel<any[]>("rows", {});
+const formQuery = defineModel<any>("formQuery", {});
+const total = defineModel<number>("total", {});
+const maxPage = defineModel<number>("maxPage", {});
+
+const props = defineProps({
+  updatePagination: { type: Function },
+  fetchList: { type: Function },
+});
+
+const selected = ref([]);
+
+function redirectViewDetail(id: string) {
+  router.push(`/KPI-evaluator/${id}`);
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+function test() {
+  console.log(selected.value);
+}
+</script>
+
+<template>
+  <!-- <q-btn @click="test" /> -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      v-model:pagination="pagination"
+      @update:pagination="props.updatePagination"
+      selection="multiple"
+      v-model:selected="selected"
+    >
+      <template v-slot:header-selection="scope">
+        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+      </template>
+
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="props.selected"
+            />
+          </q-td>
+          <q-td
+            v-for="col in props.cols"
+            :key="col.id"
+            @click="redirectViewDetail(props.row.id)"
+          >
+            <div v-if="col.name === 'name'">
+              {{
+                `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ total }} รายการ
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="Number(maxPage)"
+          size="sm"
+          boundary-links
+          direction-links
+          :max-pages="5"
+          @update:model-value="props.fetchList"
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/08_KPI/store.ts

@@ -1,8 +1,16 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import type { DataOptions } from "./interface/index/Main";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
+  const tabMainevaluator = ref<string>("1");
+  const yearRound = ref<number>(new Date().getFullYear());
+  const formQuery = reactive({
+    page: 1,
+    pageSize: 10,
+    round: "",
+    keyword: "",
+  });
   const tabMain = ref<string>("1");
   const dataProfile = ref<any>({
     profileId: null,
@@ -326,5 +334,10 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     excusiveIndicator2ScoreVal,
     excusiveIndicatorScore,
     excusiveIndicatorScoreVal,
+
+    //รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+    tabMainevaluator,
+    formQuery,
+    yearRound,
   };
 });

src/modules/08_KPI/stores/evaluator.ts

@@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useKPIEvaluatorDataStore = defineStore("KPIEvaluator", () => {
+  const tabMain = ref<string>("");
+  return { tabMain };
+});

src/modules/08_KPI/views/mainEvaluator.vue

@@ -8,23 +8,21 @@ import http from "@/plugins/http";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
 
+import TabAll from "@/modules/08_KPI/components/Evaluator/01_TabAll.vue";
+import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
+const dataListMain = ref<any>();
-  useCounterMixin();
-
-const filterKeyword = ref<string>("");
-
-const rows = ref<any>();
 
 const year = ref<number>(new Date().getFullYear());
 
-const round = ref<string>("");
 const roundOp = ref<DataOptions[]>([]);
 
 const visibleColumns = ref<string[]>([
@@ -83,18 +81,15 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const formQuery = reactive({
+const totalList = ref<number>(0);
-  page: 1,
+const maxPage = ref<number>(1);
-  pageSize: 10,
-});
-const totalList = ref<number>(1);
 
-function fetchRoundOption() {
+function fetchRoundOption(type: boolean = false) {
   showLoader();
   http
     .get(
       config.API.kpiPeriod +
-        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${store.yearRound}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -108,7 +103,9 @@ function fetchRoundOption() {
             : "",
       }));
       roundOp.value = list;
-      round.value = "";
+      if (type) {
+        store.formQuery.round = "";
+      }
       fetchList();
     })
     .catch((err) => {
@@ -121,15 +118,44 @@ function fetchRoundOption() {
 
 function fetchList() {
   showLoader();
+  const formTab1 = {
+    page: store.formQuery.page,
+    pageSize: store.formQuery.pageSize,
+    kpiPeriodId: store.formQuery.round,
+    keyword: store.formQuery.keyword,
+  };
+  const formTab2 = {
+    page: store.formQuery.page,
+    pageSize: store.formQuery.pageSize,
+    kpiPeriodId: store.formQuery.round,
+    keyword: store.formQuery.keyword,
+    status: "NEW_EVALUATOR",
+  };
+
+  const formTab3 = {
+    page: store.formQuery.page,
+    pageSize: store.formQuery.pageSize,
+    kpiPeriodId: store.formQuery.round,
+    keyword: store.formQuery.keyword,
+    reqedit: "EVALUATOR",
+  };
+
+  const body =
+    store.tabMainevaluator === "1"
+      ? formTab1
+      : store.tabMainevaluator === "2"
+      ? formTab2
+      : store.tabMainevaluator === "3"
+      ? formTab3
+      : "";
+
   http
-    .get(
+    .post(config.API.kpiEvaluation + `/admin`, body)
-      config.API.kpiEvaluation +
-        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}&keyword=${filterKeyword.value}`
-    )
     .then((res) => {
       const data = res.data.result;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
+      maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
-      rows.value = data.data;
+      totalList.value = data.total;
+      dataListMain.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -140,37 +166,31 @@ function fetchList() {
 }
 
 function changRound() {
-  formQuery.page = 1;
+  store.formQuery.page = 1;
   fetchList();
 }
 
-function redirectViewDetail(id: string) {
-  router.push(`/KPI-evaluator/${id}`);
-}
-
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: any) {
-  formQuery.page = 1;
+  store.formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
+  store.formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 watch(
-  () => formQuery.pageSize,
+  () => store.formQuery.pageSize,
   () => {
     fetchList();
   }
 );
 
+function onChangTab() {
+  store.formQuery.page = 1;
+  fetchList();
+}
+
 onMounted(async () => {
   fetchRoundOption();
 });
@@ -198,12 +218,12 @@ onMounted(async () => {
             <div class="row q-gutter-sm">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="year"
+                v-model="store.yearRound"
                 :locale="'th'"
                 autoApply
                 year-picker
                 :enableTimePicker="false"
-                @update:model-value="fetchRoundOption()"
+                @update:model-value="fetchRoundOption(true)"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -214,9 +234,10 @@ onMounted(async () => {
                     dense
                     lazy-rules
                     outlined
-                    class="inputgreen"
                     hide-bottom-space
-                    :model-value="!!year ? year + 543 : null"
+                    :model-value="
+                      !!store.yearRound ? store.yearRound + 543 : null
+                    "
                     :label="`${'ปีงบประมาณ'}`"
                   >
                     <template v-slot:prepend>
@@ -232,7 +253,7 @@ onMounted(async () => {
               </datepicker>
 
               <q-select
-                v-model="round"
+                v-model="store.formQuery.round"
                 outlined
                 label="รอบการประเมิน"
                 dense
@@ -251,16 +272,16 @@ onMounted(async () => {
               <q-input
                 outlined
                 dense
-                v-model="filterKeyword"
+                v-model="store.formQuery.keyword"
                 label="ค้นหาผู้ขอรับการประเมิน"
                 @keydown.enter.prevent="changRound"
               >
                 <template v-slot:append>
                   <q-icon
-                    v-if="filterKeyword !== ''"
+                    v-if="store.formQuery.keyword !== ''"
                     name="clear"
                     class="cursor-pointer"
-                    @click="(filterKeyword = ''), changRound()"
+                    @click="(store.formQuery.keyword = ''), changRound()"
                   />
                   <q-icon v-else name="search" color="grey-5" />
                 </template>
@@ -282,7 +303,75 @@ onMounted(async () => {
             </div>
           </q-toolbar>
           <div class="col-12">
-            <q-table
+            <q-card bordered class="q-mt-sm">
+              <q-tabs
+                v-model="store.tabMainevaluator"
+                inline-label
+                align="left"
+                class="text-grey"
+                active-color="primary"
+                indicator-color="primary"
+                narrow-indicator
+              >
+                <q-tab name="1" label="รายการทั้งหมด" @click="onChangTab" />
+                <q-tab
+                  name="2"
+                  label="รออนุมัติการจัดทำข้อตกลง"
+                  @click="onChangTab"
+                />
+                <q-tab
+                  name="3"
+                  label="รออนุมัติแก้ไขข้อตกลง"
+                  @click="onChangTab"
+                />
+              </q-tabs>
+              <q-separator />
+
+              <q-tab-panels v-model="store.tabMainevaluator" animated>
+                <q-tab-panel name="1">
+                  <TabAll
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
+
+                <q-tab-panel name="2">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
+
+                <q-tab-panel name="3">
+                  <TabOther
+                    :columns="columns"
+                    :visibleColumns="visibleColumns"
+                    :rows="dataListMain"
+                    :formQuery="store.formQuery"
+                    :total="totalList"
+                    :maxPage="maxPage"
+                    :updatePagination="updatePagination"
+                    :fetchList="fetchList"
+                  />
+                </q-tab-panel>
+              </q-tab-panels>
+            </q-card>
+          </div>
+
+          <!-- <div class="col-12"> -->
+          <!-- <q-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -340,8 +429,8 @@ onMounted(async () => {
                   @update:model-value="fetchList"
                 ></q-pagination>
               </template>
-            </q-table>
+            </q-table> -->
-          </div>
+          <!-- </div> -->
         </q-card>
       </div>
     </div>
@@ -351,45 +440,4 @@ onMounted(async () => {
 .icon-color {
   color: #4154b3;
 }
-
-.custom-table2 {
-  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;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    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>