hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { QTableProps } from "quasar";
import type { Director } from "@/modules/11_discipline/interface/request/disciplinary";
import type { Directors } from "@/modules/12_evaluatePersonal/interface/response/Main";

/** importComponents*/
import DialogDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/DialogDirector.vue";

/**use*/
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  fetchData: {
    type: Function,
    default: () => "",
  },
});

const id = ref<string>(route.params.id as string);

/** Table กรรมการ */
const rows = ref<Director[]>([]);
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",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "email",
    align: "left",
    label: "อีเมล",
    sortable: true,
    field: "email",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "phone",
    align: "left",
    label: "เบอร์โทรศัพท์",
    sortable: true,
    field: "phone",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

//เลือกรายชื่อกรรมการ
const modalAddDirector = ref<boolean>(false); // popup เพิ่มรายชื่อกรรมการ
const filter = ref<string>(""); //ค้นหารายชื่อกรรมการ
const page = ref<number>(1); //หน้า
const rowsPerPage = ref<number>(10); //จำนวนต่อหน้า
const maxPage = ref<number>(1); //จำนนวนหน้าทั้งหมด
const listDirector = ref<Directors[]>([]); //รายชื่อกรรมการ

/**
 * ฟังก์เปิด popup เพิ่มรายชื่อกรรมการ
 */
async function onClickAdd() {
  modalAddDirector.value = true;
  getList();
}

/**
 * ฟังก์ปิด popup เพิ่มรายชื่อกรรมการ
 */
function onClickClose() {
  modalAddDirector.value = false;
}

/**
 * function อัดเดท Paging กรรมการ
 * @param rpp ต่อหน้า
 * @param p หน้า
 */
async function updatePaging(rpp: number, p: number) {
  page.value = p;
  rowsPerPage.value = rpp;
}

/**
 * function return รายชื่อกรรมการที่เลือก
 * @param data รายชื่อกรรมการที่เลือก
 */
function returnDirector(data: Directors[]) {
  const dataList = data.map((item: Directors) => item.id);
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.evaluationChooseDirectors(id.value), {
        directors: dataList,
      })
      .then(async () => {
        await props.fetchData();
        await success($q, "บันทึกสำเร็จ");
        onClickClose();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function เรียกรายชื่อกรรมการ
 */
async function getList() {
  showLoader();
  await http
    .get(config.API.evaluateDirectorMain() + `/admin`)
    .then(async (res) => {
      const data = await res.data.result;
      listDirector.value = data.map((item: Directors) => ({
        id: item.id,
        name: `${item.prefix}${item.firstName} ${item.lastName}`,
        createdAt: item.createdAt,
        createdUserId: item.createdUserId,
        lastUpdatedAt: item.lastUpdatedAt,
        lastUpdateUserId: item.lastUpdateUserId,
        createdFullName: item.createdFullName,
        lastUpdateFullName: item.lastUpdateFullName,
        prefix: item.prefix,
        firstName: item.firstName,
        lastName: item.lastName,
        phone: item.phone == "" ? "-" : item.phone,
        email: item.email == "" ? "-" : item.email,
        position: item.position == "" ? "-" : item.position,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ทำงานเมื่อ props.data มีการเปลี่ยนแปลง
 */
watch(
  () => props.data,
  () => {
    if (props.data) {
      rows.value = props.data.map((item: any) => ({
        id: item.id,
        name: `${item.prefix}${item.firstName} ${item.lastName}`,
        prefix: item.prefix,
        firstName: item.firstName,
        lastName: item.lastName,
        phone: item.phone == "" ? "-" : item.phone,
        email: item.email == "" ? "-" : item.email,
        position: item.position == "" ? "-" : item.position,
        positionName: item.positionName == "-" ? "-" : item.positionName,
      }));
    }
  }
);
</script>

<template>
  <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
    <div
      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
    >
      กรรมการ
      <q-btn
        v-if="checkPermission($route)?.attrIsUpdate"
        size="12px"
        flat
        round
        dense
        color="primary"
        class="q-ml-sm"
        icon="mdi-plus"
        @click="onClickAdd"
      >
        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="col-12 q-pa-sm row">
      <d-table
        ref="table"
        flat
        bordered
        dense
        class="col-12"
        :columns="columns"
        :rows="rows"
        row-key="id"
        :paging="true"
      >
        <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">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
              <div>
                {{ col.value }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </q-card>

  <DialogDirector
    @update:pagination="updatePaging"
    @return-director="returnDirector"
    v-model:Modal="modalAddDirector"
    v-model:filter-keyword2="filter"
    :click-close="onClickClose"
    :rows2="listDirector"
    :rows-per-page="rowsPerPage"
    :page="page"
    :max-page="maxPage"
    :selected-row="rows"
  />
</template>

<style scoped></style>