hrms-mgt/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";

const $q = useQuasar(); // show dialog
const router = useRouter();
const filter = ref<string>(""); //search data table
const mixin = useCounterMixin();
const dataInvestigateDis = useInvestigateDisStore();
const { showLoader, hideLoader } = mixin;
const { fecthList } = dataInvestigateDis;

const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});

/**
 * ไปหน้าแก้ไข
 * @param id ไอดีเฉพาะ รายบุคคล
 */
function openEdit(id: string) {
  console.log(id);
  router.push(`/discipline/disciplinary/${id}`);
}

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {
  showLoader();
  fecthList([
    {
      id: "001",
      subject: "ทุจริตในหน้าที่",
      interrogated: "ศิรินภา คงน้อยี่",
      fault: "1",
      penaltyLevel: "7",
      caseFault: "ทุจริตในหน้าที่",
      dateInvestigate: "2023-12-01",
      status: "0",
      active: "2",
    },
    {
      id: "002",
      subject: "ทุจริตในหน้าที่",
      interrogated: "ภัทรานุช คงน้อย",
      fault: "1",
      penaltyLevel: "7",
      caseFault: "ทุจริตในหน้าที่",
      dateInvestigate: "2023-11-30",
      status: "0",
      active: "0",
    },
    {
      id: "003",
      subject: "กระทำทุจริตเงินกองทุน",
      interrogated: "ปรมาพร ศรีมี",
      fault: "2",
      penaltyLevel: "1",
      caseFault: "พบการทุจริต",
      dateInvestigate: "2023-09-14",
      status: "1",
      active: "1",
    },
    {
      id: "004",
      subject: "พูดจาไม่สุภาพ",
      interrogated: "สมรัก ใจอารีย์",
      fault: "2",
      penaltyLevel: "1",
      caseFault: "พูดจาไม่สุภาพกับผู้บังคับบัญชา",
      dateInvestigate: "2023-08-11",
      status: "0",
      active: "1",
    },
  ]);
  await hideLoader();
});
</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="dataInvestigateDis.rows"
        :columns="dataInvestigateDis.columns"
        :filter="filter"
        :visible-columns="dataInvestigateDis.visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="dataInvestigateDis.visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :paging="true"
        :titleText="''"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="openEdit(props.row.id)"
            >
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
              <div v-else>
                {{ col.value }}
              </div>
            </q-td>
            <q-td style="font-size: 14px; width: 10rem">
              <q-btn
                v-if="props.row.active === 'ยืนยันผล'"
                color="primary"
                class="q-px-md"
                dense
                unelevated
                >ยืนยันผล</q-btn
              >
              <span v-else>{{ props.row.active }}</span>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
</template>

<style></style>