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

src/interface/main.ts

@@ -0,0 +1,6 @@
+interface DataOption {
+  id: string;
+  label: string;
+}
+
+export type { DataOption };

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",
+    name: "posTypeRank",
-  //   align: "left",
+    align: "left",
-  //   label: "ระดับตำแหน่ง",
+    label: "ระดับกลุ่มงาน",
-  //   sortable: true,
+    sortable: true,
-  //   field: "posTypeRank",
+    field: "posTypeRank",
-  //   headerStyle: "font-size: 14px",
+    headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
+    style: "font-size: 14px",
-  //   sort: (a: string, b: string) =>
+    sort: (a: string, b: string) =>
-  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      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();
+  showLoader();
-  // await http
+  await http
-  //   .get(config.API.orgPosType)
+    .get(config.API.orgPosType)
-  //   .then(async (res) => {
+    .then(async (res) => {
-  //     store.save(res.data.result);
+      store.save(res.data.result);
-  //   })
+    })
-  //   .catch((err) => {
+    .catch((err) => {
-  //     messageError($q, err);
+      messageError($q, err);
-  //   })
+    })
-  //   .finally(() => {
+    .finally(() => {
-  //     hideLoader();
+      hideLoader();
-  //   });
+    });
 }
 
 async function addData() {
-  await http.post(config.API.orgPosType, {
+  await http
-    posTypeName: posTypeName.value,
+    .post(config.API.orgPosType, {
-    posTypeRank: posTypeRank.value,
+      posTypeName: posTypeName.value,
-  });
+      posTypeShortName: posTypeShortName.value,
-  fetchData();
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function editData(id: string) {
-  await http.put(config.API.orgPosTypeId(id), {
+  await http
-    posTypeName: posTypeName.value,
+    .put(config.API.orgPosTypeId(id), {
-    posTypeRank: posTypeRank.value,
+      posTypeName: posTypeName.value,
-  });
+      posTypeShortName: posTypeShortName.value,
-  fetchData();
+      posTypeRank: posTypeRank.value,
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosTypeId(id));
+  await http
-  fetchData();
+    .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-card-section class="row q-gutter-y-md">
-          <q-input
+          <div class="col-12">
-            ref="posTypeNameRef"
+            <q-input
-            outlined
+              ref="posTypeNameRef"
-            v-model="posTypeName"
+              outlined
-            label="ชื่อกลุ่มงาน"
+              v-model="posTypeName"
-            dense
+              label="ชื่อกลุ่มงาน"
-            lazy-rules
+              dense
-            borderless
+              lazy-rules
-            class="col-12 q-ma-md"
+              borderless
-            bg-color="white"
+              bg-color="white"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
-            hide-bottom-space
+              hide-bottom-space
-          />
+            />
-          <!-- <q-input
+          </div>
-            ref="posTypeRankRef"
+
-            outlined
+          <div class="col-12">
-            v-model="posTypeRank"
+            <q-input
-            label="ระดับ"
+              ref="posTypeShortNameRef"
-            dense
+              v-model="posTypeShortName"
-            type="number"
+              dense
-            lazy-rules
+              outlined
-            borderless
+              for="#positionShortName"
-            min="1"
+              label="อักษรย่อกลุ่มงาน"
-            class="col-12 q-ma-md"
+              lazy-rules
-            :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+              hide-bottom-space
-            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">

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

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, {
+  await http
-    posLevelName: posLevelName.value,
+    .post(config.API.orgPosLevel, {
-    posLevelRank: posLevelRank.value,
+      posLevelName: posLevelName.value,
-    posLevelAuthority:
+      posLevelRank: posLevelRank.value,
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posLevelAuthority:
-    posTypeId: id.value,
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-  });
+      posTypeId: id.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function editData(editId: string) {
-  await http.put(config.API.orgPosLevelId(editId), {
+  await http
-    posLevelName: posLevelName.value,
+    .put(config.API.orgPosLevelId(editId), {
-    posLevelRank: posLevelRank.value,
+      posLevelName: posLevelName.value,
-    posLevelAuthority:
+      posLevelRank: posLevelRank.value,
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+      posLevelAuthority:
-    posTypeId: id.value,
+        posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-  });
+      posTypeId: id.value,
-  fetchData();
+    })
+    .then(() => {
+      fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosLevelId(id));
+  await http
-  fetchData();
+    .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-card-section class="row q-gutter-y-md">
-            <q-input
+            <div class="col-12">
-              outlined
+              <q-input
-              ref="posLevelNameRef"
+                outlined
-              v-model="posLevelName"
+                ref="posLevelNameRef"
-              label="ชื่อระดับตำแหน่ง"
+                v-model="posLevelName"
-              dense
+                label="ชื่อระดับตำแหน่ง"
-              lazy-rules
+                dense
-              borderless
+                lazy-rules
-              class="col-12 bg-white q-ma-md"
+                borderless
-              hide-bottom-space
+                bg-color="white"
-              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
+                hide-bottom-space
-            />
+                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับตำแหน่ง']"
-            <q-input
+              />
-              ref="posLevelRankRef"
+            </div>
-              outlined
+
-              v-model="posLevelRank"
+            <div class="col-12">
-              label="ระดับ"
+              <q-input
-              dense
+                ref="posLevelRankRef"
-              type="number"
+                outlined
-              lazy-rules
+                v-model="posLevelRank"
-              borderless
+                label="ระดับ"
-              min="1"
+                dense
-              class="col-12 bg-white q-ma-md"
+                type="number"
-              :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+                lazy-rules
-              hide-bottom-space
+                borderless
-            />
+                min="1"
-            <q-input
+                bg-color="white"
-              outlined
+                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-              v-model="posLevelAuthority"
+                hide-bottom-space
-              label="ผู้มีอำนาจสั่งบรรจุ"
+              />
-              dense
+            </div>
-              lazy-rules
+
-              borderless
+            <div class="col-12">
-              class="col-12 bg-white q-ma-md"
+              <q-select
-              hide-bottom-space
+                outlined
-            />
+                v-model="posLevelAuthority"
-            <q-select
+                emit-value
-              ref="posTypeIdRef"
+                map-options
-              v-model="posName"
+                :options="storeOption.posLevelAuthorityOption"
-              label="ประเภทตำแหน่ง"
+                option-value="id"
-              outlined
+                label="ผู้มีอำนาจสั่งบรรจุ"
-              dense
+                dense
-              class="col-12 bg-white q-ma-md"
+                lazy-rules
-              options-cover
+                borderless
-              hide-bottom-space
+                bg-color="white"
-              readonly
+                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">

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,
+  };
+});

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);
     }

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,