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

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

import { useRouter } from "vue-router";
const dataInvestigateDis = useInvestigateDisStore();
const { fecthList } = dataInvestigateDis;
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const {
  date2Thai,
  success,
  typeCategoryExam,
  messageError,
  showLoader,
  hideLoader,
} = mixin;
const filter = ref<string>(""); //search data table
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
  "no",
  "subject",
  "interrogated",
  "fault",
  "penaltyLevel",
  "caseFault",
  "dateInvestigate",
  "status",
]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "center",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "subject",
    align: "left",
    label: "เรื่อง",
    sortable: true,
    field: "subject",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "interrogated",
    align: "left",
    label: "ผู้ถูกสืบสวน",
    sortable: true,
    field: "interrogated",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fault",
    align: "left",
    label: "ลักษณะความผิด",
    sortable: true,
    field: "fault",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "penaltyLevel",
    align: "left",
    label: "ระดับโทษความผิด",
    sortable: true,
    field: "penaltyLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "caseFault",
    align: "left",
    label: "กรณีความผิด",
    sortable: true,
    field: "caseFault",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateInvestigate",
    align: "left",
    label: "วันที่สอบสวน",
    sortable: true,
    field: "dateInvestigate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

onMounted(async () => {
  await fecthInvestigateDis();
  await hideLoader();
});

const clickDelete = (id: string) => {
  $q.dialog({
    title: "ยืนยันการลบข้อมูล",
    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      await deleteData(id);
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};

function fecthInvestigateDis() {
  const data = [
    {
      subject: "ทุจริตในหน้าที่",
      interrogated: "ศิรินภา คงน้อยี่",
      fault: "0",
      penaltyLevel: "0",
      caseFault: "test",
      dateInvestigate: "test",
      status: "0",
      active: "1",
    },
    {
      subject: "ทุจริตในหน้าที่",
      interrogated: "นายนครชัย วันดี",
      fault: "1",
      penaltyLevel: "0",
      caseFault: "test",
      dateInvestigate: "test",
      status: "1",
      active: "1",
    },
    {
      subject: "กระทำทุจริตเงินกองทุน",
      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
      fault: "1",
      penaltyLevel: "0",
      caseFault: "test",
      dateInvestigate: "test",
      status: "0",
      active: "1",
    },
    {
      subject: "พูดจาไม่สุภาพ",
      interrogated: "นายปิยรมย์ ศิริธาราฟ",
      fault: "2",
      penaltyLevel: "0",
      caseFault: "test",
      dateInvestigate: "test",
      status: "0",
      active: "1",
    },
  ];
  fecthList(data); // ส่งข้อมูลไป stores
}

const clickAdd = () => {
  router.push(`/discipline/InvestigateDisciplinary/add`);
};

const deleteData = async (id: string) => {
  showLoader();
  await http
    .delete(config.API.periodExamId(id))
    .then((res) => {
      success($q, "ลบข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      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="columns"
        :filter="filter"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :add="clickAdd"
        :paging="true"
        :titleText="''"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td key="no" :props="props">
              {{ props.rowIndex + 1 }}
            </q-td>
            <q-td key="subject" :props="props">
              {{ props.row.subject }}
            </q-td>
            <q-td key="interrogated" :props="props">
              {{ props.row.interrogated }}
            </q-td>
            <q-td key="fault" :props="props">
              {{ props.row.fault }}
            </q-td>
            <q-td key="penaltyLevel" :props="props">
              {{ props.row.penaltyLevel }}
            </q-td>
            <q-td key="caseFault" :props="props">
              {{ props.row.caseFault }}
            </q-td>
            <q-td key="dateInvestigate" :props="props">
              {{ props.row.dateInvestigate }}
            </q-td>
            <q-td key="status" :props="props">
              {{ props.row.status }}
            </q-td>
            <q-td auto-width style="width: 10rem">
              <q-btn color="primary" class="q-px-xl q-py-xs">ยื่นยันผล</q-btn>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
</template>

<style></style>