บรรจุ => รายการ อื่นๆ

src/modules/05_placement/components/Other/Main.vue

@@ -2,22 +2,27 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import type { QTableProps } from "quasar";
-import type {
-  listMain,
-  listMainAPI,
-} from "@/modules/05_placement/interface/response/OhterMain";
-import type { OpType } from "@/modules/05_placement/interface/response/Main";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { listMain } from "@/modules/05_placement/interface/response/OhterMain";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
+/** importcomopnents*/
 import Dialogbody from "@/modules/05_placement/components/Other/Dialogbody.vue";
 
+/** importStore*/
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
-
 const { statusText } = storeFn;
 const {
   showLoader,
@@ -26,13 +31,12 @@ const {
   messageError,
   date2Thai,
   dialogRemove,
+  findOrgName,
 } = mixin;
 
-const $q = useQuasar();
-const router = useRouter();
-const optionsType = ref<OpType[]>([]);
-const type = ref<string>("");
 const modal = ref<boolean>(false);
+const type = ref<string>("");
+const optionsType = ref<OpType[]>([]);
 const rows = ref<listMain[]>([]);
 const rows2 = ref<listMain[]>([]);
 
@@ -40,20 +44,14 @@ const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
-  "positionPath",
+  "position",
   "positionLevel",
-  "organizationPositionOld",
+  "affiliation",
   "createdAt",
-  "statustext",
+  "status",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -73,33 +71,50 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
-    name: "positionPath",
+    name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "positionPath",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     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: "organizationPositionOld",
+    name: "affiliation",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "affiliation",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "createdAt",
@@ -109,15 +124,17 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => date2Thai(val),
   },
   {
-    name: "statustext",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
 
@@ -128,32 +145,7 @@ const fecthlistOthet = async () => {
     .get(config.API.otherMain())
     .then((res) => {
       let response = res.data.result;
-      rows.value = response.map((r: listMainAPI) => ({
-        createdAt: date2Thai(r.createdAt),
-        date: new Date(),
-        firstName: r.firstname ?? "-",
-        personalId: r.id ?? "-",
-        isActive: r.isActive ? r.isActive : false,
-        lastName: r.lastname ?? "-",
-        organization: r.organization ?? "-",
-        organizationPositionOld: r.organizationPositionOld ?? "-",
-        posNo: r.posNo ?? "-",
-        position: r.position ?? "-",
-        positionPath: r.positionPath ?? "-",
-        positionLevel: r.positionLevel ?? "-",
-        positionLevelOld: r.positionLevelOld ?? "-",
-        positionNumberOld: r.positionNumberOld ?? "-",
-        positionTypeOld: r.positionTypeOld ?? "-",
-        prefix: r.prefix ?? "-",
-        reason: r.reason ?? "-",
-        salary: r.salary ? r.salary : 0,
-        status: r.status ?? "-",
-        statustext: statusText(r.status ?? ""),
-        fullname: `${r.prefix ?? ""}${r.firstname ?? ""} ${r.lastname ?? ""}`,
-        amountOld: r.amountOld,
-        positionDate: r.positionDate,
-        leaveDate: r.leaveDate,
-      }));
+      rows.value = response;
       rows2.value = rows.value.filter(
         (e: listMain) =>
           e.status !== "REPORT" &&
@@ -168,7 +160,7 @@ const fecthlistOthet = async () => {
       );
     })
     .catch((e) => {
-      messageError($q);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -229,10 +221,12 @@ const popup = () => {
 const clickClose = () => {
   modal.value = false;
 };
+
 //----(เปิด Dialog ลบข้อมูล)------//
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteOther(id));
 };
+
 //----(เปิดหน้าถัดไป)------//
 const nextPage = (id: string) => {
   router.push({
@@ -240,6 +234,13 @@ const nextPage = (id: string) => {
   });
 };
 
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 onMounted(() => {
   fecthlistOthet();
 });
@@ -317,45 +318,33 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="nextPage(props.row.personalId)"
-              >
-                <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="positionPath" :props="props">
-                  {{ props.row.positionPath }}
-                </q-td>
-                <q-td key="positionLevel" :props="props">
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="organizationPositionOld" :props="props">
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click.stop.prevent="nextPage(props.row.id)"
+                >
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
                   </div>
-                </q-td>
-                <q-td key="organization" :props="props">
-                  <div class="table_ellipsis">
-                    {{ props.row.organization }}
+
+                  <div
+                    v-else
+                    :class="col.name === 'affiliation' ? 'table_ellipsis' : ''"
+                  >
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td key="createdAt" :props="props">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
-                </q-td>
 
                 <q-td auto-width>
                   <q-btn
-                    v-if="
-                      props.row.status !== 'DONE' &&
-                      props.row.status !== 'REPORT'
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
                     "
                     flat
                     round