From 1d77c2315e431008f2ec71b0558d997f8afa9d45 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 25 Jan 2024 15:59:08 +0700
Subject: [PATCH] =?UTF-8?q?Popup=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogFormAgency.vue           | 212 +++++++++++++++
 .../components/DialogFormPosition.vue         | 241 ++++++++++++++++++
 .../components/DialogHistory.vue              | 114 +++++++++
 .../interface/index/Main.ts                   |  33 ++-
 .../02_organizationalNew/views/main.vue       |  26 +-
 5 files changed, 623 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogFormAgency.vue
 create mode 100644 src/modules/02_organizationalNew/components/DialogFormPosition.vue
 create mode 100644 src/modules/02_organizationalNew/components/DialogHistory.vue

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
new file mode 100644
index 000000000..95563f0ed
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  FormDataAgency,
+  FormAgencyRef,
+  DataOption,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const ocLevelOp = ref<DataOption[]>([]);
+
+const ocNameRef = ref<Object | null>(null);
+const shortNameRef = ref<Object | null>(null);
+const ocNoRef = ref<Object | null>(null);
+const ocLevelRef = ref<Object | null>(null);
+const telOutRef = ref<Object | null>(null);
+const telInRef = ref<Object | null>(null);
+const telRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataAgency>({
+  ocName: "",
+  shortName: "",
+  ocNo: "",
+  ocLevel: "",
+  telOut: "",
+  telIn: "",
+  tel: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectComplaintsRef: FormAgencyRef = {
+  ocName: ocNameRef,
+  shortName: shortNameRef,
+  ocNo: ocNoRef,
+  ocLevel: ocLevelRef,
+  telOut: telOutRef,
+  telIn: telInRef,
+  tel: telRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[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, () => {
+    console.log(formData)
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      ocLevelOp.value = [
+        {
+          id: "id1",
+          name: "id1",
+        },
+        {
+          id: "id2",
+          name: "id2",
+        },
+      ];
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <q-input
+                  v-model="formData.ocName"
+                  ref="ocNameRef"
+                  dense
+                  outlined
+                  for="#ocName"
+                  label="สรุปผลการพิจารณา"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.shortName"
+                  ref="shortNameRef"
+                  dense
+                  outlined
+                  for="#shortName"
+                  label="ชื่อย่อ"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.ocNo"
+                  ref="ocNoRef"
+                  dense
+                  outlined
+                  for="#ocNo"
+                  label="รหัสหน่วยงาน"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกรหัสหน่วยงาน'}`]"
+                />
+              </div>
+              <div class="col-4">
+                <q-select
+                  for="#ocLevel"
+                  ref="ocLevelRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.ocLevel"
+                  :options="ocLevelOp"
+                  label="ระดับของหน่วยงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
+                  lazy-rules
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telOut"
+                  ref="telOutRef"
+                  dense
+                  outlined
+                  for="#telOut"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telIn"
+                  ref="telInRef"
+                  dense
+                  outlined
+                  for="#telIn"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายใน'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.tel"
+                  ref="telRef"
+                  dense
+                  outlined
+                  for="#tel"
+                  label="หมายเลขโทรสาร"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรสาร'}`]"
+                />
+              </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>
+</template>
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
new file mode 100644
index 000000000..78381a629
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -0,0 +1,241 @@
+<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,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+const ocLevelOp = ref<DataOption[]>([]);
+
+const prefixNoRef = ref<Object | null>(null);
+const positionNoRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataPosition>({
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+  confirm: false,
+});
+
+/** 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: "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: "positionAdmin",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "positionAdmin",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "other",
+      align: "left",
+      label: "ฯลฯ",
+      sortable: true,
+      field: "other",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+  ]);
+  const visibleColumns = ref<string[]>([
+    "no",
+    "positionType",
+    "positionLevel",
+    "positionAdmin",
+    "other",
+  ]);
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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 onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+  });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      ocLevelOp.value = [
+        {
+          id: "id1",
+          name: "id1",
+        },
+        {
+          id: "id2",
+          name: "id2",
+        },
+      ];
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-4">
+                <q-input
+                  v-model="formData.prefixNo"
+                  ref="prefixNoRef"
+                  dense
+                  outlined
+                  for="#prefixNo"
+                  label="Prefix เลขที่ตำเเหน่ง"
+                  hide-bottom-space
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกPrefix เลขที่ตำเเหน่ง'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.positionNo"
+                  ref="positionNoRef"
+                  dense
+                  outlined
+                  for="#positionNo"
+                  label="เลขที่ตำแหน่ง"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.suffixNo"
+                  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-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>
+</template>
diff --git a/src/modules/02_organizationalNew/components/DialogHistory.vue b/src/modules/02_organizationalNew/components/DialogHistory.vue
new file mode 100644
index 000000000..d00af4e58
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogHistory.vue
@@ -0,0 +1,114 @@
+<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";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+
+
+const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      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: "lastUpdatedAt",
+      align: "left",
+      label: "วันที่แก้ไข",
+      sortable: true,
+      field: "lastUpdatedAt",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+  ]);
+  const visibleColumns = ref<string[]>([
+    "no",
+    "name",
+    "lastUpdatedAt",
+  ]);
+
+</script>
+<template>
+  <template>
+    <q-dialog v-model="props.modal" persistent>
+      <q-card style="min-width: 40vw">
+          <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <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>
+          </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
index 46133c9b9..f34843c9f 100644
--- a/src/modules/02_organizationalNew/interface/index/Main.ts
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -7,4 +7,35 @@ interface DataOption {
   name: string;
 }
 
-export type { Pagination, DataOption };
+interface FormDataAgency {
+ocName:string
+shortName:string
+ocNo:string
+ocLevel:string
+telOut:string
+telIn:string
+tel:string
+}
+interface FormDataPosition {
+prefixNo:string
+positionNo:string
+suffixNo:string
+confirm:boolean
+}
+
+interface FormAgencyRef {
+  ocName: object | null;
+  shortName: object | null;
+  ocNo: object | null;
+  ocLevel: object | null;
+  telOut: object | null;
+  telIn: object | null;
+  tel: object | null;
+  [key: string]: any;
+}
+interface FormPositionRef {
+  prefixNo: object | null;
+  positionNo: object | null;
+  [key: string]: any;
+}
+export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef };
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
index 2a55fa61c..4795a8c07 100644
--- a/src/modules/02_organizationalNew/views/main.vue
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -1,7 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import DialogFormAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
+import DialogFormPosition from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
+import DialogFormHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
+
+const modalAgency = ref<boolean>(false);
+const modalPosition = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+function close() {
+  modalAgency.value = false;
+  modalPosition.value = false;
+  modalHistory.value = false;
+}
+</script>
+
 <template>
   โครงสร้างอัตรากำลัง (ใหม่)
+  <q-btn @click="modalAgency = true" color="primary">pop up test (agency)</q-btn>
+  <q-btn @click="modalPosition = true" color="blue">pop up test (position)</q-btn>
+  <q-btn @click="modalHistory = true" color="warning">pop up test (history)</q-btn>
+
+  <DialogFormAgency :modal="modalAgency" :close="close" />
+  <DialogFormPosition :modal="modalPosition" :close="close" />
+  <DialogFormHistory :modal="modalHistory" :close="close" />
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>