hrms-mgt/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { QTableProps } from "quasar";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
import { useRouter } from "vue-router";

const currentPage = ref<number>(1);
const router = useRouter();
const complainstStore = useComplainstDataStore();

const emit = defineEmits(["update:pagination"]);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  filterTable: {
    type: String,
    default: "",
  },
  maxPage: {
    type: Number,
    require: true,
  },
  rowsPerPage: {
    type: Number,
    require: true,
  },
  page: {
    type: Number,
    require: true,
  },
  toptitle: {
    type: Number,
    require: true,
  },
});

/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
  "no",
  "title",
  "dateReceived",
  "respondentType",
  "offenseDetails",
  "createdAt",
  "levelConsideration",
  "dateConsideration",
  "status",
]);

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "title",
    align: "left",
    label: "เรื่องร้องเรียน",
    sortable: true,
    field: "title",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateReceived",
    align: "left",
    label: "วันที่รับเรื่อง",
    sortable: true,
    field: "dateReceived",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "respondentType",
    align: "left",
    label: "ผู้ถูกร้องเรียน",
    sortable: true,
    field: "respondentType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "offenseDetails",
    align: "left",
    label: "ลักษณะความผิด",
    sortable: true,
    field: "offenseDetails",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "levelConsideration",
    align: "left",
    label: "ระดับการพิจารณา",
    sortable: true,
    field: "levelConsideration",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateConsideration",
    align: "left",
    label: "วันที่กำหนดพิจารณา",
    sortable: true,
    field: "dateConsideration",
    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",
  },
]);

/** แสดงจำนวนในตาราง */
const pagination = ref({
  descending: true,
  page: Number(props.page),
  rowsPerPage: props.rowsPerPage,
});

/**
 * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
 * @param id ไอดีระบุ
 */
function OpenEdit(id: string) {
  router.push(`/discipline/complaints/${id}`);
}

/** ส่งค่ากลับไปหน้าหลัก */
function updateProp(newPagination: any, page: number) {
  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
  emit("update:pagination", newPagination, page);
}

watch(
  () => currentPage.value,
  () => {
    updateProp(pagination.value.rowsPerPage, currentPage.value);
  }
);

watch(
  () => pagination.value.rowsPerPage,
  () => {
    currentPage.value = 1;
    updateProp(pagination.value.rowsPerPage, currentPage.value);
  }
);

/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
onMounted(() => {
  complainstStore.columns = columns.value;
  complainstStore.visibleColumns = visibleColumns.value;
});
</script>

<template>
  <d-table
    id="table"
    ref="table"
    :columns="columns"
    :rows="complainstStore.rows"
    :filter="props.filterTable"
    row-key="subject"
    flat
    bordered
    :paging="true"
    dense
    class="custom-header-table"
    :visible-columns="complainstStore.visibleColumns"
    v-model:pagination="pagination"
    :rows-per-page-options="[10, 25, 50, 100]"
  >
    <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" style="height: 40px">
        <q-td
          v-for="col in props.cols"
          :key="col.name"
          :props="props"
          @click="OpenEdit(props.row.id)"
        >
          <div v-if="col.name == 'no'">
            {{
              (currentPage - 1) * Number(pagination.rowsPerPage) +
              props.rowIndex +
              1
            }}
          </div>
          <div v-else-if="col.name === 'title'" class="table_ellipsis">
            {{ props.row.title }}
          </div>
          <div v-else>
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
    <template v-slot:pagination="scope">
      ทั้งหมด {{ props.toptitle }}รายการ
      <q-pagination
        v-model="currentPage"
        active-color="primary"
        color="dark"
        :max="Number(props.maxPage)"
        size="sm"
        boundary-links
        direction-links
      ></q-pagination>
    </template>
  </d-table>
</template>

<style scoped></style>