updated

src/modules/16_positionEmployee/components/DialogFormPosition.vue

@@ -98,6 +98,7 @@ const formData = reactive<FormDataPosition>({
   prefixNo: "",
   positionNo: "",
   suffixNo: "",
+  reason: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -161,6 +162,7 @@ async function fetchPosition(id: string) {
       formData.prefixNo = data.posMasterNoPrefix;
       formData.positionNo = data.posMasterNo;
       formData.suffixNo = data.posMasterNoSuffix;
+      formData.reason = data.reason;
       rows.value = data.positions.map((e: any) => ({
         ...e,
         posDictName: e.positionName,
@@ -208,6 +210,7 @@ function onSubmit() {
       posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
       posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
       posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+      reason: formData.reason, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
       orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
       orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
       orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
@@ -372,52 +375,69 @@ watch(
                 </div>
                 <div class="col-12"><q-separator /></div>
                 <div class="row q-col-gutter-sm col-12 q-pa-sm">
-                  <div class="col-3">
-                    <q-input
-                      v-model="formData.shortName"
-                      dense
-                      outlined
-                      readonly
-                      for="#shortName"
-                      label="อักษรย่อ"
-                    />
+                  <div class="row col-8 q-col-gutter-sm">
+                    <div class="col-12">
+                      <q-input
+                        v-model="formData.shortName"
+                        dense
+                        outlined
+                        readonly
+                        for="#shortName"
+                        label="อักษรย่อ"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.prefixNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="prefixNoRef"
+                        dense
+                        outlined
+                        for="#prefixNo"
+                        label="Prefix เลขที่ตำเเหน่ง"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.positionNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="positionNoRef"
+                        dense
+                        outlined
+                        for="#positionNo"
+                        label="เลขที่ตำแหน่ง"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`,
+                        ]"
+                        mask="########################"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.suffixNo"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#suffixNo"
+                        label="Suffix เลขที่ตำแหน่ง"
+                      />
+                    </div>
                   </div>
-                  <div class="col-3">
+                  <div class="col-4">
                     <q-input
-                      v-model="formData.prefixNo"
-                      :class="inputEdit(isReadonly)"
-                      ref="prefixNoRef"
-                      dense
-                      outlined
-                      for="#prefixNo"
-                      label="Prefix เลขที่ตำเเหน่ง"
-                    />
-                  </div>
-                  <div class="col-3">
-                    <q-input
-                      v-model="formData.positionNo"
-                      :class="inputEdit(isReadonly)"
-                      ref="positionNoRef"
-                      dense
-                      outlined
-                      for="#positionNo"
-                      label="เลขที่ตำแหน่ง"
-                      lazy-rules
-                      hide-bottom-space
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
-                      mask="########################"
-                    />
-                  </div>
-                  <div class="col-3">
-                    <q-input
-                      v-model="formData.suffixNo"
+                      v-model="formData.reason"
                       :class="inputEdit(isReadonly)"
                       dense
                       outlined
-                      for="#suffixNo"
-                      label="Suffix เลขที่ตำแหน่ง"
+                      for="#reason"
+                      label="หมายเหตุ"
+                      type="textarea"
+                      rows="4"
                     />
                   </div>
+
                   <div class="col-12">
                     <d-table
                       ref="table"

src/modules/16_positionEmployee/interface/index/Main.ts

@@ -30,6 +30,7 @@ interface FormDataPosition {
   prefixNo: string;
   positionNo: string;
   suffixNo: string;
+  reason: string;
 }
 
 interface FormDataNewStructure {