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

2023-10-02 00:21:32 +07:00 · 2023-10-02 00:21:32 +07:00 · 178a6ac8c7
commit 178a6ac8c7
parent 9b910afc6e
10 changed files with 752 additions and 1184 deletions
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@ -1,4 +1,4 @@
-<!-- tab ประวัติการทำงาน/ฝึกงาน -->
+<!-- tab ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน) -->
 <template>
  <q-form ref="myForm">
    <Table
@ -13,7 +13,7 @@
      :edit="clickEdit"
      :addData="false"
      :editData="status == 'checkRegister' || status == 'payment'"
-      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>
@ -57,27 +54,15 @@
  <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)"
@ -101,24 +86,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
                :readonly="!edit"
-                v-model="duration"
+                v-model="startDate"
                :locale="'th'"
                autoApply
-                range
                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
                week-start="0"
              >
                <template #year="{ year }">
@ -130,19 +142,68 @@
                <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>
@ -152,17 +213,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>
@ -212,15 +271,17 @@ const props = defineProps({

 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin;
+const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 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
@ -228,13 +289,12 @@ const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้ส
 const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
 const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
 const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
-
 const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
-const rows = ref<RequestItemsObject[]>([]);
+const rows = ref<any>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;

@ -242,30 +302,21 @@ const visibleColumns = ref<String[]>([]);

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

 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "location",
-    align: "left",
-    label: "สถานที่ทำงาน/ฝึกงาน",
-    sortable: true,
-    field: "location",
-    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: "ตำแหน่ง/ลักษณะงาน",
+    label: "ชื่อตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
@ -274,33 +325,66 @@ const columns = ref<QTableProps["columns"]>([
      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",
    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",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "เหตุผลที่ออก",
-    sortable: true,
-    field: "reason",
+    field: "rangeDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
@ -323,11 +407,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,
        });
      });
    })
@ -345,11 +429,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();
 };
@ -360,11 +446,13 @@ const clickPrevious = async () => {
 const clickNext = () => {
  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;
  checkRowPage();
 };
@ -453,12 +541,13 @@ const saveData = async () => {
  showLoader();
  await http
    .post(config.API.candidateAdminCareer(candidateId.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,
    })
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
@ -479,12 +568,13 @@ const editData = async () => {
  showLoader();
  await http
    .put(config.API.candidateAdminCareer(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,
    })
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
@ -526,17 +616,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;
@ -548,11 +640,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;
 };

 /**