API Position

src/api/02_organizational/api.organization.ts

@@ -22,5 +22,6 @@ export default {
   orgPosType: `${orgPos}/type`,
   orgPosLevel: `${orgPos}/level`,
   orgPosMaster: `${orgPos}/master`,
+  orgPosMasterList: `${orgPos}/master/list`,
   organizationShortName: `${organization}/sort`,
 };

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

@@ -1,32 +1,54 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
 
+/** importComponents*/
 import TreeView from "@/modules/02_organizationalNew/components/mainTree.vue";
 import TableView from "@/modules/02_organizationalNew/components/tableTree.vue";
 
+/** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
+/** use*/
 const store = useOrganizational();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const nodeTree = ref<OrgTree[]>();
+const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
-const historyId = defineModel<string>("historyId", { required: true });
+const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
 const count = defineModel<number>("count", { required: true });
-const nodeId = ref<string>("");
+const nodeId = ref<string>(""); // id ของ Tree
-const orgLevel = ref<number>(0);
+const orgLevel = ref<number>(0); // levelTree
-const isLoad = ref<boolean>(false);
+const isLoad = ref<boolean>(false); // loadTable
 const nodeData = ref<any>();
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalPage = ref<number>(1);
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]);
 
-// defineProps<{ dataActive: DataActive }>();
+/**
-
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
 async function fetchDataTree(id: string) {
   showLoader();
   // const id =
@@ -47,28 +69,69 @@ async function fetchDataTree(id: string) {
   // console.log(nodeTree.value);
 }
 
-async function fetchDataTable(id: string, level: number) {
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number, action: boolean) {
   orgLevel.value = level;
-  // isLoad.value = true;
+  reqMaster.id = id;
-  // await http
+  reqMaster.type = level;
-  //   .get(config.API.orgPosPositionById(id))
+  action1.value = action;
-  //   .then((res) => {
+  if (action) {
-  //     console.log(res);
+    setTimeout(() => {
-  //   })
+      action1.value = false;
-  //   .catch((err) => {
+    }, 1000);
-  //     messageError($q, err);
+    reqMaster.isAll = false;
-  //   })
+    reqMaster.page = 1;
-  //   .finally(() => {
+    reqMaster.pageSize = 10;
-  //     isLoad.value = false;
+    reqMaster.keyword = "";
-  //   });
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      console.log(res);
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        const a = p.find((el: Position) => el.positionIsSelected === true);
+        const { id, ...rest } = a ? a : p[0];
+        const test = { ...e, ...rest };
+
+        dataMain.push(test);
+        posMaster.value = store.fetchPosMaster(dataMain);
+      });
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 1500);
+    });
 }
 
+/**lifecycle Hook*/
 onMounted(async () => {
   const id =
-    store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
   id && (await fetchDataTree(id));
 });
 
+/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
 watch(
   () => count.value,
   () => {
@@ -76,6 +139,7 @@ watch(
   }
 );
 
+/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
 watch(
   () => store.typeOrganizational,
   () => {
@@ -85,6 +149,14 @@ watch(
     nodeId.value = "";
   }
 );
+
+watch(
+  [() => reqMaster.page, () => reqMaster.pageSize, () => reqMaster.isAll],
+  () => {
+    action1.value === false &&
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+  }
+);
 </script>
 <template>
   <div class="col-12">
@@ -122,10 +194,14 @@ watch(
               v-if="nodeId !== ''"
               v-model:orgLevel="orgLevel"
               v-model:treeId="nodeId"
+              v-model:reqMaster="reqMaster"
+              v-model:totalPage="totalPage"
+              v-model:posMaster="posMaster"
             />
 
-            <q-banner v-else class="bg-warning text-white col-12 text-center">
+            <q-banner v-else class="q-pa-lg col-12 text-center">
-              เลือกรายการ {{ nodeId }}
+              <q-icon name="mdi-hand-pointing-left" size="lg" color="primary" />
+              <p>กรุณาเลือกโครงสร้าง</p>
             </q-banner>
           </div>
         </div>

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

@@ -104,7 +104,7 @@ const updateSelected = (id: string, level: number) => {
     nodeId.value = "";
   } else {
     nodeId.value = id ? id : "";
-    id && props.fetchDataTable?.(id, level);
+    id && props.fetchDataTable?.(id, level, true);
   }
 };
 

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

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";
+import type {
+  ListMenu,
+  NewPagination,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
+import type { PosMaster2 } from "@/modules/02_organizationalNew/interface/response/organizational";
 
 /** importComponents*/
 import DialogFormPosotion from "@/modules/02_organizationalNew/components/DialogFormPosition.vue";
@@ -13,8 +18,13 @@ import DialogPositionDetail from "@/modules/02_organizationalNew/components/Posi
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
 const showAllData = ref<boolean>(false);
-const orgLevel = defineModel<number>("orgLevel", {});
+
-const treeId = defineModel<string>("treeId", {});
+const currentPage = ref<number>(1);
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
 const stroe = useOrganizational();
 const filter = ref<string>("");
 const actionType = ref<string>("");
@@ -58,46 +68,120 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "noPosition",
+    name: "posMasterNo",
     align: "left",
     label: "เลขที่ตำแหน่ง",
     sortable: true,
-    field: "noPosition",
+    field: "posMasterNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "namePosition",
+    name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    field: "namePosition",
+    field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "typePosition",
+    name: "posTypeName",
     align: "left",
     label: "ประเภทตำแหน่ง",
     sortable: true,
-    field: "typePosition",
+    field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "levelPositoion",
+    name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "levelPositoion",
+    field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "isStatus",
+    name: "positionIsSelected",
     align: "left",
     label: "มีคนครองหรือไม่",
     sortable: true,
-    field: "isStatus",
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsExpand = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -129,6 +213,11 @@ const dialogDetail = ref<boolean>(false);
 function onClickViewDetail() {
   dialogDetail.value = !dialogDetail.value;
 }
+
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
@@ -145,7 +234,7 @@ function onClickViewDetail() {
         >
           <q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
         >
-        <q-btn flat round dense color="blue" icon="filter_list">
+        <q-btn flat round dense color="blue" icon="mdi-sort">
           <q-tooltip>จัดลำดับ</q-tooltip>
         </q-btn>
       </div>
@@ -170,7 +259,7 @@ function onClickViewDetail() {
         <div>
           <q-checkbox
             keep-color
-            v-model="showAllData"
+            v-model="reqMaster.isAll"
             label="แสดงตำแหน่งทั้งหมด"
             color="primary"
           >
@@ -189,8 +278,8 @@ function onClickViewDetail() {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="rows"
+      :rows="posMaster"
-      row-key="noPosition"
+      row-key="id"
       flat
       bordered
       :paging="true"
@@ -198,6 +287,7 @@ function onClickViewDetail() {
       class="custom-header-table"
       :rows-per-page-options="[10, 25, 50, 100]"
       :filter="filter"
+      @update:pagination="updatePagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -222,7 +312,11 @@ function onClickViewDetail() {
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
+              {{
+                (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                props.rowIndex +
+                1
+              }}
             </div>
 
             <div v-else>
@@ -270,18 +364,13 @@ function onClickViewDetail() {
           <q-td colspan="100%">
             <div class="text-left q-pa-md">
               <div class="col-12">
-                <d-table
+                <q-table
-                  ref="table"
+                  :columns="columnsExpand"
-                  :columns="columns"
+                  :rows="props.row.positions"
-                  :rows="rows"
+                  row-key="id"
-                  row-key="noPosition"
-                  flat
                   bordered
-                  :paging="true"
                   dense
                   class="custom-header-table"
-                  :rows-per-page-options="[10, 25, 50, 100]"
-                  :filter="filter"
                 >
                   <template v-slot:header="props">
                     <q-tr :props="props">
@@ -350,23 +439,23 @@ function onClickViewDetail() {
                       </q-td>
                     </q-tr>
                   </template>
-                </d-table>
+                </q-table>
               </div>
             </div>
           </q-td>
         </q-tr>
       </template>
-      <!-- <template v-slot:pagination="scope">
+      <template v-slot:pagination="scope">
-      <q-pagination
+        <q-pagination
-        v-model="currentPage"
+          v-model="reqMaster.page"
-        active-color="primary"
+          active-color="primary"
-        color="dark"
+          color="dark"
-        :max="Number(props.maxPage)"
+          :max="totalPage"
-        size="sm"
+          size="sm"
-        boundary-links
+          boundary-links
-        direction-links
+          direction-links
-      ></q-pagination>
+        ></q-pagination>
-    </template> -->
+      </template>
     </d-table>
   </div>
 

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

@@ -117,6 +117,13 @@ interface RowDetailPositions {
   posExecutiveId: string;
 }
 
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -133,4 +140,5 @@ export type {
   RowDetailPositions,
   HistoryPostType,
   FormPositionSelectRef,
+  NewPagination,
 };

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

@@ -0,0 +1,9 @@
+interface FilterMaster {
+  id: string; //*Id node
+  type: number; //*ประเภทnode
+  isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
+  page: number; //*หน้า
+  pageSize: number; //*จำนวนแถวต่อหน้า
+  keyword: string; //ข้อความที่ต้องการค้นหา
+}
+export type { FilterMaster };

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

@@ -61,6 +61,73 @@ interface DataPosition {
   positionName: string;
 }
 
+interface Position {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster {
+  id: string; // id อัตรากำลัง posmaster
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positions: Position[]; // ตำแหน่ง
+}
+interface Position2 {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster2 {
+  id: string; // id อัตรากำลัง posmaster
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positions: Position[]; // ตำแหน่ง
+}
+
 export type {
   DataActive,
   OrgTree,
@@ -69,4 +136,8 @@ export type {
   OptionLevel,
   OptionExecutive,
   DataPosition,
+  PosMaster,
+  PosMaster2,
+  Position,
+  Position2,
 };

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

@@ -2,7 +2,11 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 /** importType*/
-import type { DataActive } from "@/modules/02_organizationalNew/interface/response/organizational";
+import type {
+  DataActive,
+  Position,
+  PosMaster,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
 
 export const useOrganizational = defineStore("organizationalStore", () => {
   const typeOrganizational = ref<string>("current");
@@ -11,12 +15,39 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const dataActive = ref<DataActive>();
   const activeId = ref<string>();
   const draftId = ref<string>();
+  const isPublic = ref<boolean>(false);
+  const orgPublishDate = ref<Date>();
+
   function fetchDataActive(data: DataActive) {
     activeId.value = data.activeId;
     draftId.value = data.draftId;
     dataActive.value = data;
   }
 
+  function fetchPosMaster(data: PosMaster[]) {
+    console.log(data);
+
+    const newPosMaster = data.map((e: PosMaster) => ({
+      ...e,
+      positionIsSelected: e.positionIsSelected ? "มีคนครอง" : "ไม่มีคนครอง",
+      positionName: e.positionName ? e.positionName : "-",
+      posTypeName: e.posTypeName ? e.posTypeName : "-",
+      posLevelName: e.posLevelName ? e.posLevelName : "-",
+      posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+      // positions: [
+      //   {
+      //     ...e.positions,
+      //     positionName: e.positionName ? e.positionName : "-",
+      //     posTypeName: e.posTypeName ? e.posTypeName : "-",
+      //     posLevelName: e.posLevelName ? e.posLevelName : "-",
+      //     posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+      //     positionIsSelected: e.positionIsSelected ? "มีคนครอง" : "ไม่มีคนครอง",
+      //   },
+      // ],
+    }));
+    return newPosMaster;
+  }
+
   function checkLevel(type: number) {
     switch (type) {
       case 0:
@@ -57,5 +88,8 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     convertType,
     draftId,
     activeId,
+    isPublic,
+    orgPublishDate,
+    fetchPosMaster,
   };
 });