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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

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

import type { QTableProps } from "quasar";
import type { OpfillterTypeSt } from "@/modules/05_placement/interface/request/Main";
import type {
  ResListProbation,
  ResProfileProbation,
} from "@/modules/05_placement/interface/response/Probation";

import DialogHeader from "@/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 router = useRouter();
const { statusProbationMain } = storeFn;
const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
const { pagination, params, onRequest } = usePagination(
  "",
  fetchProbationPersonalList
);
const {
  pagination: pagination2,
  params: params2,
  onRequest: onRequest2,
} = usePagination("", onclickAddProbation);

const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
const modal = ref<boolean>(false);
const fillterStatus = ref<ResListProbation[]>([]);
const fillter = ref<string>("");
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const rows = ref<ResListProbation[]>([]);
const rows2 = ref<ResProfileProbation[]>([]);
const dataUpdate = ref<ResListProbation[]>([]);
const Opfillter = ref<OpfillterTypeSt[]>([]);
const Opfillter2 = ref<OpfillterTypeSt[]>([]);

const modalAdd = ref<boolean>(false); //เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ
const personId = ref<string>(""); //เก็บ id คน ตาม row
const topic = ref<string>(
  "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
);

/** columns ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ */
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;min-width: 250px",
    style: "font-size: 14px ",
    classes: "table_ellipsis",
  },
  {
    name: "probation_no",
    align: "center",
    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: false,
    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: "left",
    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: false,
    field: "probation_status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "name",
  "position_line",
  "position_level",
  "organization",
  "probation_no",
  "order_number",
  "probation_status",
]);

/** columns หัวตารางเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ */
const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "firstName",
    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: "orgRootName",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "orgRootName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: false,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "commandNo",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
    field: "commandNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ*/
async function fetchProbationPersonalList() {
  showLoader();
  await http
    .get(config.API.probationPersonalList(), {
      params: {
        ...params.value,
        status: !fillter.value ? "" : fillter.value,
        keyword: filterKeyword.value.trim(),
      },
    })
    .then(async (res) => {
      const result = await res.data.result;
      pagination.value.rowsNumber = result.total;
      rows.value = result.data;
      fillterStatus.value = result.data;
      dataUpdate.value = result.data;

      // option  filter
      Opfillter.value = storeFn.optionStatusProbation;
      Opfillter2.value = storeFn.optionStatusProbation;
    })
    .catch((e) => {
      messageError($q, e);
      rows.value = [];
    })
    .finally(() => {
      hideLoader();
    });
}

/* ฟังก์ชันดึงข้อมูลเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ*/
async function onclickAddProbation() {
  modal.value = true;
  modal.value && showLoader();
  await http
    .post(config.API.orgProfileProbation, {
      ...params2.value,
      keyword: filterKeyword2.value.trim(),
    })
    .then((res) => {
      const result = res.data.result;
      pagination2.value.rowsNumber = result.total;
      rows2.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
      rows2.value = [];
    })
    .finally(() => {
      hideLoader();
    });
}

function filterKeyword2Fn() {
  pagination2.value.page = 1;
  onclickAddProbation();
}

/**
 * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
 * @param data personal data
 */
function addPersonalData(data: ResProfileProbation) {
  dialogConfirm(
    $q,
    async () => {
      try {
        showLoader();
        // ส่งข้อมูลด้วย POST
        await http.post(config.API.personalAdd(), {
          id: data.id,
          prefix: data.prefix,
          rank: data.rank,
          firstName: data.firstName,
          lastName: data.lastName,
          position: data.position,
          idcard: data.idcard,
          order_number: data.commandNo ? data.commandNo : "",
          posLevelName: data.posLevelName,
          posTypeName: data.posTypeName,
          posNo: data.posNo,
          positionField: data.positionField,
          positionArea: data.positionArea,
          posExecutiveName: data.posExecutiveName,
          positionExecutiveField: data.positionExecutiveField,
          isProbation: data.isProbation,
          orgRootName: data.orgRootName,
          orgChild1Name: data.orgChild1Name,
          orgChild2Name: data.orgChild2Name,
          orgChild3Name: data.orgChild3Name,
          orgChild4Name: data.orgChild4Name,
          root: data.root,
          child1: data.orgChild1,
          child2: data.orgChild2,
          child3: data.orgChild3,
          child4: data.orgChild4,
          rootDna: data.rootDna,
          orgChild1Dna: data.orgChild1Dna,
          orgChild2Dna: data.orgChild2Dna,
          orgChild3Dna: data.orgChild3Dna,
          orgChild4Dna: data.orgChild4Dna,
        });

        // ถ้าการเพิ่มข้อมูลสำเร็จ, อัปเดตสถานะของข้อมูล
        await http.get(config.API.orgProfileStatus(data.id));

        // รีเฟรชข้อมูล
        await fetchProbationPersonalList();
        await onCloseDialog();

        success($q, "เพิ่มข้อมูลสำเร็จ");
      } catch (err) {
        messageError($q, err);
      } finally {
        hideLoader();
      }
    },
    "ยืนยันการเพิ่มข้อมูล",
    "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
  );
}

/** ปิด dialog */
async function onCloseDialog() {
  modal.value = false;
}

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

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

/** ฟังก์ชันยืนยันการเพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ*/
function onSubmitAdd() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.appointMain, {
        profileId: personId.value,
        topic: topic.value,
      })
      .then((res) => {
        if (res) {
          closeAdd();
          router.push(`/probation/assign/${res.data.result}`);
        }
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
function onAdd(id: string) {
  modalAdd.value = true;
  personId.value = id;
}

/** ปิด popup แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ */
function closeAdd() {
  modalAdd.value = false;
  personId.value = "";
  topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
  rows2.value = [];
  filterKeyword2.value = "";
  pagination2.value = {
    page: 1,
    rowsNumber: 0,
    rowsPerPage: 10,
    sortBy: "",
    descending: false,
  };
}

function getSearchMain() {
  pagination.value.page = 1;
  fetchProbationPersonalList();
}

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

<template>
  <q-card flat>
    <div class="row q-col-gutter-sm">
      <div class="row col-12 q-col-gutter-sm">
        <div class="row">
          <q-select
            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="getSearchMain()"
            @filter="filterFn"
            use-input
            hide-selected
            fill-input
            behavior="menu"
            style="width: 400px"
            :clearable="fillter !== ''"
            @clear="fillter = ''"
          >
            <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="primary"
              icon="mdi-plus"
            >
              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
            </q-btn>
          </div>
          <div>
            <q-btn
              v-if="
                checkPermission($route)?.attrIsUpdate &&
                checkPermission($route)?.attrIsGet &&
                checkPermissionList(['COMMAND']) &&
                checkPermissionCreate('COMMAND')
              "
              @click="onCommand"
              flat
              round
              color="primary"
              icon="mdi-account-arrow-right"
            >
              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
            </q-btn>
          </div>
        </div>

        <q-space />

        <q-input
          standout
          dense
          v-model="filterKeyword"
          outlined
          placeholder="ค้นหา"
          @keydown.enter.prevent="getSearchMain()"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </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"
          style="min-width: 140px"
        />
      </div>
      <div class="col-12">
        <p-table
          :columns="columns"
          :rows="rows"
          row-key="personal_id"
          flat
          bordered
          :paging="true"
          dense
          class="custom-header-table"
          :visible-columns="visibleColumns"
          :rows-per-page-options="[10, 25, 50, 100]"
          @request="onRequest"
          v-model:pagination="pagination"
        >
          <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-btn
                  v-if="checkPermission($route)?.attrIsCreate"
                  @click="onAdd(props.row.personal_id)"
                  flat
                  round
                  color="blue"
                  icon="mdi-account-supervisor"
                >
                  <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'">
                  {{ 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-if="col.name == 'organization'" class="text-html">
                  {{ props.row.organization ? props.row.organization : "-" }}
                </div>

                <div v-else>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </p-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 75%">
      <q-form ref="myForm">
        <DialogHeader
          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
          :close="onCloseDialog"
        />
        <q-separator />
        <q-card-section class="q-pa-md q-col-gutter-sm">
          <q-input
            class="col-12"
            standout
            dense
            v-model="filterKeyword2"
            outlined
            placeholder="ค้นหา"
            @keydown.enter.prevent="filterKeyword2Fn()"
          >
            <template v-slot:append>
              <q-icon v-if="filterKeyword2 == ''" name="search" />
              <q-icon
                v-if="filterKeyword2 !== ''"
                name="clear"
                class="cursor-pointer"
              />
            </template>
          </q-input>
          <div class="col-12">
            <p-table
              ref="table2"
              :columns="columns2"
              :rows="rows2"
              row-key="Order"
              flat
              bordered
              :paging="true"
              dense
              class="custom-header-table"
              v-model:pagination="pagination2"
              :rows-per-page-options="[10, 25, 50, 100]"
              @request="onRequest2"
            >
              <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="addPersonalData(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'">
                      {{ props.rowIndex + 1 }}
                    </div>

                    <div v-else-if="col.name == 'firstName'">
                      {{
                        (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 == 'orgRootName'"
                      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-if="col.name == 'commandNo'">
                      {{
                        props.row.commandNo
                          ? props.row.commandNo != "xx/2566"
                            ? props.row.commandNo
                            : "-"
                          : "-"
                      }}
                    </div>
                    <div v-else>
                      {{ col.value ? col.value : "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </p-table>
          </div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalAdd" persistent>
    <q-card style="width: 90%; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
        <DialogHeader
          tittle="เพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
          :close="closeAdd"
        />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                dense
                outlined
                label="หัวข้อ"
                v-model="topic"
                class="inputgreen"
              ></q-input>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

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