ปรับ UI โครงสร้าง

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

@@ -9,6 +9,7 @@ import type {
   DataOption,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
+const level = defineModel<string>("orgLevel", { required: true });
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -18,35 +19,46 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
-const ocLevelOp = ref<DataOption[]>([]);
+const orgLevelOptionMain = ref<DataOption[]>([
+  { name: "ระดับสำนัก", id: "DEPARTMENT" },
+  {
+    name: "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง",
+    id: "OFFICE",
+  },
+  { name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
+  { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
+]);
 
-const ocNameRef = ref<Object | null>(null);
+const orgLevelOption = ref<DataOption[]>([]);
-const shortNameRef = ref<Object | null>(null);
+
-const ocNoRef = ref<Object | null>(null);
+const orgNameRef = ref<Object | null>(null);
-const ocLevelRef = ref<Object | null>(null);
+const orgShortNameRef = ref<Object | null>(null);
-const telOutRef = ref<Object | null>(null);
+const orgCodeRef = ref<Object | null>(null);
-const telInRef = ref<Object | null>(null);
+const orgPhoneExRef = ref<Object | null>(null);
-const telRef = ref<Object | null>(null);
+const orgPhoneInRef = ref<Object | null>(null);
+const orgFaxRef = ref<Object | null>(null);
+const orgLevelRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataAgency>({
-  ocName: "",
+  orgName: "",
-  shortName: "",
+  orgShortName: "",
-  ocNo: "",
+  orgCode: "",
-  ocLevel: "",
+  orgPhoneEx: "",
-  telOut: "",
+  orgPhoneIn: "",
-  telIn: "",
+  orgFax: "",
-  tel: "",
+  orgRevisionId: "",
+  orgLevel: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectComplaintsRef: FormAgencyRef = {
-  ocName: ocNameRef,
+  orgName: orgNameRef,
-  shortName: shortNameRef,
+  orgShortName: orgShortNameRef,
-  ocNo: ocNoRef,
+  orgCode: orgCodeRef,
-  ocLevel: ocLevelRef,
+  orgPhoneEx: orgPhoneExRef,
-  telOut: telOutRef,
+  orgPhoneIn: orgPhoneInRef,
-  telIn: telInRef,
+  orgFax: orgFaxRef,
-  tel: telRef,
+  orgLevel: orgLevelRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -70,7 +82,7 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData)
+    console.log(formData);
   });
 }
 
@@ -78,16 +90,13 @@ watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
-      ocLevelOp.value = [
+      if (level.value === "DEPARTMENT") {
-        {
+        formData.orgLevel = level.value;
-          id: "id1",
+        orgLevelOption.value = orgLevelOptionMain.value;
-          name: "id1",
+      } else {
-        },
+        orgLevelOption.value = orgLevelOptionMain.value.splice(1, 4);
-        {
+        formData.orgLevel = "";
-          id: "id2",
+      }
-          name: "id2",
-        },
-      ];
     }
   }
 );
@@ -104,8 +113,8 @@ watch(
             <div class="row q-col-gutter-sm">
               <div class="col-4">
                 <q-input
-                  v-model="formData.ocName"
+                  v-model="formData.orgName"
-                  ref="ocNameRef"
+                  ref="orgNameRef"
                   dense
                   outlined
                   for="#ocName"
@@ -116,8 +125,8 @@ watch(
               </div>
               <div class="col-2">
                 <q-input
-                  v-model="formData.shortName"
+                  v-model="formData.orgShortName"
-                  ref="shortNameRef"
+                  ref="orgShortNameRef"
                   dense
                   outlined
                   for="#shortName"
@@ -128,8 +137,8 @@ watch(
               </div>
               <div class="col-2">
                 <q-input
-                  v-model="formData.ocNo"
+                  v-model="formData.orgCode"
-                  ref="ocNoRef"
+                  ref="orgCodeRef"
                   dense
                   outlined
                   for="#ocNo"
@@ -140,8 +149,9 @@ watch(
               </div>
               <div class="col-4">
                 <q-select
+                  :readonly="level === 'DEPARTMENT'"
                   for="#ocLevel"
-                  ref="ocLevelRef"
+                  ref="orgLevelRef"
                   dense
                   hide-bottom-space
                   outlined
@@ -149,8 +159,8 @@ watch(
                   option-value="id"
                   emit-value
                   map-options
-                  v-model="formData.ocLevel"
+                  v-model="formData.orgLevel"
-                  :options="ocLevelOp"
+                  :options="orgLevelOption"
                   label="ระดับของหน่วยงาน"
                   :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
                   lazy-rules
@@ -158,8 +168,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.telOut"
+                  v-model="formData.orgPhoneEx"
-                  ref="telOutRef"
+                  ref="orgPhoneExRef"
                   dense
                   outlined
                   for="#telOut"
@@ -174,8 +184,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.telIn"
+                  v-model="formData.orgPhoneIn"
-                  ref="telInRef"
+                  ref="orgPhoneInRef"
                   dense
                   outlined
                   for="#telIn"
@@ -189,8 +199,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.tel"
+                  v-model="formData.orgFax"
-                  ref="telRef"
+                  ref="orgFaxRef"
                   dense
                   outlined
                   for="#tel"

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

@@ -10,6 +10,7 @@ import type {
   FormDataNewStructure,
   FormNewStructureRef,
   DataOption,
+  HistoryType,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -22,6 +23,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } =
 
 const modal = defineModel<boolean>("newStructure", { required: true });
 const status = defineModel<boolean>("status", { required: true });
+const type = defineModel<string>("type", { default: "NEW" });
 
 const typeOp = ref<DataOption[]>([
   {
@@ -41,19 +43,25 @@ const typeOp = ref<DataOption[]>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
   },
 ]);
+const orgRevisionId = ref<string>("");
+const orgRevisionOpMain = ref<DataOption[]>([]);
+const orgRevisionOp = ref<DataOption[]>([]);
 
 const orgRevisionNameRef = ref<Object | null>(null);
 const typeRef = ref<Object | null>(null);
+const orgRevisionIdRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataNewStructure>({
+  orgRevisionId: "",
   orgRevisionName: "",
-  type: "",
+  typeDraft: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectRef: FormNewStructureRef = {
   orgRevisionName: orgRevisionNameRef,
   type: typeRef,
+  orgRevisionId: orgRevisionIdRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -77,31 +85,75 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    // http
+    showLoader();
-    //   .post(config.API.createOrganization, formData)
+    http
-    //   .then(() => {
+      .post(config.API.createOrganization, formData)
-    status.value = true;
+      .then(() => {
-    store.typeOrganizational = "draft";
+        status.value = true;
-    success($q, "บันทึกข้อมูลสำเร็จ");
+        store.typeOrganizational = "draft";
-    // })
+        success($q, "บันทึกข้อมูลสำเร็จ");
-    // .catch((err) => {
+      })
-    //   messageError($q, err);
+      .catch((err) => {
-    // })
+        messageError($q, err);
-    // .finally(() => {});
+      })
-
+      .finally(async () => {
-    console.log(formData);
+        modal.value = await false;
+        await close();
+        await hideLoader();
+      });
   });
-  modal.value = false;
 }
 
 function close() {
   modal.value = false;
+  formData.orgRevisionId = "";
+  formData.orgRevisionName = "";
+  formData.typeDraft = "";
+}
+
+async function fetchOrgRevision() {
+  showLoader();
+  await http
+    .get(config.API.organizationHistoryNew)
+    .then((res) => {
+      const data = res.data.result.filter(
+        (e: HistoryType) => e.orgRevisionIsDraft === false
+      );
+      if (data) {
+        const listOption = data.map((e: HistoryType) => ({
+          id: e.orgRevisionId,
+          name: e.orgRevisionName,
+        }));
+        orgRevisionOpMain.value = listOption;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "orgRevisionId":
+      update(() => {
+        orgRevisionOp.value = orgRevisionOpMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
 }
 
 watch(
   () => modal.value,
   () => {
-    modal.value && !status.value && (formData.type = "NEW");
+    modal.value && (formData.typeDraft = type.value);
+    modal.value && type.value !== "NEW" && fetchOrgRevision();
   }
 );
 </script>
@@ -131,7 +183,7 @@ watch(
                 <q-select
                   for="#type"
                   ref="typeRef"
-                  :readonly="!status"
+                  readonly
                   dense
                   hide-bottom-space
                   outlined
@@ -139,13 +191,43 @@ watch(
                   option-value="id"
                   emit-value
                   map-options
-                  v-model="formData.type"
+                  v-model="formData.typeDraft"
                   :options="typeOp"
                   label="ประเภทการโคลน"
                   :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
                   lazy-rules
                 />
               </div>
+              <div class="col-6" v-if="type !== 'NEW'">
+                <q-select
+                  for="#orgRevisionId"
+                  ref="orgRevisionIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.orgRevisionId"
+                  :options="orgRevisionOp"
+                  label="เลือกโครงสร้าง"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกโครงการสร้าง'}`]"
+                  lazy-rules
+                  use-input
+                  @filter="(inputValue:any,
+                  doneFn:Function) => filterSelector(inputValue, doneFn,'orgRevisionId'
+                  ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey-5">
+                        ไม่พบข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
             </div>
           </q-card-section>
           <q-separator />

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

@@ -64,6 +64,7 @@ const expanded = ref<Array<any>>([]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const selected = ref("");
+const orgLevel = ref<string>("");
 
 const filterData = (node: any, filter: string) => {
   // ให้ทาง API ค้นหาให้
@@ -225,8 +226,9 @@ function searchAndReplace(
 }
 
 const dialogAgency = ref<boolean>(false);
-function onClickAgency() {
+function onClickAgency(level: string) {
   dialogAgency.value = !dialogAgency.value;
+  orgLevel.value = level;
 }
 
 watch(
@@ -277,7 +279,7 @@ onMounted(async () => {
             round
             color="primary"
             icon="add"
-            @click="onClickAgency"
+            @click="onClickAgency('DEPARTMENT')"
           >
             <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
           </q-btn>
@@ -347,6 +349,8 @@ onMounted(async () => {
                     @click="
                       item.val === 'EDIT'
                         ? edit(prop.node.organizationId)
+                        : item.val === 'ADD'
+                        ? onClickAgency('TEST')
                         : null
                     "
                   >
@@ -370,7 +374,12 @@ onMounted(async () => {
     </div>
   </div>
 
-  <DialogAgency :modal="dialogAgency" :close="onClickAgency" />
+  <!-- เพิ่มหน่วยงาน -->
+  <DialogAgency
+    :modal="dialogAgency"
+    :close="onClickAgency"
+    v-model:orgLevel="orgLevel"
+  />
 </template>
 
 <style scoped></style>

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

@@ -8,36 +8,37 @@ interface DataOption {
 }
 
 interface FormDataAgency {
-  ocName: string
+  orgName: string;
-  shortName: string
+  orgShortName: string;
-  ocNo: string
+  orgCode: string;
-  ocLevel: string
+  orgPhoneEx: string;
-  telOut: string
+  orgPhoneIn: string;
-  telIn: string
+  orgFax: string;
-  tel: string
+  orgRevisionId: string;
+  orgLevel: string;
 }
 
 interface FormDataPosition {
-  prefixNo: string
+  prefixNo: string;
-  positionNo: string
+  positionNo: string;
-  suffixNo: string
+  suffixNo: string;
-  confirm: boolean
+  confirm: boolean;
 }
 
 interface FormDataNewStructure {
-  orgRevisionName: string
+  orgRevisionId: string;
-  type: string
+  orgRevisionName: string;
-
+  typeDraft: string;
 }
 
 interface FormAgencyRef {
-  ocName: object | null;
+  orgName: object | null;
-  shortName: object | null;
+  orgShortName: object | null;
-  ocNo: object | null;
+  orgCode: object | null;
-  ocLevel: object | null;
+  orgPhoneEx: object | null;
-  telOut: object | null;
+  orgPhoneIn: object | null;
-  telIn: object | null;
+  orgFax: object | null;
-  tel: object | null;
+  orgLevel: object | null;
   [key: string]: any;
 }
 
@@ -54,26 +55,27 @@ interface FormDateTimeRef {
 
 interface FormNewStructureRef {
   orgRevisionName: object | null;
+  orgRevisionId: object | null;
   type: object | null;
   [key: string]: any;
 }
 
 interface HistoryType {
-  orgRevisionId: string
+  orgRevisionId: string;
-  orgRevisionName: string
+  orgRevisionName: string;
-  orgRevisionIsCurrent: boolean
+  orgRevisionIsCurrent: boolean;
-  orgRevisionIsDraft: boolean
+  orgRevisionIsDraft: boolean;
-  orgRevisionCreatedAt: any
+  orgRevisionCreatedAt: any;
 }
-export type { 
+export type {
-  Pagination, 
+  Pagination,
-  DataOption, 
+  DataOption,
-  FormDataAgency, 
+  FormDataAgency,
-  FormDataPosition, 
+  FormDataPosition,
-  FormAgencyRef, 
+  FormAgencyRef,
-  FormPositionRef, 
+  FormPositionRef,
-  FormDateTimeRef, 
+  FormDateTimeRef,
-  FormDataNewStructure, 
+  FormDataNewStructure,
-  FormNewStructureRef, 
+  FormNewStructureRef,
-  HistoryType 
+  HistoryType,
 };

src/modules/02_organizationalNew/store/organizational.ts

@@ -1,12 +1,27 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+/** importType*/
+import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
+
 export const useOrganizational = defineStore("organizationalStore", () => {
   const typeOrganizational = ref<string>("current");
   const statusView = ref<string>("list");
 
+  const dataActive = ref<DataActive>();
+  const activeId = ref<string>();
+  const draftId = ref<string>();
+  function fetchDataActive(data: DataActive) {
+    activeId.value = data.activeId;
+    draftId.value = data.draftId;
+    dataActive.value = data;
+  }
+
   return {
     typeOrganizational,
     statusView,
+
+    //
+    fetchDataActive,
   };
 });

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

@@ -5,7 +5,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import ListView from "@/modules/02_organizationalNew/components/listView.vue";
@@ -21,7 +20,6 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalNewStructure = ref<boolean>(false);
 const stroe = useOrganizational();
 
 const isStatusData = ref<boolean>(false);
@@ -45,16 +43,15 @@ const itemStructure = ref<any>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
   },
 ]);
-const dataActive = ref<DataActive>();
 
 async function fetchOrganizationActive() {
   showLoader();
   await http
     .get(config.API.activeOrganization)
     .then((res) => {
-      console.log(res);
       const data = res.data.result;
       if (data) {
+        stroe.fetchDataActive(data);
         if (data.activeName === null && data.draftName === null) {
           isStatusData.value = false;
         } else {
@@ -79,6 +76,13 @@ async function fetchOrganizationActive() {
     });
 }
 
+const modalNewStructure = ref<boolean>(false);
+const typeStructure = ref<string>("");
+function ocClickAddStructure(type: string) {
+  modalNewStructure.value = !modalNewStructure.value;
+  typeStructure.value = type;
+}
+
 const modalDateTime = ref<boolean>(false);
 function onClickDateTime() {
   modalDateTime.value = !modalDateTime.value;
@@ -137,7 +141,7 @@ onMounted(async () => {
               color="primary"
               size="lg"
               icon="add"
-              @click="modalNewStructure = true"
+              @click="ocClickAddStructure('NEW')"
             >
               <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
             </q-btn>
@@ -175,6 +179,7 @@ onMounted(async () => {
                   v-close-popup
                   v-for="(item, index) in itemStructure"
                   :key="index"
+                  @click="ocClickAddStructure(item.val)"
                 >
                   <q-item-section>
                     <q-item-label>{{ item.name }}</q-item-label>
@@ -222,10 +227,13 @@ onMounted(async () => {
   <DialogFormNewStructure
     v-model:new-structure="modalNewStructure"
     v-model:status="isStatusData"
+    v-model:type="typeStructure"
   />
 
+  <!-- ตั้งเวลาเผยแพร่ -->
   <DialogDateTime :modal="modalDateTime" :close="onClickDateTime" />
 
+  <!-- ประวัติโครงสร้าง -->
   <DialogHistory :modal="modalHistory" :close="onClickHistory" />
 </template>