hrms-mgt/src/modules/02_organizationalNew/components/DialogSelectPerson.vue

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

import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import DialogHeader from "@/components/DialogHeader.vue";
import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational";
import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
import type {
  OptionType,
  OptionExecutive,
  OptionLevel,
} from "@/modules/02_organizationalNew/interface/response/organizational";
interface FormDetailPosition {
  positionNo: string;
  positionType: string;
  positionLevel: string;
  personal: string;
  position: string;
  status: string;
}

interface SeaechResult {
  id: string;
  citizenId: string;
  name: string;
  posTypeName: string;
  posLevelName: string;
}

const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const isDisValidate = ref<boolean>(false);
const executiveOpsMain = ref<DataOption[]>([]);
const typeOpsMain = ref<DataOption[]>([]);
const levelOpsMain = ref<DataOption[]>([]);
const typeOps = ref<DataOption[]>([]);
const levelOps = ref<DataOption[]>([]);
const dataLevel = ref<any>();
const executiveOps = ref<DataOption[]>([]);
const store = useOrganizational();
const $q = useQuasar();
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
// const modal = ref<boolean>(true);

const props = defineProps({
  fetchActive: {
    type: Function,
    require: true,
  },
  dataDetailPos: { type: Object, require: true },
});
const row = ref<Position[]>([]);
const rowResult = ref<SeaechResult[]>([]);
const formData = reactive<FormDetailPosition>({
  positionNo: "", //*เลขที่ตำแหน่ง
  positionType: "", //*เลขที่ตำแหน่ง
  positionLevel: "", //*เลขที่ตำแหน่ง
  personal: "", //*เลขที่ตำแหน่ง
  position: "", //*เลขที่ตำแหน่ง
  status: "",
});

const visibleColumnsResult = ref<String[]>([
  "no",
  "citizenId",
  "name",
  "posTypeName",
  "posLevelName",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "positionName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionField",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posTypeName",
    align: "left",
    label: "ประเภทตำเเหน่ง",
    sortable: true,
    field: "posTypeName",
    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",
  },
  {
    name: "posExecutiveName",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "posExecutiveName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionExecutiveField",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveField",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionArea",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "positionArea",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const columnsResult = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขบัตรประชาชน",
    sortable: true,
    field: "citizenId",
    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: "posTypeName",
    align: "left",
    label: "ประเภทตำเเหน่ง",
    sortable: true,
    field: "posTypeName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionName",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "positionName",
    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",
  },
]);

function close() {
  modal.value = false;
}

async function fetchType() {
  showLoader();
  await http
    .get(config.API.orgPosType)
    .then((res) => {
      dataLevel.value = res.data.result;
      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
        id: e.id,
        name: e.posTypeName,
      }));
      typeOps.value = typeOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกรายการตำแหน่งทางการบริหาร */
async function fetchExecutive() {
  showLoader();
  await http
    .get(config.API.orgPosExecutive)
    .then((res) => {
      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
        id: e.id,
        name: e.posExecutiveName,
      }));
      executiveOps.value = executiveOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ส่งค่า css ออกไปตามเงื่อนไข
 * @param val true/false
 */
function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer inputgreen ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

function clearForm() {
  formData.positionType = "";
  formData.positionLevel = "";
  formData.personal = "";
  formData.position = "";
  row.value = []
  rowResult.value = []
}

watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      clearForm();
      fetchType();
      fetchExecutive();

      if (props.dataDetailPos) {
        formData.positionNo = props.dataDetailPos.posMasterNo;
        formData.status =
          store.typeOrganizational === "current"
            ? "ปกติ"
            : store.typeOrganizational === "draft"
            ? "แบบร่าง"
            : "ยุบเลิก";
        row.value = props.dataDetailPos.positions.map((e: Position) => ({
          ...e,
          positionName: e.positionName ? e.positionName : "-",
          positionField: e.positionField ? e.positionField : "-",
          posTypeName: e.posTypeName ? e.posTypeName : "-",
          posLevelName: e.posLevelName ? e.posLevelName : "-",
          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
          positionExecutiveField: e.positionExecutiveField
            ? e.positionExecutiveField
            : "-",
          positionArea: e.positionArea ? e.positionArea : "-",
        }));
      }
    }
  }
);

function updateSelectType(val: string) {
  const listLevel = dataLevel.value.find((e: any) => e.id === val);
  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
    id: e.id,
    name: e.posLevelName,
  }));
  levelOps.value = levelOpsMain.value;
  formData.positionLevel = "";
}

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
  // const hasError = [];
  // for (const key in objectRef) {
  //   if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
  //     const property = objectRef[key];
  //     if (property.value && typeof property.value.validate === "function") {
  //       const isValid = property.value.validate();
  //       hasError.push(isValid);
  //     }
  //   }
  // }
  // if (hasError.every((result) => result === true)) {
  onSubmit();
  // } else {
  // }
}

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm(
    $q,
    () => {
      // showLoader();
      // http
      //   .post(config.API.createOrganization, formData)
      //   .then((res) => {
      //     status.value = true;
      //     store.typeOrganizational = "draft";
      //     store.draftId = res.data.result.id;
      //     success($q, "บันทึกข้อมูลสำเร็จ");
      //     // props.fetchActive?.();
      //   })
      //   .catch((err) => {
      //     messageError($q, err);
      //   })
      //   .finally(async () => {
      //     modal.value = await false;
      //     await close();
      //     await hideLoader();
      //   });
    },
    "ยืนยันการเลือกคนครอง",
    "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
  );
}

/** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
function searchData() {
  const data = [
    {
      id: "test1",
      citizenId: "test1",
      name: "test1",
      posTypeName: "test1",
      positionName: "test1",
      posLevelName: "test1",
    },
    {
      id: "test2",
      citizenId: "test2",
      name: "test2",
      posTypeName: "test2",
      positionName: "test2",
      posLevelName: "test2",
    },
  ];

  rowResult.value = data;
  // props.fetchListDisciplinary?.();
}

function clearPosition() {
  formData.positionType = "";
  formData.positionLevel = "";
}
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 80vw">
      <form @submit.prevent="validateForm">
        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
        <q-separator />

        <q-card-section>
          <div class="q-px-md">
            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="text-bold text-body1">
                <p>เลขที่ตำแหน่ง</p>
              </div>
              <div class="text-grey-8 q-ml-sm text-body1">
                <p>{{ formData.positionNo }}</p>
              </div>
            </div>

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-12">
                <d-table
                  flat
                  :columns="columns"
                  :rows="row"
                  row-key="id"
                  dense
                  hide-pagination
                  class="custom-header-table"
                >
                  <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">
                      <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>
                          {{ col.value }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                </d-table>
              </div>
            </div>
            <div class="row q-col-gutter-sm q-mt-sm">
              <div class="col-2">
                <q-input
                  ref="positionExecutiveFieldRef"
                  v-model="formData.personal"
                  :class="inputEdit(isReadonly)"
                  dense
                  outlined
                  for="#search"
                  label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
                  lazy-rules
                  hide-bottom-space
                />
              </div>
              <div class="col-2">
                <q-input
                  ref="positionRef"
                  v-model="formData.position"
                  :class="inputEdit(isReadonly)"
                  dense
                  outlined
                  for="#position"
                  label="ตำแหน่งในสายงาน"
                  lazy-rules
                  hide-bottom-space
                />
              </div>
              <div class="col-2">
                <q-select
                  ref="positionTypeRef"
                  :class="inputEdit(isReadonly)"
                  label="ประเภทตำแหน่ง"
                  v-model="formData.positionType"
                  :options="typeOps"
                  emit-value
                  dense
                  @update:model-value="updateSelectType"
                  map-options
                  outlined
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="
                    !isDisValidate
                      ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
                      : []
                  "
                  ><template v-if="formData.positionType" v-slot:append>
                    <q-icon
                      name="cancel"
                      @click.stop.prevent="clearPosition()"
                      class="cursor-pointer"
                    /> </template
                ></q-select>
              </div>
              <div class="col-2">
                <q-select
                  
                  ref="positionLevelRef"
                  :class="inputEdit(isReadonly)"
                  label="ระดับตำแหน่ง"
                  v-model="formData.positionLevel"
                  :disable="formData.positionType == ''"
                  :options="levelOps"
                  emit-value
                  dense
                  map-options
                  outlined
                  option-label="name"
                  option-value="id"
                  lazy-rules
                  hide-bottom-space
                  :rules="
                    !isDisValidate
                      ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
                      : []
                  "
                >
                  <template v-if="formData.positionLevel" v-slot:append>
                    <q-icon
                      name="cancel"
                      @click.stop.prevent="formData.positionLevel = ''"
                      class="cursor-pointer"
                    /> </template
                ></q-select>
              </div>
              <div class="col-2">
                <q-btn 
                label="ค้นหา"
                color="teal-5"
                class="full-height"
                icon="search"
                @click="searchData"
                />
              </div>

              <q-select
                for="#select"
                v-model="visibleColumnsResult"
                multiple
                outlined
                dense
                options-dense
                :display-value="$q.lang.table.columns"
                emit-value
                map-options
                :options="columnsResult"
                option-value="name"
                options-cover
                style="min-width: 150px"
                class="col-xs-12 col-sm-3 col-md-2"
              />
              <div class="col-12">
                <d-table
                  flat
                  :columns="columnsResult"
                  :rows="rowResult"
                  row-key="id"
                  dense
                  hide-pagination
                  class="custom-header-table"
                >
                  <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">
                      <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>
                          {{ col.value }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                </d-table>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn type="submit" :label="`ยืนยัน`" color="public" />
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>
<style scoped></style>