From 8415581e9abc11954e9a466a98ac827cdacb87ae Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 12 Oct 2023 17:54:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=B3=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/Form/Career.vue        | 992 ++++++++++--------
 1 file changed, 548 insertions(+), 444 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 26cb735..90749f9 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -1,57 +1,106 @@
 <!-- tab ประวัติการทำงาน -->
 <template>
-    <q-form ref="myForm">
-        <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns"
-            v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" v-model:editvisible="edit" :add="clickAdd"
-            :edit="clickEdit" :addData="false" :bottom="true" :editData="status == 'register' || status == 'rejectRegister'"
-            name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)" icon="mdi-briefcase">
-            <template #columns="props">
-                <q-tr :props="props">
-                    <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-                        class="cursor-pointer">
-                        <div v-if="col.name == 'startDate' || col.name == 'endDate'">
-                            {{ date2Thai(col.value) }}
-                        </div>
-                        <div v-else>
-                            {{ col.value }}
-                        </div>
-                    </q-td>
-                    <q-td auto-width v-if="edit === true">
-                        <q-btn color="red" flat dense round size="14px" icon="mdi-trash-can-outline"
-                            @click="checkDelete(props.row)" />
-                    </q-td>
-                </q-tr>
-            </template>
-            <template #bottom="props">
-                <div style="width:75% !important;" />
-                <div :props="props" style="width:25% !important;padding-left: 12px;">
-                    <span class="text-weight-medium text-subtitle2 q-py-sm">รวมระยะเวลา : <span class="q-pl-sm">{{ total
-                    }}</span></span>
-                </div>
-            </template>
-        </Table>
-    </q-form>
-    <q-dialog v-model="modal" persistent>
-        <q-card style="width: 600px">
-            <q-form ref="myForm">
-                <DialogHeader tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-                    :close="checkClose" />
-                <q-separator />
-                <q-card-section class="q-p-sm">
-                    <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-                        <div class="col-xs-12 col-sm-6 col-md-6">
-                            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                                :borderless="!edit" v-model="position"
-                                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
-                                :label="`${'ตำแหน่ง/ลักษณะงาน'}`" @update:modelValue="clickEditRow" hide-bottom-space />
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-6">
-                            <q-select :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                                :borderless="!edit" v-model="type" :options="opType"
-                                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]" :label="`${'ประเภท'}`"
-                                @update:modelValue="clickEditRow" hide-bottom-space />
-                        </div>
-                        <!-- 
+  <q-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="edit"
+      :add="clickAdd"
+      :edit="clickEdit"
+      :addData="false"
+      :bottom="true"
+      :editData="status == 'register' || status == 'rejectRegister'"
+      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+      icon="mdi-briefcase"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props)"
+            class="cursor-pointer"
+          >
+            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
+              {{ date2Thai(col.value) }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width v-if="edit === true">
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-trash-can-outline"
+              @click="checkDelete(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+      <template #bottom="props">
+        <div style="width: 63.5% !important" />
+
+        <div :props="props" class="row" style="width: 33% !important; padding-left: 20px">
+          <div class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between">
+            <div>รวมระยะเวลา :</div>
+
+            <div>{{ total }}</div>
+          </div>
+        </div>
+      </template>
+    </Table>
+  </q-form>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+          :close="checkClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="position"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
+                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="type"
+                :options="opType"
+                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                :label="`${'ประเภท'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <!-- 
             <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -82,69 +131,122 @@
                 hide-bottom-space
               />
             </div> -->
-                        <div class="col-xs-12 col-sm-6 col-md-6">
-                            <div class="col-xs-12 col-sm-12 col-md-12">
-                                <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="startDate" :locale="'th'"
-                                    autoApply :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
-                                    <template #year="{ year }">
-                                        {{ year + 543 }}
-                                    </template>
-                                    <template #year-overlay-value="{ value }">
-                                        {{ parseInt(value + 543) }}
-                                    </template>
-                                    <template #trigger>
-                                        <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules
-                                            :borderless="!edit" :model-value="date2Thai(startDate)"
-                                            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`, endDateValidation]"
-                                            hide-bottom-space :label="`${'วันที่เริ่ม'}`">
-                                            <template v-slot:prepend>
-                                                <q-icon name="event" class="cursor-pointer"
-                                                    :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'">
-                                                </q-icon>
-                                            </template>
-                                        </q-input>
-                                    </template>
-                                </datepicker>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-6">
-                            <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="endDate" :locale="'th'"
-                                autoApply :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
-                                <template #year="{ year }">
-                                    {{ year + 543 }}
-                                </template>
-                                <template #year-overlay-value="{ value }">
-                                    {{ parseInt(value + 543) }}
-                                </template>
-                                <template #trigger>
-                                    <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                                        :model-value="date2Thai(endDate)"
-                                        :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`, endDateValidation]"
-                                        hide-bottom-space :label="`${'วันที่สิ้นสุด'}`">
-                                        <template v-slot:prepend>
-                                            <q-icon name="event" class="cursor-pointer"
-                                                :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'">
-                                            </q-icon>
-                                        </template>
-                                    </q-input>
-                                </template>
-                            </datepicker>
-                        </div>
-                        <div class="col-xs-12 col-sm-12 col-md-12">
-                            <q-input :class="getClass(false)" :outlined="false" dense lazy-rules :readonly="!false"
-                                :borderless="!false" v-model="rangeDate" :label="`${'ระยะเวลา'}`"
-                                @update:modelValue="clickEditRow" hide-bottom-space />
-                        </div>
-                    </div>
-                </q-card-section>
-                <q-separator />
-                <DialogFooter :edit="clickEdit" :save="clickSave" :validate="validateData" :clickNext="clickNext"
-                    :clickPrevious="clickPrevious" :editData="status == 'register' || status == 'rejectRegister'"
-                    v-model:editvisible="edit" v-model:next="next" v-model:previous="previous"
-                    v-model:modalEdit="modalEdit" />
-            </q-form>
-        </q-card>
-    </q-dialog>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="startDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  @update:modelValue="clickEditRow"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :borderless="!edit"
+                      :model-value="date2Thai(startDate)"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`, endDateValidation]"
+                      hide-bottom-space
+                      :label="`${'วันที่เริ่ม'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(endDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`, endDateValidation]"
+                    hide-bottom-space
+                    :label="`${'วันที่สิ้นสุด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(false)"
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="!false"
+                :borderless="!false"
+                v-model="rangeDate"
+                :label="`${'ระยะเวลา'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :editData="status == 'register' || status == 'rejectRegister'"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -156,9 +258,9 @@ import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import { useRoute } from 'vue-router'
 import type {
-    RequestItemsObject,
-    Columns,
-    DataProps
+  RequestItemsObject,
+  Columns,
+  DataProps
 } from '@/modules/01_exam/interface/request/Career'
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
 import Table from '@/components/Table.vue'
@@ -166,10 +268,10 @@ import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 
 const props = defineProps({
-    status: {
-        type: String,
-        required: true
-    }
+  status: {
+    type: String,
+    required: true
+  }
 })
 
 const $q = useQuasar()
@@ -210,42 +312,42 @@ const filter = ref<string>('') //search data table
 const visibleColumns = ref<String[]>([])
 
 examData.career.columns.length == 0
-    ? (visibleColumns.value = [
-        'position',
-        /*
+  ? (visibleColumns.value = [
+      'position',
+      /*
         'pile',
         'org', */
-        'type',
-        'startDate',
-        'endDate',
-        'rangeDate'
+      'type',
+      'startDate',
+      'endDate',
+      'rangeDate'
     ])
-    : (visibleColumns.value = examData.career.columns)
+  : (visibleColumns.value = examData.career.columns)
 
 const columns = ref<any>([
-    {
-        name: 'position',
-        align: 'left',
-        label: 'ชื่อตำแหน่ง',
-        sortable: true,
-        field: 'position',
-        headerStyle: 'font-size: 14px',
-        style: "font-size: 14px; width:25%;",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-    },
-    {
-        name: 'type',
-        align: 'left',
-        label: 'ประเภท',
-        sortable: true,
-        field: 'type',
-        headerStyle: 'font-size: 14px',
-        style: "font-size: 14px; width:20%;",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-    },
-    /*
+  {
+    name: 'position',
+    align: 'left',
+    label: 'ชื่อตำแหน่ง',
+    sortable: true,
+    field: 'position',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:25%;',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'ประเภท',
+    sortable: true,
+    field: 'type',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:20%;',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  },
+  /*
     {
       name: 'pile',
       align: 'left',
@@ -268,355 +370,357 @@ const columns = ref<any>([
       sort: (a: string, b: string) =>
         a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
     }, */
-    {
-        name: 'startDate',
-        align: 'left',
-        label: 'เริ่ม',
-        sortable: true,
-        field: 'startDate',
-        headerStyle: 'font-size: 14px',
-        style: "font-size: 14px; width:15%;",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-    },
-    {
-        name: 'endDate',
-        align: 'left',
-        label: 'สิ้นสุด',
-        sortable: true,
-        field: 'endDate',
-        headerStyle: 'font-size: 14px',
-        style: "font-size: 14px; width:15%;",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-    },
-    {
-        name: 'rangeDate',
-        align: 'left',
-        label: 'ระยะเวลา',
-        sortable: true,
-        field: 'rangeDate',
-        headerStyle: 'font-size: 14px',
-        style: "font-size: 14px; width:20%;",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-    }
+  {
+    name: 'startDate',
+    align: 'center',
+    label: 'เริ่ม',
+    sortable: true,
+    field: 'startDate',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:15%;',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  },
+  {
+    name: 'endDate',
+    align: 'center',
+    label: 'สิ้นสุด',
+    sortable: true,
+    field: 'endDate',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:15%;',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  },
+  {
+    name: 'rangeDate',
+    align: 'right',
+    label: 'ระยะเวลา',
+    sortable: true,
+    field: 'rangeDate',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:20%;',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+  }
 ])
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-    await changeExamColumns('career', count)
+  await changeExamColumns('career', count)
 })
 
 watch(startDate, async (count: Date, prevCount: Date) => {
-    await calDate()
+  await calDate()
 })
 
 watch(endDate, async (count: Date, prevCount: Date) => {
-    await calDate()
+  await calDate()
 })
 
 onMounted(async () => {
-    await fetchData()
+  await fetchData()
 })
 
 const calDate = async () => {
-    let _startDate = new Date(startDate.value.toISOString().substr(0, 10))
-    let _endDate = new Date(endDate.value.toISOString().substr(0, 10))
-    _endDate.setDate(_endDate.getDate() + 1)
-    if (_startDate > _endDate) {
-        const swap = _startDate
-        _startDate = _endDate
-        _endDate = swap
-    }
-    const startYear = _startDate.getFullYear()
-    const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
-    const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  let _startDate = new Date(startDate.value.toISOString().substr(0, 10))
+  let _endDate = new Date(endDate.value.toISOString().substr(0, 10))
+  _endDate.setDate(_endDate.getDate() + 1)
+  if (_startDate > _endDate) {
+    const swap = _startDate
+    _startDate = _endDate
+    _endDate = swap
+  }
+  const startYear = _startDate.getFullYear()
+  const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
 
-    let yearDiff = _endDate.getFullYear() - startYear
-    let monthDiff = _endDate.getMonth() - _startDate.getMonth()
-    if (monthDiff < 0) {
-        yearDiff--
-        monthDiff += 12
+  let yearDiff = _endDate.getFullYear() - startYear
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth()
+  if (monthDiff < 0) {
+    yearDiff--
+    monthDiff += 12
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate()
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--
+    } else {
+      yearDiff--
+      monthDiff = 11
     }
-    let dayDiff = _endDate.getDate() - _startDate.getDate()
-    if (dayDiff < 0) {
-        if (monthDiff > 0) {
-            monthDiff--
-        } else {
-            yearDiff--
-            monthDiff = 11
-        }
-        dayDiff += daysInMonth[_startDate.getMonth()]
-    }
-    rangeDate.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${monthDiff > 0 ? monthDiff + ' เดือน ' : ''
-        }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
+    dayDiff += daysInMonth[_startDate.getMonth()]
+  }
+  rangeDate.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
+    monthDiff > 0 ? monthDiff + ' เดือน ' : ''
+  }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
 }
 
 const calDateSplit = async (startDate: Date, endDate: Date) => {
-    let _startDate = new Date(startDate.toISOString().substr(0, 10))
-    let _endDate = new Date(endDate.toISOString().substr(0, 10))
-    _endDate.setDate(_endDate.getDate() + 1)
-    if (_startDate > _endDate) {
-        const swap = _startDate
-        _startDate = _endDate
-        _endDate = swap
-    }
-    const startYear = _startDate.getFullYear()
-    const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
-    const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  let _startDate = new Date(startDate.toISOString().substr(0, 10))
+  let _endDate = new Date(endDate.toISOString().substr(0, 10))
+  _endDate.setDate(_endDate.getDate() + 1)
+  if (_startDate > _endDate) {
+    const swap = _startDate
+    _startDate = _endDate
+    _endDate = swap
+  }
+  const startYear = _startDate.getFullYear()
+  const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
 
-    let yearDiff = _endDate.getFullYear() - startYear
-    let monthDiff = _endDate.getMonth() - _startDate.getMonth()
-    if (monthDiff < 0) {
-        yearDiff--
-        monthDiff += 12
+  let yearDiff = _endDate.getFullYear() - startYear
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth()
+  if (monthDiff < 0) {
+    yearDiff--
+    monthDiff += 12
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate()
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--
+    } else {
+      yearDiff--
+      monthDiff = 11
     }
-    let dayDiff = _endDate.getDate() - _startDate.getDate()
-    if (dayDiff < 0) {
-        if (monthDiff > 0) {
-            monthDiff--
-        } else {
-            yearDiff--
-            monthDiff = 11
-        }
-        dayDiff += daysInMonth[_startDate.getMonth()]
-    }
-    var obj = {
-        yearDiff: yearDiff,
-        monthDiff: monthDiff,
-        dayDiff: dayDiff
-    }
-    return obj
+    dayDiff += daysInMonth[_startDate.getMonth()]
+  }
+  var obj = {
+    yearDiff: yearDiff,
+    monthDiff: monthDiff,
+    dayDiff: dayDiff
+  }
+  return obj
 }
 
 const fetchData = async () => {
-    loaderPage(true)
-    await http
-        .get(config.API.candidateCareer(examId.value, positionId.value))
-        .then((res) => {
-            const data = res.data.result
-            var yearDiff = 0
-            var monthDiff = 0
-            var dayDiff = 0
-            total.value = '-'
-            rows.value = []
-            data.map((r: any) => {
-                rows.value.push({
-                    ...r,
-                    startDate: new Date(r.durationStart),
-                    endDate: new Date(r.durationEnd)
-                })
-                calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then((d) => {
-                    yearDiff = yearDiff + d.yearDiff
-                    monthDiff = monthDiff + d.monthDiff
-                    dayDiff = dayDiff + d.dayDiff
-                    if (dayDiff > 30) {
-                        monthDiff = monthDiff + parseInt((dayDiff / 30).toString())
-                        dayDiff = dayDiff % 30
-                    }
-                    if (monthDiff > 12) {
-                        yearDiff = yearDiff + parseInt((monthDiff / 12).toString())
-                        monthDiff = monthDiff % 12
-                    }
-                    total.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${monthDiff > 0 ? monthDiff + ' เดือน ' : ''
-                        }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
-                })
-            })
+  loaderPage(true)
+  await http
+    .get(config.API.candidateCareer(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      var yearDiff = 0
+      var monthDiff = 0
+      var dayDiff = 0
+      total.value = '-'
+      rows.value = []
+      data.map((r: any) => {
+        rows.value.push({
+          ...r,
+          startDate: new Date(r.durationStart),
+          endDate: new Date(r.durationEnd)
         })
-        .catch((e) => {
-            //   messageError($q, e)
-        })
-        .finally(() => {
-            loaderPage(false)
+        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then((d) => {
+          yearDiff = yearDiff + d.yearDiff
+          monthDiff = monthDiff + d.monthDiff
+          dayDiff = dayDiff + d.dayDiff
+          if (dayDiff > 30) {
+            monthDiff = monthDiff + parseInt((dayDiff / 30).toString())
+            dayDiff = dayDiff % 30
+          }
+          if (monthDiff > 12) {
+            yearDiff = yearDiff + parseInt((monthDiff / 12).toString())
+            monthDiff = monthDiff % 12
+          }
+          total.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
+            monthDiff > 0 ? monthDiff + ' เดือน ' : ''
+          }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
         })
+      })
+    })
+    .catch((e) => {
+      //   messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = async () => {
-    rowIndex.value -= 1
-    const row = rows.value[rowIndex.value]
-    position.value = row.position
-    type.value = row.type
-    pile.value = row.pile
-    org.value = row.org
-    startDate.value = row.startDate
-    endDate.value = row.endDate
-    rangeDate.value = row.rangeDate
-    id.value = row.id
-    await checkRowPage()
+  rowIndex.value -= 1
+  const row = rows.value[rowIndex.value]
+  position.value = row.position
+  type.value = row.type
+  pile.value = row.pile
+  org.value = row.org
+  startDate.value = row.startDate
+  endDate.value = row.endDate
+  rangeDate.value = row.rangeDate
+  id.value = row.id
+  await checkRowPage()
 }
 
 /**
  * กดดูข้อมูลต่อไป
  */
 const clickNext = async () => {
-    rowIndex.value += 1
-    const row = rows.value[rowIndex.value]
-    position.value = row.position
-    type.value = row.type
-    pile.value = row.pile
-    org.value = row.org
-    startDate.value = row.startDate
-    endDate.value = row.endDate
-    rangeDate.value = row.rangeDate
-    id.value = row.id
-    await checkRowPage()
+  rowIndex.value += 1
+  const row = rows.value[rowIndex.value]
+  position.value = row.position
+  type.value = row.type
+  pile.value = row.pile
+  org.value = row.org
+  startDate.value = row.startDate
+  endDate.value = row.endDate
+  rangeDate.value = row.rangeDate
+  id.value = row.id
+  await checkRowPage()
 }
 
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
 const checkRowPage = () => {
-    editRow.value = false
-    next.value = true
-    previous.value = true
-    if (rowIndex.value + 1 >= rows.value.length) {
-        next.value = false
-    }
-    if (rowIndex.value - 1 < 0) {
-        previous.value = false
-    }
+  editRow.value = false
+  next.value = true
+  previous.value = true
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false
+  }
 }
 
 //validate วันที่สิ้นสุด
 
 const endDateValidation = (value: Date) => {
-    if (startDate.value < endDate.value) {
-        return true;
-    }
-    return false;
-};
+  if (startDate.value < endDate.value) {
+    return true
+  }
+  return false
+}
 
 /**
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-    next.value = false
-    previous.value = false
+  next.value = false
+  previous.value = false
 }
 
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = async () => {
-    await addRow()
+  await addRow()
 }
 
 const checkDelete = (row: RequestItemsObject) => {
-    rawItem.value = row
-    modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+  rawItem.value = row
+  modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
 }
 
 /**
  * ลบข้อมูลใน table
  */
 const clickDeleteRow = async () => {
-    if (rawItem.value != null) {
-        loaderPage(true)
-        await http
-            .delete(config.API.candidateCareer(rawItem.value.id, ''))
-            .then(() => {
-                success($q, 'ลบข้อมูลสำเร็จ')
-            })
-            .catch((e) => {
-                messageError($q, e)
-            })
-            .finally(async () => {
-                await fetchData()
-            })
-    } else {
+  if (rawItem.value != null) {
+    loaderPage(true)
+    await http
+      .delete(config.API.candidateCareer(rawItem.value.id, ''))
+      .then(() => {
+        success($q, 'ลบข้อมูลสำเร็จ')
+      })
+      .catch((e) => {
+        messageError($q, e)
+      })
+      .finally(async () => {
         await fetchData()
-    }
+      })
+  } else {
+    await fetchData()
+  }
 }
 
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-    myForm.value.validate().then(async (result: boolean) => {
-        if (result) {
-            if (modalEdit.value) {
-                await editData()
-            } else {
-                await saveData()
-            }
-        }
-    })
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData()
+      } else {
+        await saveData()
+      }
+    }
+  })
 }
 
 /**
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-    loaderPage(true)
-    await http
-        .post(config.API.candidateCareer(examId.value, positionId.value), {
-            position: position.value,
-            type: type.value,
-            pile: pile.value,
-            org: org.value,
-            durationStart: dateToISO(new Date(startDate.value)),
-            durationEnd: dateToISO(new Date(endDate.value)),
-            rangeDate: rangeDate.value
-        })
-        .then(() => {
-            success($q, 'บันทึกข้อมูลสำเร็จ')
-        })
-        .catch((e) => {
-            messageError($q, e)
-        })
-        .finally(async () => {
-            modal.value = false
-            await fetchData()
-        })
+  loaderPage(true)
+  await http
+    .post(config.API.candidateCareer(examId.value, positionId.value), {
+      position: position.value,
+      type: type.value,
+      pile: pile.value,
+      org: org.value,
+      durationStart: dateToISO(new Date(startDate.value)),
+      durationEnd: dateToISO(new Date(endDate.value)),
+      rangeDate: rangeDate.value
+    })
+    .then(() => {
+      success($q, 'บันทึกข้อมูลสำเร็จ')
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(async () => {
+      modal.value = false
+      await fetchData()
+    })
 }
 
 /**
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-    loaderPage(true)
-    await http
-        .put(config.API.candidateCareer(id.value, ''), {
-            position: position.value,
-            type: type.value,
-            pile: pile.value,
-            org: org.value,
-            durationStart: dateToISO(new Date(startDate.value)),
-            durationEnd: dateToISO(new Date(endDate.value)),
-            rangeDate: rangeDate.value
-        })
-        .then(() => {
-            success($q, 'บันทึกข้อมูลสำเร็จ')
-        })
-        .catch((e) => {
-            messageError($q, e)
-        })
-        .finally(async () => {
-            modal.value = false
-            await fetchData()
-        })
+  loaderPage(true)
+  await http
+    .put(config.API.candidateCareer(id.value, ''), {
+      position: position.value,
+      type: type.value,
+      pile: pile.value,
+      org: org.value,
+      durationStart: dateToISO(new Date(startDate.value)),
+      durationEnd: dateToISO(new Date(endDate.value)),
+      rangeDate: rangeDate.value
+    })
+    .then(() => {
+      success($q, 'บันทึกข้อมูลสำเร็จ')
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(async () => {
+      modal.value = false
+      await fetchData()
+    })
 }
 
 const checkClose = async () => {
-    if (editRow.value == true) {
-        modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
-    } else {
-        await clickClose()
-    }
-    await fetchData()
+  if (editRow.value == true) {
+    modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+  } else {
+    await clickClose()
+  }
+  await fetchData()
 }
 
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-    modal.value = false
-    editRow.value = false
-    next.value = false
-    previous.value = false
+  modal.value = false
+  editRow.value = false
+  next.value = false
+  previous.value = false
 }
 
 /**
@@ -624,55 +728,55 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = (props: any) => {
-    modalEdit.value = true
-    modal.value = true
-    editRow.value = false
-    rawItem.value = props.row
-    rowIndex.value = props.rowIndex
-    position.value = props.row.position
-    type.value = props.row.type
-    pile.value = props.row.pile
-    org.value = props.row.org
-    startDate.value = props.row.startDate
-    endDate.value = props.row.endDate
-    rangeDate.value = props.row.rangeDate
-    id.value = props.row.id
-    next.value = false
-    previous.value = false
+  modalEdit.value = true
+  modal.value = true
+  editRow.value = false
+  rawItem.value = props.row
+  rowIndex.value = props.rowIndex
+  position.value = props.row.position
+  type.value = props.row.type
+  pile.value = props.row.pile
+  org.value = props.row.org
+  startDate.value = props.row.startDate
+  endDate.value = props.row.endDate
+  rangeDate.value = props.row.rangeDate
+  id.value = props.row.id
+  next.value = false
+  previous.value = false
 }
 
 /**
  * กดปุ่มเพิ่มบน table
  */
 const addRow = () => {
-    modalEdit.value = false
-    modal.value = true
-    position.value = null
-    type.value = null
-    pile.value = null
-    org.value = null
-    startDate.value = new Date()
-    endDate.value = new Date()
-    rangeDate.value = null
+  modalEdit.value = false
+  modal.value = true
+  position.value = null
+  type.value = null
+  pile.value = null
+  org.value = null
+  startDate.value = new Date()
+  endDate.value = new Date()
+  rangeDate.value = null
 }
 
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
 const clickEditRow = () => {
-    editRow.value = true
+  editRow.value = true
 }
 
 /**
  * validate input ใน dialog
  */
 const validateData = async () => {
-    checkValidate.value = true
-    await myForm.value.validate().then((result: boolean) => {
-        if (result == false) {
-            checkValidate.value = false
-        }
-    })
+  checkValidate.value = true
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false
+    }
+  })
 }
 
 /**
@@ -680,18 +784,18 @@ const validateData = async () => {
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
  */
 const getClass = (val: boolean) => {
-    return {
-        'full-width inputgreen cursor-pointer': val,
-        'full-width cursor-pointer': !val
-    }
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
 }
 </script>
 <style>
 .modalfix {
-    position: fixed !important;
-    top: auto !important;
-    transform: none !important;
-    left: auto !important;
-    margin-top: 10px;
+  position: fixed !important;
+  top: auto !important;
+  transform: none !important;
+  left: auto !important;
+  margin-top: 10px;
 }
 </style>