ปรับ ui สรรหาสอบคัดเลือก

2023-10-02 00:22:43 +07:00 · 2023-10-02 00:22:43 +07:00 · 5fbf1bd8bd
commit 5fbf1bd8bd
parent e3aa1d8221
11 changed files with 836 additions and 1200 deletions
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@ -1,4 +1,4 @@
-<!-- tab ประวัติการทำงาน/ฝึกงาน -->
+<!-- tab ประวัติการทำงาน -->
 <template>
  <q-form ref="myForm">
    <Table
@ -13,7 +13,7 @@
      :edit="clickEdit"
      :addData="false"
      :editData="status == 'register' || status == 'rejectRegister'"
-      name="ประวัติการทำงาน/ฝึกงาน"
+      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
      icon="mdi-briefcase"
    >
      <template #columns="props">
@ -25,13 +25,10 @@
            @click="selectData(props)"
            class="cursor-pointer"
          >
-            <div v-if="col.name == 'salary'" class="">
-              {{ col.value.toLocaleString('en-US') }}
+            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
+              {{ date2Thai(col.value) }}
            </div>
-            <div v-else-if="col.name == 'duration'" class="">
-              {{ dateThaiRange(col.value) }}
-            </div>
-            <div v-else class="">
+            <div v-else>
              {{ col.value }}
            </div>
          </q-td>
@ -53,25 +50,13 @@
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 600px">
      <q-form ref="myForm">
-        <DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="checkClose" />
+        <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="location"
-                :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)"
@ -95,23 +80,51 @@
                lazy-rules
                :readonly="!edit"
                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนสุดท้ายก่อนออก'}`]"
-                :label="`${'เงินเดือนสุดท้ายก่อนออก'}`"
+                v-model="group"
+                :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)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pile"
+                :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)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="org"
+                :rules="[(val) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                :label="`${'สังกัด'}`"
                @update:modelValue="clickEditRow"
-                type="number"
                hide-bottom-space
              />
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
              <datepicker
-                menu-class-name="modalfix"
                :readonly="!edit"
-                v-model="duration"
+                v-model="startDate"
                :locale="'th'"
                autoApply
-                range
                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
                week-start="0"
              >
                <template #year="{ year }">
@ -123,19 +136,60 @@
                <template #trigger>
                  <q-input
                    :class="getClass(edit)"
-                    class="datepicker"
                    :outlined="edit"
                    dense
                    lazy-rules
                    :borderless="!edit"
-                    :model-value="dateThaiRange(duration)"
+                    :model-value="date2Thai(startDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`]"
                    hide-bottom-space
+                    :label="`${'วันที่เริ่ม'}`"
                  >
                    <template v-slot:prepend>
                      <q-icon
-                        name="mdi-calendar-outline"
+                        name="event"
                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
+                        :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-6 col-md-6">
+              <datepicker
+                :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>
@ -145,17 +199,15 @@
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="getClass(false)"
+                :outlined="false"
                dense
                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกเหตุผลที่ออก'}`]"
-                :label="`${'เหตุผลที่ออก'}`"
+                :readonly="!false"
+                :borderless="!false"
+                v-model="rangeDate"
+                :label="`${'ระยะเวลา'}`"
                @update:modelValue="clickEditRow"
-                type="textarea"
                hide-bottom-space
              />
            </div>
@ -180,7 +232,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useQuasar } from 'quasar'
+import { QTableProps, useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
@ -206,17 +258,19 @@ const props = defineProps({

 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
+const { date2Thai, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const dataStore = useDataStore()
 const { loaderPage } = dataStore
 const id = ref<string>('')
-const location = ref<string>()
-const position = ref<string>()
-const salary = ref<number | null>()
-const duration = ref<[Date, Date]>([new Date(), new Date()])
-const reason = ref<string>()
+const position = ref<string | null>()
+const group = ref<string | null>()
+const pile = ref<string | null>()
+const org = ref<string | null>()
+const startDate = ref<Date>(new Date())
+const endDate = ref<Date>(new Date())
+const rangeDate = ref<string | null>()
 const myForm = ref<any>() //form data input
 const edit = ref<boolean>(true) //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false) //modal add detail
@ -230,60 +284,100 @@ const checkValidate = ref<boolean>(false) //validate data ผ่านหรื
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
-const rows = ref<RequestItemsObject[]>([])
+const rows = ref<any>([])
 const filter = ref<string>('') //search data table

 const visibleColumns = ref<String[]>([])

 examData.career.columns.length == 0
-  ? (visibleColumns.value = ['location', 'position', 'salary', 'duration', 'reason'])
+  ? (visibleColumns.value = [
+      'position',
+      'group',
+      'pile',
+      'org',
+      'startDate',
+      'endDate',
+      'rangeDate'
+    ])
  : (visibleColumns.value = examData.career.columns)

-const columns = ref<Columns>([
-  {
-    name: 'location',
-    align: 'left',
-    label: 'สถานที่ทำงาน/ฝึกงาน',
-    sortable: true,
-    field: 'location',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
+const columns = ref<QTableProps['columns']>([
  {
    name: 'position',
    align: 'left',
-    label: 'ตำแหน่ง/ลักษณะงาน',
+    label: 'ชื่อตำแหน่ง',
    sortable: true,
    field: 'position',
    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
+    style: 'font-size: 14px',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
  },
  {
-    name: 'salary',
+    name: 'group',
    align: 'left',
-    label: 'เงินเดือนสุดท้ายก่อนออก',
+    label: 'กลุ่ม/ฝ่าย',
    sortable: true,
-    field: 'salary',
+    field: 'group',
    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
+    style: 'font-size: 14px',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
  },
  {
-    name: 'duration',
+    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: 'duration',
+    field: 'rangeDate',
    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
-  },
-  {
-    name: 'reason',
-    align: 'left',
-    label: 'เหตุผลที่ออก',
-    sortable: true,
-    field: 'reason',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px'
+    style: 'font-size: 14px',
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
  }
 ])

@ -302,11 +396,11 @@ const fetchData = async () => {
    .then((res) => {
      const data = res.data.result
      rows.value = []
-      data.map((r: ResponseObject) => {
+      data.map((r: any) => {
        rows.value.push({
          ...r,
-          location: r.name,
-          duration: [r.durationStart, r.durationEnd]
+          startDate: r.durationStart,
+          endDate: r.durationEnd
        })
      })
    })
@ -324,11 +418,13 @@ const fetchData = async () => {
 const clickPrevious = async () => {
  rowIndex.value -= 1
  const row = rows.value[rowIndex.value]
-  location.value = row.location
  position.value = row.position
-  salary.value = row.salary
-  duration.value = row.duration
-  reason.value = row.reason
+  group.value = row.group
+  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()
 }
@ -339,11 +435,13 @@ const clickPrevious = async () => {
 const clickNext = async () => {
  rowIndex.value += 1
  const row = rows.value[rowIndex.value]
-  location.value = row.location
  position.value = row.position
-  salary.value = row.salary
-  duration.value = row.duration
-  reason.value = row.reason
+  group.value = row.group
+  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()
 }
@ -427,12 +525,13 @@ const saveData = async () => {
  loaderPage(true)
  await http
    .post(config.API.candidateCareer(examId.value, positionId.value), {
-      name: location.value,
      position: position.value,
-      salary: salary.value,
-      durationStart: dateToISO(new Date(duration.value[0])),
-      durationEnd: dateToISO(new Date(duration.value[1])),
-      reason: reason.value
+      group: group.value,
+      pile: pile.value,
+      org: org.value,
+      durationStart: dateToISO(new Date(startDate.value)),
+      durationEnd: dateToISO(new Date(endDate.value)),
+      rangeDate: rangeDate.value == null ? '-' : rangeDate.value //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    })
    .then(() => {
      success($q, 'บันทึกข้อมูลสำเร็จ')
@ -453,12 +552,13 @@ const editData = async () => {
  loaderPage(true)
  await http
    .put(config.API.candidateCareer(id.value, ''), {
-      name: location.value,
      position: position.value,
-      salary: salary.value,
-      durationStart: dateToISO(new Date(duration.value[0])),
-      durationEnd: dateToISO(new Date(duration.value[1])),
-      reason: reason.value
+      group: group.value,
+      pile: pile.value,
+      org: org.value,
+      durationStart: dateToISO(new Date(startDate.value)),
+      durationEnd: dateToISO(new Date(endDate.value)),
+      rangeDate: rangeDate.value == null ? '-' : rangeDate.value //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    })
    .then(() => {
      success($q, 'บันทึกข้อมูลสำเร็จ')
@ -495,17 +595,19 @@ const clickClose = async () => {
 * กดเลือกข้อมูลที่จะแก้ไข
 * @param props ค่า props ใน row ที่เลือก
 */
-const selectData = (props: DataProps) => {
+const selectData = (props: any) => {
  modalEdit.value = true
  modal.value = true
  editRow.value = false
  rawItem.value = props.row
  rowIndex.value = props.rowIndex
-  location.value = props.row.location
  position.value = props.row.position
-  salary.value = props.row.salary
-  duration.value = props.row.duration
-  reason.value = props.row.reason
+  group.value = props.row.group
+  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
@ -517,11 +619,13 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
  modalEdit.value = false
  modal.value = true
-  location.value = ''
-  position.value = ''
-  salary.value = null
-  duration.value = [new Date(), new Date()]
-  reason.value = ''
+  position.value = null
+  group.value = null
+  pile.value = null
+  org.value = null
+  startDate.value = new Date()
+  endDate.value = new Date()
+  rangeDate.value = null
 }

 /**