Merge branch 'develop' into devTee

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";
@@ -15,8 +20,13 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
 const dataSort = ref<Array<any>>([]);
 const modalSort = ref<boolean>(false);
 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>("");
@@ -60,46 +70,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",
   },
@@ -135,6 +219,10 @@ function onClickViewDetail() {
 function onClickSort() {
   modalSort.value = true;
 }
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
@@ -149,14 +237,15 @@ function onClickSort() {
           icon="add"
           @click="onClickPosition('ADD')"
         >
-          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip></q-btn
-        >
+          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
+        </q-btn>
+
         <q-btn
           flat
           round
           dense
           color="blue"
-          icon="filter_list"
+          icon="mdi-sort"
           @click="onClickSort()"
         >
           <q-tooltip>จัดลำดับ</q-tooltip>
@@ -183,7 +272,7 @@ function onClickSort() {
         <div>
           <q-checkbox
             keep-color
-            v-model="showAllData"
+            v-model="reqMaster.isAll"
             label="แสดงตำแหน่งทั้งหมด"
             color="primary"
           >
@@ -202,8 +291,8 @@ function onClickSort() {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="rows"
-      row-key="noPosition"
+      :rows="posMaster"
+      row-key="id"
       flat
       bordered
       :paging="true"
@@ -211,6 +300,7 @@ function onClickSort() {
       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">
@@ -235,7 +325,11 @@ function onClickSort() {
           </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>
@@ -283,18 +377,13 @@ function onClickSort() {
           <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">
@@ -363,23 +452,23 @@ function onClickSort() {
                       </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>