clone to ประวัติฝึกอบรม/ดูงานลูกจ้าง

src/modules/15_development/components/historyEmployee/DialogProject.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+} = mixin;
+const store = useDevelopmentDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>();
+const search = ref<string>("ID1");
+const inputSearch = ref<string>("");
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {
+  if (selected.value?.length == 0) {
+    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
+  } else {
+    dialogConfirm($q, () => {
+      const data = selected.value?.[0];
+      const body = {
+        project: data.project,
+        year: data.year,
+        organizingTraining: data.organizingTraining,
+      };
+      closeDialog()
+
+    });
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  store.rows = [];
+  selected.value = [];
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+function searchFilter() {
+  const dataTestGov = [
+    {
+      id: "ID1",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+      position: "นักบริหาร", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+    },
+    {
+      id: "ID2",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
+      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "วิชาการ", //ระดับตําแหน่ง
+      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
+    },
+  ];
+  const dataTest = [
+    {
+      id: "ID1",
+      project: "โครงการฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+    {
+      id: "ID2",
+      project: "กิจกรรมฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+  ];
+
+  store.rows = dataTest;
+}
+
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <Header
+        :tittle="'เลือกโครงการ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              label="ค้นหาจาก"
+              v-model="search"
+              option-label="name"
+              option-value="id"
+              :options="projectOp"
+              map-options
+              emit-value
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-8">
+            <q-input
+              dense
+              outlined
+              label="ค้นหา"
+              v-model="inputSearch"
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-2">
+            <q-btn
+              label="ค้นหา"
+              class="full-width full-height"
+              unelevated
+              color="teal"
+              @click="searchFilter()"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            selection="single"
+            v-model:selected="selected"
+            for="table"
+            ref="table"
+            :columns="store.columns"
+            :rows="store.rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="store.visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th class="text-center"> </q-th>
+                <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 class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          @click="onSubmit()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>