แก้ไข ทะเบียนประวัติลูกจ้างชั่วคราว

src/modules/08_registryEmployee/request/Main.ts

@@ -16,10 +16,14 @@ interface FormRegistryEmployee {
   dateAppoint: String | null;
   dateStart: String | null;
   createdAt: String | null;
-//   salaryDate: String | null;
+  //   salaryDate: String | null;
   isLeave: String;
-//   leaveReason: string;
+  //   leaveReason: string;
   leaveDateOrder: String | null;
+  draftPositionEmployee: String | null;
+  draftOrganizationOrganization: String | null;
+  newAgency: String | null;
+  currentAgency: String | null;
 }
 interface ResponseEmployeeTemp {
   id: string;
@@ -43,5 +47,7 @@ interface ResponseEmployeeTemp {
   isLeave: boolean;
   leaveReason: string;
   leaveDateOrder: Date | null;
+  draftPositionEmployee: String | null;
+  draftOrganizationOrganization: String | null;
 }
 export type { ResponseEmployeeTemp, FormRegistryEmployee };

src/modules/08_registryEmployee/views/Main.vue

@@ -56,18 +56,12 @@
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <q-table
+      <d-table
-        flat
-        bordered
-        dense
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumnsEmployeeTemp"
         :filter="filter"
         row-key="id"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -90,6 +84,53 @@
               {{ props.row.fullname }}
             </q-td>
             <q-td
+              key="newAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.draftOrganizationOrganization ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.draftPositionEmployee ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.oc ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.position ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <!-- <q-td
               key="positionEmployeePosition"
               :props="props"
               @click="redirectToPage(props.row.id)"
@@ -119,7 +160,7 @@
             </q-td>
             <q-td key="oc" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.oc }}
-            </q-td>
+            </q-td> -->
             <q-td
               key="amount"
               :props="props"
@@ -250,19 +291,7 @@
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+      </d-table>
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
     </div>
   </q-card>
   <q-dialog v-model="modal" persistent>
@@ -416,18 +445,6 @@
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
         </d-table>
       </q-card-section>
 
@@ -439,7 +456,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, useAttrs } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QInput, QForm, QTableProps } from "quasar";
@@ -502,13 +519,6 @@ const columnsModal = [
   },
 ];
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const visibleColumnsOrder = ref<String[]>([
   "no",
   "fullname",
@@ -548,9 +558,11 @@ visibleColumnsEmployeeTemp.value = [
   "salaryDate",
   "age",
   "amount",
-  "isLeave",
   "leaveDateOrder",
+  "newAgency",
+  "currentAgency",
 ];
+// "isLeave",
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -575,13 +587,12 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
-
   {
-    name: "positionEmployeePosition",
+    name: "newAgency",
     align: "left",
-    label: "ตำแหน่ง",
+    label: "หน่วยงานที่รับการบรรจุ",
     sortable: true,
-    field: "positionEmployeePosition",
+    field: "newAgency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -591,25 +602,11 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
   {
-    name: "positionEmployeePositionSide",
+    name: "currentAgency",
     align: "left",
-    label: "ด้านของตำแหน่ง",
+    label: "หน่วยงานปัจจุบัน",
     sortable: true,
-    field: "positionEmployeePositionSide",
+    field: "currentAgency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionLine",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -619,34 +616,77 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 
-  {
+  //   {
-    name: "positionEmployeeGroup",
+  //     name: "positionEmployeePosition",
-    align: "left",
+  //     align: "left",
-    label: "กลุ่มงาน",
+  //     label: "ตำแหน่ง",
-    sortable: true,
+  //     sortable: true,
-    field: "positionEmployeeGroup",
+  //     field: "positionEmployeePosition",
-    headerStyle: "font-size: 14px",
+  //     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+  //     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
+  //       a.localeCompare(b, undefined, {
-        numeric: true,
+  //         numeric: true,
-        sensitivity: "base",
+  //         sensitivity: "base",
-      }),
+  //       }),
-  },
+  //   },
-  {
+  //   {
-    name: "oc",
+  //     name: "positionEmployeePositionSide",
-    align: "left",
+  //     align: "left",
-    label: "สังกัด",
+  //     label: "ด้านของตำแหน่ง",
-    sortable: true,
+  //     sortable: true,
-    field: "oc",
+  //     field: "positionEmployeePositionSide",
-    headerStyle: "font-size: 14px",
+  //     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+  //     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
+  //       a.localeCompare(b, undefined, {
-        numeric: true,
+  //         numeric: true,
-        sensitivity: "base",
+  //         sensitivity: "base",
-      }),
+  //       }),
-  },
+  //   },
+  //   {
+  //     name: "positionLine",
+  //     align: "left",
+  //     label: "สายงาน",
+  //     sortable: true,
+  //     field: "positionLine",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+
+  //   {
+  //     name: "positionEmployeeGroup",
+  //     align: "left",
+  //     label: "กลุ่มงาน",
+  //     sortable: true,
+  //     field: "positionEmployeeGroup",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "oc",
+  //     align: "left",
+  //     label: "สังกัด",
+  //     sortable: true,
+  //     field: "oc",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
   {
     name: "amount",
     align: "left",
@@ -751,17 +791,17 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
+  //   {
-    name: "isLeave",
+  //     name: "isLeave",
-    align: "left",
+  //     align: "left",
-    label: "สถานะ",
+  //     label: "สถานะ",
-    sortable: true,
+  //     sortable: true,
-    field: "isLeave",
+  //     field: "isLeave",
-    headerStyle: "font-size: 14px",
+  //     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
+  //     // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   },
   {
     name: "leaveDateOrder",
     align: "left",
@@ -1204,7 +1244,6 @@ const getPosition = async (id: string) => {
       hideLoader();
     });
 };
-const attrs = ref<any>(useAttrs());
 
 const clickAddOrder = () => {
   modaladdOrder.value = true;
@@ -1307,13 +1346,6 @@ const next = (id: string) => {
   router.push(`/registryEmployee/${id}`);
 };
 
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
-};
-
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
@@ -1462,6 +1494,10 @@ const showEmployeeTemp = async () => {
             e.leaveDateOrder == null
               ? null
               : date2Thai(new Date(e.leaveDateOrder)),
+          newAgency: "",
+          currentAgency: "",
+          draftPositionEmployee: e.draftPositionEmployee,
+          draftOrganizationOrganization: e.draftOrganizationOrganization,
         });
       });
     })
@@ -1522,6 +1558,10 @@ const showEmployeeTempOrder = async () => {
             e.leaveDateOrder == null
               ? null
               : date2Thai(new Date(e.leaveDateOrder)),
+          newAgency: "",
+          currentAgency: "",
+          draftPositionEmployee: e.draftPositionEmployee,
+          draftOrganizationOrganization: e.draftOrganizationOrganization,
         });
       });
     })
@@ -1530,7 +1570,7 @@ const showEmployeeTempOrder = async () => {
     })
     .finally(() => {
       hideLoader();
-      console.log(rowsOrder);
+      //   console.log(rowsOrder);
     });
 };
 
@@ -1540,34 +1580,4 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </script>
-<style lang="scss">
+<style lang="scss"></style>
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>