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: "1",
      penaltyLevel: "7",
      caseFault: "ทุจริตในหน้าที่",
      dateInvestigate: "1 ธ.ค. 2565",
      status: "0",
      active: "2",
    },
    {
      subject: "ทุจริตในหน้าที่",
      interrogated: "ภัทรานุช คงน้อย",
      fault: "1",
      penaltyLevel: "7",
      caseFault: "ทุจริตในหน้าที่",
      dateInvestigate: "30 พ.ย. 2565",
      status: "0",
      active: "0",
    },
    {
      subject: "กระทำทุจริตเงินกองทุน",
      interrogated: "ปรมาพร ศรีมี",
      fault: "2",
      penaltyLevel: "1",
      caseFault: "พบการทุจริต",
      dateInvestigate: "14 ก.ย. 2565",
      status: "1",
      active: "1",
    },
    {
      subject: "พูดจาไม่สุภาพ",
      interrogated: "สมรัก ใจอารีย์",
      fault: "2",
      penaltyLevel: "1",
      caseFault: "พูดจาไม่สุภาพกับผู้บังคับบัญชา",
      dateInvestigate: "11 ส.ค. 2565",
      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 style="font-size: 14px; width: 10rem">
              <q-btn
                v-if="props.row.active === 'ยืนยันผล'"
                color="primary"
                class="q-px-md q-py-xs"
                >ยืนยันผล</q-btn
              >
              <span v-else>{{ props.row.active }}</span>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>
</template>

<style></style>