ui ประวัติทำงาน ประวัติการศึกษา

src/modules/01_exam/components/Education.vue

@@ -21,11 +21,8 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div v-if="col.name == 'start'" class="">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else-if="col.name == 'end'" class="">
-                {{ col.value + 543 }}
+              <div v-if="col.name == 'duration'" class="">
+                {{ dateThaiRange(col.value) }}
               </div>
               <div v-else class="">
                 {{ col.value }}
@@ -54,8 +51,8 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="qualificationId"
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
-                :label="`${'ระดับการศึกษา'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
+                :label="`${'วุฒิที่ได้รับ'}`"
                 @update:modelValue="clickEditRow"
                 emit-value
                 map-options
@@ -73,9 +70,25 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="name"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-                :label="`${'สถานศึกษา'}`"
+                v-model="major"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/วิชาเอก'}`]"
+                :label="`${'สาขาวิชา/วิชาเอก'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                type="number"
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="scores"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนนเฉลี่ยตลอดหลักสูตร'}`]"
+                :label="`${'คะแนนเฉลี่ยตลอดหลักสูตร'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
@@ -88,12 +101,47 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="major"
-                :rules="[(val) => !!val || `${'กรุณากรอกสาขา/วิชาเอก'}`]"
-                :label="`${'สาขา/วิชาเอก'}`"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+                :label="`${'ชื่อสถานศึกษา'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                :readonly="!edit"
+                v-model="duration"
+                :locale="'th'"
+                autoApply
+                range
+                :enableTimePicker="false"
+                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)"
+                    class="datepicker"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateThaiRange(duration)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -126,6 +174,7 @@ import ProfileTable from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 import type {
   RequestItemsObject,
   Columns,
@@ -145,6 +194,8 @@ const props = defineProps({
 })
 
 const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { dateThaiRange } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -155,7 +206,7 @@ const qualificationOptions = ref<DataOption[]>([])
 const major = ref<string>()
 const scores = ref<number | null>()
 const name = ref<string>()
-const duration = ref<any>()
+const duration = ref<[Date, Date]>([new Date(), new Date()])
 const myForm = ref<any>() //form data input
 const edit = ref<boolean>(false) //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false) //modal add detail
@@ -188,7 +239,7 @@ const rows = ref<RequestItemsObject[]>([
     major: 'คอมพิวเตอร์',
     scores: 3.99,
     name: 'มหาลัยเอ',
-    duration: 2015
+    duration: [new Date('1995-04-15'), new Date('1999-02-25')]
   },
   {
     id: '2',
@@ -197,7 +248,7 @@ const rows = ref<RequestItemsObject[]>([
     major: 'คอมพิวเตอร์',
     scores: 3.54,
     name: 'มหาลัยบี',
-    duration: 2015
+    duration: [new Date('2020-06-30'), new Date('2023-10-14')]
   }
 ])
 
@@ -415,6 +466,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   edit.value = false
+  editRow.value = false
 
   //   loader.value = true;
   //   await http
@@ -492,7 +544,7 @@ const addData = () => {
   major.value = ''
   scores.value = null
   name.value = ''
-  duration.value = ''
+  duration.value = [new Date(), new Date()]
 }
 
 /**