update

src/modules/02_organization/components/DialogStructureDetail.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/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: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก
+  orgPhoneIn: "", //หมายเลขโทรศัพท์ที่ติดต่อจากภายใน
+  orgFax: "", //หมายเลขโทรสาร
+  orgShortName: "",
+});
+
+async function fetchDetailTree(id: string, type: string) {
+  showLoader();
+  await http
+    .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
+    .then((res) => {
+      const data = res.data.result;
+      const range = data[`org${type}Rank`];
+      formData.orgName = data.orgRootName ? data.orgRootName : "-";
+      formData.agencyName = data.orgName ? data.orgName : "-";
+      formData.orgType = range != "DEPARTMENT" ? "ส่วนราชการ" : "หน่วยงาน";
+      formData.orgLevel = store.convertType(range);
+      formData.status =
+        store.typeOrganizational === "current"
+          ? "ปกติ"
+          : store.typeOrganizational === "draft"
+          ? "แบบร่าง"
+          : "ยุบเลิก";
+      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;
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value == true) {
+      const type = await store.checkLevel(orgLevel.value);
+      await fetchDetailTree(treeId.value, type);
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 70vw'">
+        <DialogHeader :tittle="`รายละเอียดโครงสร้าง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">หน่วยงาน</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgName }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">ส่วนราชการ</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.agencyName }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">ประเภท</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgType }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">ระดับ</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.orgLevel }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">สถานะ</div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.status }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">เบอร์โทร</div>
+              <div class="col-8 text-grey-8">
+                <p v-if="formData.orgPhoneEx != ''">
+                  {{ `ภายนอก ${formData.orgPhoneEx}` }}
+                </p>
+                <p v-if="formData.orgPhoneIn != ''">
+                  {{ `ภายใน ${formData.orgPhoneIn}` }}
+                </p>
+                <p
+                  v-show="
+                    formData.orgPhoneEx == '' && formData.orgPhoneIn == ''
+                  "
+                >
+                  -
+                </p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">Fax</div>
+              <div class="col-8 text-grey-8">
+                <p v-if="formData.orgFax != ''">{{ formData.orgFax }}</p>
+                <p v-else>-</p>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>