ปรับเมนู และเพิ่ม UI ผลงาน

src/modules/01_dashboard/views/Dashboard.vue

@@ -34,6 +34,14 @@ const items = ref<any>([
     path: "/organization-chart",
     active: false,
   },
+  {
+    icon: "mdi-clipboard-account-outline",
+    title: "ทะเบียนประวัติ",
+    sub: "ข้อมูลทะเบียนประวัติ",
+    color: "blue-4",
+    path: "/registry",
+    active: false,
+  },
   {
     icon: "mdi-clipboard-account-outline",
     title: "ประเมินบุคคล",
@@ -55,7 +63,7 @@ const items = ref<any>([
     title: "ผลงาน",
     sub: "ดูผลงาน",
     color: "light-green-3",
-    path: "",
+    path: "/portfolio",
     active: false,
   },
   {
@@ -66,14 +74,14 @@ const items = ref<any>([
     path: "/transfer",
     active: false,
   },
-  {
+  /*{
     icon: "mdi-account-remove-outline",
     title: "ลาออก",
     sub: "ทำเรื่องลาออก",
     color: "orange-3",
     path: "/retire",
     active: false,
-  },
+  },*/
   {
     icon: "mdi-scale-balance",
     title: "อุทธรณ์ร้องทุกข์",

src/modules/02_transfer/views/AddTransfer.vue

@@ -99,13 +99,13 @@ const fecthDataTransfer = async (id: string) => {
 };
 
 /**
- * ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
+ * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
  */
 const fileDocDataUpload = ref<File[]>([]);
 const filesNull = () => {
   files.value = null;
 };
-//อัพโหลดไฟล์
+//อัปโหลดไฟล์
 const fileUploadDoc = async (file: any) => {
   fileDocDataUpload.value.push(file);
   nameFile.value = file[0].name;
@@ -178,25 +178,12 @@ function fileOpen(url: string) {
                     lazy-rules
                     hide-bottom-space
                     accept=".pdf"
-                    :rules="[
+                    :rules="[(val: string) => !!val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
-                      (val) => !!val || 'กรุณากรอกอัพโหลดเอกสารเพิ่มเติม',
-                    ]"
                     label="เอกสารเพิ่มเติม"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" /> </template
                   ></q-file>
-                  <!-- <q-uploader
-                    bordered
-                    flat
-                    class="col-12"
-                    accept=".jpg,.png,.pdf,.csv,.doc"
-                    url="http://localhost:4444/upload"
-                    label="เอกสารเพิ่มเติม"
-                    type="file"
-                    @added="fileUploadDoc"
-                    @removed="filesNull"
-                  /> -->
                 </div>
                 <div class="col-12 row" v-if="routeName != 'addTransfer'">
                   <q-card bordered flat class="full-width">
@@ -209,10 +196,7 @@ function fileOpen(url: string) {
                     </div>
                     <q-separator />
                     <q-list separator>
-                      <q-item
+                      <q-item v-for="file in files" :key="file.key">
-                        v-for="file in files"
-                        :key="file.key"
-                      >
                         <q-item-section>
                           {{ file.fileName }}
                         </q-item-section>

src/modules/03_retire/views/addRetire.vue

@@ -234,7 +234,7 @@ function downloadFile(data: string) {
                       "
                       :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
                       :rules="[
-                        (val) =>
+                        (val: string) =>
                           !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
                       ]"
                     >
@@ -282,7 +282,7 @@ function downloadFile(data: string) {
                       "
                       :label="`${'วันที่ขอลาออกจากราชการ'}`"
                       :rules="[
-                        (val) =>
+                        (val: string) =>
                           !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
                       ]"
                     >
@@ -309,7 +309,7 @@ function downloadFile(data: string) {
                   hide-bottom-space
                   :readonly="routeName != 'AddRetire'"
                   :rules="[
-                    (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
+                    (val: string) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
                   ]"
                 />
 
@@ -322,9 +322,7 @@ function downloadFile(data: string) {
                     lazy-rules
                     hide-bottom-space
                     accept=".pdf"
-                    :rules="[
+                    :rules="[(val: string) => !!val || 'กรุณาเลือกเอกสารเพิ่มเติม']"
-                      (val) => !!val || 'กรุณากรอกอัพโหลดเอกสารเพิ่มเติม',
-                    ]"
                     label="เอกสารเพิ่มเติม"
                   >
                     <template v-slot:prepend>
@@ -332,12 +330,7 @@ function downloadFile(data: string) {
                   ></q-file>
                 </div>
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
-                  <q-card
+                  <q-card bordered flat class="row col-12 text-dark q-mt-sm">
-                    bordered
-                    flat
-                    class="row col-12 text-dark q-mt-sm"
-                    
-                  >
                     <div
                       class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                     >
@@ -376,11 +369,7 @@ function downloadFile(data: string) {
                 </div>
 
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
-                  <q-card
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
-                    bordered
-                    class="row col-12 text-dark q-mt-sm"
-                    
-                  >
                     <div
                       class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                     >
@@ -444,11 +433,7 @@ function downloadFile(data: string) {
                 </div>
 
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
-                  <q-card
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
-                    bordered
-                    class="row col-12 text-dark q-mt-sm"
-                    
-                  >
                     <div
                       class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                     >
@@ -511,11 +496,7 @@ function downloadFile(data: string) {
                   </q-card>
                 </div>
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
-                  <q-card
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
-                    bordered
-                    class="row col-12 text-dark q-mt-sm"
-                    
-                  >
                     <div
                       class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
                     >
@@ -579,27 +560,33 @@ function downloadFile(data: string) {
                 </div>
               </div>
             </div>
-
           </div>
           <q-separator v-if="routeName !== 'AddRetire'" />
-          <q-card-actions align="right" v-if="routeName !== 'AddRetire'" class="q-px-md">
+          <q-card-actions
-              <q-btn
+            align="right"
-                v-if="
+            v-if="routeName !== 'AddRetire'"
-                  dataDetail.status !== 'DELETE' &&
+            class="q-px-md"
-                  dataDetail.status !== 'DONE' &&
+          >
-                  dataDetail.status !== 'CANCEL'
+            <q-btn
-                "
+              v-if="
-                unelevated
+                dataDetail.status !== 'DELETE' &&
-                
+                dataDetail.status !== 'DONE' &&
-                class="q-px-md items-center"
+                dataDetail.status !== 'CANCEL'
-                color="orange"
+              "
-                label="ยกเลิกการลาออก"
+              unelevated
-                @click="cancelResing"
+              class="q-px-md items-center"
-                :disable="tranferOrg == '' && noteReason == ''"
+              color="orange"
-              />
+              label="ยกเลิกการลาออก"
-            </q-card-actions>
+              @click="cancelResing"
+              :disable="tranferOrg == '' && noteReason == ''"
+            />
+          </q-card-actions>
           <q-separator v-if="routeName == 'AddRetire'" />
-            <q-card-actions align="right" v-if="routeName == 'AddRetire'" class="q-px-md">
+          <q-card-actions
+            align="right"
+            v-if="routeName == 'AddRetire'"
+            class="q-px-md"
+          >
             <q-space />
             <q-btn
               unelevated

src/modules/03_retire/views/main.vue

@@ -139,7 +139,7 @@ const clickBack = () => {
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
       <div class="toptitle text-white col-12 row items-center">
-        <q-btn
+        <!-- <q-btn
           icon="mdi-arrow-left"
           unelevated
           round
@@ -148,8 +148,8 @@ const clickBack = () => {
           color="primary"
           class="q-mr-sm"
           @click="clickBack"
-        />
+        /> -->
-        ลาออก
+        ขอลาออก
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">

src/modules/09_scholarship/views/detail.vue

@@ -292,7 +292,7 @@ async function clickUpload(file: any) {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชั่นสำหรับอัปโหลดไฟล์เอกสารหลักฐาน
  */
 async function uploadFileDoc(uploadUrl: string, file: any) {
   const Data = new FormData();

src/modules/10_registry/views/main.vue

@@ -132,16 +132,34 @@ const doLogout = () => {
   );
 };
 
+/**
+ * ฟังชั่นกลับหน้าหลัก
+ */
+const clickBack = () => {
+  router.push(`/`);
+};
+
 onMounted(async () => {
   store.typeProfile = "OFFICER";
   await getType();
   await getMain();
 });
 </script>
+
 <template>
   <div class="row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
       <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="clickBack"
+        />
         ข้อมูลทะเบียนประวัติ
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">

src/modules/13_portfolio/router.ts

@@ -0,0 +1,33 @@
+/**
+ * Router ขอโอน
+ */
+
+const MainPage = () => import("@/modules/13_portfolio/views/Main.vue");
+const FormData = () => import("@/modules/13_portfolio/views/Add.vue");
+
+export default [
+  {
+    path: "/portfolio",
+    name: "portfolio",
+    component: MainPage,
+    meta: {
+      Auth: true,
+    },
+  },
+  {
+    path: "/portfolio/add",
+    name: "addPortfolio",
+    component: FormData,
+    meta: {
+      Auth: true,
+    },
+  },
+  {
+    path: "/portfolio/:id",
+    name: "portfolioDetail",
+    component: FormData,
+    meta: {
+      Auth: true,
+    },
+  },
+];

src/modules/13_portfolio/views/Add.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+
+/**
+ * ตัวแปรที่ใช้งาน
+ */
+const route = useRoute();
+const files = ref<any>();
+const name = ref("");
+const description = ref("");
+const id = ref<string>("");
+const nameFile = ref<string>("");
+const routeName = router.currentRoute.value.name;
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(() => {
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fecthData(id.value);
+  }
+});
+
+const saveData = async () => {
+  dialogConfirm(
+    $q,
+    () => {
+      createTransfer();
+    },
+    "ยืนยันการยื่นข้อมูลการโอน",
+    "ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
+  );
+};
+
+/**
+ * ฟังก์ชั่นสร้างขอโอน
+ */
+const createTransfer = async () => {
+  showLoader();
+  const formData = new FormData();
+  formData.append("Organization", name.value);
+  formData.append("Reason", description.value);
+  formData.append("file", files.value);
+  // await http
+  //   .post(config.API.listtransfer(), formData)
+  //   .then((res: any) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     router.push(`/transfer`);
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+/**
+ * ฟังก์ชั่นเรียกข้อมูลจาก Api
+ * @param id ไอดีของข้อมูล
+ */
+const fecthData = async (id: string) => {
+  // showLoader();
+  // await http
+  //   .get(config.API.transferByid(id))
+  //   .then((res: any) => {
+  //     let data = res.data.result;
+  //     name.value = data.organization;
+  //     description.value = data.reason;
+  //     files.value = data.docs;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+/**
+ * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ */
+const fileDocDataUpload = ref<File[]>([]);
+const filesNull = () => {
+  files.value = null;
+};
+//อัปโหลดไฟล์
+const fileUploadDoc = async (file: any) => {
+  fileDocDataUpload.value.push(file);
+  nameFile.value = file[0].name;
+  files.value = file;
+};
+
+function fileOpen(url: string) {
+  window.open(url, "_blank");
+}
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div v-if="routeName == 'addTransfer'">เพิ่มเอกสาร/ผลงาน</div>
+        <div v-else>รายละเอียดเอกสาร/ผลงาน</div>
+      </div>
+      <q-form
+        class="col-12"
+        greedy
+        @submit.prevent
+        @validation-success="saveData"
+      >
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  :class="
+                    routeName != 'addPortfolio' ? 'col-12' : 'col-12 inputgreen'
+                  "
+                  dense
+                  outlined
+                  v-model="name"
+                  hide-bottom-space
+                  label="ชื่อเอกสาร/ผลงาน"
+                  :readonly="routeName != 'addPortfolio'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเอกสาร/ผลงาน'}`]"
+                />
+                <q-input
+                  :class="
+                    routeName != 'addPortfolio' ? 'col-12' : 'col-12 inputgreen'
+                  "
+                  dense
+                  outlined
+                  v-model="description"
+                  label="รายละเอียดเอกสาร/ผลงาน"
+                  hide-bottom-space
+                  type="textarea"
+                  :readonly="routeName != 'addPortfolio'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเอกสาร/ผลงาน'}`]"
+                />
+                <div class="col-12 row" v-if="routeName == 'addPortfolio'">
+                  <q-file
+                    v-model="files"
+                    class="col-xs-12 col-sm-12 inputgreen"
+                    outlined
+                    dense
+                    lazy-rules
+                    hide-bottom-space
+                    accept=".pdf, .docx, .doc, .xlsx, .xls"
+                    :rules="[
+                      (val:string) => !!val || 'กรุณาเลือกไฟล์เอกสาร/ผลงาน',
+                    ]"
+                    label="เอกสาร/ผลงาน"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" /> </template
+                  ></q-file>
+                </div>
+                <div class="col-12 row" v-if="routeName != 'addPortfolio'">
+                  <q-card bordered flat class="full-width">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        เอกสาร/ผลงาน
+                      </div>
+                    </div>
+                    <q-separator />
+                    <q-list separator>
+                      <q-item v-for="file in files" :key="file.key">
+                        <q-item-section>
+                          {{ file.fileName }}
+                        </q-item-section>
+                        <q-item-section avatar>
+                          <q-btn
+                            color="teal-5"
+                            round
+                            flat
+                            icon="mdi-download"
+                            @click="fileOpen(file.pathName)"
+                          ></q-btn>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
+          <q-separator v-if="routeName == 'addPortfolio'" />
+          <q-card-actions
+            align="right"
+            class="row col-12"
+            v-if="routeName == 'addPortfolio'"
+          >
+            <q-space />
+            <q-btn
+              unelevated
+              class="q-px-md items-center"
+              color="primary"
+              label="บันทึก"
+              type="onsubmit"
+            />
+          </q-card-actions>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
+</template>

src/modules/13_portfolio/views/Main.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const currentPage = ref<number>(1);
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+/**
+ * เพิ่มหัวข้อตาราง
+ */
+const filter = ref<string>("");
+const rows = ref<any>([]);
+const visibleColumns = ref<String[]>(["no", "name", "description"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเอกสาร/ผลงาน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียดเอกสาร/ผลงาน",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+]);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fecthList();
+});
+
+//นำข้อมูลมาแสดง
+const fecthList = async () => {
+  // showLoader();
+  // await http
+  //   .get(config.API.listUserTransfer())
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+/**
+ * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
+ */
+const clickAdd = async () => {
+  router.push(`/portfolio/add`);
+};
+
+/**
+ * ฟังก์ชั่นกดย้อนกลับ
+ */
+const clickBack = () => {
+  router.push(`/`);
+};
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="clickBack"
+        />
+        รายการเอกสาร/ผลงาน
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <div class="q-pb-sm row">
+            <div>
+              <q-btn
+                size="14px"
+                flat
+                dense
+                color="blue"
+                @click="clickAdd"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+              </q-btn>
+            </div>
+            <q-space />
+            <div class="items-center q-gutter-sm" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs"
+              >
+                <template> </template>
+              </q-select>
+            </div>
+          </div>
+          <div>
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="id"
+              class="custom-table2"
+              style="max-height: 80vh"
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ rows.length }} รายการ
+                <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>
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    style="color: #000000; font-weight: 500"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card
+                    bordered
+                    flat
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="col.name === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>

src/router/index.ts

@@ -16,6 +16,7 @@ import ModuleScholarship from "@/modules/09_scholarship/router";
 import ModuleRegistry from "@/modules/10_registry/router";
 import ModuleProbation from "@/modules/11_probation/router";
 import ModuleOrganization from "@/modules/12_organization/router";
+import ModulePortfolio from "@/modules/13_portfolio/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -57,6 +58,7 @@ const router = createRouter({
         ...ModuleRegistry,
         ...ModuleProbation,
         ...ModuleOrganization,
+        ...ModulePortfolio,
       ],
     },
   ],

src/views/MainLayout.vue

@@ -154,7 +154,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
 };
 
 function onInfo() {
-  router.push(`/registry`);
+  router.push(`/retire`);
 }
 </script>
 <!-- โครงเว็บ -->
@@ -362,7 +362,7 @@ function onInfo() {
             </q-item>
           </template>
           <q-list>
-            <q-item clickable v-close-popup @click="onInfo">
+            <!-- <q-item clickable v-close-popup @click="onInfo">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon
                   color="blue-9"
@@ -375,6 +375,18 @@ function onInfo() {
                   >ข้อมูลทะเบียนประวัติ</q-item-label
                 ></q-item-section
               >
+            </q-item> -->
+            <q-item clickable v-close-popup @click="onInfo">
+              <q-item-section avatar style="min-width: 30px">
+                <q-icon
+                  color="red-9"
+                  size="18px"
+                  name="mdi-account-remove-outline"
+                />
+              </q-item-section>
+              <q-item-section
+                ><q-item-label>ขอลาออก</q-item-label></q-item-section
+              >
             </q-item>
 
             <q-item clickable v-close-popup>