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

src/modules/01_metadataNew/components/position-employee/01ListPosition.vue

@@ -4,19 +4,30 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ObjectPosRef,
+  FormQuery,
+} from "@/modules/01_metadataNew/interface/index/positionEmployee";
 import type {
   DataOption,
-  FormPositionSelect,
   RowDetailPositions,
 } from "@/modules/01_metadataNew/interface/request/position/index";
-import type { QTableProps } from "quasar";
+import type {
+  ResGroup,
+  ResLevel,
+  ResPossition,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
 
-import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
+/**importComponets*/
+import DialogHeader from "@/components/DialogHeader.vue";
 
+/**importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+/**use*/
 const $q = useQuasar();
-
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -27,9 +38,7 @@ const {
   dialogRemove,
 } = mixin;
 
-const rows = ref<RowDetailPositions[]>([]);
+const rows = ref<ResPossition[]>([]);
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -41,11 +50,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionName",
+    name: "posDictName",
     align: "left",
     label: "ชื่อตำแหน่ง",
     sortable: true,
-    field: "positionName",
+    field: "posDictName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -70,100 +79,42 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "positionName",
+  "posDictName",
   "posTypeName",
   "posLevelName",
 ]);
 
-const editPosition = ref<boolean>(false);
+const formQuery = reactive<FormQuery>({
-const modalAddPosition = ref<boolean>(false);
+  type: "positionName",
-
+  keyword: "",
-const isSpecial = ref<boolean>(false);
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  posTypeId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-  isSpecial: false,
 });
 
-/** input ค้นหา */
-const searchRef = ref<any>(null);
-const search = ref<string>("");
-const type = ref<string>("positionName");
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ชื่อตำแหน่ง" },
   { id: "positionType", name: "กลุ่มงาน" },
   { id: "positionLevel", name: "ระดับชั้นงาน" },
 ]);
 
-/**
+const modalDialog = ref<boolean>(false);
- * คัดลอกข้อมูล
+const isStatusEdit = ref<boolean>(false);
- * @param data ข้อมูลตำแหน่ง
+const posId = ref<string>("");
- */
+const formDataPos = reactive({
-function copyDetiail(data: RowDetailPositions) {
+  posName: "",
-  formPositionSelect.positionId = data.id;
+  posTypeName: "",
-  formPositionSelect.posTypeId = data.posTypeId;
+  posLevelName: "",
-  formPositionSelect.positionName = data.positionName;
+});
-  formPositionSelect.positionType = data.posTypeId;
+const posNameRef = ref<object | null>(null);
-  formPositionSelect.positionLevel = data.posLevelId;
+const posTypeNameRef = ref<object | null>(null);
-  modalAddPosition.value = true;
+const posLevelNameRef = ref<object | null>(null);
-}
+const objectRef: ObjectPosRef = {
-/**
+  posName: posNameRef,
- * แก้ไขข้อมูล
+  posTypeName: posTypeNameRef,
- * @param data ข้อมูลตำแหน่ง
+  posLevelName: posLevelNameRef,
- */
+};
-function editDetiail(data: RowDetailPositions) {
-  formPositionSelect.positionId = data.id;
-  formPositionSelect.posTypeId = data.posTypeId;
-  formPositionSelect.positionName = data.positionName;
-  formPositionSelect.positionType = data.posTypeId;
-  formPositionSelect.positionLevel = data.posLevelId;
-  modalAddPosition.value = true;
-  editPosition.value = true;
-}
 
-/**
+const posTypeMain = ref<ResGroup[]>([]);
- * ส่งค่า css ออกไปตามเงื่อนไข
+const posTypeOp = ref<DataOption[]>([]);
- * @param val true/false
+const posLevelOp = ref<DataOption[]>([]);
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-async function searchInput() {
-  // showLoader();
-  // await http
-  //   .get(
-  //     config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
-  //   )
-  //   .then((res) => {
-  //     rowsPositionSelect.value = res.data.result;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some((item: any) => item.id === data.id);
-
-  if (!isIdExist) {
-    rows.value = [data, ...rows.value];
-  }
-}
 
 function deletePos(id: string) {
   dialogRemove($q, () => {
@@ -172,28 +123,43 @@ function deletePos(id: string) {
       .delete(config.API.orgEmployeePosById(id))
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
+        fetchData();
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        searchInput();
         hideLoader();
       });
   });
 }
 
-function popupAdd() {
+async function onClickOpenDialog(typeEdit: boolean = false, data: any = []) {
-  modalAddPosition.value = true;
+  modalDialog.value = true;
+  isStatusEdit.value = typeEdit;
+  await fetchType();
+  updatePosTypeName(data.posTypeId);
+  if (data) {
+    posId.value = data.id;
+    setTimeout(() => {
+      formDataPos.posName = data.posDictName;
+      formDataPos.posTypeName = data.posTypeId;
+      formDataPos.posLevelName = data.posLevelId;
+    }, 200);
+  }
 }
 
-async function fetchData() {
+async function fetchData(statusFetch: boolean = false) {
-  search.value = "";
   showLoader();
   await http
-    .get(config.API.orgEmployeePos + `?keyword=&type=ALL`)
+    .get(
+      config.API.orgEmployeePos +
+        `?keyword=${formQuery.keyword}&type=${
+          statusFetch ? "" : formQuery.type
+        }`
+    )
     .then((res) => {
-      rowsPositionSelect.value = res.data.result;
+      rows.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -203,8 +169,85 @@ async function fetchData() {
     });
 }
 
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      const data = res.data.result;
+      posTypeMain.value = data;
+      posTypeOp.value = data.map((e: ResGroup) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
+    });
+  }
+}
+
+async function submit() {
+  const body = {
+    posDictName: formDataPos.posName,
+    posTypeId: formDataPos.posTypeName,
+    posLevelId: formDataPos.posLevelName,
+  };
+  showLoader();
+  try {
+    const url = !isStatusEdit.value
+      ? config.API.orgEmployeePos
+      : config.API.orgEmployeePosById(posId.value);
+    await http[!isStatusEdit.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
+}
+
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
+}
+
+function closeDialog() {
+  modalDialog.value = false;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
+}
+
 onMounted(() => {
-  fetchData();
+  fetchData(true);
 });
 </script>
 <template>
@@ -218,7 +261,7 @@ onMounted(() => {
         round
         color="primary"
         icon="mdi-plus"
-        @click="popupAdd()"
+        @click="onClickOpenDialog()"
         ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
       >
     </div>
@@ -227,7 +270,7 @@ onMounted(() => {
       <div class="col-md-4">
         <q-select
           label="ค้นหาจาก"
-          v-model="type"
+          v-model="formQuery.type"
           :options="optionFilter"
           emit-value
           dense
@@ -241,19 +284,19 @@ onMounted(() => {
       <div class="col-md-6">
         <q-input
           ref="searchRef"
-          :class="inputEdit(isReadonly)"
+          v-model="formQuery.keyword"
-          v-model="search"
           outlined
           dense
           lazy-rules
           label="คำค้น"
           hide-bottom-space
+          @keydown.enter="fetchData()"
         >
           <template v-slot:append>
             <q-icon
-              v-if="search"
+              v-if="formQuery.keyword"
               name="cancel"
-              @click="fetchData()"
+              @click="(formQuery.keyword = ''), fetchData()"
               class="cursor-pointer"
             ></q-icon>
           </template>
@@ -266,7 +309,7 @@ onMounted(() => {
           icon="search"
           label="ค้นหา"
           class="full-width"
-          @click="searchInput()"
+          @click="fetchData()"
         />
       </div>
     </div>
@@ -276,7 +319,7 @@ onMounted(() => {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="rowsPositionSelect"
+      :rows="rows"
       row-key="id"
       flat
       bordered
@@ -300,24 +343,11 @@ onMounted(() => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
-          <q-td
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="addPosition(props.row)"
-          >
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>
-            <div v-else-if="col.name === 'posLevelName'">
+
-              {{
-                props.row.posLevelName
-                  ? props.row.isSpecial == true
-                    ? `${props.row.posLevelName} (ฉ)`
-                    : props.row.posLevelName
-                  : "-"
-              }}
-            </div>
             <div v-else>
               {{ col.value ? col.value : "-" }}
             </div>
@@ -334,7 +364,7 @@ onMounted(() => {
               clickable
               @click.stop="
                 () => {
-                  copyDetiail(props.row);
+                  onClickOpenDialog(false, props.row);
                 }
               "
             >
@@ -348,7 +378,7 @@ onMounted(() => {
               size="12px"
               icon="mdi-pencil"
               clickable
-              @click.stop="editDetiail(props.row)"
+              @click.stop="onClickOpenDialog(true, props.row)"
               v-close-popup
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -371,10 +401,80 @@ onMounted(() => {
       </template>
     </d-table>
   </div>
-  <DialogAddPosition
+
-    v-model:add-position="modalAddPosition"
+  <q-dialog v-model="modalDialog" class="dialog" persistent>
-    v-model:form-data="formPositionSelect"
+    <q-card style="width: 350px">
-    v-model:edit-check="editPosition"
+      <form @submit.prevent="onClickSubmit">
-    :get-data="searchInput"
+        <DialogHeader
-  />
+          :tittle="`${
+            isStatusEdit
+              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
+              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
+          }`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>

src/modules/01_metadataNew/components/position-employee/02ListType.vue

@@ -168,7 +168,7 @@ function onClickOpenDialogEdit(data: ResGroup) {
   dialog.value = true;
   editId.value = data.id;
   formDataGroup.posTypeName = data.posTypeName;
-  // formDataGroup.posTypeShortName = data.posTypeShortName;
+  formDataGroup.posTypeShortName = data.posTypeShortName;
   formDataGroup.posTypeRank = data.posTypeRank;
 }
 

src/modules/01_metadataNew/components/position-employee/03ListLevel.vue

@@ -91,16 +91,15 @@ const levelId = ref<string>("");
 const formDataLevel = reactive<FormDataLevel>({
   posLevelName: null,
   posTypeName: "",
-  commander: "",
+  posLevelAuthority: "",
 });
 
 /** formRef*/
 const posLevelNameRef = ref<Object | null>(null);
 const commanderRef = ref<Object | null>(null);
-const posTypeRankRef = ref<Object | null>(null);
 const objectLevelRef: ObjectLevelRef = {
   posLevelName: posLevelNameRef,
-  commander: commanderRef,
+  posLevelAuthority: commanderRef,
 };
 
 function fetchPosGroup() {
@@ -143,11 +142,12 @@ const modalDialog = ref<boolean>(false);
 function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
   isStatusEdit.value = statusEdit;
   modalDialog.value = true;
+
   if (statusEdit) {
     levelId.value = data.id;
     formDataLevel.posLevelName = data.posLevelName;
     formDataLevel.posTypeName = data.posTypeName;
-    formDataLevel.commander = data.commander;
+    formDataLevel.posLevelAuthority = data.posLevelAuthority;
   }
 }
 
@@ -155,7 +155,7 @@ function onClickCloseDialog() {
   modalDialog.value = false;
   formDataLevel.posLevelName = null;
   formDataLevel.posTypeName = "";
-  formDataLevel.commander = "";
+  formDataLevel.posLevelAuthority = "";
 }
 
 function onClickSubmit() {
@@ -181,7 +181,7 @@ async function submit() {
     posLevelName: Number(formDataLevel.posLevelName),
     posTypeId: posTypeId.value,
     posLevelRank: Number(formDataLevel.posLevelName),
-    posLevelAuthority: formDataLevel.commander,
+    posLevelAuthority: formDataLevel.posLevelAuthority,
   };
   showLoader();
   try {
@@ -213,6 +213,11 @@ function onClickDelete(id: string) {
   });
 }
 
+function convertPosLevelAuthority(val: string) {
+  const result = storeOption.posLevelAuthorityOption.find((e) => e.id === val);
+  return result?.label;
+}
+
 onMounted(() => {
   posTypeId.value && fetchData(posTypeId.value);
   fetchPosGroup();
@@ -293,6 +298,9 @@ onMounted(() => {
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
+              <div v-else-if="col.name === 'posLevelAuthority'">
+                {{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
+              </div>
               <div v-else>
                 {{ col.value }}
               </div>
@@ -360,11 +368,11 @@ onMounted(() => {
             <q-select
               ref="commanderRef"
               outlined
-              v-model="formDataLevel.commander"
+              v-model="formDataLevel.posLevelAuthority"
               emit-value
               map-options
               :options="storeOption.posLevelAuthorityOption"
-              option-value="label"
+              option-value="id"
               label="ผู้มีอำนาจสั่งบรรจุ"
               dense
               lazy-rules

src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue

@@ -3,7 +3,7 @@ import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-// import type { QTableProps } from "quasar";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 import type {
   DataOption,

src/modules/01_metadataNew/interface/index/positionEmployee.ts

@@ -7,9 +7,22 @@ interface ObjectGroupRef {
 
 interface ObjectLevelRef {
   posLevelName: object | null;
-  commander: object | null;
+  posLevelAuthority: object | null;
 
   [key: string]: any;
 }
 
-export type { ObjectGroupRef, ObjectLevelRef };
+interface ObjectPosRef {
+  posName: object | null;
+  posTypeName: object | null;
+  posLevelName: object | null;
+
+  [key: string]: any;
+}
+
+interface FormQuery {
+  type: string;
+  keyword: string;
+}
+
+export type { ObjectGroupRef, ObjectLevelRef, ObjectPosRef, FormQuery };

src/modules/01_metadataNew/interface/request/positionEmployee.ts

@@ -7,7 +7,7 @@ interface FrmDataGroup {
 interface FormDataLevel {
   posLevelName: number | null;
   posTypeName: string | undefined;
-  commander: string;
+  posLevelAuthority: string;
 }
 
 export type { FrmDataGroup, FormDataLevel };

src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts

@@ -3,6 +3,7 @@ interface ResGroup {
   posLevels: ResLevel[];
   posTypeName: string;
   posTypeRank: number;
+  posTypeShortName: string;
 }
 
 interface ResLevel {
@@ -10,7 +11,16 @@ interface ResLevel {
   posLevelName: number;
   posTypeName: string;
   posTypeId: string;
-  commander: string;
+  posLevelAuthority: string;
 }
 
-export type { ResGroup, ResLevel };
+interface ResPossition {
+  id: string;
+  posDictName: string;
+  posLevelId: string;
+  posLevelName: number;
+  posTypeId: string;
+  posTypeName: string;
+}
+
+export type { ResGroup, ResLevel, ResPossition };