hrms-mgt/src/modules/05_placement/components/probation/MainProbation.vue

<script setup lang="ts">
import { ref, useAttrs, onMounted, reactive, watch } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import router from "@/router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";

import type { QTableProps } from "quasar";
import type {
  FormMainProbation,
  FormMainProbation2,
  OpfillterType,
} from "@/modules/05_placement/interface/request/Main";

import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogOrder from "@/modules/05_placement/components/probation/DialogOrder.vue";

const $q = useQuasar(); //ใช้ noti quasar
const storeFn = useTransferDataStore();
const mixin = useCounterMixin();
const { statusProbationMain } = storeFn;
const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;

const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
const filterRef = ref<any>(null);
const modal = ref<boolean>(false);
const paging = ref<boolean>(true);
const filterRef2 = ref<any>(null);
const attrs = ref<any>(useAttrs());
const paging2 = ref<boolean>(true);
const fillterStatus = ref<any>([]);
const fillter = ref<number | null>(0);
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const rows = ref<FormMainProbation[]>([]);
const rows2 = ref<FormMainProbation2[]>([]);
const dataUpdate = ref<FormMainProbation[]>([]);
const Opfillter = ref<OpfillterType[]>([]);
const Opfillter2 = ref<OpfillterType[]>([
  {
    id: 0,
    value: "ทั้งหมด",
  },
]);
const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
const maxPage = ref<number>(1);

const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

const total = ref<number>(0);
const totalList = ref<number>(1);

const pagination2 = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

/** ข้อมูลที่เเสดง */
const visibleColumns = ref<string[]>([
  "no",
  "name",
  "position_line",
  "position_level",
  "organization",
  "probation_no",
  "order_number",
  "probation_status",
]);

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_line",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position_line",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "position_level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ",
    classes: "table_ellipsis",
  },
  {
    name: "probation_no",
    align: "center",
    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: true,
    field: "probation_no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return row.probation_no ? row.probation_no : "-";
    },
  },
  {
    name: "order_number",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
    field: "order_number",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return row.order_number ? row.order_number : "-";
    },
  },
  {
    name: "probation_status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "probation_status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** หัวตาราง2 */
const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return (
        (row.posTypeName ? row.posTypeName : "") +
        (row.posLevelName !== null ? " (" + row.posLevelName + ")" : "")
      );
    },
  },
  {
    name: "organizationOrganization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organizationOrganization",
    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",
  },
]);

/** get ข้อมูล */
async function getpersonalList() {
  showLoader();
  await http
    .get(
      config.API.probationPersonalList() +
        `?status=${fillter.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`
    )
    .then(async (res) => {
      const data = await res.data.data.data;
      const resTotal = await res.data.data.total;
      rows.value = data;
      fillterStatus.value = data;
      dataUpdate.value = rows.value;
      Opfillter.value = storeFn.optionStatusProbation;
      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
      total.value = resTotal;
      hideLoader();
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    })
    .finally(() => {});
}

async function onclickAddProbation() {
  modal.value = true;
  modal.value && showLoader();
  await http
    .post(config.API.orgProfileProbation, formProbation)
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
      rows2.value = res.data.result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function updatePagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
function updatePagination(newPagination: any) {
  formProbation.page = 1;
  formProbation.pageSize = newPagination.rowsPerPage;
}

async function filterKeyword2Fn(page: number) {
  page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
}

/**
 * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
 * @param data personal data
 */
function clickAdd(data: any) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();

      await http
        .post(config.API.personalAdd(), data)
        .then(async () => {
          await http
            .get(config.API.orgProfileStatus(data.id))
            .then((res) => {
              getpersonalList();
              success($q, "เพิ่มข้อมูลสำเร็จ");
            })
            .catch((e) => {
              messageError($q, e);
            });
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          clickClose();
          hideLoader();
        });
    },
    "ยันยันการเพิ่มข้อมูล",
    "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
  );
}
/** ปิด dialog */
async function clickClose() {
  modal.value = false;
}

/** reset ฟิลเตอร์ */
function resetFilter() {
  filterKeyword.value = "";
  filterRef.value.focus();
}

/** reset ฟิลเตอร์ ใน dialog */
function resetFilter2() {
  filterKeyword2.value = "";
  filterRef2.value.focus();
}

function paginationLabel(start: string, end: string, total: string) {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
}

function paginationLabel2(start: string, end: string, total: string) {
  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
}

/**
 * ค้นหาตาม text
 * @param val ค่าที่ค้นหา
 * @param update fn
 */
function filterFn(val: string, update: any) {
  if (val == "") {
    update(() => {
      Opfillter2.value = Opfillter.value;
      fillter.value = null;
    });
  } else {
    update(() => {
      Opfillter2.value = Opfillter.value.filter(
        (e: any) => e.value.search(val) !== -1
      );
    });
  }
}

/** ส่งไปออกคำสั่ง */
function onCommand() {
  modalCommand.value = true;
}

watch([() => formProbation.page, () => formProbation.pageSize], () => {
  onclickAddProbation();
});

watch(
  () => pagination.value.rowsPerPage,
  async () => {
    await getpersonalList();
  }
);

/** get ค่า เมื่อโหลดหน้า */
onMounted(async () => {
  getpersonalList();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
  </div>

  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row q-col-gutter-sm">
      <div class="row col-12 q-col-gutter-sm">
        <div class="col-6">
          <div class="row">
            <q-select
              class="col-5 col-sm-3 col-md-8"
              v-model="fillter"
              label="สถานะ"
              dense
              map-options
              option-label="value"
              :options="Opfillter2"
              option-value="id"
              lazy-rules
              emit-value
              hide-bottom-space
              :readonly="false"
              :borderless="false"
              :outlined="true"
              :hide-dropdown-icon="false"
              @update:model-value="getpersonalList()"
              @filter="filterFn"
              use-input
              behavior="menu"
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

            <div>
              <q-btn
                v-if="checkPermission($route)?.attrIsCreate"
                @click="onclickAddProbation"
                flat
                round
                color="add"
                icon="mdi-plus"
              >
                <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
              </q-btn>
            </div>
            <div>
              <q-btn
                v-if="
                  checkPermission($route)?.attrIsUpdate &&
                  checkPermission($route)?.attrIsGet
                "
                @click="onCommand"
                flat
                round
                color="add"
                icon="mdi-account-arrow-right"
              >
                <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
              </q-btn>
            </div>
          </div>
        </div>
        <q-space />

        <q-input
          class="col-xs-12 col-sm-3 col-md-2"
          standout
          dense
          v-model="filterKeyword"
          ref="filterRef"
          outlined
          debounce="300"
          placeholder="ค้นหา"
        >
          <template v-slot:append>
            <q-icon v-if="filterKeyword == ''" name="search" />
            <q-icon
              v-if="filterKeyword !== ''"
              name="clear"
              class="cursor-pointer"
              @click="resetFilter"
            />
          </template>
        </q-input>

        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="$q.lang.table.columns"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          options-cover
          style="min-width: 150px"
          class="col-xs-12 col-sm-3 col-md-2"
        />
      </div>
      <div class="col-12">
        <d-table
          ref="table"
          :columns="columns"
          :rows="rows"
          :filter="filterKeyword"
          row-key="Order"
          flat
          bordered
          :paging="true"
          dense
          class="custom-header-table"
          v-bind="attrs"
          :visible-columns="visibleColumns"
          :pagination-label="paginationLabel"
          v-model:pagination="pagination"
          :rows-per-page-options="[10, 25, 50, 100]"
          @update:pagination="updatePagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <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">
              <q-td auto-width>
                <q-btn
                  v-if="checkPermission($route)?.attrIsGet"
                  flat
                  dense
                  round
                  color="info"
                  icon="mdi-eye"
                  @click="
                    router.push(`/probation/detail/${props.row.personal_id}`)
                  "
                >
                  <q-tooltip>รายละเอียด</q-tooltip>
                </q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'no'">
                  {{
                    (pagination.page - 1) * pagination.rowsPerPage +
                    props.rowIndex +
                    1
                  }}
                </div>
                <div v-else-if="col.name == 'order_number'">
                  {{
                    props.row.order_number
                      ? props.row.order_number != "xx/2566"
                        ? props.row.order_number
                        : "-"
                      : "-"
                  }}
                </div>
                <div v-else-if="col.name == 'probation_status'">
                  {{
                    props.row.probation_status
                      ? statusProbationMain(props.row.probation_status)
                      : "-"
                  }}
                </div>

                <div v-else>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="scope">
            ทั้งหมด {{ total }} รายการ
            <q-pagination
              v-model="pagination.page"
              active-color="primary"
              color="dark"
              :max="Number(totalList)"
              size="sm"
              boundary-links
              direction-links
              :max-pages="5"
              @update:model-value="getpersonalList"
            ></q-pagination>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
    <q-card style="width: 900px; max-width: 80vw">
      <q-form ref="myForm">
        <DialogHeader
          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-pa-md q-col-gutter-sm">
          <q-input
            class="col-12"
            standout
            dense
            v-model="formProbation.keyword"
            ref="filterRef2"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
          >
            <template v-slot:append>
              <q-icon v-if="filterKeyword2 == ''" name="search" />
              <q-icon
                v-if="filterKeyword2 !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter2"
              />
            </template>
          </q-input>
          <div class="col-12">
            <d-table
              ref="table2"
              :columns="columns2"
              :rows="rows2"
              row-key="Order"
              flat
              bordered
              :paging="true"
              dense
              class="custom-header-table"
              v-bind="attrs"
              :pagination-label="paginationLabel2"
              v-model:pagination="pagination2"
              @update:pagination="updatePagination"
              :rows-per-page-options="[10, 25, 50, 100]"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th auto-width />
                  <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">
                  <q-td auto-width>
                    <q-btn
                      dense
                      class="q-px-md"
                      outline
                      color="primary"
                      label="เพิ่ม"
                      @click="clickAdd(props.row)"
                    >
                    </q-btn>
                  </q-td>
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div v-if="col.name == 'no'">
                      {{
                        (formProbation.page - 1) * formProbation.pageSize +
                        props.rowIndex +
                        1
                      }}
                    </div>

                    <div v-else-if="col.name == 'fullname'">
                      {{
                        (props.row.prefix ? props.row.prefix : "") +
                        props.row.firstName +
                        "  " +
                        props.row.lastName
                      }}
                    </div>
                    <div v-else-if="col.name == 'status'" class="text-center">
                      <q-icon
                        v-if="props.row.isProbation === true"
                        name="mdi-check"
                        color="positive"
                        size="sm"
                      />
                    </div>
                    <div
                      v-else-if="col.name == 'organizationOrganization'"
                      class="table_ellipsis"
                    >
                      <div
                        v-if="
                          props.row.orgChild4Name === null &&
                          props.row.orgChild3Name === null &&
                          props.row.orgChild2Name === null &&
                          props.row.orgChild1Name === null &&
                          props.row.orgRootName === null
                        "
                      >
                        -
                      </div>
                      {{
                        `${
                          props.row.orgChild4Name
                            ? props.row.orgChild4Name + "/"
                            : ""
                        }${
                          props.row.orgChild3Name
                            ? props.row.orgChild3Name + "/"
                            : ""
                        }${
                          props.row.orgChild2Name
                            ? props.row.orgChild2Name + "-"
                            : ""
                        }${
                          props.row.orgChild1Name
                            ? props.row.orgChild1Name + "/"
                            : ""
                        }${props.row.orgRootName ? props.row.orgRootName : ""}`
                      }}
                    </div>
                    <div v-else>
                      {{ col.value ? col.value : "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
              <template v-slot:pagination="scope">
                <q-pagination
                  v-model="formProbation.page"
                  active-color="primary"
                  color="dark"
                  :max="maxPage"
                  size="sm"
                  boundary-links
                  direction-links
                  :max-pages="5"
                ></q-pagination>
              </template>
            </d-table>
          </div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>

  <DialogOrder v-model:modal="modalCommand" />
</template>