From a442ee060cbb56596172bd5b3d84e9ab79de5fd7 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 12 Oct 2023 12:16:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/Form/Career.vue        | 1039 ++++++++---------
 1 file changed, 474 insertions(+), 565 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 847139f..26cb735 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -1,102 +1,57 @@
 <!-- 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 :props="props" class="row col-11 justify-end">
-          <span class="text-weight-medium text-subtitle2"
-            >รวมระยะเวลา : <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: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>
+                        <!-- 
             <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -127,122 +82,69 @@
                 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 || `${'กรุณาเลือกวันที่เริ่ม'}`]"
-                      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 || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    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'
@@ -254,9 +156,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'
@@ -264,10 +166,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()
@@ -308,406 +210,413 @@ const filter = ref<string>('') //search data table
 const visibleColumns = ref<String[]>([])
 
 examData.career.columns.length == 0
-  ? (visibleColumns.value = [
-      'position',
-      /*
-      'pile',
-      'org', */
-      'type',
-      'startDate',
-      'endDate',
-      'rangeDate'
+    ? (visibleColumns.value = [
+        'position',
+        /*
+        'pile',
+        'org', */
+        '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',
-    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',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  /*
-  {
-    name: 'pile',
-    align: 'left',
-    label: 'กอง',
-    sortable: true,
-    field: 'pile',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  {
-    name: 'org',
-    align: 'left',
-    label: 'สังกัด',
-    sortable: true,
-    field: 'org',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-    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',
-    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',
-    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',
-    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',
+      label: 'กอง',
+      sortable: true,
+      field: 'pile',
+      headerStyle: 'font-size: 14px',
+      style: 'font-size: 14px',
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+    },
+    {
+      name: 'org',
+      align: 'left',
+      label: 'สังกัด',
+      sortable: true,
+      field: 'org',
+      headerStyle: 'font-size: 14px',
+      style: 'font-size: 14px',
+      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' })
+    }
 ])
 
 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 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 _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
     }
-    dayDiff += daysInMonth[_startDate.getMonth()]
-  }
-  rangeDate.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
-    monthDiff > 0 ? monthDiff + ' เดือน ' : ''
-  }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
+    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 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 + ' วัน ' : ''}`
 }
 
 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 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 _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
     }
-    dayDiff += daysInMonth[_startDate.getMonth()]
-  }
-  var obj = {
-    yearDiff: yearDiff,
-    monthDiff: monthDiff,
-    dayDiff: dayDiff
-  }
-  return obj
+    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 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
 }
 
 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)
+    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 + ' วัน ' : ''}`
+                })
+            })
         })
-        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)
         })
-      })
-    })
-    .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;
+};
+
 /**
  * กดปุ่มแก้ไขใน 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 () => {
+    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()
-      })
-  } 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
 }
 
 /**
@@ -715,55 +624,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
+        }
+    })
 }
 
 /**
@@ -771,18 +680,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>