โครงสร้างอัตรากำลัง => โครงสร้างอัตรากำลัง

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

@@ -1,21 +1,44 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * import Type
+ */
 import type { QTableProps } from "quasar";
 import type { HistoryPos } from "@/modules/02_organizationalNew/interface/response/organizational";
 
+/**
+ * import Components
+ */
 import Header from "@/components/DialogHeader.vue";
 
+/**
+ * import Store
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+/** Use*/
 const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const $q = useQuasar();
-const modal = defineModel<boolean>("modal", { required: true });
 
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: {
+    type: String,
+  },
+});
+
+/**
+ * Table
+ */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -26,6 +49,54 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อคนครอง",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    format(val, row) {
+      let name = "";
+      if (row.posType && row.position) {
+        name = `${row.posType} (${row.position})`;
+      } else if (row.posType) {
+        name = `${row.posType}`;
+      } else if (row.position) {
+        name = `(${row.position})`;
+      } else name = "-";
+      return name;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "orgShortName",
     align: "left",
@@ -40,6 +111,9 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่แก้ไข",
     field: "lastUpdatedAt",
+    format(val, row) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -71,28 +145,15 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([]);
+const rows = ref<HistoryPos[]>([]);
 
-const props = defineProps({
-  rowId: {
-    type: String,
-  },
-});
-
-async function fetchHistoryPos(id: string) {
+function fetchHistoryPos(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.orgPosHistory(id))
     .then((res) => {
       const data: HistoryPos[] = res.data.result;
-      const list = data.map((e: HistoryPos) => ({
-        ...e,
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
-        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
-        posMasterNo: e.posMasterNo ?? "-",
-        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
-      }));
-      rows.value = list;
+      rows.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -102,6 +163,9 @@ async function fetchHistoryPos(id: string) {
     });
 }
 
+/**
+ * callback function ทำงานเมื่อ   modal === true
+ */
 watch(
   () => modal.value,
   () => {
@@ -111,7 +175,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal">
-    <q-card style="width: 700px; max-width: 80vw">
+    <q-card style="width: 1000px; max-width: 100vw">
       <Header
         :tittle="'ประวัติตำแหน่ง'"
         :close="
@@ -153,7 +217,7 @@ watch(
                 </div>
 
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value ?? "-" }}
                 </div>
               </q-td>
             </q-tr>