แก้ไขโครงสร้าง

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

@@ -90,26 +90,33 @@ function validateForm() {
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .post(config.API.createOrganization, formData)
-      .then((res) => {
-        status.value = true;
-        store.typeOrganizational = "draft";
-        store.draftId = res.data.result.id;
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        // props.fetchActive?.();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(async () => {
-        modal.value = await false;
-        await close();
-        await hideLoader();
-      });
-  });
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.createOrganization, formData)
+        .then((res) => {
+          status.value = true;
+          store.typeOrganizational = "draft";
+          store.draftId = res.data.result.id;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          // props.fetchActive?.();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          await close();
+          await hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มโครงสร้าง",
+    store.draftId
+      ? "คุณมีแบบร่างอยู่หากคุณกดยืนยันระบบจะทำการลบแบบร่างเดิมและสร้างแบบร่างใหม่ ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+      : "ต้องการยืนยันการเพิ่มโครงสร้างนี้ใช่หรือไม่?"
+  );
 }
 
 function close() {

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

@@ -196,6 +196,28 @@ watch(
           </div>
 
           <div v-else class="col-12 row items-center">
+            <!-- summary -->
+            <div
+              v-if="nodeId"
+              class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1"
+            >
+              <div class="row col q-pa-sm item">
+                <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                <q-space />
+                <q-badge color="secondary" :label="store.sumPosition.total" />
+              </div>
+              <div class="row col q-pa-sm item bg-grey-1">
+                <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                <q-space />
+                <q-badge color="primary" :label="store.sumPosition.use" />
+              </div>
+              <div class="row col q-pa-sm item bg-grey-1">
+                <div class="ellipsis">ตำแหน่งว่าง</div>
+                <q-space />
+                <q-badge color="red" :label="store.sumPosition.vacant" />
+              </div>
+            </div>
+
             <TableView
               v-if="nodeId !== ''"
               v-model:nodeTree="nodeTree"
@@ -220,4 +242,10 @@ watch(
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>

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

@@ -100,14 +100,22 @@ const orgLevel = ref<number>(0);
 const type = ref<number>(0);
 const orgId = ref<string>("");
 
-const updateSelected = (id: string, level: number) => {
-  store.treeId = id;
-  store.level = level;
-  if (id === nodeId.value) {
+const updateSelected = (data: any) => {
+  store.treeId = data.orgTreeId;
+  store.level = data.orgLevel;
+  if (data.orgTreeId === nodeId.value) {
     nodeId.value = "";
   } else {
-    nodeId.value = id ? id : "";
-    id && props.fetchDataTable?.(id, level, true);
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    store.getSumPosition({
+      totalPosition: data.totalPosition,
+      totalPositionCurrentUse: data.totalPositionCurrentUse,
+      totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+      totalPositionNextUse: data.totalPositionNextUse,
+      totalPositionNextVacant: data.totalPositionNextVacant,
+    });
   }
 };
 
@@ -353,7 +361,7 @@ onMounted(async () => {});
 
             <div
               class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-              @click="updateSelected(prop.node.orgTreeId, prop.node.orgLevel)"
+              @click="updateSelected(prop.node)"
             >
               <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
               <div>

src/modules/02_organizationalNew/interface/response/organizational.ts

@@ -3,8 +3,16 @@ interface DataActive {
   activeName: string;
   draftId: string;
   draftName: string;
-  isPublic: boolean,
-  orgPublishDate: Date | null,
+  isPublic: boolean;
+  orgPublishDate: Date | null;
+}
+
+interface SumPosition {
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
 }
 
 interface OrgTree {
@@ -80,7 +88,7 @@ interface Position {
 
 interface PosMaster {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -114,7 +122,7 @@ interface Position2 {
 
 interface PosMaster2 {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -144,4 +152,5 @@ export type {
   PosMaster2,
   Position,
   Position2,
+  SumPosition
 };

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

@@ -1,10 +1,10 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 /** importType*/
 import type {
   DataActive,
-  Position,
+  SumPosition,
   PosMaster,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
 
@@ -19,6 +19,23 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const level = ref<number>();
   const isPublic = ref<boolean>(false);
   const orgPublishDate = ref<Date | null>(null);
+  const sumPosition = reactive({
+    total: 0,
+    use: 0,
+    vacant: 0,
+  });
+
+  function getSumPosition(data: SumPosition) {
+    sumPosition.total = data.totalPosition;
+    sumPosition.use =
+      typeOrganizational.value == "draft"
+        ? data.totalPositionNextUse
+        : data.totalPositionCurrentUse;
+    sumPosition.vacant =
+      typeOrganizational.value == "draft"
+        ? data.totalPositionNextVacant
+        : data.totalPositionCurrentVacant;
+  }
 
   function fetchDataActive(data: DataActive) {
     activeId.value = data.activeId;
@@ -100,5 +117,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     isPublic,
     orgPublishDate,
     fetchPosMaster,
+    sumPosition,
+    getSumPosition,
   };
 });

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

@@ -240,7 +240,7 @@ onMounted(async () => {
               </q-btn-dropdown>
             </q-btn-group>
 
-            <q-btn-dropdown color="green" label="ประวัติโครงสร้าง">
+            <q-btn-dropdown color="green" label="เพิ่มโครงสร้าง">
               <q-list>
                 <q-item
                   dense