ทำเบียนประวัติลูกจ้างชั่วคราว

src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue

@@ -0,0 +1,641 @@
+<script setup lang="ts">
+import { onMounted, watch, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormEmployee } from "@/modules/04_registryNew/interface/request/Employee";
+import type {
+  EmployeeHistory,
+  ResEmployee,
+} from "@/modules/04_registryNew/interface/response/Employee";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import type { QTableColumn } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+
+/** ข้อมูลลูกจ้างชั่วคราว*/
+const modalEdit = ref<boolean>(false);
+const dataEmployee = reactive<ResEmployee>({
+  id: "",
+  positionEmployeeGroupId: "",
+  positionEmployeeLineId: "",
+  positionEmployeePositionId: "",
+  employeeOc: "",
+  employeeTypeIndividual: "",
+  employeeWage: "",
+  employeeMoneyIncrease: "",
+  employeeMoneyAllowance: "",
+  employeeMoneyEmployee: "",
+  employeeMoneyEmployer: "",
+});
+const formData = reactive<FormEmployee>({
+  positionEmployeeGroupId: "",
+  positionEmployeeLineId: "",
+  positionEmployeePositionId: "",
+  employeeOc: "",
+  employeeTypeIndividual: "",
+  employeeWage: "",
+  employeeMoneyIncrease: "",
+  employeeMoneyAllowance: "",
+  employeeMoneyEmployee: "",
+  employeeMoneyEmployer: "",
+});
+
+/** function fetch ข้อมูลลูกจ้างชั่วคราว*/
+function fetchData() {
+  showLoader();
+  http
+    .get(config.API.informationEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      dataEmployee.positionEmployeeGroupId = data.positionEmployeeGroupId;
+      dataEmployee.positionEmployeeLineId = data.positionEmployeeLineId;
+      dataEmployee.positionEmployeePositionId = data.positionEmployeePositionId;
+      dataEmployee.employeeOc = data.employeeOc;
+      dataEmployee.employeeTypeIndividual = data.employeeTypeIndividual;
+      dataEmployee.employeeWage = data.employeeWage;
+      dataEmployee.employeeMoneyIncrease = data.employeeMoneyIncrease;
+      dataEmployee.employeeMoneyAllowance = data.employeeMoneyAllowance;
+      dataEmployee.employeeMoneyEmployee = data.employeeMoneyEmployee;
+      dataEmployee.employeeMoneyEmployer = data.employeeMoneyEmployer;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
+function onClickEdit() {
+  modalEdit.value = true;
+  formData.positionEmployeeGroupId = dataEmployee.positionEmployeeGroupId;
+  formData.positionEmployeeLineId = dataEmployee.positionEmployeeLineId;
+  formData.positionEmployeePositionId = dataEmployee.positionEmployeePositionId;
+  formData.employeeOc = dataEmployee.employeeOc;
+  formData.employeeTypeIndividual = dataEmployee.employeeTypeIndividual;
+  formData.employeeWage = dataEmployee.employeeWage;
+  formData.employeeMoneyIncrease = dataEmployee.employeeMoneyIncrease;
+  formData.employeeMoneyAllowance = dataEmployee.employeeMoneyAllowance;
+  formData.employeeMoneyEmployee = dataEmployee.employeeMoneyEmployee;
+  formData.employeeMoneyEmployer = dataEmployee.employeeMoneyEmployer;
+}
+
+/** function ปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
+function onCloseDialog() {
+  modalEdit.value = false;
+  formData.positionEmployeeGroupId = "";
+  formData.positionEmployeeLineId = "";
+  formData.positionEmployeePositionId = "";
+  formData.employeeOc = "";
+  formData.employeeTypeIndividual = "";
+  formData.employeeWage = "";
+  formData.employeeMoneyIncrease = "";
+  formData.employeeMoneyAllowance = "";
+  formData.employeeMoneyEmployee = "";
+  formData.employeeMoneyEmployer = "";
+}
+
+/** function บันทึกแก้ไขมูลลูกจ้างชั่วคราว*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.informationEmployee(profileId.value), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchData();
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ประวัติข้อมูลลูกจ้างชั่วคราว */
+const modalHistory = ref<boolean>(false);
+const filter = ref<string>("");
+const rows = ref<EmployeeHistory[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "positionEmployeeGroupId",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroupId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionEmployeeLineId",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLineId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionEmployeePositionId",
+    align: "left",
+    label: "ตำแหน่งทางสายงาน",
+    sortable: true,
+    field: "positionEmployeePositionId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "employeeOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeTypeIndividual",
+    align: "left",
+    label: "ประเภทบุคคล",
+    sortable: true,
+    field: "employeeTypeIndividual",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeWage",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "employeeWage",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyIncrease",
+    align: "left",
+    label: "เงินเพิ่มการครองชึพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyIncrease",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyAllowance",
+    align: "left",
+    label: "เงินช่วยเหลือการครองชึพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyAllowance",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyEmployee",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployee",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyEmployer",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(นายจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployer",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+]);
+const visibleColumns = ref<String[]>([
+  "positionEmployeeGroupId",
+  "positionEmployeeLineId",
+  "positionEmployeePositionId",
+  "employeeOc",
+  "employeeTypeIndividual",
+  "employeeWage",
+  "employeeMoneyIncrease",
+  "employeeMoneyAllowance",
+  "employeeMoneyEmployee",
+  "employeeMoneyEmployer",
+  "createdFullName",
+  "createdAt",
+]);
+
+function onClickHistory() {
+  showLoader();
+  modalHistory.value = true;
+  http
+    .get(config.API.informationHistoryEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  profileId.value && fetchData();
+});
+</script>
+
+<template>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-right q-gutter-x-sm">
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="onClickEdit"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-history"
+        color="info"
+        @click="onClickHistory"
+      >
+        <q-tooltip>ประวัติแก้ไขข้อมูลลูกจ้างชั่วคราว</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <!-- column 1 -->
+      <div class="col-md-7 col-12 row">
+        <div class="col-5 text-grey-6 text-weight-medium">
+          <div class="q-py-xs">กลุ่มงาน</div>
+          <div class="q-py-xs">สายงาน</div>
+          <div class="q-py-xs">ตำแหน่งทางสายงาน</div>
+          <div class="q-py-xs">สังกัด</div>
+          <div class="q-py-xs">ประเภทบุคคล</div>
+        </div>
+
+        <!-- data -->
+        <div class="col-7">
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeeGroupId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeeLineId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeePositionId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeOc }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeTypeIndividual }}
+          </div>
+        </div>
+      </div>
+
+      <!-- column 2 -->
+      <div class="col-md-5 col-12 row">
+        <div class="col-5 col text-grey-6 text-weight-medium">
+          <div class="q-py-xs">ค่าจ้าง</div>
+          <div class="q-py-xs">เงินเพิ่มการครองชึพชั่วคราว</div>
+          <div class="q-py-xs">เงินช่วยเหลือการครองชึพชั่วคราว</div>
+          <div class="q-py-xs">เงินสมทบประกันสังคม(ลูกจ้าง)</div>
+          <div class="q-py-xs">เงินสมทบประกันสังคม(นายจ้าง)</div>
+        </div>
+
+        <div class="col-7">
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeWage }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyIncrease }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyAllowance }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyEmployee }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyEmployer }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Dialog แก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalEdit" persistent full-width>
+    <q-card>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="แก้ไขข้อมูลลูกจ้างชั่วคราว"
+          :close="onCloseDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeeGroupId"
+                class="inputgreen"
+                label="กลุ่มงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกกลุ่มงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeeLineId"
+                class="inputgreen"
+                label="สายงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกสายงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeePositionId"
+                class="inputgreen"
+                label="ตำแหน่งทางสายงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางสายงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeOc"
+                class="inputgreen"
+                label="สังกัด"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeTypeIndividual"
+                class="inputgreen"
+                label="ประเภทบุคคล"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeWage"
+                class="inputgreen"
+                label="ค่าจ้าง"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyIncrease"
+                class="inputgreen"
+                label="เงินเพิ่มการครองชึพชั่วคราว"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyAllowance"
+                class="inputgreen"
+                label="เงินช่วยเหลือการครองชึพชั่วคราว"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyEmployee"
+                class="inputgreen"
+                label="เงินสมทบประกันสังคม(ลูกจ้าง)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyEmployer"
+                class="inputgreen"
+                label="เงินสมทบประกันสังคม(นายจ้าง)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(นายจ้าง))'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator />
+
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filter == ''"
+                name="search"
+                @click.stop.prevent="filter = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filter"
+                name="cancel"
+                @click.stop.prevent="filter = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right"> </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/Employee/02_Employment.vue

@@ -0,0 +1,522 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  Employment,
+  EmploymentHistory,
+} from "@/modules/04_registryNew/interface/response/Employee";
+import type { FormEmployment } from "@/modules/04_registryNew/interface/request/Employee";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+  success,
+  messageError,
+  hideLoader,
+  showLoader,
+} = useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+/** ข้อมูลการจ้าง*/
+const rows = ref<Employment[]>([]);
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: false,
+    field: "date",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "command",
+    align: "left",
+    label: "คำสั่งจ้าง",
+    sortable: false,
+    field: "command",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "command",
+  "createdFullName",
+  "createdAt",
+]);
+const modalEmployment = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const employmentId = ref<string>("");
+const formData = reactive<FormEmployment>({
+  date: null,
+  command: "",
+});
+
+/** function fetch ข้อมูลรายการการจ้าง*/
+function fetchListEmployment() {
+  showLoader();
+  http
+    .get(config.API.employmentEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลการจ้าง
+ * @param id รายการการจ้าง
+ */
+function fetchDataEmployment(id: string) {
+  showLoader();
+  http
+    .get(config.API.employmentEmployeeId(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.date = data.date;
+      formData.command = data.command;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เปิด dialog Form ข้อมูลการจ้าง
+ * @param statusEdit สถานะการ สร้าง หรือ แก่ไข
+ * @param id รายการการจ้าง
+ */
+function onOpenDialog(statusEdit: boolean = false, id: string = "") {
+  modalEmployment.value = true;
+  if (statusEdit) {
+    isEdit.value = statusEdit;
+    employmentId.value = id;
+    fetchDataEmployment(id);
+  }
+}
+
+/** function ปิด dialog Form ข้อมูลการจ้าง*/
+function onCloseDialog() {
+  modalEmployment.value = false;
+  isEdit.value = false;
+  employmentId.value = "";
+  formData.date = null;
+  formData.command = "";
+}
+
+/** function บันทึกข้อมูลการจ้าง*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const methods = isEdit.value ? "put" : "post";
+    const id = isEdit.value ? employmentId.value : profileId.value;
+    http[methods](config.API.employmentEmployee(id), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchListEmployment();
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function ลบข้อมูลรายการจ้าง
+ * @param id รายการจ้าง
+ */
+function onDeleteEmployment(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.employmentEmployee(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchListEmployment();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ประวัติข้อมูลการจ้าง*/
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<EmploymentHistory[]>([]);
+const filterHistory = ref<string>("");
+
+/**
+ * function เปิด dialog ประวัติการแก้ไขข้อมูลการจ้าง
+ * @param id รายการการจ้าง
+ */
+function onClickHistory(id: string) {
+  modalHistory.value = true;
+  showLoader();
+  http
+    .get(config.API.employmentHistoryEmployee(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  profileId.value && fetchListEmployment();
+});
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="q-gutter-sm">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="onOpenDialog()"
+      >
+        <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-space />
+    <div class="q-gutter-sm" style="display: flex">
+      <q-input outlined dense v-model="filter" label="ค้นหา">
+        <template v-slot:append>
+          <q-icon
+            v-if="filter == ''"
+            name="search"
+            @click.stop.prevent="filter = ''"
+            class="cursor-pointer"
+          />
+          <q-icon
+            v-if="filter"
+            name="cancel"
+            @click.stop.prevent="filter = ''"
+            class="cursor-pointer"
+          /> </template
+      ></q-input>
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns?.slice(0, 2)"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </div>
+
+  <div class="q-mt-sm">
+    <d-table
+      flat
+      bordered
+      id="table"
+      ref="table"
+      :columns="columns?.slice(0, 2)"
+      :rows="rows"
+      :filter="filter"
+      row-key="dateEmployment"
+      :paging="true"
+      dense
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></q-th>
+          <q-th auto-width></q-th>
+          <q-th auto-width></q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer" style="height: 40px">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil"
+              @click="onOpenDialog(true, props.row.id)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="red"
+              icon="mdi-delete"
+              @click="onDeleteEmployment(props.row.id)"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+            >
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="info"
+              icon="mdi-history"
+              @click="onClickHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- Dialog เพิ่มข้อมูลการจ้าง -->
+  <q-dialog v-model="modalEmployment" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="isEdit ? 'แก้ข้อมูลการจ้าง' : 'เพิ่มข้อมูลการจ้าง'"
+          :close="onCloseDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.date"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                class="inputgreen"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.date != null ? date2Thai(formData.date) : null
+                    "
+                    label="วันที่จ้าง"
+                    hide-bottom-space
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
+                  >
+                    <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 class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                class="inputgreen"
+                outlined
+                v-model="formData.command"
+                label="คำสั่งจ้าง"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator />
+
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterHistory"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rowsHistory"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterHistory"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right"> </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/Employee/Main.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DataEmployee from "@/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue";
+import Employment from "@/modules/04_registryNew/components/detail/Employee/02_Employment.vue";
+
+const tab = ref<string>("1");
+</script>
+<template>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลลูกจ้างชั่วคราว</div>
+    </div>
+  </div>
+
+  <q-separator />
+  <q-tabs
+    v-model="tab"
+    active-color="blue-8"
+    align="left"
+    bordered
+    narrow-indicator
+    indicator-color="transparent"
+    dense
+    class="text-grey q-pl-sm"
+  >
+    <q-tab name="1" label="ข้อมูลลูกจ้างชั่วคราว" />
+    <q-tab name="2" label="ข้อมูลการจ้าง" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels v-model="tab" animated>
+    <q-tab-panel name="1">
+      <DataEmployee />
+    </q-tab-panel>
+    <q-tab-panel name="2">
+      <Employment />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -291,8 +291,9 @@ async function editData() {
   await http
     .put(config.API.profileNewProfileById(id.value, empType.value), {
       ...formData,
+      employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
     })
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
       getData(), (modal.value = false);
       props.fetchDataPersonal?.();

src/modules/04_registryNew/components/detail/TabMain.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useRoute } from "vue-router";
 
 import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
 
@@ -8,6 +9,9 @@ import GovernmentInformationMain from "@/modules/04_registryNew/components/detai
 import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
 import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
 import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";
+import EmployeeMain from "@/modules/04_registryNew/components/detail/Employee/Main.vue";
+
+const route = useRoute();
 
 const store = useRegistryDetailNewDataStore();
 const props = defineProps({
@@ -23,7 +27,10 @@ const itemsTab = ref<any>([
   {
     name: "2",
     icon: "mdi-account-tie",
-    label: "ข้อมูลราชการ",
+    label:
+      route.name === "registry-employeeId"
+        ? "ข้อมูลลูกจ้างชั่วคราว"
+        : "ข้อมูลราชการ",
   },
   {
     name: "3",
@@ -88,7 +95,11 @@ const splitterModel = ref<number>(12);
             v-if="store.tabMain === '1'"
             :fetchDataPersonal="props.fetchDataPersonal"
           />
-          <GovernmentInformationMain v-if="store.tabMain === '2'" />
+          <EmployeeMain
+            v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
+          />
+          <GovernmentInformationMain v-else-if="store.tabMain === '2'" />
+
           <salaryMain v-if="store.tabMain === '3'" />
           <AchievementMain v-if="store.tabMain === '4'" />
           <OtherMaim v-if="store.tabMain === '5'" />