Merge branch 'develop' into devTee

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -211,19 +211,37 @@ watch(
           formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
           formData.orgFax = props.dataNode.orgTreeFax;
           formData.orgLevel = props.dataNode.orgTreeRank;
-          orgLevelOption.value = orgLevelOptionMain.value;
+          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
         }
       }
     }
   }
 );
+
+const tittleName = computed(() => {
+  let name = "";
+  if (actionType.value === "ADD") {
+    if (level.value === 1) {
+      name = "เพิ่มหน่วยงาน";
+    } else {
+      name = "เพิ่มส่วนราชการ";
+    }
+  } else {
+    if (level.value === 0) {
+      name = "แก้ไขหน่วยงาน";
+    } else {
+      name = "แก้ไขเพิ่มส่วนราชการ";
+    }
+  }
+  return name;
+});
 </script>
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 50vw">
         <form @submit.prevent="validateForm">
-          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="closeClear" />
+          <DialogHeader :tittle="tittleName" :close="closeClear" />
           <q-separator />
           <q-card-section>
             <div class="row q-col-gutter-sm">
@@ -246,9 +264,9 @@ watch(
                   dense
                   outlined
                   for="#shortName"
-                  label="ชื่อย่อ"
+                  label="อักษรย่อ"
                   hide-bottom-space
-                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]"
+                  :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อ'}`]"
                 />
               </div>
               <div class="col-2">

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

@@ -1,31 +1,60 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const modal = defineModel<boolean>("structureDetail", { required: true });
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
+const modal = defineModel<boolean>("structureDetail", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+
 const formData = reactive<any>({
-  orgName: "สำนักงาน ก.ก.",
-  agencyName: "กลุ่มงานสารสนเทศฯศูนย์สารสนเทศ", //*ส่วนราชการ
-  orgType: "ส่วนราชการ", //*ประเภท
-  orgLevel: "กลุ่มงาน", //*ระดับ
-  status: "ปกติ", //*สถานะ
-  orgPhoneEx: "0111111111", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
-  orgPhoneIn: "0333333333", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
-  orgFax: "023123456", //หมายเลขโทรสาร
+  orgName: "",
+  agencyName: "", //*ส่วนราชการ
+  orgType: "", //*ประเภท
+  orgLevel: "", //*ระดับ
+  status: "", //*สถานะ
+  orgPhoneEx: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
+  orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
+  orgFax: "", //หมายเลขโทรสาร
+  orgShortName: "",
 });
 
+async function fetchDetailTree(id: string, type: string) {
+  await http
+    .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.orgName = data[`org${type}Name`];
+      formData.agencyName = data[`org${type}Name`];
+      formData.orgType = data[`org${type}Name`];
+      formData.orgLevel = data[`org${type}Rank`];
+      formData.status = data[`org${type}Name`];
+      formData.orgPhoneEx = data[`org${type}PhoneEx`];
+      formData.orgPhoneIn = data[`org${type}PhoneIn`];
+      formData.orgFax = data[`org${type}Fax`];
+      formData.orgShortName = data[`org${type}ShortName`];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function close() {
   modal.value = false;
 }
@@ -34,6 +63,8 @@ watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
+      const type = store.checkLevel(orgLevel.value);
+      fetchDetailTree(treeId.value, type);
     }
   }
 );
@@ -53,7 +84,7 @@ watch(
                 </div>
               </div>
               <div class="col-8 text-grey-8">
-                <p>{{ formData.orgName }}</p>
+                <p>{{ formData.orgName }} ({{ formData.orgShortName }})</p>
               </div>
             </div>
             <div class="row q-col-gutter-sm q-mb-xs">
@@ -103,13 +134,21 @@ watch(
                 </div>
               </div>
               <div class="col-8 text-grey-8">
-                <p class="q-ma-none">{{ formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}`:'' }}</p>
+                <p class="q-ma-none">
+                  {{
+                    formData.orgPhoneEx ? `ภายนอก ${formData.orgPhoneEx}` : ""
+                  }}
+                </p>
               </div>
             </div>
 
             <div class="row q-col-gutter-sm">
               <div class="offset-4 col-8 text-grey-8">
-                <p>{{ formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}`:'' }}</p>
+                <p>
+                  {{
+                    formData.orgPhoneIn ? `ภายใน ${formData.orgPhoneIn}` : ""
+                  }}
+                </p>
               </div>
             </div>
 

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

@@ -242,6 +242,8 @@ function searchAndReplace(
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
 const dataNode = ref<any>();
+const treeId = ref<string>("");
+
 function onClickAgency(level: number, node: any) {
   dialogAgency.value = !dialogAgency.value;
   orgLevel.value = level;
@@ -250,9 +252,10 @@ function onClickAgency(level: number, node: any) {
 }
 
 const dialogDetail = ref<boolean>(false);
-function onClickDetail() {
-  console.log(dialogDetail.value);
+function onClickDetail(id: string, level: number) {
+  treeId.value = id;
   dialogDetail.value = !dialogDetail.value;
+  orgLevel.value = level;
 }
 
 async function onClickEdit(node: any) {
@@ -403,7 +406,7 @@ onMounted(async () => {
                         : item.type === 'ADD'
                         ? onClickAgency(prop.node.orgLevel + 1, prop.node)
                         : item.type === 'DETAIL'
-                        ? onClickDetail()
+                        ? onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
                         : item.type === 'DEL'
                         ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
                         : null
@@ -478,7 +481,11 @@ onMounted(async () => {
   />
 
   <!-- รายละเอียดโครงสร้าง -->
-  <DialogStructureDetail v-model:structure-detail="dialogDetail" />
+  <DialogStructureDetail
+    v-model:structure-detail="dialogDetail"
+    v-model:treeId="treeId"
+    v-model:orgLevel="orgLevel"
+  />
 </template>
 
 <style scoped></style>