แก้ไขตาม task

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import { useRoute } from "vue-router";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -21,7 +21,9 @@ const {
   success,
   dialogConfirm,
   dialogRemove,
+  date2Thai,
 } = mixin;
+const myForm = ref<QForm | null>(null);
 
 const retireld_params = route.params.retirementId;
 const modalNote = ref<boolean>(false);
@@ -33,9 +35,9 @@ const filter = ref<string>("");
 const statusUpload = ref<boolean>();
 const modalEdit = ref<boolean>(false);
 const textReport = ref<string>("");
-const employeeType = ref<string>("OFFICER")
+const employeeType = ref<string>("OFFICER");
 
-const columns = ref<any["columns"]>([])
+const columns = ref<any["columns"]>([]);
 const rows = ref<any>([]);
 const visibleColumns = ref<string[]>([
   "order",
@@ -62,6 +64,7 @@ onMounted(() => {
 
 const closeDialog = () => {
   modalNote.value = false;
+  modalUpload.value = false;
 };
 const round = ref<number>();
 const typeReport = ref<string>("");
@@ -87,10 +90,22 @@ const fecthlistprofile = async (id: string) => {
         order: e.order,
         name: e.fullName,
         organizationOrganization: e.organizationOrganization,
-        positionEmployeePosition: res.data.result.type == 'OFFICER' ? e.positionType : e.positionEmployeePosition,
-        positionEmployeeLevel: res.data.result.type == 'OFFICER' ? (e.positionExecutive != null ? e.positionExecutive : "-") : e.positionEmployeeLevel,
-        positionNumber: res.data.result.type == 'OFFICER' ? e.posNo : e.posNoEmployee,
-        positionEmployeeGroup: res.data.result.type == 'OFFICER' ? e.position : e.positionEmployeeGroup,
+        positionEmployeePosition:
+          res.data.result.type == "OFFICER"
+            ? e.positionType
+            : e.positionEmployeePosition,
+        positionEmployeeLevel:
+          res.data.result.type == "OFFICER"
+            ? e.positionExecutive != null
+              ? e.positionExecutive
+              : "-"
+            : e.positionEmployeeLevel,
+        positionNumber:
+          res.data.result.type == "OFFICER" ? e.posNo : e.posNoEmployee,
+        positionEmployeeGroup:
+          res.data.result.type == "OFFICER"
+            ? e.position
+            : e.positionEmployeeGroup,
         organizationAgency: e.organizationAgency,
         organizationGovernmentAgency: e.organizationGovernmentAgency,
         bureau: e.oc,
@@ -136,7 +151,10 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeeGroup",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ในสายงาน/ระดับ)" : "กลุ่มงาน",
+          label:
+            employeeType.value == "OFFICER"
+              ? "ตำแหน่ง (ในสายงาน/ระดับ)"
+              : "กลุ่มงาน",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "กลุ่มงาน",
           subtitle: employeeType.value == "OFFICER" ? "ในสายงาน/ระดับ" : "",
           field: "positionEmployeeGroup",
@@ -146,7 +164,8 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeePosition",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
+          label:
+            employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ตำแหน่ง",
           subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "",
           field: "positionEmployeePosition",
@@ -156,7 +175,10 @@ const fecthlistprofile = async (id: string) => {
         {
           name: "positionEmployeeLevel",
           align: "left",
-          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ทางการบริหาร)" : "ระดับชั้น",
+          label:
+            employeeType.value == "OFFICER"
+              ? "ตำแหน่ง (ทางการบริหาร)"
+              : "ระดับชั้น",
           title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ระดับชั้น",
           subtitle: employeeType.value == "OFFICER" ? "ทางการบริหาร" : "",
           field: "positionEmployeeLevel",
@@ -287,25 +309,46 @@ const visibleNote = computed(() => {
   }
 });
 // อัปโหลดไฟล์
-const uploadFile = async (event: any) => {
-  showLoader();
-  const selectedFile = event;
-  const formdata = new FormData();
-  formdata.append("file", selectedFile);
-  await http
-    .put(config.API.fileRetirement(retireld.value.toString()), formdata)
-    .then(() => {
-      success($q, "เพิ่มไฟล์สำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      fileUpload.value = null;
-      fecthlistprofile(retireld.value);
-      fecthCheck(retireld.value);
-      hideLoader();
+const modalUpload = ref<boolean>(false);
+const signDate = ref<Date | null>(null);
+const uploadFile = async (event: any, signDate: any) => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((successmyForm) => {
+      if (successmyForm) {
+        dialogConfirm(
+          $q,
+          async () => {
+            showLoader();
+            const selectedFile = event;
+            const formdata = new FormData();
+            formdata.append("file", selectedFile);
+            formdata.append("signDate", signDate);
+            await http
+              .put(
+                config.API.fileRetirement(retireld.value.toString()),
+                formdata
+              )
+              .then(() => {
+                success($q, "เพิ่มไฟล์สำเร็จ");
+              })
+              .catch((err) => {
+                messageError($q, err);
+              })
+              .finally(() => {
+                fileUpload.value = null;
+                signDate.value = null;
+                modalUpload.value = false;
+                fecthlistprofile(retireld.value);
+                fecthCheck(retireld.value);
+                hideLoader();
+              });
+          },
+          "ยืนยันการอัปโหลดเอกสาร",
+          "ต้องการยืนยันการอัปโหลดเอกสารนี้หรือไม่ ?"
+        );
+      }
     });
+  }
 };
 // downloadAttachment
 const downloadAttachment = async (type: string, id: string) => {
@@ -382,69 +425,159 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
         <div class="row">
-          <AddList :dataProfile="dataProfile" :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId"
-            v-if="statusReport === false &&
+          <AddList
+            :dataProfile="dataProfile"
+            :retireld="retireld"
+            :profile-id="profileId"
+            :UpdateListId="UpdateListId"
+            v-if="
+              statusReport === false &&
               (typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
               statusUpload !== true
-              " />
+            "
+          />
           <q-btn color="primary" flat round icon="mdi-dots-vertical">
             <q-menu>
               <q-list style="min-width: 100px">
-                <q-item clickable v-close-popup type="a" @click="openmodalEditReport()" target="_blank">
-                  <q-item-section avatar><q-icon color="primary" name="mdi-pencil" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="modalUpload = true,signDate = null,fileUpload = null"
+                  target="_blank"
+                  v-if="statusUpload !== true"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="attach_file"
+                  /></q-item-section>
+                  <q-item-section>อัปโหลดไฟล์ </q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="openmodalEditReport()"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="primary" name="mdi-pencil"
+                  /></q-item-section>
                   <q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
                 </q-item>
                 <q-separator />
-                <q-item clickable v-close-popup type="a" @click="downloadAttachment('pdf', retireld)" target="_blank">
-                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('pdf', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup type="a" @click="downloadAttachment('docx', retireld)" target="_blank">
-                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  type="a"
+                  @click="downloadAttachment('docx', retireld)"
+                  target="_blank"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
           </q-btn>
-          <q-file bg-color="white" clearable outlined dense v-model="fileUpload" accept=".pdf"
-            :style="fileUpload === null ? 'width: 150px' : 'width: auto'" label="อัปโหลดไฟล์"
-            v-if="statusUpload !== true">
+          <!-- <q-file
+            bg-color="white"
+            clearable
+            outlined
+            dense
+            v-model="fileUpload"
+            accept=".pdf"
+            :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
+            label="อัปโหลดไฟล์"
+            v-if="statusUpload !== true"
+          >
             <template v-slot:prepend>
               <q-icon color="light-blue" name="attach_file" />
               <q-tooltip>อัปโหลดไฟล์</q-tooltip>
             </template>
-          </q-file>
-          <q-btn flat round color="light-blue" icon="upload" @click="uploadFile(fileUpload)" v-if="fileUpload !== null" />
+          </q-file> -->
         </div>
         <q-space />
         <div class="row">
           <q-tabs shrink>
-            <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
-              style="max-width: 200px" class="q-ml-sm">
+            <q-input
+              borderless
+              outlined
+              dense
+              debounce="300"
+              v-model="filter"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
               <template v-slot:append>
                 <q-icon name="search" />
               </template>
             </q-input>
-            <q-select v-model="visibleColumns" multiple outlined dense options-dense
-              :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
-              options-cover style="min-width: 150px" class="gt-xs q-ml-sm">
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            >
             </q-select>
           </q-tabs>
         </div>
       </div>
 
       <div>
-        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
-          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          flat
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          class="custom-header-table"
+          :filter="filter"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -456,29 +589,45 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width v-if="(typeReport === 'EDIT' ||
-                  typeReport === null ||
-                  typeReport === '') &&
-                statusReport === false &&
-                statusUpload !== true
-                " />
+              <q-th
+                auto-width
+                v-if="
+                  (typeReport === 'EDIT' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false &&
+                  statusUpload !== true
+                "
+              />
               <q-th auto-width v-else></q-th>
-              <q-th auto-width v-if="(typeReport === 'REMOVE' ||
-                  typeReport === null ||
-                  typeReport === '') &&
-                statusReport === false &&
-                statusUpload !== true
-                " />
+              <q-th
+                auto-width
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false &&
+                  statusUpload !== true
+                "
+              />
               <q-th auto-width v-else></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
-              @click.stop="router.push(`/registry/${props.row.profileId}`)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click.stop="router.push(`/registry/${props.row.profileId}`)"
+            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
-                props.row.organizationOrganization }}</q-td>
+              <q-td
+                class="table_ellipsis"
+                key="organizationOrganization"
+                :props="props"
+                >{{ props.row.organizationOrganization }}</q-td
+              >
               <q-td key="positionEmployeeGroup" :props="props">{{
                 props.row.positionEmployeeGroup
               }}</q-td>
@@ -502,41 +651,71 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 props.row.bureau
               }}</q-td>
               <q-td auto-width></q-td>
-              <q-td auto-width v-if="(typeReport === 'EDIT' ||
+              <q-td
+                auto-width
+                v-if="
+                  (typeReport === 'EDIT' ||
                     typeReport === null ||
                     typeReport === '') &&
                   statusReport === false &&
                   statusUpload !== true
-                  ">
-                <q-btn flat round color="primary" icon="mdi-pencil" dense @click.stop="
-                  (modalNote = true),
-                  (note = props.row.reason),
-                  (action = 'edit'),
-                  (retireProfileId = props.row.id)
-                  ">
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-pencil"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.id)
+                  "
+                >
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width v-else></q-td>
-              <q-td auto-width v-if="(typeReport === 'REMOVE' ||
-                  typeReport === null ||
-                  typeReport === '') &&
-                statusReport === false &&
-                statusUpload !== true
-                ">
-                <q-btn flat round class="text-red-14" icon="mdi-delete" dense @click.stop="
-                  (modalNote = true),
-                  (action = 'delete'),
-                  (note = props.row.reason),
-                  (retireProfileId = props.row.id)
-                  "><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+              <q-td
+                auto-width
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false &&
+                  statusUpload !== true
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.reason),
+                      (retireProfileId = props.row.id)
+                  "
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
               <q-td auto-width v-else></q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-              boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -551,21 +730,123 @@ const paginationLabel = (start: number, end: number, total: number) => {
       <q-card-section class="q-pt-none bg-grey-1">
         <div class="row q-col-gutter-sm">
           <div class="col-12">
-            <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              :label="`${'กรอกเหตุผล'}`" type="textarea" />
+            <q-input
+              outlined
+              dense
+              lazy-rules
+              v-model="note"
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+            />
           </div>
         </div>
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn v-if="action === 'delete'" label="บันทึก" color="secondary" :disable="visibleNote" @click="clickDelete" />
-        <q-btn v-else label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
+        <q-btn
+          v-if="action === 'delete'"
+          label="บันทึก"
+          color="secondary"
+          :disable="visibleNote"
+          @click="clickDelete"
+        />
+        <q-btn
+          v-else
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogPopupReason :modal="modalEdit" title="แก้ไขมติ อ.ก.ก." label="มติ อ.ก.ก." :click-close="closemodalEditReport"
-    :savaForm="saveEdiitReport" :textReport="textReport" />
+  <!-- อัปโหลดไฟล์ -->
+  <q-dialog v-model="modalUpload">
+    <q-card style="width: 50vw">
+      <DialogHeader tittle="อัปโหลดเอกสาร" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-form ref="myForm">
+          <div class="row q-pa-md q-gutter-md">
+            <div class="col-12">
+              <q-file
+                bg-color="white"
+                clearable
+                outlined
+                dense
+                v-model="fileUpload"
+                accept=".pdf"
+                label="อัปโหลดเอกสาร"
+                :rules="[(val) => !!val || `${'กรุณาเลือกเอกสารอัปโหลด'}`]"
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon color="light-blue" name="attach_file" />
+                  <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+                </template>
+              </q-file>
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="signDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    lazy-rules
+                    :model-value="
+                      signDate !== null ? date2Thai(signDate) : null
+                    "
+                    hide-bottom-space
+                    :label="`${'ประกาศ ณ วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer text-primary">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-form>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          round
+          color="public"
+          icon="mdi-content-save-outline"
+          @click="uploadFile(fileUpload, signDate)"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogPopupReason
+    :modal="modalEdit"
+    title="แก้ไขมติ อ.ก.ก."
+    label="มติ อ.ก.ก."
+    :click-close="closemodalEditReport"
+    :savaForm="saveEdiitReport"
+    :textReport="textReport"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/ListRetirement/popupAdd.vue

@@ -53,7 +53,12 @@ const clickAdd = () => {
       action.value = "";
       radio.value = "";
       if (props.actionOptio) {
-        actionOption.value = props.actionOptio;
+        props.actionOptio;
+        let list = props.actionOptio.map((e: any) => ({
+          id: e.id,
+          round: `รอบ ${e.round}  (ฉบับวันที่ ${e.signDate})`,
+        }));
+        actionOption.value = list;
       }
     }
   }

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -69,6 +69,7 @@ const dateLeave = ref<Date | null>(null);
 const reason = ref<string>("");
 const location = ref<string>("");
 const status = ref<string>("");
+const remarkHorizontal = ref<string>("");
 
 const modal = ref<boolean>(false);
 const actionPass = ref<boolean>(false);
@@ -144,6 +145,8 @@ const fetchData = async (id: string) => {
     .get(config.API.resingByid(id))
     .then((res: any) => {
       const data = res.data.result;
+      console.log(data);
+
       let list: TypeFile[] = [];
       if (data.docs.length > 0) {
         data.docs.map((doc: TypeFile) => {
@@ -165,6 +168,7 @@ const fetchData = async (id: string) => {
       reason.value = data.reason ?? "";
       location.value = data.location ?? "";
       status.value = data.status ?? "";
+      remarkHorizontal.value = data.remarkHorizontal ?? "-";
     })
     .catch((e) => {
       messageError($q, e);
@@ -296,11 +300,11 @@ const saveData = async () => {
   formData.append("PositionLevelOld", positionLevelOld.value);
   formData.append("PositionNumberOld", posNo.value);
   formData.append("AmountOld", salary.value.toString());
-  salary;
+  formData.append("remarkHorizontal", remarkHorizontal.value);
   showLoader();
   await http
     .put(config.API.resingByid(id.value), formData)
-    .then((res: any) => {
+    .then(() => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -885,7 +889,22 @@ const statusOrder = (val: boolean) => {
                 (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ '}`,
               ]"
               hide-bottom-space
-              :label="`${'เหตุผลที่ลาออกจากราชการ '}`"
+              :label="`${'เหตุผลที่ลาออกจากราชการ (เหตุผลแนวตั้ง)'}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="remarkHorizontal"
+              :rules="[(val) => !!val || `${'กรุณากรอกเหตุผลแนวนอน '}`]"
+              hide-bottom-space
+              :label="`${'เหตุผลแนวนอน '}`"
               type="textarea"
             />
           </div>