เพิ่มข้อมูลตำแหน่ง

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

@@ -10,6 +10,7 @@ import DialogAddPosition from "@/modules/01_metadataNew/components/position/Dial
 
 interface FormPositionSelect {
   positionId: string;
+  posTypeId: string;
   positionName: string;
   positionField: string;
   positionType: string;
@@ -50,6 +51,7 @@ const levelOps = ref<DataOption[]>([]);
 
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
+  posTypeId: "",
   positionName: "",
   positionField: "",
   positionType: "",
@@ -191,8 +193,8 @@ const optionFilter = ref<DataOption[]>([
  * @param data ข้อมูลตำแหน่ง
  */
 function copyDetiail(data: RowDetailPositions) {
-  updateSelectType(data.posTypeId);
+  formPositionSelect.positionId = data.id;
-  formPositionSelect.positionId = data.positionId;
+  formPositionSelect.posTypeId = data.posTypeId;
   formPositionSelect.positionName = data.positionName;
   formPositionSelect.positionField = data.positionField;
   formPositionSelect.positionType = data.posTypeId;
@@ -200,17 +202,10 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
+  modalAddPosition.value = true
+
 }
 
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-  formPositionSelect.positionLevel = "";
-}
 
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
@@ -276,7 +271,7 @@ function popupAdd() {
 </script>
 <template>
   <div class="row col-12 q-mb-sm">
-    <div class="col-1">
+    <div class="col-12 col-md-5">
       <q-btn
         id="addComplaints"
         for="addComplaints"
@@ -290,9 +285,8 @@ function popupAdd() {
       >
     </div>
     <q-space />
-  </div>
+    <div class="row col-12 col-md-7 q-col-gutter-sm justify-start">
-  <div class="row col-12 q-col-gutter-sm items-start">
+    <div class="col-12 col-sm-6 col-md-4">
-    <div class="col-12 col-sm-6 col-md-3">
       <q-select
         label="ค้นหาจาก"
         v-model="type"
@@ -306,7 +300,7 @@ function popupAdd() {
       />
     </div>
 
-    <div class="col-12 col-sm-6 col-md-6">
+    <div class="col-12 col-sm-6 col-md-4">
       <q-input
         ref="searchRef"
         :class="inputEdit(isReadonly)"
@@ -321,7 +315,7 @@ function popupAdd() {
       />
     </div>
 
-    <div class="col-12 col-sm-6 col-md-3">
+    <div class="col-12 col-sm-6 col-md-4">
       <q-btn
         color="primary"
         icon="search"
@@ -332,6 +326,8 @@ function popupAdd() {
       </q-btn>
     </div>
   </div>
+  </div>
+
 
   <div class="full-width q-mt-sm">
     <d-table
@@ -406,5 +402,9 @@ function popupAdd() {
       </template>
     </d-table>
   </div>
-  <DialogAddPosition v-model:add-position="modalAddPosition" />
+  <DialogAddPosition 
+  v-model:add-position="modalAddPosition" 
+  v-model:form-data="formPositionSelect" 
+  
+  />
 </template>

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

@@ -38,6 +38,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } =
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const modal = defineModel<boolean>("addPosition", { required: true });
+const formData = defineModel<any>("formData", { required: true });
 
 const positionNameRef = ref<Object | null>(null);
 const positionFieldRef = ref<Object | null>(null);
@@ -79,34 +80,46 @@ function onSubmitSelectEdit() {
   dialogConfirm(
     $q,
     async () => {
-      // showLoader();
+      showLoader();
-      // const body = {
+      const body = {
-      //   posDictName: formPositionSelect.positionName,
+        posDictName: formPositionSelect.positionName,
-      //   posDictField: formPositionSelect.positionField, //สายงาน
+        posDictField: formPositionSelect.positionField, //สายงาน
-      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-      //   posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
-      //   posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-      //   posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-      // };
+      };
-      // await http
+      await http
-      //   .post(config.API.orgPosPosition, body)
+        .post(config.API.orgPosPosition, body)
-      //   .then(() => {
+        .then(() => {
-      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+          success($q, "เพิ่มข้อมูลสำเร็จ");
-      //     clearFormPositionSelect();
+          clearFormPositionSelect();
-      //   })
+          modal.value = false;
-      //   .catch((err) => {
+        })
-      //     messageError($q, err);
+        .catch((err) => {
-      //   })
+          messageError($q, err);
-      //   .finally(() => {
+        })
-      //     hideLoader();
+        .finally(() => {
-      //   });
+          hideLoader();
+        });
     },
     "ยืนยันการเพิ่มตำแหน่ง",
     "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
   );
 }
 
+async function clearFormPositionSelect() {
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+}
+
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
  * @param val true/false
@@ -124,8 +137,9 @@ async function fetchType() {
   await http
     .get(config.API.orgPosType)
     .then((res) => {
-      dataLevel.value = res.data.result;
+      const data = res.data.result;
-      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+      dataLevel.value = data;
+      typeOpsMain.value = data.map((e: OptionType) => ({
         id: e.id,
         name: e.posTypeName,
       }));
@@ -139,16 +153,6 @@ async function fetchType() {
     });
 }
 
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-  formPositionSelect.positionLevel = "";
-}
-
 /** function เรียกรายการตำแหน่งทางการบริหาร */
 async function fetchExecutive() {
   showLoader();
@@ -175,9 +179,33 @@ watch(
     if (modal.value == true) {
       fetchType();
       fetchExecutive();
+      if (formData.value) {
+        const dataList = formData.value;
+        setTimeout(() => {
+          updateSelectType(dataList.posTypeId);
+        }, 1000);
+        formPositionSelect.positionId = dataList.positionId;
+        formPositionSelect.positionName = dataList.positionName;
+        formPositionSelect.positionField = dataList.positionField;
+        formPositionSelect.positionType = dataList.positionType;
+        formPositionSelect.positionLevel = dataList.positionLevel;
+        formPositionSelect.positionExecutive = dataList.positionExecutive;
+        formPositionSelect.positionExecutiveField =
+          dataList.positionExecutiveField;
+        formPositionSelect.positionArea = dataList.positionArea;
+      }
     }
   }
 );
+
+function updateSelectType(val: string) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+}
 </script>
 
 <template>

src/modules/01_metadataNew/views/position.vue

@@ -20,7 +20,7 @@ onMounted(() => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">ข้อมูลตำแหน่ง</div>
 
-  <q-card flat bordered class="q-pa-md">
+  <q-card flat bordered >
     <q-tabs
       dense
       v-model="currentTab"
@@ -40,9 +40,11 @@ onMounted(() => {
       />
     </q-tabs>
     <q-separator size="2px" />
+    <div class="q-pa-md">
     <ListPosition v-if="currentTab == 'list_position'"/>
     <ListType v-if="currentTab == 'list_type'"/>
     <ListExecutive v-if="currentTab == 'list_executive'"/>
+  </div>
   </q-card>
 </template>