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: "orange",
  },
]);

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>({
  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 = [
      {
        positionName: "test1",
        positionField: "test1",
        positionType: "test1",
        positionLevel: "test1",
        positionExecutive: "test1",
        positionExecutiveField: "test1",
        positionArea: "test1",
      },
      {
        positionName: "test2",
        positionField: "test2",
        positionType: "test2",
        positionLevel: "test2",
        positionExecutive: "test2",
        positionExecutiveField: "test2",
        positionArea: "test2",
      },
      {
        positionName: "test3",
        positionField: "test3",
        positionType: "test3",
        positionLevel: "test3",
        positionExecutive: "test3",
        positionExecutiveField: "test3",
        positionArea: "test3",
      },
    ];
    rowsPositionSelect.value = dataList;
  }
}

/**
 * คัดลอกข้อมูล
 * @param data ข้อมูลตำแหน่ง
 */
function copyDetiail(data: RowDetailPositions) {
  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) {
    }
  }
);
watch(
  () => selected.value,
  () => {
    if (selected.value.length > 0) {
      rows.value = selected.value;
    } else {
      rows.value = [];
    }
  }
);
</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-5">
              <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-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 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 class="col-5">
              <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="positionName"
                      flat
                      bordered
                      :paging="true"
                      dense
                      class="custom-header-table"
                      :visible-columns="visibleColumns"
                      selection="multiple"
                      v-model:selected="selected"
                    >
                      <template v-slot:header-selection="scope">
                        <q-checkbox
                          keep-color
                          color="primary"
                          dense
                          v-model="scope.checkBox"
                        />
                      </template>
                      <template v-slot:header="props">
                        <q-tr :props="props">
                          <q-th class="text-center">
                            <q-checkbox
                              keep-color
                              color="primary"
                              dense
                              v-model="props.selected"
                            />
                          </q-th>
                          <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">
                          <td class="text-center">
                            <q-checkbox
                              keep-color
                              color="primary"
                              dense
                              v-model="props.selected"
                            />
                          </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-if="col.name === 'fullName'">
                              {{ props.prefix }}
                            </div>
                            <div v-else-if="col.name === 'salary'">
                              {{ props.row.salary.toLocaleString() }}
                            </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-2">
              <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-12">
                      <q-input
                        v-model="formPositionSelect.positionName"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionName"
                        label="ตำแหน่งในสายงาน"
                      />
                    </div>
                    <div class="col-12">
                      <q-input
                        v-model="formPositionSelect.positionField"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionField"
                        label="สายงาน"
                      />
                    </div>
                    <div class="col-12">
                      <q-input
                        v-model="formPositionSelect.positionType"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionType"
                        label="ประเภทตำแหน่ง"
                      />
                    </div>
                    <div class="col-12">
                      <q-input
                        v-model="formPositionSelect.positionLevel"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionLevel"
                        label="ระดับตำแหน่ง"
                      />
                    </div>
                    <div class="col-12">
                      <q-input
                        v-model="formPositionSelect.positionExecutive"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionExecutive"
                        label="ตำแหน่งทางการบริหาร"
                      />
                    </div>
                    <div class="col-12">
                      <q-input
                        v-model="formPositionSelect.positionExecutiveField"
                        :class="inputEdit(isReadonly)"
                        dense
                        outlined
                        for="#positionExecutiveField"
                        label="ด้านทางการบริหาร"
                      />
                    </div>
                    <div class="col-12">
                      <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>