API Position

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"
-      row-key="noPosition"
+      :rows="posMaster"
+      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
-                  ref="table"
-                  :columns="columns"
-                  :rows="rows"
-                  row-key="noPosition"
-                  flat
+                <q-table
+                  :columns="columnsExpand"
+                  :rows="props.row.positions"
+                  row-key="id"
                   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">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template> -->
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="reqMaster.page"
+          active-color="primary"
+          color="dark"
+          :max="totalPage"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
     </d-table>
   </div>