hrms-mgt/src/components/Dialogs/AddPersonal.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, dialogMessageNotify } = mixin;

interface typeOp {
  id: string;
  name: string;
}

interface tableType {
  id: string;
  cardId: string;
  prefix: string;
  firstName: string;
  lastName: string;
  position: string;
  level: string;
  degree: string;
  oc: string;
  fullName: string;
}

const rows = ref<tableType[]>([]);
const type = ref<string>("idcard");
const search = ref<string>("");
const selected = ref<any>([]);
const dataObject = ref<any>([]);

const typeOps = ref<typeOp[]>([
  { id: "idcard", name: "เลขประจำตัวประชาชน" },
  { id: "firstname", name: "ชื่อ" },
  { id: "lastname", name: "นามสกุล" },
]);

/** หัวข้อที่เเสดงในตาราง */
const visibleColumns = ref<string[]>([
  "no",
  "cardId",
  "fullName",
  "position",
  "level",
]);

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "cardId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: true,
    field: "cardId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    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: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** รับค่ามาจาก หน้าหลัก */
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
    required: true,
  },
  btnTitle: {
    type: String,
    default: "เพิ่ม",
  },
  title: {
    type: String,
    default: "",
  },
  desc: {
    type: String,
    default: "",
  },
  close: {
    type: Function,
    default: () => console.log("not function"),
    required: true,
  },
  save: {
    type: Function,
    default: () => console.log("not function"),
    required: true,
  },
});

/**ส่งค่ากลับหน้าหลัก */
const emit = defineEmits(["returnData"]);

/** ปิด dialog */
async function close() {
  console.log("close");
  props.close();
}

/** เปิด dialog ยืนยัน */
function savePost() {
  if (selected.value.length != 0) {
    dialogConfirm($q, () => saveData());
  } else {
    dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 รายการ");
  }
}

/** save data หลังจาก ยืนยัน */
function saveData() {
  props.save();
  emit("returnData", selected.value);
}

/** input ค้นหา */
function searchInput() {
  const data = dataObject.value;
  if (type.value === "001") {
    rows.value = data.filter((item: any) => item.cardId === search.value);
  } else if (type.value === "002") {
    rows.value = data.filter((item: any) => item.firstName === search.value);
  } else if (type.value === "003") {
    rows.value = data.filter((item: any) => item.lastName === search.value);
  }
}

/** update ตาราง เมื่อ input ว่าง */
function updateInput() {
  if (!search.value) {
    rows.value = dataObject.value;
  }
}

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

/** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
onMounted(() => {
  const data = [
    {
      id: "001",
      cardId: "0000000000001",
      prefix: "นาง",
      firstName: "ศิรินภา",
      lastName: "คงน้อย",
      position: "ตำเเหน่ง1",
      level: "level1",
      degree: "ป.ตรี",
      oc: "สำนักงาน 1",
      fullName: "นางศิรินภา คงน้อย",
    },
    {
      id: "002",
      cardId: "0000000000002",
      prefix: "นาย",
      firstName: "แก้ว",
      lastName: "คำ",
      position: "ตำแหน่ง2",
      level: "level2",
      degree: "ป.โท",
      oc: "สำนักงาน 2",
      fullName: "นางแก้ว คำ",
    },
    {
      id: "003",
      cardId: "0000000000003",
      prefix: "นาย",
      firstName: "ภัทรานุย",
      lastName: "คงนอย",
      position: "ตำแหน่ง2",
      level: "level3",
      degree: "ป.เอก",
      oc: "สำนักงาน 3",
      fullName: "นางภัทรานุย คงนอย",
    },
  ];

  dataObject.value = data;
  rows.value = data;
});
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 60vw">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle2 text-bold">{{
          props.title
        }}</q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="close"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />
      <q-card-section class="q-pa-md bg-grey-1">
        <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
              v-model="search"
              outlined
              clearable
              @update:model-value="updateInput"
              dense
              label="คำค้น"
            />
          </div>

          <div class="col-12 col-sm-6 col-md-2">
            <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="rows"
            row-key="id"
            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-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>
                    {{ col.value }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </div>
      </q-card-section>
      <q-separator />
      <div class="row justify-end q-px-md q-py-sm items-center">
        <q-btn
          dense
          color="public"
          id="onSubmit"
          class="q-px-md q-py-xs"
          @click="savePost"
        >
          <!-- <q-icon left name="add" /> -->
          <div>{{ props.btnTitle }}</div>
          <!-- icon="mdi-content-save-outline" -->
          <q-tooltip>{{ props.btnTitle }}</q-tooltip>
        </q-btn>
      </div>
    </q-card>
  </q-dialog>
</template>