พ้นจากราชการ => ถึงแก่กรรม

src/modules/06_retirement/components/resign/Deceased.vue

@@ -11,7 +11,14 @@ import config from "@/app.config";
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success, date2Thai } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  findOrgName,
+} = mixin;
 
 /** คอลัมน์ */
 const rows = ref<any>([]);
@@ -24,8 +31,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -35,15 +40,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "position",
@@ -55,31 +54,46 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionLevel",
+    name: "positionType",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
-    field: "positionLevel",
+    field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
+    },
   },
+
+  // {
+  //   name: "positionExecutive",
+  //   align: "left",
+  //   label: "ตำแหน่งทางการบริหาร",
+  //   sortable: true,
+  //   field: "positionExecutive",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
   {
-    name: "positionExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
+    name: "org",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "org",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "createdAt",
@@ -89,19 +103,19 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => date2Thai(val),
   },
 ]);
 
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
-  "prefix",
   "fullname",
   "positionType",
   "position",
   "positionLevel",
   "positionExecutive",
-  "oc",
+  "org",
   "createdAt",
 ]);
 
@@ -116,17 +130,8 @@ const fectListDecased = async () => {
   await http
     .get(config.API.listDeceased())
     .then((res) => {
-      rows.value = res.data.result.map((e: any) => ({
-        personalId: e.id,
-        fullname: `${e.prefix ?? ""}${e.firstName ?? ""} ${e.lastName ?? ""}`,
-        positionType: e.positionType == null ? "-" : e.positionType,
-        position: e.positionLine == null ? "-" : e.positionLine,
-        positionLevel: e.positionLevel === null ? "-" : e.positionLevel,
-        positionExecutive:
-          e.positionExecutive == null ? "-" : e.positionExecutive,
-        oc: e.organization == null ? "-" : e.organization,
-        createdAt: date2Thai(e.createdAt),
-      }));
+      const data = res.data.result;
+      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -228,35 +233,23 @@ const pagination = ref({
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="nextPage(props.row.personalId)"
+                @click="nextPage(props.row.id)"
               >
-                <q-td key="no" :props="props">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td key="fullname" :props="props">
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td key="positionType" :props="props">
-                  {{ props.row.positionType }}
-                </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
-                </q-td>
-                <q-td key="positionLevel" :props="props">
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="positionExecutive" :props="props">
-                  {{ props.row.positionExecutive }}
-                </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
-                </q-td>
                 <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="nextPage(props.row)"
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click.stop.prevent="nextPage(props.row.id)"
                 >
-                  {{ props.row.createdAt }}
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="col.name === 'org' ? 'table_ellipsis' : ''"
+                  >
+                    {{ col.value ? col.value : "-" }}
+                  </div>
                 </q-td>
               </q-tr>
             </template>