popup

src/modules/02_organizationalNew/components/DialogNewStructure.vue

@@ -0,0 +1,132 @@
+<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 {
+  FormDataNewStructure,
+  FormNewStructureRef,
+  DataOption,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+const modal = defineModel<boolean>("newStructure", { required: true });
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const rows = ref<any[]>([]);
+const typeOp = ref<DataOption[]>([
+  {
+    id: "NEW",
+    name: "สร้างใหม่",
+  },
+  {
+    id: "ORG",
+    name: "ทำสำเนาเฉพาะโครงสร้าง",
+  },
+  {
+    id: "ORG_POSITION",
+    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
+  },
+  {
+    id: "ORG_POSITION_PERSON",
+    name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
+  },
+]);
+
+const orgRevisionNameRef = ref<Object | null>(null);
+const typeRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataNewStructure>({
+  orgRevisionName: "",
+  type: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectRef: FormNewStructureRef = {
+  orgRevisionName: orgRevisionNameRef,
+  type: typeRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[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);
+  });
+  modal.value = false;
+}
+
+function close() {
+  modal.value = false;
+}
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <form @submit.prevent="validateForm">
+          <DialogHeader :tittle="`สร้างโครงสร้างใหม่`" :close="close" />
+          <q-separator />
+
+          <q-card-section>
+            <div class="row q-col-gutter-sm">
+              <div class="col-6">
+                <q-input
+                  v-model="formData.orgRevisionName"
+                  ref="orgRevisionNameRef"
+                  dense
+                  outlined
+                  for="#orgRevisionName"
+                  label="ชื่อโครงสร้าง"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อโครงสร้าง'}`]"
+                />
+              </div>
+              <div class="col-6">
+                <q-select
+                  for="#type"
+                  ref="typeRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.type"
+                  :options="typeOp"
+                  label="ประเภทการโคลน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
+                  lazy-rules
+                />
+              </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>

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -8,19 +8,26 @@ interface DataOption {
 }
 
 interface FormDataAgency {
-ocName:string
-shortName:string
-ocNo:string
-ocLevel:string
-telOut:string
-telIn:string
-tel:string
+  ocName: string
+  shortName: string
+  ocNo: string
+  ocLevel: string
+  telOut: string
+  telIn: string
+  tel: string
 }
+
 interface FormDataPosition {
-prefixNo:string
-positionNo:string
-suffixNo:string
-confirm:boolean
+  prefixNo: string
+  positionNo: string
+  suffixNo: string
+  confirm: boolean
+}
+
+interface FormDataNewStructure {
+  orgRevisionName: string
+  type: string
+
 }
 
 interface FormAgencyRef {
@@ -42,4 +49,9 @@ interface FormDateTimeRef {
   dateTime: object | null;
   [key: string]: any;
 }
-export type { Pagination, DataOption,FormDataAgency,FormDataPosition,FormAgencyRef,FormPositionRef,FormDateTimeRef };
+interface FormNewStructureRef {
+  orgRevisionName: object | null;
+  type: object | null;
+  [key: string]: any;
+}
+export type { Pagination, DataOption, FormDataAgency, FormDataPosition, FormAgencyRef, FormPositionRef, FormDateTimeRef,FormDataNewStructure,FormNewStructureRef };

src/modules/02_organizationalNew/views/main.vue

@@ -4,10 +4,12 @@ import { ref } from "vue";
 /** importComponents*/
 import ListView from "@/modules/02_organizationalNew/components/listView.vue";
 import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
+import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+const modalNewStructure = ref<boolean>(false);
 const stroe = useOrganizational();
 
 const isStatusData = ref<boolean>(true);
@@ -32,9 +34,16 @@ const itemStructure = ref<any>([
 ]);
 </script>
 <template>
+  <q-btn
+    color="indigo-9"
+    label="pop up สร้างโครงสร้างใหม่"
+    @click="modalNewStructure = true"
+  >
+  </q-btn>
   <div class="row">
     <div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
     <q-space />
+
     <div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
       <q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
     </div>
@@ -139,6 +148,8 @@ const itemStructure = ref<any>([
       </q-card>
     </div>
   </q-card>
+
+  <DialogFormNewStructure v-model:new-structure="modalNewStructure" />
 </template>
 
 <style scoped></style>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -65,7 +65,8 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
   organizationId: "",
   persons: [],
   investigationExtendHistory: [],
-  isDisciplinary:false
+  isDisciplinary:false,
+  isAncestorDNA:false
 });
 
 const personObjComplaint = reactive<ArrayPerson>({