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

2024-11-06 13:48:28 +07:00 · 2024-11-06 13:48:28 +07:00 · 8390a8ab01
commit 8390a8ab01
parent 010deca042
8 changed files with 172 additions and 125 deletions
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@ -28,12 +28,24 @@ const inboxList = ref<InboxDetail[]>([]); // รายการกล่อง
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
 // รายการเมนูหลักของระบบ

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

 const items = ref<MenuMainList[]>([
  {
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/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">
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@ -245,24 +245,8 @@ onMounted(() => {
        >ข้อมูลครอบครัว
      </span>
    </q-toolbar>
-    <div
-      v-if="
-        !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 !== ''">
+    <div class="row q-col-gutter-y-sm">
+      <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>
@ -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"
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/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 : "-" }}
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/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
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rows.length !== 0 ? rows:[]"
-        :columns="columns"
-        :grid="!mode"
-        :filter="filter"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-        :virtual-scroll-sticky-size-start="48"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows.length !== 0 ? rows : []"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width />
+        </q-tr>
+      </template>

-        <template v-if="mode" v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? props.row.status : "-" }}
-              </div>
-              <div v-else>
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-            <q-td auto-width>
+      <template v-if="mode" v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <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-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"
-                  class="absolute_button"
-                  @click="onHistory(props.row.id)"
-                >
-                  <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>
-
+              <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"
--- a/src/modules/10_registry/views/main.vue
+++ b/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>