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

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
  FormDataPosition,
  FormPositionRef,
  DataOption,
  FormPositionSelect,
  RowDetailPositions,
  ListMenu,
} from "@/modules/02_organizationalNew/interface/index/Main";

const props = defineProps({
  modal: Boolean,
  close: Function,
});

const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const selected = ref<any>([]);
const search = ref<string>("");
const type = ref<string>("positionName");
const typeOps = ref<DataOption[]>([
  { id: "positionName", name: "ตำแหน่งในสายงาน" },
  { id: "positionField", name: "สายงาน" },
  { id: "positionType", name: "ประเภทตำแหน่ง" },
  { id: "positionLevel", name: "ระดับตำแหน่ง" },
  { id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
  { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
  { id: "positionArea", name: "ด้าน/สาขา" },
]);

const listMenu = ref<ListMenu[]>([
  {
    label: "คัดลอก",
    icon: "mdi-content-copy",
    type: "copy",
    color: "blue-6",
  },
  {
    label: "แก้ไข",
    icon: "edit",
    type: "edit",
    color: "primary",
  },
  {
    label: "ลบ",
    icon: "delete",
    type: "remove",
    color: "red",
  },
]);

const rows = ref<RowDetailPositions[]>([]);
const rowsPositionSelect = ref<RowDetailPositions[]>([]);
const ocLevelOp = ref<DataOption[]>([]);

const prefixNoRef = ref<Object | null>(null);
const positionNoRef = ref<Object | null>(null);

const formData = reactive<FormDataPosition>({
  shortName: "สกจ.",
  prefixNo: "",
  positionNo: "",
  suffixNo: "",
  confirm: false,
});

const formPositionSelect = reactive<FormPositionSelect>({
  positionId: "",
  positionName: "",
  positionField: "",
  positionType: "",
  positionLevel: "",
  positionExecutive: "",
  positionExecutiveField: "",
  positionArea: "",
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectPositionRef: FormPositionRef = {
  prefixNo: prefixNoRef,
  positionNo: positionNoRef,
};

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: "positionType",
    align: "left",
    label: "ประเภทตำเเหน่ง",
    sortable: true,
    field: "positionType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับตำแหน่ง",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionExecutive",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "positionExecutive",
    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 visibleColumns = ref<string[]>([
  "no",
  "positionName",
  "positionField",
  "positionType",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveField",
  "positionArea",
]);

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

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm($q, () => {
    console.log(formData);
  });
}
/** ฟังชั่น บันทึก */
function onSubmitSelectEdit() {
  dialogConfirm(
    $q,
    () => {
      console.log(formPositionSelect);
    },
    "ยืนยันการเพิ่มตำแหน่ง",
    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
  );
}

/** update เมื่อเปลี่ยน option */
function updateSelect() {
  search.value = "";
}

/** input ค้นหา */
const searchRef = ref<any>(null);
async function searchInput() {
  searchRef.value.validate();
  if (!searchRef.value.hasError) {
    // จำลอง
    const dataList = [
      {
        positionId: "x1",
        positionName: "นักกายภาพบำบัด",
        positionField: "จัดการงานทั่วไป",
        positionType: "วิชาการ",
        positionLevel: "ชำนาญการ",
        positionExecutive: "การพยาบาลทั่วไป",
        positionExecutiveField: "การพยาบาลทั่วไป",
        positionArea: "การพยาบาลทั่วไป",
      },
      {
        positionId: "x2",
        positionName: "นักทรัพยากรบุคคล",
        positionField: "จัดการงานทั่วไป",
        positionType: "ทั่วไป",
        positionLevel: "ชำนาญการ",
        positionExecutive: "-",
        positionExecutiveField: "-",
        positionArea: "-",
      },
      {
        positionId: "x3",
        positionName: "นักทรัพยากรบุคคล",
        positionField: "จัดการงานทั่วไป",
        positionType: "วิชาการ",
        positionLevel: "ชำนาญการพิเศษ",
        positionExecutive: "-",
        positionExecutiveField: "-",
        positionArea: "-",
      },
    ];
    rowsPositionSelect.value = dataList;
  }
}

/**
 * คัดลอกข้อมูล
 * @param data ข้อมูลตำแหน่ง
 */
function copyDetiail(data: RowDetailPositions) {
  formPositionSelect.positionId = data.positionId;
  formPositionSelect.positionName = data.positionName;
  formPositionSelect.positionField = data.positionField;
  formPositionSelect.positionType = data.positionType;
  formPositionSelect.positionLevel = data.positionLevel;
  formPositionSelect.positionExecutive = data.positionExecutive;
  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
  formPositionSelect.positionArea = data.positionArea;
}

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

watch(
  () => props.modal,
  () => {
    if (props.modal === true) {
    }
  }
);

function addPosition(data: RowDetailPositions) {
  const isIdExist = rows.value.some(
    (item) => item.positionId === data.positionId
  );

  if (!isIdExist) {
    rows.value = [data, ...rows.value];
  }
}

function deleteData(id: string) {
  const dataRow = rows.value;
  const updatedRows = dataRow.filter((item: any) => item.positionId !== id);
  rows.value = updatedRows;
}
</script>
<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 96vw">
        <DialogHeader tittle="เพิ่มอัตรากำลัง" :close="props.close" />
        <q-separator />

        <q-card-section class="q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <form @submit.prevent="validateForm">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    ข้อมูลอัตรากำลัง
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
                    <div class="col-3">
                      <q-input
                        v-model="formData.shortName"
                        dense
                        outlined
                        readonly
                        for="#shortName"
                        label="อักษรย่อ"
                      />
                    </div>
                    <div class="col-3">
                      <q-input
                        v-model="formData.prefixNo"
                        :class="inputEdit(isReadonly)"
                        ref="prefixNoRef"
                        dense
                        outlined
                        for="#prefixNo"
                        label="Prefix เลขที่ตำเเหน่ง"
                      />
                    </div>
                    <div class="col-3">
                      <q-input
                        v-model="formData.positionNo"
                        :class="inputEdit(isReadonly)"
                        ref="positionNoRef"
                        dense
                        outlined
                        for="#positionNo"
                        label="เลขที่ตำแหน่ง"
                        lazy-rules
                        hide-bottom-space
                        :rules="[
                          (val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`,
                        ]"
                      />
                    </div>
                    <div class="col-3">
                      <q-input
                        v-model="formData.suffixNo"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#suffixNo"
                        label="Suffix เลขที่ตำแหน่ง"
                      />
                    </div>
                    <div class="col-12">
                      <d-table
                        ref="table"
                        :columns="columns"
                        :rows="rows"
                        row-key="idcard"
                        flat
                        bordered
                        :paging="true"
                        dense
                        class="custom-header-table"
                        :visible-columns="visibleColumns"
                      >
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th
                              v-for="col in props.cols"
                              :key="col.name"
                              :props="props"
                              style="color: #000000; font-weight: 500"
                            >
                              <span class="text-weight-medium">{{
                                col.label
                              }}</span>
                            </q-th>
                            <q-th auto-width></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-td auto-width>
                              <q-btn
                                flat
                                dense
                                icon="mdi-delete"
                                class="q-pa-none q-ml-xs"
                                color="red"
                                @click="deleteData(props.row.positionId)"
                              >
                                <q-tooltip>ลบข้อมูล</q-tooltip>
                              </q-btn>
                            </q-td>
                          </q-tr>
                        </template>
                      </d-table>
                    </div>
                    <div class="col-12 q-mt-sm">
                      <q-checkbox
                        dense
                        v-model="formData.confirm"
                        label="ไม่ผูกกับตำแหน่งก่อนหน้า"
                        color="teal"
                      />
                    </div>
                  </div>
                  <q-separator />
                  <q-card-actions
                    align="right"
                    class="bg-white text-teal q-pa-xs"
                  >
                    <q-btn type="submit" :label="`บันทึก`" color="public" />
                  </q-card-actions>
                </q-card>
              </form>
            </div>
          </div>

          <div class="row q-col-gutter-sm q-mt-sm">
            <div class="col-7">
              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
                <div
                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                >
                  เลือกตำแหน่ง
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="q-pa-sm">
                  <div class="row col-12 q-col-gutter-sm items-start">
                    <div class="col-12 col-sm-6 col-md-3">
                      <q-select
                        label="ค้นหาจาก"
                        v-model="type"
                        :options="typeOps"
                        emit-value
                        dense
                        @update:model-value="updateSelect"
                        map-options
                        outlined
                        option-label="name"
                        option-value="id"
                      />
                    </div>

                    <div class="col-12 col-sm-6 col-md-6">
                      <q-input
                        ref="searchRef"
                        :class="inputEdit(isReadonly)"
                        v-model="search"
                        outlined
                        clearable
                        dense
                        lazy-rules
                        label="คำค้น"
                        hide-bottom-space
                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
                      />
                    </div>

                    <div class="col-12 col-sm-6 col-md-3">
                      <q-btn
                        color="primary"
                        icon="search"
                        label="ค้นหา"
                        class="full-width q-pa-sm"
                        @click="searchInput()"
                      >
                      </q-btn>
                    </div>
                  </div>

                  <div class="full-width q-mt-sm">
                    <d-table
                      ref="table"
                      :columns="columns"
                      :rows="rowsPositionSelect"
                      row-key="positionId"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="visibleColumns"
                    >
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th
                            v-for="col in props.cols"
                            :key="col.name"
                            :props="props"
                            style="color: #000000; font-weight: 500"
                          >
                            <span class="text-weight-medium">{{
                              col.label
                            }}</span>
                          </q-th>
                          <q-th auto-width></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"
                            @click="addPosition(props.row)"
                          >
                            <div v-if="col.name == 'no'">
                              {{ props.rowIndex + 1 }}
                            </div>
                            <div v-else>
                              {{ col.value }}
                            </div>
                          </q-td>
                          <q-td auto-width>
                            <q-btn
                              flat
                              dense
                              icon="mdi-dots-vertical"
                              class="q-pa-none q-ml-xs"
                              color="grey-13"
                            >
                              <q-menu anchor="bottom middle" self="top middle">
                                <q-list
                                  dense
                                  v-for="(item, index) in listMenu"
                                  :key="index"
                                >
                                  <q-item
                                    clickable
                                    v-close-popup
                                    @click="
                                      item.type === 'copy'
                                        ? copyDetiail(props.row)
                                        : ''
                                    "
                                  >
                                    <q-item-section avatar>
                                      <q-icon
                                        :color="item.color"
                                        :name="item.icon"
                                        size="sm"
                                      />
                                    </q-item-section>
                                    <q-item-section>{{
                                      item.label
                                    }}</q-item-section>
                                  </q-item>
                                </q-list>
                              </q-menu>
                            </q-btn>
                          </q-td>
                        </q-tr>
                      </template>
                    </d-table>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-5">
              <form @submit.prevent="validateFormPositionEdit">
                <q-card
                  bordered
                  class="col-12"
                  style="border: 1px solid #d6dee1"
                >
                  <div
                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                  >
                    เพิ่มข้อมูลตำแหน่ง
                  </div>
                  <div class="col-12"><q-separator /></div>
                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
                    <div class="col-6">
                      <q-input
                        v-model="formPositionSelect.positionName"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionName"
                        label="ตำแหน่งในสายงาน"
                      />
                    </div>
                    <div class="col-6">
                      <q-input
                        v-model="formPositionSelect.positionField"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionField"
                        label="สายงาน"
                      />
                    </div>
                    <div class="col-6">
                      <q-select
                        :class="inputEdit(isReadonly)"
                        label="ประเภทตำแหน่ง"
                        v-model="formPositionSelect.positionType"
                        :options="typeOps"
                        emit-value
                        dense
                        @update:model-value="updateSelect"
                        map-options
                        outlined
                        option-label="name"
                        option-value="id"
                      />
                    </div>
                    <div class="col-6">
                      <q-select
                        :class="inputEdit(isReadonly)"
                        label="ระดับตำแหน่ง"
                        v-model="formPositionSelect.positionLevel"
                        :options="typeOps"
                        emit-value
                        dense
                        @update:model-value="updateSelect"
                        map-options
                        outlined
                        option-label="name"
                        option-value="id"
                      />
                    </div>
                    <div class="col-6">
                      <q-select
                        :class="inputEdit(isReadonly)"
                        label="ตำแหน่งทางการบริหาร"
                        v-model="formPositionSelect.positionExecutive"
                        :options="typeOps"
                        emit-value
                        dense
                        @update:model-value="updateSelect"
                        map-options
                        outlined
                        option-label="name"
                        option-value="id"
                      />
                    </div>
                    <div class="col-6">
                      <q-input
                        v-model="formPositionSelect.positionExecutiveField"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionExecutiveField"
                        label="ด้านทางการบริหาร"
                      />
                    </div>
                    <div class="col-6">
                      <q-input
                        v-model="formPositionSelect.positionArea"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionArea"
                        label="ด้าน/สาขา"
                      />
                    </div>
                  </div>
                  <q-separator />
                  <q-card-actions
                    align="right"
                    class="bg-white text-teal q-pa-xs"
                  >
                    <q-btn type="submit" label="เพิ่มตำแหน่ง" color="public" />
                  </q-card-actions>
                </q-card>
              </form>
            </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> -->
      </q-card>
    </q-dialog>
  </template>
</template>