ปรับเเสดง ผล OFFICER/EMPLOYEE

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

@@ -28,12 +28,24 @@ const inboxList = ref<InboxDetail[]>([]); // รายการกล่อง
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
 // รายการเมนูหลักของระบบ
 
-const filteredItems = computed(() =>
+const filteredItems = computed(() => {
-  items.value.filter(
+  const isOfficer = dataStore.officerType === "OFFICER";
-    (item) =>
+  const conditions: Record<string, boolean> = {
-      item.title !== "ทดลองปฏิบัติหน้าที่ราชการ" || dataStore.isProbation
+    "ทดลองปฏิบัติหน้าที่ราชการ": dataStore.isProbation,
-  )
+    "ประเมินบุคคล": isOfficer,
-);
+    "ผลงาน": isOfficer,
+    "ขอโอน": isOfficer,
+    "ผู้ขอรับการประเมิน (KPI)": isOfficer,
+    "ผู้ประเมิน (KPI)": isOfficer,
+    "ทุนการศึกษา/ฝึกอบรม": isOfficer,
+    "การพัฒนารายบุคคล": isOfficer,
+  };
+
+  return items.value.filter(
+    (item) => conditions[item.title] ?? true
+  );
+});
+
 
 const items = ref<MenuMainList[]>([
   {

src/modules/10_registry/01_Information/02_ChangeName.vue

@@ -295,6 +295,7 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-else v-slot:item="props">
+          
           <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
             <q-card bordered flat>
               <q-list dense class="q-mt-lg relative-position">

src/modules/10_registry/01_Information/04_Family.vue

@@ -245,24 +245,8 @@ onMounted(() => {
         >ข้อมูลครอบครัว
       </span>
     </q-toolbar>
-    <div
+    <div class="row q-col-gutter-y-sm">
-      v-if="
+      <div class="col-12">
-        !checkFatherData &&
-        !checkMotherData &&
-        !checkCoupleData &&
-        !checkChildData
-      "
-      class="col-12"
-    >
-      <q-card
-        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-        bordered
-      >
-        ไม่พบข้อมูล
-      </q-card>
-    </div>
-    <div v-else class="row q-col-gutter-sm">
-      <div class="col-12" v-if="fatherData.profileId !== ''">
         <q-card bordered class="q-pa-md">
           <div class="row">
             <span class="text-blue-6 text-weight-bold text-body1">• บิดา</span>
@@ -335,7 +319,7 @@ onMounted(() => {
         </q-card>
       </div>
       <!-- แม่ -->
-      <div class="col-12" v-if="motherData.profileId !== ''">
+      <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="row">
             <span class="text-blue-6 text-weight-bold text-body1">• มารดา</span>
@@ -409,7 +393,7 @@ onMounted(() => {
       </div>
 
       <!-- คู่สมรส -->
-      <div class="col-12" v-if="coupleData.profileId !== ''">
+      <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="row">
             <span class="text-blue-6 text-weight-bold text-body1"

src/modules/10_registry/02_Government/01_Government.vue

@@ -5,6 +5,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
 import type {
@@ -16,6 +17,8 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const daraPerson = useDataStore()
+const checkType = ref<boolean>(daraPerson.officerType == 'OFFICER' ? true:false)
 const store = useRegistryInFormationStore();
 const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
 
@@ -314,7 +317,7 @@ function getData() {
 /** get history */
 function getHistory() {
   const url =
-    store.typeProfile == "OFFICER"
+    checkType
       ? config.API.dataUserGovernmentHistory("")
       : config.API.dataUserGovernmentHistory("-employee");
   showLoader();
@@ -362,11 +365,12 @@ onMounted(() => {
               {{ formData.org ? formData.org : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
-              ตำแหน่งในสายงาน
+              {{ checkType ? 'ตำแหน่งในสายงาน':'ตำแหน่ง' }}
             </div>
             <div class="col-7">
               {{ formData.position ? formData.position : "-" }}
             </div>
+            
             <div class="col-5 text-grey-6 text-weight-medium">
               ตำแหน่งเลขที่
             </div>
@@ -374,21 +378,21 @@ onMounted(() => {
               {{ formData.posMasterNo ? formData.posMasterNo : "-" }}
             </div>
             <div
-              v-if="store.typeProfile == 'OFFICER'"
+              v-if="checkType"
               class="col-5 text-grey-6 text-weight-medium"
             >
               ตำแหน่งทางการบริหาร
             </div>
-            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+            <div v-if="checkType" class="col-7">
               {{ formData.posExecutive ? formData.posExecutive : "-" }}
             </div>
             <div
-              v-if="store.typeProfile == 'OFFICER'"
+              v-if="checkType"
               class="col-5 text-grey-6 text-weight-medium"
             >
               ด้านทางการบริหาร
             </div>
-            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+            <div v-if="checkType" class="col-7">
               {{
                 formData.positionExecutiveField
                   ? formData.positionExecutiveField
@@ -401,24 +405,24 @@ onMounted(() => {
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
             <div
-              v-if="store.typeProfile == 'OFFICER'"
+              v-if="checkType"
               class="col-5 text-grey-6 text-weight-medium"
             >
               สายงาน
             </div>
-            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+            <div v-if="checkType" class="col-7">
               {{ formData.positionField ? formData.positionField : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
               {{
-                store.typeProfile == "OFFICER" ? "ตำแหน่งประเภท" : "กลุ่มงาน"
+                checkType ? "ตำแหน่งประเภท" : "กลุ่มงาน"
               }}
             </div>
             <div class="col-7">
               {{ formData.posType ? formData.posType : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
-              {{ store.typeProfile == "OFFICER" ? "ระดับ" : "ระดับชั้นงาน" }}
+              {{ checkType ? "ระดับ" : "ระดับชั้นงาน" }}
             </div>
             <div class="col-7">
               {{ formData.posLevel ? formData.posLevel : "-" }}

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useDataStore } from "@/stores/data";
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
 const $q = useQuasar();
+const daraPerson = useDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
@@ -20,7 +21,9 @@ const rows = ref<SalaryFormType[]>([]);
 const filter = ref<string>("");
 const rowsHistory = ref<SalaryFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
+const checkType = ref<boolean>(
+  daraPerson.officerType == "OFFICER" ? true : false
+);
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
@@ -36,7 +39,20 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
 ]);
 
-const columns = ref<QTableProps["columns"]>([
+const columns = computed(() => {
+  if (checkType.value == false) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -50,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "amount",
     align: "left",
-    label: "เงินเดือน",
+    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -91,7 +107,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "positionType",
     align: "left",
-    label: "ตำแหน่งประเภท",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
@@ -147,7 +163,21 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
+
+const columnsHistory = computed(() => {
+  if (checkType.value == false) {
+    if (baseColumnsHistory.value) {
+      return baseColumnsHistory.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const baseColumnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -161,7 +191,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "amount",
     align: "left",
-    label: "เงินเดือน",
+    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -313,7 +343,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
   },
 ]);
 
@@ -401,7 +431,6 @@ onMounted(() => {
         outlined
         emit-value
         map-options
-        
         options-dense
         option-value="name"
         style="min-width: 140px"
@@ -410,90 +439,89 @@ onMounted(() => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-      <d-table
+    <d-table
-        flat
+      flat
-        dense
+      dense
-        bordered
+      bordered
-        virtual-scroll
+      virtual-scroll
-        :rows="rows.length !== 0 ? rows:[]"
+      :rows="rows.length !== 0 ? rows : []"
-        :columns="columns"
+      :columns="columns"
-        :grid="!mode"
+      :grid="!mode"
-        :filter="filter"
+      :filter="filter"
-        :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
+      :visible-columns="visibleColumns"
-        :virtual-scroll-sticky-size-start="48"
+      :virtual-scroll-sticky-size-start="48"
-      >
+    >
-        <template v-slot:header="props">
+      <template v-slot:header="props">
-          <q-tr :props="props">
+        <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
+            <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
+          </q-th>
-            <q-th auto-width />
+          <q-th auto-width />
-          </q-tr>
+        </q-tr>
-        </template>
+      </template>
 
-        <template v-if="mode" v-slot:body="props">
+      <template v-if="mode" v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
+            <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+              {{ props.rowIndex + 1 }}
-              </div>
+            </div>
-              <div v-else-if="col.name == 'status'">
+            <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? props.row.status : "-" }}
+              {{ props.row.status ? props.row.status : "-" }}
-              </div>
+            </div>
-              <div v-else>
+            <div v-else>
-                {{ col.value ? col.value : "-" }}
+              {{ col.value ? col.value : "-" }}
-              </div>
+            </div>
-            </q-td>
+          </q-td>
-            <q-td auto-width>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
               <q-btn
+                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                icon="mdi-history"
+                class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
               </q-btn>
-            </q-td>
+              <q-item v-for="col in props.cols" :key="col.name">
-          </q-tr>
+                <q-item-section class="fix_top">
-        </template>
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
-        <template v-else v-slot:item="props">
+                    col.label
-          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  }}</q-item-label>
-            <q-card bordered flat>
+                </q-item-section>
-              <q-list dense class="q-mt-lg relative-position">
+                <q-item-section class="fix_top">
-                <q-btn
+                  <q-item-label class="text-dark text-weight-medium">{{
-                  icon="mdi-history"
+                    col.value ? col.value : "-"
-                  color="info"
+                  }}</q-item-label>
-                  flat
+                </q-item-section>
-                  dense
+              </q-item>
-                  round
+            </q-list>
-                  size="14px"
+          </q-card>
-                  class="absolute_button"
+        </div>
-                  @click="onHistory(props.row.id)"
+      </template>
-                >
+    </d-table>
-                  <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-                </q-btn>
-                <q-item v-for="col in props.cols" :key="col.name">
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-grey-6 text-weight-medium">{{
-                      col.label
-                    }}</q-item-label>
-                  </q-item-section>
-                  <q-item-section class="fix_top">
-                    <q-item-label class="text-dark text-weight-medium">{{
-                      col.value ? col.value : "-"
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
-        </template>
-      </d-table>
-
   </div>
   <DialogHistory
     v-model:modal="modalHistory"

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

@@ -2,6 +2,7 @@
 import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import axios from "axios";
 //หน้าเมนู
@@ -21,6 +22,7 @@ const apiGenReport =
   "https://report-server.frappet.synology.me/api/v1/report-template/docx";
 const store = useRegistryInFormationStore();
 const $q = useQuasar();
+const dataStore = useDataStore();
 const mixin = useCounterMixin();
 const { messageError, dialogConfirm, showLoader, hideLoader } = mixin;
 const profileImg = ref<string>("");
@@ -61,7 +63,9 @@ function getMain() {
       formData.posTypeName = data.posTypeName;
       formData.posExecutiveName = data.posExecutiveName;
       formData.posLevelName = data.posLevelName;
-      formData.posNo = data.rootShortName ? `${data.rootShortName}${data.posMaster}`:'';
+      formData.posNo = data.rootShortName
+        ? `${data.rootShortName}${data.posMaster}`
+        : "";
       store.profileId = data.profileId;
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
@@ -227,9 +231,15 @@ onMounted(async () => {
                     ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
                     : "-"
                 }}</span>
+                <span class="text-grey text-weight-medium">{{
+                  dataStore.officerType == "OFFICER"
+                    ? `ข้าราชการกรุงเทพมหานครสามัญ`
+                    : "ลูกจ้างประจำกรุงเทพมหานคร"
+                }}</span>
                 <span class="text-grey text-weight-medium">{{
                   formData.position ? `${formData.position}` : "-"
                 }}</span>
+
                 <div class="text-grey">{{ formData.posNo }}</div>
               </div>
             </q-card-section>
@@ -347,6 +357,11 @@ onMounted(async () => {
                   ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
                   : "-"
               }}</span>
+              <span class="text-grey text-weight-medium">{{
+                dataStore.officerType == "OFFICER"
+                  ? `ข้าราชการกรุงเทพมหานครสามัญ`
+                  : "ลูกจ้างประจำกรุงเทพมหานคร"
+              }}</span>
               <span class="text-grey text-weight-medium">{{
                 formData.position ? `${formData.position}` : "-"
               }}</span>

src/stores/data.ts

@@ -9,6 +9,7 @@ export const useDataStore = defineStore("data", () => {
 
   const expandedReport2 = ref<string[]>([]);
   const selectedReport2 = ref<string>("");
+  const officerType = ref<string>("tets");
   const expandedRegister = ref<string[]>([]);
   const selectedRegister = ref<string>("");
   // computed() คือการประกาศ getters เหมือน vuex
@@ -67,7 +68,8 @@ export const useDataStore = defineStore("data", () => {
     expandedRegister,
     selectedRegister,
     changeTreeRegister,
-    isProbation
+    isProbation,
+    officerType
   };
 });
 

src/views/MainLayout.vue

@@ -9,14 +9,14 @@ import CustomComponent from "@/components/CustomDialog.vue";
 import avatar from "@/assets/avatar_user.jpg";
 import { tokenParsed, logout } from "@/plugins/auth";
 
-import { useDataStore } from '@/stores/data'
+import { useDataStore } from "@/stores/data";
 
 const route = useRoute();
 const router = useRouter();
 
 const $q = useQuasar();
 const profileImg = ref<string>("");
-const dataStore = useDataStore()
+const dataStore = useDataStore();
 
 const mixin = useCounterMixin();
 const {
@@ -40,6 +40,7 @@ const link = ref<string>("");
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
+  await checkUser();
   await fetchTotolNotificate();
   const user = await tokenParsed();
   fullname.value = user?.name;
@@ -50,7 +51,8 @@ async function checkUser() {
     .get(config.API.profilePosition())
     .then(async (res) => {
       const data = res.data.result;
-      dataStore.isProbation = data.isProbation
+      dataStore.isProbation = data.isProbation;
+      dataStore.officerType = data.type;
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
       } else {
@@ -96,7 +98,6 @@ async function fetchTotolNotificate() {
     .then((res) => {
       totalNoti.value = res.data.result;
       // check user in system
-      checkUser();
     })
     .catch((err) => {
       messageError($q, err);