hrms-mgt/src/modules/12_evaluatePersonal/views/MainPage.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

import Table from "@/modules/12_evaluatePersonal/components/Table.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";

const $q = useQuasar(); // show dialog
const router = useRouter();
//search data table
const mixin = useCounterMixin();
const store = useEvalutuonStore();
const { showLoader, hideLoader, messageError } = mixin;

const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
function Detailpage() {
  router.push("/evaluate/detail");
}

const page = ref<number>(1);
const pageSize = ref<number>(10);
const maxPage = ref<number>(1);
const filter = ref<string>("");

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {
  store.fetchData([
    {
      citizanId: "1230030004001",
      fullName: "นางวัศยา ศรีสร้อย",
      position: "ผู้อำนวยการสถาบัน",
      level: "ปฏิบัติการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานกฎหมาย",
      status: "WAIT_CHECK_DOC_V1",
    },
    {
      citizanId: "172223000401",
      fullName: "นางธัญพร ปัทมเดชา",
      position: "หัวหน้าสำนักงาน",
      level: "ปฏิบัติการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานกฎหมาย",
      status: "WAIT_CHECK_DOC_V1",
    },
    {
      citizanId: "122222000401",
      fullName: "นายสิริศักดิ์ พรมบุตร",
      position: "นักบริหาร",
      level: "ชำนาญการพิเศษ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานกฎหมายอาคาร",
      status: "WAIT_CHECK_DOC_V2",
    },
    {
      citizanId: "111111100401",
      fullName: "นายเอกฉัท วีระโชติ ",
      position: "นักบริหาร",
      level: "อำนวยการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานการคลัง",
      status: "DONE",
    },
    {
      citizanId: "122203000401",
      fullName: "นางธนิดา มั่นคงประสิทธิ์",
      position: "ผู้อำนวยการกอง",
      level: "อาวุโส",
      positionNumber: "สก.ก412",
      agency: "กลุ่มกิจการสภา",
      status: "WAIT_CHECK_DOC_V1",
    },
    {
      citizanId: "123003111401",
      fullName: "นางณิชมน ลือขำ ",
      position: "ผู้อำนวยการสถาบัน",
      level: "ชำนาญงาน",
      positionNumber: "สก.ก412",
      agency: "กลุ่มกิจการสภา",
      status: "WAIT_CHECK_DOC_V2",
    },
    {
      citizanId: "111111100401",
      fullName: "นายเอกฉัท วีระโชติ ",
      position: "นักบริหาร",
      level: "อำนวยการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานการคลัง",
      status: "ANNOUNCE_WEB",
    },
    {
      citizanId: "111111100401",
      fullName: "นายเอกฉัท วีระโชติ ",
      position: "นักบริหาร",
      level: "อำนวยการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานการคลัง",
      status: "PREPARE_DOC_V2",
    },
    {
      citizanId: "111111100401",
      fullName: "นายเอกฉัท วีระโชติ ",
      position: "นักบริหาร",
      level: "อำนวยการ",
      positionNumber: "สก.ก412",
      agency: "กลุ่มงานการคลัง",
      status: "CHECK_DOC_V2",
    },
  ]);
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการคำขอประเมิน
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
      <Table
        style="max-height: 80vh"
        :rows="store.rows"
        :columns="store.columns"
        :visible-columns="store.visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="store.visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :paging="true"
        :titleText="''"
        :page="page"
        :pageSize="pageSize"
        :maxPage="maxPage"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <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>
                {{ col.value }}
              </div>
            </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">
                  {{ props.rows && props.rows.status }}
                  <q-list dense style="min-width: 100px">
                    <q-item
                      clickable
                      v-close-popup
                      @click="Detailpage()"
                      v-if="props.row.status === 'รอตรวจสอบคุณสมบัติ'"
                    >
                      <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 clickable v-close-popup>
                      <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
                      clickable
                      v-close-popup
                      @click="Detailpage()"
                      v-if="props.row.status === 'รอพิจารณาผลการประเมิน'"
                    >
                      <q-item-section
                        style="min-width: 0px"
                        avatar
                        class="q-py-sm"
                      >
                        <q-icon
                          color="primary"
                          size="xs"
                          name="mdi-account-outline"
                        />
                      </q-item-section>
                      <q-item-section>พิจารณาผลการประเมิน </q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
</template>

<style></style>