ปรับแก้ไขข้อมูลหลักตำแหน่งลูกจ้างประจำ

2024-03-12 13:20:17 +07:00 · 2024-03-12 13:20:17 +07:00 · 7703fa374c
commit 7703fa374c
parent 4a554fa225
7 changed files with 321 additions and 184 deletions
--- a/src/interface/main.ts
+++ b/src/interface/main.ts
@ -0,0 +1,6 @@
+interface DataOption {
+  id: string;
+  label: string;
+}
+
+export type { DataOption };
--- a/src/modules/01_metadataNew/components/position-employee/02ListType.vue
+++ b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
@ -32,17 +32,17 @@ const columns = [
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
-  // {
-  //   name: "posTypeRank",
-  //   align: "left",
-  //   label: "ระดับตำแหน่ง",
-  //   sortable: true,
-  //   field: "posTypeRank",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   sort: (a: string, b: string) =>
-  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
+  {
+    name: "posTypeRank",
+    align: "left",
+    label: "ระดับกลุ่มงาน",
+    sortable: true,
+    field: "posTypeRank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
  {
    name: "createdAt",
    align: "left",
@ -85,11 +85,14 @@ const filterKeyword = ref<string>("");
 const dialog = ref<boolean>(false);
 const posTypeName = ref<string>("");
 const posTypeNameRef = ref<QInput | null>(null);
+const posTypeShortName = ref<string>("");
+const posTypeShortNameRef = ref<QInput | null>(null);
 const posTypeRank = ref<number | undefined>();
 const posTypeRankRef = ref<QInput | null>(null);
 const dialogStatus = ref<string>("");
 const visibleColumns = ref<string[]>([
  "posTypeName",
+  "posTypeShortName",
  "posTypeRank",
  // "createdAt",
  // "lastUpdatedAt",
@ -97,39 +100,59 @@ const visibleColumns = ref<string[]>([
 ]);

 async function fetchData() {
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPosType)
-  //   .then(async (res) => {
-  //     store.save(res.data.result);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }

 async function addData() {
-  await http.post(config.API.orgPosType, {
-    posTypeName: posTypeName.value,
-    posTypeRank: posTypeRank.value,
-  });
-  fetchData();
+  await http
+    .post(config.API.orgPosType, {
+      posTypeName: posTypeName.value,
+      posTypeShortName: posTypeShortName.value,
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 async function editData(id: string) {
-  await http.put(config.API.orgPosTypeId(id), {
-    posTypeName: posTypeName.value,
-    posTypeRank: posTypeRank.value,
-  });
-  fetchData();
+  await http
+    .put(config.API.orgPosTypeId(id), {
+      posTypeName: posTypeName.value,
+      posTypeShortName: posTypeShortName.value,
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosTypeId(id));
-  fetchData();
+  await http
+    .delete(config.API.orgPosTypeId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 onMounted(async () => {
@ -276,7 +299,7 @@ async function onSubmit() {
  </d-table>

  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px">
+    <q-card style="width: 350px">
      <form @submit.prevent="validateForm">
        <q-card-section class="flex justify-between" style="padding: 0">
          <dialog-header
@ -290,34 +313,52 @@ async function onSubmit() {
        </q-card-section>

        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-input
-            ref="posTypeNameRef"
-            outlined
-            v-model="posTypeName"
-            label="ชื่อกลุ่มงาน"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 q-ma-md"
-            bg-color="white"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
-            hide-bottom-space
-          />
-          <!-- <q-input
-            ref="posTypeRankRef"
-            outlined
-            v-model="posTypeRank"
-            label="ระดับ"
-            dense
-            type="number"
-            lazy-rules
-            borderless
-            min="1"
-            class="col-12 q-ma-md"
-            :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-            hide-bottom-space
-          /> -->
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              ref="posTypeNameRef"
+              outlined
+              v-model="posTypeName"
+              label="ชื่อกลุ่มงาน"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
+              hide-bottom-space
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posTypeShortNameRef"
+              v-model="posTypeShortName"
+              dense
+              outlined
+              for="#positionShortName"
+              label="อักษรย่อกลุ่มงาน"
+              lazy-rules
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกอักษรย่อกลุ่มงาน'}`]"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-input
+              ref="posTypeRankRef"
+              outlined
+              v-model="posTypeRank"
+              label="ระดับกลุ่มงาน"
+              dense
+              type="number"
+              lazy-rules
+              borderless
+              min="1"
+              bg-color="white"
+              :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
+              hide-bottom-space
+            />
+          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
--- a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
+++ b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
@ -5,12 +5,15 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
 import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 const store = usePositionEmployeeDataStore();
 const storeName = usePositionTypeDataStore();
+const storeOption = useMainOptionDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();

@ -345,7 +348,7 @@ async function fetchName() {
    </d-table>

    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="min-width: 350px" class="bg-grey-11">
+      <q-card style="width: 350px">
        <form @submit.prevent="validateForm">
          <q-card-section class="flex justify-between" style="padding: 0">
            <dialog-header
@ -355,58 +358,69 @@ async function fetchName() {
          </q-card-section>

          <q-separator color="grey-4" />
-          <q-card-section class="q-pa-none">
-            <q-input
-              outlined
-              ref="posLevelNameRef"
-              v-model="posLevelName"
-              label="ระดับชั้นงาน"
-              dense
-              lazy-rules
-              borderless
-              bg-color="white"
-              class="col-12 q-ma-md"
-              hide-bottom-space
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
-            />
-            <!-- <q-input
-              bg-color="white"
-              ref="posLevelRankRef"
-              outlined
-              v-model="posLevelRank"
-              label="ระดับ"
-              dense
-              type="number"
-              lazy-rules
-              borderless
-              min="1"
-              class="col-12 q-ma-md"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-              hide-bottom-space
-            /> -->
-            <q-input
-              outlined
-              bg-color="white"
-              v-model="posLevelAuthority"
-              label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 q-ma-md"
-              hide-bottom-space
-            />
-            <q-select
-              ref="posTypeIdRef"
-              v-model="posName"
-              label="กลุ่มงาน"
-              outlined
-              dense
-              class="col-12 q-ma-md"
-              bg-color="white"
-              options-cover
-              hide-bottom-space
-              readonly
-            />
+          <q-card-section class="row q-gutter-y-md">
+            <div class="col-12">
+              <q-input
+                outlined
+                ref="posLevelNameRef"
+                v-model="posLevelName"
+                label="ระดับชั้นงาน"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
+              />
+            </div>
+
+            <!-- <div class="col-12">
+              <q-input
+                ref="posLevelRankRef"
+                outlined
+                v-model="posLevelRank"
+                label="ระดับ"
+                dense
+                type="number"
+                lazy-rules
+                borderless
+                min="1"
+                bg-color="white"
+                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                hide-bottom-space
+              />
+            </div> -->
+
+            <div class="col-12">
+              <q-select
+                outlined
+                v-model="posLevelAuthority"
+                emit-value
+                map-options
+                :options="storeOption.posLevelAuthorityOption"
+                option-value="label"
+                label="ผู้มีอำนาจสั่งบรรจุ"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                ref="posTypeIdRef"
+                v-model="posName"
+                label="กลุ่มงาน"
+                outlined
+                dense
+                bg-color="white"
+                options-cover
+                hide-bottom-space
+                readonly
+              />
+            </div>
          </q-card-section>

          <q-card-actions align="right">
--- a/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue
+++ b/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue
@ -4,12 +4,14 @@ import type { QInput, QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { usePositionDataStore } from "@/modules/01_metadataNew/stores/positionListStore";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 const store = usePositionDataStore();
+const storeOption = useMainOptionDataStore();
 const storeName = usePositionTypeDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
@ -153,30 +155,48 @@ async function fetchData() {
 }

 async function addData() {
-  await http.post(config.API.orgPosLevel, {
-    posLevelName: posLevelName.value,
-    posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
+  await http
+    .post(config.API.orgPosLevel, {
+      posLevelName: posLevelName.value,
+      posLevelRank: posLevelRank.value,
+      posLevelAuthority:
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posTypeId: id.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 async function editData(editId: string) {
-  await http.put(config.API.orgPosLevelId(editId), {
-    posLevelName: posLevelName.value,
-    posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
+  await http
+    .put(config.API.orgPosLevelId(editId), {
+      posLevelName: posLevelName.value,
+      posLevelRank: posLevelRank.value,
+      posLevelAuthority:
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posTypeId: id.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosLevelId(id));
-  fetchData();
+  await http
+    .delete(config.API.orgPosLevelId(id))
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

 onMounted(async () => {
@ -345,7 +365,7 @@ async function fetchName() {
    </d-table>

    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="min-width: 350px" class="bg-grey-11">
+      <q-card style="width: 350px">
        <form @submit.prevent="validateForm">
          <q-card-section class="flex justify-between" style="padding: 0">
            <dialog-header
@ -355,54 +375,69 @@ async function fetchName() {
          </q-card-section>

          <q-separator color="grey-4" />
-          <q-card-section class="q-pa-none">
-            <q-input
-              outlined
-              ref="posLevelNameRef"
-              v-model="posLevelName"
-              label="ชื่อระดับตำแหน่ง"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-            />
-            <q-input
-              ref="posLevelRankRef"
-              outlined
-              v-model="posLevelRank"
-              label="ระดับ"
-              dense
-              type="number"
-              lazy-rules
-              borderless
-              min="1"
-              class="col-12 bg-white q-ma-md"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-              hide-bottom-space
-            />
-            <q-input
-              outlined
-              v-model="posLevelAuthority"
-              label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
-              lazy-rules
-              borderless
-              class="col-12 bg-white q-ma-md"
-              hide-bottom-space
-            />
-            <q-select
-              ref="posTypeIdRef"
-              v-model="posName"
-              label="ประเภทตำแหน่ง"
-              outlined
-              dense
-              class="col-12 bg-white q-ma-md"
-              options-cover
-              hide-bottom-space
-              readonly
-            />
+          <q-card-section class="row q-gutter-y-md">
+            <div class="col-12">
+              <q-input
+                outlined
+                ref="posLevelNameRef"
+                v-model="posLevelName"
+                label="ชื่อระดับตำแหน่ง"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                ref="posLevelRankRef"
+                outlined
+                v-model="posLevelRank"
+                label="ระดับ"
+                dense
+                type="number"
+                lazy-rules
+                borderless
+                min="1"
+                bg-color="white"
+                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                outlined
+                v-model="posLevelAuthority"
+                emit-value
+                map-options
+                :options="storeOption.posLevelAuthorityOption"
+                option-value="id"
+                label="ผู้มีอำนาจสั่งบรรจุ"
+                dense
+                lazy-rules
+                borderless
+                bg-color="white"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12">
+              <q-select
+                ref="posTypeIdRef"
+                v-model="posName"
+                label="ประเภทตำแหน่ง"
+                outlined
+                dense
+                bg-color="white"
+                options-cover
+                hide-bottom-space
+                readonly
+              />
+            </div>
          </q-card-section>

          <q-card-actions align="right">
--- a/src/modules/01_metadataNew/stores/main.ts
+++ b/src/modules/01_metadataNew/stores/main.ts
@ -0,0 +1,30 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/interface/main";
+
+export const useMainOptionDataStore = defineStore("MainOptionData", () => {
+  const posLevelAuthorityOption = ref<DataOption[]>([
+    {
+      id: "HEAD",
+      label: "หัวหน้าหน่วยงาน",
+    },
+    {
+      id: "DEPUTY",
+      label: "ปลัด",
+    },
+    {
+      id: "GOVERNOR",
+      label: "ผู้ว่าฯ",
+    },
+  ]);
+
+  function posLevelAuthorityConvert(val: string) {
+    return posLevelAuthorityOption.value.find((x: DataOption) => x.id === val)
+      ?.label;
+  }
+
+  return {
+    posLevelAuthorityOption,
+    posLevelAuthorityConvert,
+  };
+});
--- a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
+++ b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
@ -5,6 +5,8 @@ import type {
  DataRow,
 } from "../interface/response/position/ListType";
 import { useCounterMixin } from "@/stores/mixin";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+const storeOption = useMainOptionDataStore();

 const { date2Thai } = useCounterMixin();

@ -22,6 +24,9 @@ export const usePositionEmployeeDataStore = defineStore(
        posTypeRank: e.posTypes?.posTypeRank,
        createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+        posLevelAuthority: e.posLevelAuthority
+          ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
+          : "-",
      })) satisfies DataRow[];
      row.value = list.filter((e) => e.posTypeId === id);
    }
--- a/src/modules/01_metadataNew/stores/positionListStore.ts
+++ b/src/modules/01_metadataNew/stores/positionListStore.ts
@ -4,7 +4,9 @@ import type {
  DataResponse,
  DataRow,
 } from "../interface/response/position/ListType";
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 import { useCounterMixin } from "@/stores/mixin";
+const storeOption = useMainOptionDataStore();

 const { date2Thai } = useCounterMixin();

@ -20,9 +22,13 @@ export const usePositionDataStore = defineStore("PositionData", () => {
      posTypeRank: e.posTypes?.posTypeRank,
      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+      posLevelAuthority: e.posLevelAuthority
+        ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
+        : "-",
    })) satisfies DataRow[];
    row.value = list.filter((e) => e.posTypeId === id);
  }
+
  return {
    save,
    row,