โครงสร้างอัตรากำลัง

src/modules/02_organizationalNew/components/DialogFormPosition.vue

@@ -10,22 +10,42 @@ import type {
   DataOption,
   FormPositionSelect,
   RowDetailPositions,
+  FormPositionSelectRef,
   ListMenu,
 } from "@/modules/02_organizationalNew/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   modal: Boolean,
   close: Function,
+  orgLevel: Number,
+  treeId: String,
 });
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
 const selected = ref<any>([]);
 const search = ref<string>("");
 const type = ref<string>("positionName");
-const typeOps = ref<DataOption[]>([
+const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ตำแหน่งในสายงาน" },
   { id: "positionField", name: "สายงาน" },
   { id: "positionType", name: "ประเภทตำแหน่ง" },
@@ -35,6 +55,13 @@ const typeOps = ref<DataOption[]>([
   { id: "positionArea", name: "ด้าน/สาขา" },
 ]);
 
+const typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const executiveOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+const executiveOps = ref<DataOption[]>([]);
+
 const listMenu = ref<ListMenu[]>([
   {
     label: "คัดลอก",
@@ -57,12 +84,19 @@ const ocLevelOp = ref<DataOption[]>([]);
 const prefixNoRef = ref<Object | null>(null);
 const positionNoRef = ref<Object | null>(null);
 
+const positionNameRef = ref<Object | null>(null);
+const positionFieldRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+const positionExecutiveRef = ref<Object | null>(null);
+const positionExecutiveFieldRef = ref<Object | null>(null);
+const positionAreaRef = ref<Object | null>(null);
+
 const formData = reactive<FormDataPosition>({
   shortName: "สกจ.",
   prefixNo: "",
   positionNo: "",
   suffixNo: "",
-  confirm: false,
 });
 
 const formPositionSelect = reactive<FormPositionSelect>({
@@ -81,6 +115,16 @@ const objectPositionRef: FormPositionRef = {
   positionNo: positionNoRef,
 };
 
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,29 +154,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionType",
+    name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
     sortable: true,
-    field: "positionType",
+    field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionLevel",
+    name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "positionLevel",
+    field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionExecutive",
+    name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionExecutive",
+    field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -159,13 +203,73 @@ const visibleColumns = ref<string[]>([
   "no",
   "positionName",
   "positionField",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
+  "posTypeName",
+  "posLevelName",
+  "posExecutiveName",
   "positionExecutiveField",
   "positionArea",
 ]);
 
+/** function เรียกรายการประเภทตำแหน่ง */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรายการระดับตำแหน่ง */
+async function fetchLevel() {
+  showLoader();
+  await http
+    .get(config.API.orgPosLevel)
+    .then((res) => {
+      levelOpsMain.value = res.data.result.map((e: OptionLevel) => ({
+        id: e.id,
+        name: e.posLevelName,
+      }));
+      levelOps.value = levelOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรายการตำแหน่งทางการบริหาร */
+async function fetchExecutive() {
+  showLoader();
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
+        id: e.id,
+        name: e.posExecutiveName,
+      }));
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -186,31 +290,33 @@ function validateForm() {
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function validateFormPositionEdit() {
-  // const hasError = [];
-  // for (const key in objectPositionRef) {
-  //   if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
-  //     const property = objectPositionRef[key];
-  //     if (property.value && typeof property.value.validate === "function") {
-  //       const isValid = property.value.validate();
-  //       hasError.push(isValid);
-  //     }
-  //   }
-  // }
-  // if (hasError.every((result) => result === true)) {
-  onSubmitSelectEdit();
-  // } else {
-  // }
+  isDisValidate.value = false;
+  const hasError = [];
+  for (const key in objectPositionSelectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+      const property = objectPositionSelectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmitSelectEdit();
+  }
 }
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  console.log(props.orgLevel);
+
+  dialogConfirm($q, async () => {
     const positionsData = rows.value.map((e) => ({
       posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
       posDictField: e.positionField, //สายงาน
-      posTypeId: e.positionName, //*ประเภทตำแหน่ง
-      posLevelId: e.positionName, //*ระดับตำแหน่ง
-      posExecutiveId: e.positionName, //ตำแหน่งทางการบริหาร
+      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+      posExecutiveId: e.posExecutiveId, //ตำแหน่งทางการบริหาร
       posDictExecutiveField: e.positionName, //ด้านทางการบริหาร
       posDictArea: e.positionArea, //ด้าน/สาขา
     }));
@@ -218,22 +324,57 @@ function onSubmit() {
       posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
       posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
       posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
-      // orgRootId: Guid, //Id สำนัก
-      // orgChild1Id: Guid, //Id โครงสร้างระดับ1
-      // orgChild2Id: Guid, //Id โครงสร้างระดับ2
-      // orgChild3Id: Guid, //Id โครงสร้างระดับ3
-      // orgChild4Id: Guid, //Id โครงสร้างระดับ4
+      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
       positions: [positionsData],
     };
     console.log(body);
+    // showLoader();
+    // await http
+    //   .post(config.API.orgPosMaster, body)
+    //   .then((res) => {
+    //     success($q, "เพิ่มข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     props.close?.();
+    //     hideLoader();
+    //   });
   });
 }
 /** ฟังชั่น บันทึก */
 function onSubmitSelectEdit() {
   dialogConfirm(
     $q,
-    () => {
-      console.log(formPositionSelect);
+    async () => {
+      showLoader();
+      const body = {
+        posDictName: formPositionSelect.positionName,
+        posDictField: formPositionSelect.positionField, //สายงาน
+        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      };
+      await http
+        .post(config.API.orgPosPosition, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+
+          clearFormPositionSelect();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการเพิ่มตำแหน่ง",
     "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
@@ -250,40 +391,22 @@ const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
-    // จำลอง
-    const dataList = [
-      {
-        positionId: "x1",
-        positionName: "นักกายภาพบำบัด",
-        positionField: "จัดการงานทั่วไป",
-        positionType: "วิชาการ",
-        positionLevel: "ชำนาญการ",
-        positionExecutive: "การพยาบาลทั่วไป",
-        positionExecutiveField: "การพยาบาลทั่วไป",
-        positionArea: "การพยาบาลทั่วไป",
-      },
-      {
-        positionId: "x2",
-        positionName: "นักทรัพยากรบุคคล",
-        positionField: "จัดการงานทั่วไป",
-        positionType: "ทั่วไป",
-        positionLevel: "ชำนาญการ",
-        positionExecutive: "-",
-        positionExecutiveField: "-",
-        positionArea: "-",
-      },
-      {
-        positionId: "x3",
-        positionName: "นักทรัพยากรบุคคล",
-        positionField: "จัดการงานทั่วไป",
-        positionType: "วิชาการ",
-        positionLevel: "ชำนาญการพิเศษ",
-        positionExecutive: "-",
-        positionExecutiveField: "-",
-        positionArea: "-",
-      },
-    ];
-    rowsPositionSelect.value = dataList;
+    showLoader();
+    await http
+      .get(
+        config.API.orgPosPosition +
+          `?keyword=${search.value}&type=${type.value}`
+      )
+      .then((res) => {
+        console.log(res);
+        rowsPositionSelect.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   }
 }
 
@@ -295,9 +418,9 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionId = data.positionId;
   formPositionSelect.positionName = data.positionName;
   formPositionSelect.positionField = data.positionField;
-  formPositionSelect.positionType = data.positionType;
-  formPositionSelect.positionLevel = data.positionLevel;
-  formPositionSelect.positionExecutive = data.positionExecutive;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
 }
@@ -317,14 +440,19 @@ watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
+      fetchType();
+      fetchLevel();
+      fetchExecutive();
+      rowsPositionSelect.value = [];
+      search.value = "";
+      rows.value = [];
+      clearFormPositionSelect();
     }
   }
 );
 
 function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some(
-    (item) => item.positionId === data.positionId
-  );
+  const isIdExist = rows.value.some((item) => item.id === data.id);
 
   if (!isIdExist) {
     rows.value = [data, ...rows.value];
@@ -333,9 +461,42 @@ function addPosition(data: RowDetailPositions) {
 
 function deleteData(id: string) {
   const dataRow = rows.value;
-  const updatedRows = dataRow.filter((item: any) => item.positionId !== id);
+  const updatedRows = dataRow.filter((item: any) => item.id !== id);
   rows.value = updatedRows;
 }
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosPositionById(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
+  });
+}
+
+async function clearFormPositionSelect() {
+  isDisValidate.value = await true;
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+  setTimeout(async () => {
+    isDisValidate.value = await false;
+  }, 1000);
+}
 </script>
 <template>
   <template>
@@ -456,7 +617,7 @@ function deleteData(id: string) {
                                 icon="mdi-delete"
                                 class="q-pa-none q-ml-xs"
                                 color="red"
-                                @click="deleteData(props.row.positionId)"
+                                @click="deleteData(props.row.id)"
                               >
                                 <q-tooltip>ลบข้อมูล</q-tooltip>
                               </q-btn>
@@ -465,14 +626,6 @@ function deleteData(id: string) {
                         </template>
                       </d-table>
                     </div>
-                    <div class="col-12 q-mt-sm">
-                      <q-checkbox
-                        dense
-                        v-model="formData.confirm"
-                        label="ไม่ผูกกับตำแหน่งก่อนหน้า"
-                        color="teal"
-                      />
-                    </div>
                   </div>
                   <q-separator />
                   <q-card-actions
@@ -501,7 +654,7 @@ function deleteData(id: string) {
                       <q-select
                         label="ค้นหาจาก"
                         v-model="type"
-                        :options="typeOps"
+                        :options="optionFilter"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -544,7 +697,7 @@ function deleteData(id: string) {
                       ref="table"
                       :columns="columns"
                       :rows="rowsPositionSelect"
-                      row-key="positionId"
+                      row-key="id"
                       flat
                       bordered
                       :paging="true"
@@ -602,7 +755,7 @@ function deleteData(id: string) {
                                     @click="
                                       item.type === 'copy'
                                         ? copyDetiail(props.row)
-                                        : ''
+                                        : deletePos(props.row.id)
                                     "
                                   >
                                     <q-item-section avatar>
@@ -644,26 +797,46 @@ function deleteData(id: string) {
                   <div class="row q-col-gutter-sm col-12 q-pa-sm">
                     <div class="col-6">
                       <q-input
+                        ref="positionNameRef"
                         v-model="formPositionSelect.positionName"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionName"
                         label="ตำแหน่งในสายงาน"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionFieldRef"
                         v-model="formPositionSelect.positionField"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionField"
                         label="สายงาน"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณากรอกสายงาน'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionTypeRef"
                         :class="inputEdit(isReadonly)"
                         label="ประเภทตำแหน่ง"
                         v-model="formPositionSelect.positionType"
@@ -675,14 +848,22 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionLevelRef"
                         :class="inputEdit(isReadonly)"
                         label="ระดับตำแหน่ง"
                         v-model="formPositionSelect.positionLevel"
-                        :options="typeOps"
+                        :options="levelOps"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -690,14 +871,22 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-select
+                        ref="positionExecutiveRef"
                         :class="inputEdit(isReadonly)"
                         label="ตำแหน่งทางการบริหาร"
                         v-model="formPositionSelect.positionExecutive"
-                        :options="typeOps"
+                        :options="executiveOps"
                         emit-value
                         dense
                         @update:model-value="updateSelect"
@@ -705,26 +894,55 @@ function deleteData(id: string) {
                         outlined
                         option-label="name"
                         option-value="id"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกตำแหน่งทางการบริหาร'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionExecutiveFieldRef"
                         v-model="formPositionSelect.positionExecutiveField"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionExecutiveField"
                         label="ด้านทางการบริหาร"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [
+                                (val) =>
+                                  !!val || `${'กรุณากรอกด้านทางการบริหาร'}`,
+                              ]
+                            : []
+                        "
                       />
                     </div>
                     <div class="col-6">
                       <q-input
+                        ref="positionAreaRef"
                         v-model="formPositionSelect.positionArea"
                         :class="inputEdit(isReadonly)"
                         dense
                         outlined
                         for="#positionArea"
                         label="ด้าน/สาขา"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="
+                          !isDisValidate
+                            ? [(val) => !!val || `${'กรุณากรอกด้าน/สาขา'}`]
+                            : []
+                        "
                       />
                     </div>
                   </div>